Alright, what I'm trying to do is: setting an imageview to be on the right and the 3 textviews will be located on the left relative to the image. With the following XML code, the imageview is on the left and the 3 textviews are located in the right of the imageview.
Here's the look of it now:
As I said, I want the image to be aligned on the right side, and the 3 textviews on the left of the image.
So here's the current xml: http://pastebin.com/r68S1QKv
If I change the LinearLayout to RelativeLayout (so I can use alignParentRight = true), the textviews stack on each other and are not displayed vertically.
Suggestions, please?
EDIT: Looks like I haven't clarify the wanted look, here's an illustration of what I want:
Use This Code.Use RelativeLayout as parent & assign android:layout_alignParentRight="true" to his child this set your all view to right side.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_marginRight="20dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/row_title"
style="bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hey1" />
<TextView
android:id="#+id/row_subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hey2" />
<TextView
android:id="#+id/row_postcode_city"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hey3" />
</LinearLayout>
<ImageView
android:id="#+id/icon"
android:layout_marginRight="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</RelativeLayout>
What you can do - is to make outer RelativeLayout, make you image alignParentRight=true, put text views in a separate linear layout (with vertical orientation), align your LinearLayout with text views to the left edge of the image view (layout_toLeftOf="#+id/img_id").
Here is what I manage to do following this approach:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_toLeftOf="#+id/img"
android:orientation="vertical"
android:id="#+id/text_container">
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="text1"/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="text2"/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="text3"/>
</LinearLayout>
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/icon"
android:id="#+id/img"/>
</RelativeLayout>
Related
I want to add a framed number (#+id/number_ayat) right after the end of the text(#+id/isi_ayat), but it can't if I use textview. So how can I add numbers and frames after the end of the text?
This is my code in custom_isi_ayat.xml
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:paddingBottom="10dp"
android:paddingTop="10dp"
>
<LinearLayout
android:padding="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:textSize="20dp"
android:id="#+id/number_ayat"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginRight="10dp"
android:background="#drawable/frame"
android:gravity="center" />
<TextView
android:gravity="left"
android:textAlignment="textStart"
android:id="#+id/isi_ayat"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30dp" />
</LinearLayout>
<TextView
android:id="#+id/translate_bahasa"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:paddingLeft="20dp"
android:id="#+id/terjemahan"
android:textStyle="italic"
android:lineSpacingMultiplier="0.7"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
in capture result :in capture result :
and I want to result is : and I want to result is
Whether this can be solved with java?
Thanks in advance for help with my problem !
I have modeled the layout in Android Studio. I had to force rtl on my layout so there may be some things to correct. The first that I sugest is changing the width of "#+id/isi_ayat" as explained below.
The changes I did were the following:
In the LinearLayout I set gravity to end for the textviews to go to the right.
For android:id="#+id/isi_ayat", I set gravity and textAlignment to end so the text aligns to the end of the TextView, and also set layout_gravity to end and center_vertical for the TextView to also go to the end. And also changed the width from match_parent to wrap_content.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="end">
<TextView
android:textSize="20dp"
android:id="#+id/number_ayat"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginRight="10dp"
android:gravity="center"
tools:text="10"/>
<TextView
android:layout_gravity="end|center_vertical"
android:gravity="end"
android:textAlignment="gravity"
android:id="#+id/isi_ayat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30dp"
tools:text="lorem ipsum dolo asd"/>
</LinearLayout>
EDIT I
I removed android:layout_marginRight="10dp" from android:id="#+id/number_ayat".
As you can see in the picture below. There is no more space between the two textviews.
This is the closest you can get without making the number's textview smaller.
EDIT II
I think I understood, if there are more lines the number must be after the last line.
Change android:gravity="end" to android:gravity="end|bottom" in
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="end">
I am trying to use a linear layout as a row for my recyclerView/adapter, basically my row has 3 elements: an image, a textView and a checkButton with some text.
What I want is the image occupying like 50% of the width plus 40 height, so I set the weight of the image to 2.
Next I need to have another 50% layout that has the other 2 elements, and I want at the top right of the image the textView and at bottom the checkbox.
I already implemented this before with relative layouts, but the content didn't adapt to different devices, so I tried the linear layout and the weight property.
So this is what I have at the moment:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/plantPhoto"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:contentDescription="photo " />
<com.example.afcosta.inesctec.pt.android.Helpers.NexusBoldTextView
android:id="#+id/plantName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:textColor="#color/nephritis"
android:textSize="15sp" />
<CheckBox
android:id="#+id/plantCheck"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignStart="#+id/plantName"
android:layout_below="#+id/plantName"
android:layout_marginTop="25dp"
android:button="#drawable/customdrawablecheckbox"
android:textSize="10dp" />
</LinearLayout>
Here is the image of what I have at the moment:image
As I explained, I need the image to occupy the 50% width and the green text to be side on side with the photo at the right.
The checkbox must be below, any help??
Thanks
Try this,
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/plantPhoto"
android:layout_width="fill_parent"
android:layout_height="70dp"
android:layout_weight="0.5"
android:contentDescription="photo "
android:src="#drawable/placeholder" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5">
<TextView
android:id="#+id/plantName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:textColor="#color/colorBlack"
android:textSize="15sp" />
<CheckBox
android:id="#+id/plantCheck"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/plantName"
android:layout_marginTop="5dp"
android:text="CheckBox"
android:textSize="15dp" />
</RelativeLayout>
</LinearLayout>
To me, it would have to be set with a Relative layout. Then for the elements to "adapt to different devices" you would need to set android:layout_width and height to wrap_content or fill_parent depending on what you want to achieve.
Set image weight to 50% which is .5, anything you add on that layout will be horizontal, so to solve that just add another layout at .5 weight and set it vertical.
You can try something like this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/plantPhoto"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:contentDescription="photo " />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<com.example.afcosta.inesctec.pt.android.Helpers.NexusBoldTextView
android:id="#+id/plantName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/nephritis"
android:textSize="15sp" />
<CheckBox
android:id="#+id/plantCheck"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginTop="25dp"
android:button="#drawable/customdrawablecheckbox"
android:textSize="10dp" />
</LinearLayout>
</LinearLayout>
Why is the scrollview going behind the button here? I want the scrollview to stretch in height depending on the device but cant get it to work as it always goes behind the button.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/detail_view"
style="#style/DetailView">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical" >
<TextView
style="#style/TextView"
android:id="#+id/textview_message_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center">
</TextView>
<TextView
style="#style/TextView"
android:id="#+id/textview_message_date"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center">
</TextView>
<ScrollView
android:id="#+id/scrollview_message_text"
android:layout_height="wrap_content"
android:paddingBottom="20dip"
android:layout_width="fill_parent">
<TextView
style="#style/TextView"
android:id="#+id/textview_message_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</TextView>
</ScrollView>
</LinearLayout>
<LinearLayout style="#style/DetailView.Buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
style="#style/Button"
android:layout_marginTop="5dip"
android:id="#+id/button_view_file"
android:text="#string/viewfile"/>
</LinearLayout>
</RelativeLayout>
Here is a working copy of what I think you are looking for
1: Moved the buttons to the top of the relative layout ( added an id )
android:layout_alignParentBottom="true"
<LinearLayout android:id="#+id/buttons"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_marginTop="5dip"
android:id="#+id/button_view_file"
android:text="Button"/>
</LinearLayout>
2: Add in the layout containing the scroll change the width and height to match parent
but ( CRITICAL ) add android:layout_above="#id/buttons"
<LinearLayout
android:layout_above="#id/buttons"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/darker_gray"
android:gravity="center"
android:orientation="vertical" >
So putting it all together:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:id="#+id/detail_view"
>
<!-- Buttons at the top of layout but aligned to the bottom -->
<LinearLayout android:id="#+id/buttons"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_marginTop="5dip"
android:id="#+id/button_view_file"
android:text="Button"/>
</LinearLayout>
<!-- Linear layout to fill screen, but assigned to layout above the buttons -->
<LinearLayout
android:layout_above="#id/buttons"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/darker_gray"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:id="#+id/textview_message_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center">
</TextView>
<TextView
android:id="#+id/textview_message_date"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center">
</TextView>
<ScrollView
android:id="#+id/scrollview_message_text"
android:layout_height="wrap_content"
android:paddingBottom="20dip"
android:layout_width="fill_parent">
<TextView
android:id="#+id/textview_message_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</TextView>
</ScrollView>
</LinearLayout>
</RelativeLayout>
I removed the styles so I could see it in the layout an make sure this worked before posting. Hope this helps.
Relative layout allows you to layer elements on top of each other. So if that is not what you are looking for you need to make use of the toLeft, toRight, above, below directives to nudge the layouts into the correct position.
This happens because you use Relative layout as the root layout. So both layout are placed on the same place but the button layout is declared after the scrollview so it is shown above the scrollview
The opposite would happen if you were defining the button before the scrollview
So you should define it as shown below to achieve what you want.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/detail_view"
style="#style/DetailView">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_above="#id/layout_bottom"
android:orientation="vertical" >
<TextView
style="#style/TextView"
android:id="#+id/textview_message_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center">
</TextView>
<TextView
style="#style/TextView"
android:id="#+id/textview_message_date"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center">
</TextView>
<ScrollView
android:id="#+id/scrollview_message_text"
android:layout_height="wrap_content"
android:paddingBottom="20dip"
android:layout_width="fill_parent">
<TextView
style="#style/TextView"
android:id="#+id/textview_message_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</TextView>
</ScrollView>
</LinearLayout>
<LinearLayout
android:id="#+id/layout_bottom"
style="#style/DetailView.Buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
style="#style/Button"
android:layout_marginTop="5dip"
android:id="#+id/button_view_file"
android:text="#string/viewfile"/>
</LinearLayout>
</RelativeLayout>
or you can try and use LinearLayout as the root view and set
layout_height = "0dp"
layout_weight = "1"
to the layout containing the scrollview
using both these way will make the button stick to the bottom of the layout and the top layout will get all the remaining height.
Good Luck
Why is the scrollview going behind the button here?
Because it is coming first in your layout, ReletiveLayout and FrameLayout can be used to provide Z-ordering, So every child which comes later in your layout having higher z value so it goes up.Add android:layout_below = "#id/scrollview_message_text" to your last linearlayout or order your views within in mind of this characteristic of reletivelayout.
I have a very simple layout where I'm attempting to center an imageView in the middle of the screen but aligned to the top. I've attempted to use the following however it does not seem to be working and im unsure why: the imageView appears in the upper left hand corner instead of being centered and aligned to the top.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView
android:id="#+id/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
I'm attempting to center an imageView in the middle of the screen but aligned to the top..
Use android:layout_centerHorizontal="true" instead of android:layout_centerVertical="true" in the ImageView. So following should be your XML:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView
android:id="#+id/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:src="#drawable/backspace_icon" />
</RelativeLayout>
Hope it helps.
I need to place three elements inside RelativeLayout:
scaled image in ImageView on the right side with the top and bottom margins
TextEdit in the left top corner
LinearLayout in the rest of the space (below the title and to the left of the image)
The problem happens when the image is scaled in ImageView. I want it fits the entire parent's height considering margins. After scaling uniformly to fit the parent's height I want ImageView wraps the image's width. But as the result there are some unfilled horizontal spaces in ImageView.
The problem looks similar to one solved here. But in my case all tests with android:adjustViewBounds and android:scaleTypes didn't work. I suppose there is a problem because of margins and RelativeLayout use.
Here is the extract from my xml file:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="#id/albums_slideshow"
android:adjustViewBounds="true"
android:layout_marginTop="71.33dp"
android:layout_marginBottom="88.67dp"
android:scaleType="centerInside"
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/music_img_album_noimage"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/music_module_screen_title_margin_left"
android:layout_marginTop="#dimen/music_module_screen_title_margin_top"
android:text="#string/music_string"
style="#style/ScreenTitleFont"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"/>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_alignTop="#id/albums_slideshow"
android:layout_toLeftOf="#id/albums_slideshow">
...
</LinearLayout>
</RelativeLayout>
Has anyone met this problem and found the answer?
this is what i have come up with
and this is the xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:orientation="vertical"
>
<TextView android:id="#+id/album_text"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentLeft="true" android:layout_alignParentTop="true"
android:layout_marginLeft="20dip" android:layout_marginTop="20dip"
android:text="music string" android:background="#android:color/white"
/>
<LinearLayout android:id="#+id/albums_list"
android:layout_width="wrap_content" android:layout_height="fill_parent"
android:layout_alignParentLeft="true" android:layout_below="#id/album_text"
android:layout_marginTop="71.33dp"
android:orientation="vertical" android:background="#android:color/white"
>
<TextView android:id="#+id/album_text"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentLeft="true" android:layout_alignParentTop="true"
android:layout_marginLeft="20dip" android:layout_marginTop="20dip"
android:text="albums list"
/>
</LinearLayout>
<ImageView android:id="#+id/albums_slideshow"
android:layout_height="fill_parent" android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginBottom="88.67dp"
android:layout_alignTop="#id/albums_list"
android:scaleType="centerInside"
android:layout_centerInParent="true" android:background="#android:color/darker_gray"
android:src="#drawable/icon"/>
</RelativeLayout>
let me know for improvements