Develop Reference

How to set textview under each other in linearlayout

What I want is that I can have 1 ImageView on the left and next to the imageview 2 textviews under each other. I can't get the second textview under the textview.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/displayImage"
android:layout_width="67dp"
android:layout_height="100dp"
android:layout_gravity="left"
android:layout_weight="1" />
<TextView
android:id="#+id/textview_name"
android:layout_width="40dp"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_weight="2"
android:paddingLeft="10dp"
android:paddingTop="10dp"
android:paddingBottom="3dp"
android:textColor="#color/colorPrimaryDark"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:id="#+id/textview_description"
android:layout_width="55dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="2"
android:gravity="left"
android:paddingLeft="10dp"
android:paddingTop="10dp"
android:paddingBottom="3dp"
android:textSize="20sp" />
</LinearLayout>
The result looks now:
Result
Expected result

You can use something like below:
<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/displayImage"
android:layout_width="67dp"
android:layout_height="100dp"
android:src="#color/colorPrimaryDark" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/textview_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingTop="10dp"
android:paddingBottom="3dp"
android:text="Left text"
android:textColor="#color/colorPrimaryDark"
android:textStyle="bold" />
<TextView
android:id="#+id/textview_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:paddingLeft="10dp"
android:paddingTop="10dp"
android:paddingBottom="3dp"
android:text="Right text" />
</LinearLayout>
</LinearLayout>
You can nest containers like LinearLayout,RelativeLayout, FrameLayout, etc inside each other to create complex Layouts.
Also, I'd advise knowing what each tags do by Googling them before using them inappropriately anywhere inside your layout. It needed me solid 5 minutes to fix your layout because you added layout_weight basically anywhere you pleased!

Your linear layout orientation is horizontal, so you can't get textviews vertically aligned unless you take one more linear layout for the 2 textviews with vertical orientation. Otherwise, you can do this with a single Relative layout.
Here is the structure
<LinearLayout> - horizontal orientation
<Imageview/>
<LinearLayout> - vertical orientation
<Textview/>
<Textview/>
</LinearLayout> - vertical orientation
</LinearLayout> - horizontal orientation.

You have set the orientation of the Linear Layout as horizontal. This will make all the children (in your case, ImageView, TextView name and TextView description) to be horizontally laid out next to each other.
There are many ways to do this.
1 way to achieve this is by using RelativeLayout and then you can use
android:layout_toBottomOf="#id/textview_name"
to get the description textview to be below the name text view.
For the image view, you can use the property
android:layout_alignParentLeft="true"
to make the image view to stick to the left border. Please experiment with RelativeLayout to get the desired result.
Please use this codelab from Google to use ContraintLayout. https://codelabs.developers.google.com/codelabs/constraint-layout/index.html#0

how come a view gets out of its linear layout parent borders without negative margins?

I have this android layout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<LinearLayout
android:id="#+id/display_name_layout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:id="#+id/account_display_name"
..."/>
<ImageView
..."/>
</LinearLayout>
<LinearLayout
android:id="#+id/account_name_layout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:layout_marginBottom="1dp"
android:orientation="horizontal">
<TextView
android:id="#+id/account_name"
style="#style/AccountDataAccountName"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"/>
<ImageView
android:id="#+id/account_name_chevron"
android:layout_width="#dimen/account_menu_chevron_size"
android:layout_height="#dimen/account_menu_chevron_size"
android:layout_marginTop="#dimen/account_menu_chevron_top_margin"
android:layout_marginLeft="#dimen/account_menu_chevron_left_margin"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<FrameLayout
android:id="#+id/close_and_recents"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="#dimen/account_menu_header_horizontal_margin"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/close_button"
android:layout_width="#dimen/account_menu_close_button_size"
android:layout_height="#dimen/account_menu_close_button_size"
android:layout_gravity="top|end"
android:padding="#dimen/account_menu_close_button_padding"
android:alpha="0"
android:visibility="gone"/>
but when i run it with big font size and screen size,
I see the image is getting out of the linear layout. And it's hidden behind the red circle image (a view in a sibling FrameLayout).
How can it be?
I didn't put negative margins.

Because in that LinearLayout first your account_name textview is taking space. So when you run with big font size, this textview takes the (almost) full width of the LinearLayout. Now the layout will render the next View (Image View), it will place it next to textView. Since the imageview has fixed dimension given, it will take its space but will not be visible as it exceeds the parent width.
If still not clear let me know.
Update
For your next question, you can change that LinearLayout to RelativeLayout like this:
<RelativeLayout
android:id="#+id/account_name_layout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_marginBottom="1dp">
<ImageView
android:id="#+id/account_name_chevron"
android:layout_width="#dimen/account_menu_chevron_size"
android:layout_height="#dimen/account_menu_chevron_size"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_marginTop="#dimen/account_menu_chevron_top_margin"
android:layout_marginLeft="#dimen/account_menu_chevron_left_margin"/>
<TextView
android:id="#+id/account_name"
style="#style/AccountDataAccountName"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:lines="1"
android:ellipsize="end"
android:layout_toLeftOf="#+id/account_name_chevron"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"/>
</RelativeLayout>
First we draw ImageView at the extreme right of the layout, then we draw textView from extreme left to starting of ImageView. For the Relative layout has properties like android:layout_toLeftOf and more.
Update2
Try this code as per your requirement. So basically what we are doing is; We fist draw textView and give it a rightPadding equals to iconSize + iconLeftMargin. So now the textView will always keep space for icon on its right. Now we rightAlign the icon with textView, so as the textView increase its space the icon will move with it. Once it reach the layout end the icon will still be fully visible.
account_menu_chevron_size_plus_margin this the dimen equal to iconSize + iconLeftMargin
<RelativeLayout
android:id="#+id/account_name_layout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_marginBottom="1dp">
<TextView
android:id="#+id/account_name"
style="#style/AccountDataAccountName"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:lines="1"
android:ellipsize="end"
android:paddingRight="#dimen/account_menu_chevron_size_plus_margin"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"/>
<ImageView
android:id="#+id/account_name_chevron"
android:layout_width="#dimen/account_menu_chevron_size"
android:layout_height="#dimen/account_menu_chevron_size"
android:layout_centerVertical="true"
android:layout_alignRight="#+id/account_name"
android:layout_marginTop="#dimen/account_menu_chevron_top_margin"
android:layout_marginLeft="#dimen/account_menu_chevron_left_margin"/>
</RelativeLayout>

Why does image in relative layout with "fill_parent" hide button underneath?

I'm trying to increase the size of an image in relative layout. Right now, its width and height are set to wrap_content. When I set them fill_parent, the image grows, but pushes the button underneath off the display. The relevant XML is below. What am I doing wrong?
Edit: Thanks for all the answers, but so far, if I set the height of the image to fill_parent or match_parent, it always extends to the bottom of the display, regardless of if the button is in or outside of relative layout. Why does the relative layout ignore what's beneath it?
<LinearLayout>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativelayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/myImageView"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/apple"
android:alpha=".5"
android:paddingBottom="0dp"
android:adjustViewBounds="true" />
<TextView
android:id="#+id/myImageViewText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Sample"
android:textColor="#000000"
android:singleLine="true"
android:layout_alignLeft="#+id/myImageView"
android:layout_alignStart="#+id/myImageView"
android:layout_alignParentTop="true" />
</RelativeLayout>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/enterPluButton"
android:background="#FFBD5C"
android:textColor="#000000"
android:text="Submit" />
</LinearLayout>

Set android:layout_alignParentBottom="true" for button.
Set android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/enterPluButton" for your RelativeLayout
Set android:layout_width="match_parent"
android:layout_height="match_parent" for the ImageView

In RelativeLayouts views are positioneed relatively to the top left of the "ViewGroup". To get the ImageView to stop hiding the Button, or any other view at that matter, add the layout_below attribute.
<TextView
android:layout_below="#+id/relativelayout"
android:id="#+id/myImageViewText"
android:layout_width="fill_parent"
...
/>
Also, for ImageView it is not advised, unless being used for a background, that you set layout_height to fill_parent or match_parent.
You would get the desired result if you place the Button in the relative layout and position it under the text view.

RelativeLayout positions View relative of each other. if it does not have a relation to a another child View it calculates with the Parent View which is the RelativeLayout. This is why you are having that. Why don't wrap the LinearLayout in a ScrollView or give the RelativeLayout a fixed dimension

I understand now what you're trying to do. Try this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativelayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/myImageView"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:alpha=".5"
android:paddingBottom="0dp"
android:src="#drawable/apple" />
<TextView
android:id="#+id/myImageViewText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/myImageView"
android:layout_alignParentTop="true"
android:layout_alignStart="#+id/myImageView"
android:gravity="center"
android:singleLine="true"
android:text="Sample"
android:textColor="#000000" />
<Button
android:id="#+id/enterPluButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/myImageView"
android:background="#FFBD5C"
android:text="Submit"
android:textColor="#000000" />
</RelativeLayout>

Unable to horizontally center a TextView

I have a TextView inside a LinearLayout and i want to align it in center of the page but its not happening, i have tried the following:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<TextView
android:id="#+id/userName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:background="#80000000"
android:gravity="center"
android:padding="10dp"
android:text="User Name"
android:textColor="#FFFFFF"
android:textSize="12sp" />
</LinearLayout>

Change the TextView layout_width to "match_parent", the issue is that "gravity" works only for the child of the View in this case the "text" it self, hence if you specify the object width as just to wrap its content, it means there's no space to center to, filling the whole parent and using "gravity" center would do the trick.
The other thing you can do is changing the "android:gravity" property to "android:layout_gravity" and center horizontal, this way you are telling the TextView itself to move to the center...
As best practice always try to use RelativeLayouts and avoid LinearLayouts, they provide a better way to manipulate Views position and are "device size fragmentation" friendly, RelativeLayout have plenty of methods to position views on the most common positions including center, top, bottom etc...
Hope this Helps.
Regards!

Try changing the layout. Linear Layout is meant for displaying ui components in rows. If you want to center your textview using you layout, I suggest changing the layout to Relative Layout.

First of all you cant set the property android:layout_centerHorizontal="true" for a LinearLayout. To make it centered you need to make layout height and width to match_parent like below,
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<TextView
android:id="#+id/userName"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:background="#80000000"
android:gravity="center"
android:padding="10dp"
android:text="User Name"
android:textColor="#FFFFFF"
android:textSize="12sp" />
</LinearLayout>

Try using:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:gravity="center" >
<TextView
android:id="#+id/userName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#80000000"
android:gravity="center"
android:padding="10dp"
android:text="User Name"
android:textColor="#FFFFFF"
android:textSize="12sp" />
</LinearLayout>

Why doesn't my relative layout take whole screen height

So, i have simple layout with some text and a button. Text is positioned at start and takes, on some phones, more height then the height of screen so i have it positioned in scroll view. Next to that text i have one more textview and a button which should be positioned in the bottom right of the screen. The problem is that one large screens my button isn't at bottom but there where the text ends, and i can see that my relativelayout doesn't take whole height of the scrollView. My layout:
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="Some dummy text"
android:textColor="#969696"
android:textSize="13dp" />
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="false"
android:layout_below="#+id/text1"
android:text="some dummy text2"
android:textColor="#969696"
android:textSize="13dp" />
<ImageButton
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:src="#drawable/btn49_2x" />
</RelativeLayout>
</ScrollView>
My real layout is a bit more complex so i need to use relative layout. But how to make sure it takes whole screen height?
I tried setting height to wrap:content but no effect.

Add android:fillViewport="true" to your ScrollView