Develop Reference

Constraint layout text with button in the bottom

I am doing a constraint layout for screen. And in some small screens is not showing correctly, because the button is over the text.
In the other devices with a bigger screen is showing correctly.
And i don't know how i can solve it.
Thanks
This is my layout (Constraint Layout) with a Linear layout inside.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/wf_white">
<LinearLayout
android:id="#+id/ly_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/form_margins"
android:orientation="vertical"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="parent"
android:background="#color/wf_light_grey">
<TextView
style="#style/wf_text_link"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textAllCaps="true"
android:layout_marginTop="#dimen/form_margins"
android:text="#string/_BIWC_your_agent"/>
<ImageView
android:id="#+id/broker_image"
android:layout_width="#dimen/broker_image_size"
android:layout_height="#dimen/broker_image_size"
android:layout_gravity="center"
android:layout_marginTop="#dimen/text_margin_sides"
android:src="#drawable/img_broker_without_image"
tools:ignore="ContentDescription"/>
<TextView
android:id="#+id/broker_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="#dimen/form_margins_mini"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginTop="#dimen/form_margins_mini"
android:orientation="horizontal">
<ImageView
android:id="#+id/broker_icon_phone"
android:layout_width="#dimen/icons_size_broker"
android:layout_height="#dimen/icons_size_broker"
android:layout_marginTop="#dimen/form_margins_small"
android:layout_marginBottom="#dimen/text_margin_sides"
android:visibility="gone"
android:src="#drawable/icon_action_phone"
tools:ignore="ContentDescription"/>
<ImageView
android:id="#+id/broker_icon_email"
android:layout_width="#dimen/icons_size_broker"
android:layout_height="#dimen/icons_size_broker"
android:layout_marginTop="#dimen/form_margins_small"
android:layout_marginStart="#dimen/icons_margin_broker"
android:layout_marginBottom="#dimen/text_margin_sides"
android:src="#drawable/ic_email"
tools:ignore="ContentDescription"/>
<ImageView
android:id="#+id/broker_icon_location"
android:layout_width="#dimen/icons_size_broker"
android:layout_height="#dimen/icons_size_broker"
android:layout_marginTop="#dimen/form_margins_small"
android:layout_marginStart="#dimen/icons_margin_broker"
android:layout_marginBottom="#dimen/text_margin_sides"
android:visibility="gone"
android:src="#drawable/ic_location"
tools:ignore="ContentDescription"/>
</LinearLayout>
</LinearLayout>
<TextView
android:id="#+id/broker_introduction_title"
style="#style/wf_text_copy"
android:layout_width="match_parent"
android:gravity="start"
android:layout_marginBottom="20dp"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:layout_marginRight="20dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/ly_container"
android:text="#string/_SR_head"/>
<TextView
android:id="#+id/access_code_description"
style="#style/wf_text_hero_copy"
android:layout_width="match_parent"
android:layout_below="#+id/broker_introduction_title"
android:layout_marginLeft=“20dp”
android:layout_marginRight="20dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/broker_introduction_title"
android:gravity="start"
android:text="#string/_BIWC_welcome_message"/>
<Button
android:id="#+id/btn_go_to_register"
style="#style/wf_button_primary"
android:layout_width="match_parent"
android:layout_alignParentBottom="true"
android:layout_marginBottom="20dp"
android:descendantFocusability="beforeDescendants"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:text="#string/_BIWC_create_account"/>
</android.support.constraint.ConstraintLayout>
And also i attach a photo of the problem. Where you can see how the button is over the text, and the user can't read the text.

You should add layout_constraintBottom_toTopOf & layout_constraintTop_toBottomOf.
layout_constraintBottom_toTopOf —> Align the bottom of the desired view
to the top of another.
layout_constraintTop_toBottomOf —> Align the top of the desired view to
the bottom of another.
<TextView
android:id="#+id/access_code_description"
app:layout_constraintBottom_toTopOf"#+id/btn_go_to_register"
android:layout_marginBottom="20dp" //Remove this line
And
<Button
android:id="#+id/btn_go_to_register"
app:layout_constraintTop_toBottomOf="#+id/access_code_description"
FYI
It will be good approach if you use ScrollView ( Where child is TextView).

Set ScrollView as parent layout and ConstraintLayout in it.
ScrollView documentation

Android TextView not wrapping content when system wide font scaled larger

In my app I'm trying to adjust this layout so it's readable when the user scales the system wide font size in Android System settings -> Display -> Font size (or in accessibility settings on some devices). Doing some digging I found out this adjusts the device configuration font scale (getResources().getConfiguration.fontScale) from 1.0 to 1.15.
I'm getting some weird behavior in a LinearLayout where one of the TextViews width gets crushed, when it's set to wrap_content, and also doesn't reflect a set minWidth.
What it looks like normally
What it looks like when font is scaled
Here is the LinearLayout in question (comments added for context in screenshot)
<LinearLayout
android:id="#+id/sectionPaintStatus"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<!-- () 6 Paint Items -->
<LinearLayout
android:id="#+id/sectionPaintItemToggle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingBottom="5dp">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabExpandPaintItems"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:rotation="180"
android:src="#drawable/ic_collapse"
app:elevation="2dp"
app:fabSize="mini"/>
<TextView
android:id="#+id/tvPaintItemCount"
style="#style/Label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:text="0 Paint Items"
android:textSize="16sp"/>
<ImageView
android:id="#+id/imgPaintAreaWarning"
android:layout_width="20dp"
android:layout_height="match_parent"
android:layout_marginStart="10dp"
android:scaleType="centerInside"
android:src="#drawable/ic_edit_warning2"
android:visibility="invisible"/>
</LinearLayout>
<!-- Inner layout to consume middle width and right align the rest -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="end"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/layoutPaintItemCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="end"
android:orientation="vertical"
android:visibility="invisible">
<TextView
android:id="#+id/tvPaintItemCountStatus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2"
android:textSize="16sp"
android:textStyle="bold"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Paint Items"
android:textSize="16sp"/>
</LinearLayout>
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="30dp"
android:scaleType="centerInside"
android:src="#drawable/ic_time"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="end"
android:orientation="vertical">
<TextView
android:id="#+id/tvPaintTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2.5h"
android:textSize="16sp"
android:textStyle="bold"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Time"
android:textSize="16sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_marginEnd="30dp"
android:minWidth="70dp"
android:gravity="end"
android:orientation="vertical">
<TextView
android:id="#+id/tvPaintTotal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$123.22"
android:textSize="16sp"
android:textStyle="bold"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Total"
android:textSize="16sp"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Why is that last LinearLayout containing 2 TextViews not properly wrapping content? I tried removing the minWidth incase that was causing any issues and got the same result. I don't understand why all the other layouts wrap their content properly but the last one doesn't.
And is it possible to add a resource folder for scaled system wide font?
Edit It appears removing margins allow the TextView to wrap the proper width but obviously I need the margins.
Can anyone explain this strange behavior?
Edit Solved
It turns out I completely forgot about an invisible element in the layout between the "Paint Items" label and the time icon. It was causing me to run out of horizontal space.

You appear to have used layout_width="match_parent" and gravity="end" to align your elements.
I assume on small devices (or with large text) you'd like the "0 Paint Items" to ellipsize when not enough space, and have the 'Time' and 'Total' fields to show at full width.
To do this, we make the following changes:
First, make the sectionPaintItemToggle have 0dp width and layout_weight="1" - this tells Android "this should fill as much space is available".
<LinearLayout
android:id="#+id/sectionPaintItemToggle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
... >
I removed all the gravity="end" settings.
I changed the "inner layout" (as per the comment) to be have wrap_content width.
I deleted the entire layoutPaintItemCount layout - I feel like you were trying a different way to do the "N paint items" layout.
In the end, we have something like this (I swapped in an ImageView for the FAB and just used resources I already had - I think I changed some margins too):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="#+id/sectionPaintStatus"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:gravity="center_vertical"
>
<!-- () 6 Paint Items -->
<LinearLayout
android:id="#+id/sectionPaintItemToggle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:clipToPadding="false"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingBottom="5dp">
<ImageView
android:id="#+id/fabExpandPaintItems"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_margin="5dp"
android:rotation="180"
android:src="#drawable/ic_edit_black_24dp"/>
<TextView
android:id="#+id/tvPaintItemCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:text="0 Paint Items"
android:textSize="16sp"/>
<ImageView
android:id="#+id/imgPaintAreaWarning"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginStart="10dp"
android:scaleType="centerInside"
android:src="#drawable/ic_edit_black_24dp"
android:visibility="invisible"/>
</LinearLayout>
<!-- Inner layout to consume middle width and right align the rest -->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:scaleType="centerInside"
android:src="#drawable/ic_edit_black_24dp"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/tvPaintTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2.5h"
android:textSize="16sp"
android:textStyle="bold"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Time"
android:textSize="16sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="30dp"
android:layout_marginStart="30dp"
android:orientation="vertical">
<TextView
android:id="#+id/tvPaintTotal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$123.22"
android:textSize="16sp"
android:textStyle="bold"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Total"
android:textSize="16sp"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
The key part was to convince Android that the "N Paint Items" view was the one you wanted to shrink.

How to align buttons next to text that should flow on 2 lines?

So I want to have a title with 2 buttons next to it. These buttons should stick to the left next to the text, and when the text becomes too long, it should flow on 2 lines.
I was able to replicate this by giving the textView a maxwidth, but this causes the textview to take that maxwidth, even if it reflows on 2 lines. Therefore my buttons don't align next to the text anymore.
Like this:
How can I make my textView take the width it needs, not the one I tell it to use as maxWidth?

Here comes the perfectly working answer using ConstraintLayout (as I love this layout).
This is the code.
<android.support.constraint.ConstraintLayout
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="match_parent" >
<android.support.constraint.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/text"
android:layout_marginTop="25dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:maxWidth="300dp">
<TextView
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:maxWidth="300dp"
android:text="Some layout is going to be created and whatever I do it won't cross the limit."
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginEnd="10dp"
android:layout_marginStart="10dp"/>
</android.support.constraint.ConstraintLayout>
<ImageView
android:layout_height="40dp"
android:background="#365987"
android:layout_width="40dp"
android:layout_marginStart="5dp"
android:id="#+id/image"
app:layout_constraintLeft_toRightOf="#+id/text"
app:layout_constraintTop_toTopOf="#+id/text"/>
<ImageView
android:id="#+id/image1"
android:layout_height="40dp"
android:background="#e85f11"
android:layout_width="60dp"
android:layout_marginStart="5dp"
app:layout_constraintBottom_toBottomOf="#+id/image"
app:layout_constraintLeft_toRightOf="#+id/image"
app:layout_constraintTop_toTopOf="#+id/image"/>
</android.support.constraint.ConstraintLayout>
Outputs:
Whatever the text is, it will not cross the maxwidth. And with less width than maxwidth, it's width will be wrap_content.

<?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="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/tv_male"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="15dp"
android:text="Male:"
android:textColor="#111111"
android:textSize="12dp" />
<ImageView
android:id="#+id/iv_male"
android:layout_width="#dimen/_42sdp"
android:layout_height="#dimen/_42sdp"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:padding="10dp"
android:src="#drawable/block_user" />
<ImageView
android:id="#+id/iv_female"
android:layout_width="#dimen/_42sdp"
android:layout_height="#dimen/_42sdp"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:padding="10dp"
android:src="#drawable/blocked_user" />
</LinearLayout>
<TextView
android:id="#+id/tv_detail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is something Demo Content"
android:layout_marginLeft="#dimen/_15sdp"
android:textColor="#111111"
android:textSize="12dp" />
</LinearLayout>
So you can just add content below the linear layout complete
I Hope it Helps you and you will get your solution.

Try this code
<?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:descendantFocusability="blocksDescendants"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:id="#+id/zero"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="2"
android:paddingEnd="100dp"
android:text="Simple textdfddfdf dfdfdfdfdf dfdf Sample Text Sample Text" />
<LinearLayout
android:id="#+id/one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="#+id/zero"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
Here, You have to pass android:paddingEnd="100dp". This you can manage from dimens.xml
I hope. This will help full

You should use ConstraintLayout
compile 'com.android.support.constraint:constraint-layout:1.0.2'
Let's take an instance of that Planner part of the image.
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/constraintLayout"
<!-- Other attributes -->
<TextView
android:id="#+id/text"
android:layout_width = "xxxdp"
android:layout_height = "xxxdp"
app:layout_constraintBottom_toBottomOf="#+id/constraintLayout"
app:layout_constraintLeft_toLeftOf="#+id/constraintLayout"
app:layout_constraintTop_toTopOf="#+id/constraintLayout"
<!-- Other attributes --> />
<ImageView
android:id="#+id/image1"
app:layout_constraintBottom_toBottomOf="#+id/text"
app:layout_constraintLeft_toRightOf="#+id/text"
app:layout_constraintTop_toTopOf="#+id/text"
<!-- Other attributes --> />
<ImageView
android:id="#+id/image1"
app:layout_constraintBottom_toBottomOf="#+id/text"
app:layout_constraintLeft_toRightOf="#+id/image1"
app:layout_constraintTop_toTopOf="#+id/image1"
<!-- Other attributes --> />
Definition of Attributes used.
layout_constraintTop_toTopOf — Align the top of the desired view to the top of another.
layout_constraintBottom_toBottomOf — Align the bottom of the desired view to the bottom of another.
layout_constraintLeft_toRightOf — Align the left of the desired view to the right of another.

Display textview below imageview and not bottom to the parent

I'm working on an Android application and I have an issue with how to display an image in a view. My issue is that I want to display an image and two textViews just below my imageView without aligning their bottom to the parent's. See the wireframe below.
My problem is that when the imageView is taking all the height of the relativeLayout, my textViews are hidden below the parents view.
I have tried a lot of things but nothing is satisfaying...
I have tried to put my imageview in a linearLayout and put a weight on it but if my imageView is smaller I have a blank between the imageView and the textView.
It's complicated because each image I load can have a different size and thus I can't fix a default size to it.
Also, my layout is in a viewPager and when I want to have the Height of the view when I instantiate it on my adapter it returns 0. So I can't compute the size of the elements in the view.
Have you any idea how can I make my layout ?
Maybe in a coordinatorLayout to have circular dependencies (but I don't know how to make it) ?
Here a wireframe of what I want to do with my view: image
And here the code of my layout :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_photo_detail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/relative_photo_detail_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/relative_photo_detail_bottom_infos">
<ImageView
android:id="#+id/photo_detail_full_size"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/placeholder"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"/>
<TextView
android:id="#+id/photo_detail_owner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/photo_detail_full_size"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:textColor="#color/grey"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/relative_photo_detail_bottom_infos"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/relative_photo_detail_image"
android:padding="10dp">
<ImageView
android:id="#+id/photo_detail_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:src="#drawable/delete"/>
</RelativeLayout>
</RelativeLayout>

Try putting your code inside Scroll view

Update your layout structure as below:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_photo_detail"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- TextView 2 -->
<TextView
android:id="#+id/photo_detail_owner_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginTop="8dp"
android:padding="8dp"
android:gravity="center"
android:textSize="16sp"
android:textColor="#android:color/holo_red_dark"
android:text="This is TextView Two"/>
<!-- TextView 1 -->
<TextView
android:id="#+id/photo_detail_owner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/photo_detail_owner_description"
android:layout_marginTop="8dp"
android:padding="8dp"
android:gravity="center"
android:textSize="18sp"
android:textColor="#android:color/black"
android:text="This is TextView One"/>
<RelativeLayout
android:id="#+id/relative_photo_detail_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/photo_detail_owner"
android:background="#android:color/black">
<!-- Image -->
<ImageView
android:id="#+id/photo_detail_full_size"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/dummy"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"/>
<!-- Delete Icon -->
<ImageView
android:id="#+id/photo_detail_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="16dp"
android:src="#drawable/delete"/>
</RelativeLayout>
</RelativeLayout>
OUTPUT:
Hope this will help~

Something like this
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:layout_gravity="center_horizontal" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Large Text"
android:id="#+id/textView2"
android:textAlignment="center" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Large Text"
android:id="#+id/textView3"
android:textAlignment="center" />
</LinearLayout>

android nested LinearLayout sizing

I am trying to achieve the following layout for my expandable listview.
Layout
Problem:
On android previewer the layout looks as expected:
refer to first image in attachment below.
However, when I run it on an emulator or a device the second TextView is not displayed.
refer to second image in attachment below
I have to set the height of the second ImageView (ivGroupIndicator) to match parent in order for the second TextView to display. But this stretches the expandable arrow icon.
refer to last image in attachment below
Images
Here is my layout.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="50dp"
android:orientation="horizontal">
<ImageView
android:layout_width="25dp"
android:layout_height="match_parent"
android:src="#drawable/ci_hand_cursor"
android:layout_gravity="center" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingLeft="5dp"
android:paddingTop="5dp"
android:layout_weight="0.8">
<TextView
android:id="#+id/route_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Dhelhi Belhi"
android:fontFamily="sans-serif"
android:textSize="16sp"
android:textStyle="bold"
android:textColor="#color/colorPrimaryText"
android:paddingBottom="2dp"/>
<TextView
android:id="#+id/route_schedule_date"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="20-September-2017"
android:fontFamily="sans-serif"
android:textSize="14sp"
android:textColor="#color/colorSecondaryText"
android:paddingBottom="5dp"/>
</LinearLayout>
<ImageView
android:id="#+id/ivGroupIndicator"
android:layout_width="25dp"
android:layout_height="match_parent"
android:background="#drawable/group_indicator"
android:layout_gravity="center"/>
</LinearLayout>
What am i missing here?

This should do the trick:
Use 0dp as height/width when using weights
Weight can just be 1 (not 0.8)
Use equal weights on the 2 text views so they share equal vertical space
Set gravity to center_vertical on text views so the text is centered.
set scale type on image so it doesn't stretch.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal">
<ImageView
android:layout_width="25dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:scaleType="centerInside"
android:src="#drawable/ci_hand_cursor" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:paddingLeft="5dp"
android:paddingTop="5dp">
<TextView
android:id="#+id/route_name"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:fontFamily="sans-serif"
android:gravity="center_vertical"
android:text="Dhelhi Belhi"
android:textColor="#color/colorPrimaryText"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/route_schedule_date"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:fontFamily="sans-serif"
android:gravity="center_vertical"
android:text="20-September-2017"
android:textColor="#color/colorSecondaryText"
android:textSize="14sp" />
</LinearLayout>
<ImageView
android:id="#+id/ivGroupIndicator"
android:layout_width="25dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="#drawable/group_indicator"
android:scaleType="centerInside" />
</LinearLayout>

The problem maybe is that you set the height of the parent layout to 50dp. Try to set it to wrap content, and use height=0dp and weight=1 for the vertical LinearLayout