Develop Reference

Android xml styling for different sized elements in constrained layout

I have the farrowing code that I am using to dynamically place items in gridview
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="350dp"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_margin="#dimen/margin_small"
card_view:cardCornerRadius="10dp"
card_view:cardElevation="#dimen/margin_small">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/margin_small"
android:layout_gravity="center">
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/name"
card_view:layout_constraintTop_toTopOf="parent"
card_view:layout_constraintBottom_toTopOf="#+id/cost"
card_view:layout_constraintStart_toStartOf="#+id/image"
android:maxLines="3"
android:padding="9dp"
android:textAppearance="?android:attr/textAppearanceSmall"/>
<TextView
android:id="#+id/cost"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/ksh_000_00"
card_view:layout_constraintTop_toBottomOf="#+id/name"
card_view:layout_constraintBottom_toTopOf="#+id/image"
card_view:layout_constraintStart_toStartOf="#+id/image"
android:textAppearance="?android:attr/textAppearanceSmall"
android:typeface="serif"/>
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="150dp"
android:contentDescription="#string/food_fuzz_logo"
android:src="#drawable/logo"
card_view:layout_constraintBottom_toTopOf="#+id/footer"
card_view:layout_constraintEnd_toEndOf="parent"
card_view:layout_constraintStart_toStartOf="parent"
card_view:layout_constraintTop_toBottomOf="#+id/cost"
tools:scaleType="fitCenter" />
<LinearLayout
android:layout_width="match_parent"
android:id="#+id/footer"
android:layout_height="wrap_content"
card_view:layout_constraintTop_toBottomOf="#+id/image"
card_view:layout_constraintBottom_toBottomOf="parent"
card_view:layout_constraintEnd_toEndOf="#+id/image"
card_view:layout_constraintStart_toStartOf="#+id/name"
android:orientation="horizontal"
android:background="#color/gradient_background">
<TextView
android:id="#+id/minus"
android:layout_width="14dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:layout_marginStart="#dimen/activity_vertical_margin"
android:gravity="start"
android:text="#string/minus"
android:textColor="#color/white"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:layout_width="30dp"
android:layout_height="wrap_content"
android:id="#+id/quantity"
android:text="#string/zero"
android:textColor="#color/white"
android:textSize="18sp"
android:textStyle="bold"
android:layout_gravity="center"
android:gravity="center"/>
<TextView
android:layout_width="30dp"
android:layout_height="wrap_content"
android:id="#+id/plus"
android:text="#string/plus"
android:textColor="#color/white"
android:textSize="18sp"
android:textStyle="bold"
android:layout_gravity="end"
android:gravity="end"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
now I would like to have it like the bootstrap card with card-header, card-body and card-footer effect but I am only able to make it have the body like effect only. My attempt for the footer only positions the footer id element in the centre and its components crumbled together instead of the first one(minus) being spread out one to the extreme left, the other(quantity) in the centre and the last one(plus)n to the extreme right of the cardview's linear layout item.
This is what the code gives me
And this is what I expect
yet what I want is for the grey area to span the entire width of the card view and position the components appropriately as explained earlier
How is it possible to achieve my design idea?

what I want is for the grey area to span the entire width of the card view
I see that you used tools:scaleType for the image, and this won't work at runtime, as tools namespace is used for design purpose, so change it to android:scaleType
and position the components appropriately as explained earlier
You need to set the width of the LinearLayout that holds the buttons to match_parent, and set the weight values so that the buttons can be distribute like you need:
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="350dp"
android:layout_margin="#dimen/margin_small"
card_view:cardCornerRadius="10dp"
card_view:cardElevation="#dimen/margin_small">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="#dimen/margin_small">
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="3"
android:padding="9dp"
android:text="#string/name"
android:textAppearance="?android:attr/textAppearanceSmall"
card_view:layout_constraintBottom_toTopOf="#+id/cost"
card_view:layout_constraintStart_toStartOf="#+id/image"
card_view:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/cost"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/ksh_000_00"
android:textAppearance="?android:attr/textAppearanceSmall"
android:typeface="serif"
card_view:layout_constraintBottom_toTopOf="#+id/image"
card_view:layout_constraintStart_toStartOf="#+id/image"
card_view:layout_constraintTop_toBottomOf="#+id/name" />
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="150dp"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher_background"
card_view:layout_constraintBottom_toTopOf="#+id/footer"
card_view:layout_constraintEnd_toEndOf="parent"
card_view:layout_constraintStart_toStartOf="parent"
card_view:layout_constraintTop_toBottomOf="#+id/cost"
tools:scaleType="fitCenter" />
<LinearLayout
android:id="#+id/footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/gradient_background"
android:orientation="horizontal"
card_view:layout_constraintBottom_toBottomOf="parent"
card_view:layout_constraintEnd_toEndOf="#+id/image"
card_view:layout_constraintStart_toStartOf="#+id/name"
card_view:layout_constraintTop_toBottomOf="#+id/image">
<TextView
android:id="#+id/minus"
android:layout_width="14dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:layout_marginStart="#dimen/activity_vertical_margin"
android:gravity="start"
android:text="#string/minus"
android:layout_weight="1"
android:textColor="#color/white"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:id="#+id/quantity"
android:layout_width="30dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="#string/zero"
android:textColor="#color/white"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:id="#+id/plus"
android:layout_width="30dp"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/activity_vertical_margin"
android:layout_weight="1"
android:layout_gravity="end"
android:gravity="end"
android:text="#string/plus"
android:textColor="#color/white"
android:textSize="18sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

Having a textview below another textview that is centered?

I currently have a textview that is centered, and would like to add another textview below the centered textview, but it just places it at the same place as the previous textview, is there a way to fix this?
Code:
<FrameLayout
android:layout_width="350dp"
android:layout_height="500dp"
android:background="#color/white">
<TextView
android:id="#+id/info_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="#string/test"
android:textSize="18sp"
android:textStyle="normal"
/>
<TextView
android:id="#+id/info_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="#string/test"
android:textSize="18sp"
android:textStyle="normal"
/>
</FrameLayout>

Your are setting gravity in 2nd textview as center remove it or use your desire gravity there

Use Linear layout with android: orientation then you got your center layout
<LinearLayout
android:layout_width="350dp"
android:layout_height="500dp"
android:orientation="vertical"
android:background="#color/white">
<TextView
android:id="#+id/info_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="#string/test"
android:textSize="18sp"
android:textStyle="normal"
/>
<TextView
android:id="#+id/info_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="#string/test"
android:textSize="18sp"
android:textStyle="normal"
/>
</FrameLayout>

Instead of using FrameLayout use LinearLayout
<LinearLayout
android:gravity="center"
android:layout_width="350dp"
android:layout_height="500dp"
android:background="#color/white"
android:orientation="vertical">
<TextView
android:id="#+id/info_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/test"
android:textSize="18sp"
android:textStyle="normal"
/>
<TextView
android:id="#+id/info_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/test"
android:textSize="18sp"
android:textStyle="normal"
/>
</LinearLayout>
Output:

I hope this will work for you.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white">
<TextView
android:id="#+id/info_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="#string/test"
android:textSize="18sp"
android:textStyle="normal" />
<TextView
android:id="#+id/info_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:layout_marginBottom="10dp"
android:gravity="center"
android:text="#string/test"
android:textSize="18sp"
android:textStyle="normal" />
</FrameLayout>
Always use match_parent and wrap_content instead of dimensions in dp.

Place two text view inside relative layout
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="350dp"
android:layout_height="500dp"
android:background="#android:color/darker_gray">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center">
<TextView
android:id="#+id/info_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="Name"
android:textSize="18sp"
android:textStyle="normal" />
<TextView
android:layout_below="#+id/info_name"
android:id="#+id/info_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="Test"
android:textSize="18sp"
android:textStyle="normal" />
</RelativeLayout>
</FrameLayout>

I see in your file that you have android:layout_gravity="center" and android:gravity="center" for both textviews. This will make them sit on top of each other. You could try putting some padding on the bottom of the info_name and on the top of the info_text like so:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="350dp" android:layout_height="500dp">
<TextView
android:id="#+id/info_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="60dp"
android:layout_gravity="center"
android:gravity="center"
android:text="#string/test"
android:textSize="18sp"
android:textStyle="normal" />
<TextView
android:id="#+id/info_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="60dp"
android:layout_gravity="center"
android:gravity="center"
android:text="#string/test"
android:textSize="18sp"
android:textStyle="normal" />
</FrameLayout>
While this will add some space it is basically just stretching the textview itself and the textviews will still be overlapping. You could use the linear layout as suggested above but I prefer to use the constraint layout as it makes placing items and providing spacing so much easier. You can right click on the FrameLayout in the component Tree and convert it to ConstraintLayout. Then you can place the info_name and have its constraint handles set to 50 in the constraint widget, Android Studio ConstraintLayout Widget and then hook the other textview to it and set it where you like placing second textview.
Here is the xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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/frameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/info_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/test"
android:textSize="18sp"
android:textStyle="normal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/info_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/test"
android:textSize="18sp"
android:textStyle="normal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/info_name"
app:layout_constraintVertical_bias="0.100000024" />
</androidx.constraintlayout.widget.ConstraintLayout>
You can find out more information in the documentation here.

How to place textviews with large text on left and right?

i am using two textviews to display total balance for this i am using two textviews the first textview has a large text string and second one will have amount that is also a large number. the problem is that when content loads the text of first string is under text of second string. how to fix this?
here is my code any help will be appreciated
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/rlaout_balance_list_item"
android:orientation="horizontal"
android:weightSum="10"
>
<TextView
android:layout_width="0dp"
android:layout_height="?android:attr/listPreferredItemHeight"
android:text="type"
android:id="#+id/txt_balance_list_footer_item_type"
android:gravity="center_vertical"
android:paddingLeft="10dp"
android:textStyle="bold"
android:textColor="#000000"
android:textSize="#dimen/balance_list_item"
android:layout_weight="8"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/txt_balance_list_footer_item_value"
android:text="0.0"
android:paddingLeft="10dp"
android:textColor="#color/balance_list_cash"
android:textStyle="bold"
android:textSize="#dimen/balance_list_item"
android:layout_weight="2"/>
</LinearLayout>

Use Relative layout instead of linear
<RelativeLayout
android:id="#+id/rlaout_balance_list_item"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/txt_balance_list_footer_item_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingLeft="10dp"
android:text="0.0"
android:textColor="#color/balance_list_cash"
android:textSize="#dimen/balance_list_item"
android:textStyle="bold" />
<TextView
android:id="#+id/txt_balance_list_footer_item_type"
android:layout_width="wrap_content"
android:layout_height="?android:attr/listPreferredItemHeight"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#id/txt_balance_list_footer_item_value"
android:gravity="center_vertical"
android:paddingLeft="10dp"
android:textColor="#000000"
android:textSize="#dimen/balance_list_item"
android:textStyle="bold" />
</RelativeLayout>

<LinearLayout
android:id="#+id/rlaout_balance_list_item"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1">
<TextView
android:id="#+id/txt_balance_list_footer_item_type"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:gravity="center_vertical"
android:paddingLeft="10dp"
android:text="type"
android:textColor="#000000"
android:textSize="40dp"
android:textStyle="bold" />
<TextView
android:id="#+id/txt_balance_list_footer_item_value"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.7"
android:paddingLeft="10dp"
android:text="0.0"
android:textSize="40dp"
android:textStyle="bold" />
</LinearLayout>

You will never get the result as you want if you use a layout like this. Please change the android:orientation="horizontal" to android:orientation="vertical"
Otherwise try something like 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="match_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/textView8"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="8"
android:gravity="start"
android:text="TextViecxvvvvvvvvvvvvvvvcvxbcxv
bcxvbcxvvvvvvvvvvvbcxvbcxvbcxvbcxvbcvbcxvbcxvbcxvbcxvbcxvbnbm,vvvvvvvvvvvvvvvvvvvvvvvvvvvcbbbbbbbbbbbbbbbbbbbbbbbvw" />
<TextView
android:id="#+id/textView9"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_weight="2"
android:text="cvxvxvxvxvxvxvxvxvxvxvxvxvxvxvxvxvxvxvxvxvxvxvxvxvxvxvxb" />

How to align Text to right in Text Views

Searched and found many solutions but nothing seems to be working in my case.
I have 2 TextViews, side by side. This is what i am getting in preview.
and I want this
I have written following code, but its not giving me desired output.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:orientation="horizontal">
<TextView
android:id="#+id/tvContactsHeading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:textSize="18sp"
android:paddingRight="10dp"
android:text="Heading "
android:textStyle="bold"
android:fontFamily="sans-serif-regular"
/>
<TextView
android:id="#+id/tvContactsText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textSize="18sp"
android:text="Text "
android:textStyle="normal"
android:fontFamily="sans-serif-regular"
/>
</LinearLayout>
</RelativeLayout>
If i use android:layout_gravity to left or right, it takes the whole text to left or right side.. I want to put both text in center, one starts from right corner and other starts from left corner.
Kindly guide me.

I have checked below XML file by myself ..
just put android:layout_weight="1" for both TextView and make android:layout_width="0dp" for both TextView..
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:fontFamily="sans-serif-regular"
android:gravity="right"
android:paddingRight="10dp"
android:text="this code is working fine for me"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:fontFamily="sans-serif-regular"
android:gravity="left"
android:text="this is right side of the layout"
android:textSize="18sp"
android:textStyle="normal" />
</LinearLayout>
</RelativeLayout>
hope it will help u :)

You have to give match_parent width to LinearLayout.
Use this code.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:orientation="horizontal"
android:weightSum="1">
<TextView
android:id="#+id/tvContactsHeading"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:textSize="18sp"
android:text="HeadingShort"
android:textStyle="bold"
android:paddingRight="10dp"
android:layout_weight="0.5"
android:fontFamily="sans-serif-regular"
/>
<TextView
android:id="#+id/tvContactsText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:textSize="18sp"
android:text="TextShort"
android:textStyle="normal"
android:layout_weight="0.5"
android:fontFamily="sans-serif-regular"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:orientation="horizontal"
android:layout_weight="1.0"
android:layout_marginTop="20dp">
<TextView
android:id="#+id/tvContactsHeading2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:textSize="18sp"
android:text="HeadingLongggg"
android:textStyle="bold"
android:paddingRight="10dp"
android:layout_weight="0.5"
android:fontFamily="sans-serif-regular"
/>
<TextView
android:id="#+id/tvContactsText2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:textSize="18sp"
android:text="HeadingLoggg"
android:textStyle="normal"
android:layout_weight="0.5"
android:fontFamily="sans-serif-regular"
/>
</LinearLayout>
</RelativeLayout>
Your Output is

<TextView
android:id="#+id/tvContactsHeading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:paddingRight="10dp"
android:text="Heading "
android:textStyle="bold"
android:gravity="right|center_vertical|center_horizontal"
android:fontFamily="sans-serif-regular"
/>
<TextView
android:id="#+id/tvContactsText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:text="Text "
android:textStyle="normal"
android:gravity="center|center_vertical|center_horizontal"
android:fontFamily="sans-serif-regular"
/>

You can add android:layout_weight=1 for each text and then change the gravity as you like
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:orientation="horizontal">
<TextView
android:id="#+id/tvContactsHeading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="18sp"
android:paddingRight="10dp"
android:text="Heading "
android:textStyle="bold"
android:fontFamily="sans-serif-regular"
android:layout_weight="1"
/>
<TextView
android:id="#+id/tvContactsText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="18sp"
android:text="Text "
android:textStyle="normal"
android:fontFamily="sans-serif-regular"
android:layout_weight="1"
/>
</LinearLayout>
Also you can do that with relative layout which will be better

Set the layout_widthto match_parentand then apply your desired gravity.
The LinearLayoutdoes not allow you to place items on the right. So you have to set the TextViewto a full width, so you can apply the gravity for it's contents.
The other options is, that you could replace LinearLayoutwith FrameLayout.
The FrameLayoutallows absolute positioning, the LinearLayoutdoes not, which would not require to set the TextViewto a full width.

TextView height stretches in parent with gravity right. why?

I am making chat activity and having issues with right chat bubble. As you can see in the image below. TextView stretches height wise. According to my thinking it should be stretching width wise first then if space is full it should stretch height wise. Please suggest me if it is possible with xml or not. I have seen java code solution but i want to find a solution in xml first.
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="wrap_content"
android:gravity="right"
android:orientation="horizontal"
android:paddingBottom="10dp"
android:paddingTop="10dp">
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_weight="20" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="80"
android:gravity="right">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:background="#drawable/ic_bubble_sent"
android:gravity="right">
<TextView
android:id="#+id/txt_msg_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_toLeftOf="#+id/txt_message_time"
android:layout_toStartOf="#+id/txt_message_time"
android:textSize="16sp"
android:text="Lorem"
android:visibility="visible" />
<TextView
android:id="#+id/txt_message_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/txt_msg_content"
android:layout_marginTop="-9dp"
android:text="00:33"
android:textColor="#color/colorAppGray"
android:textSize="12sp"
android:textStyle="normal" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>

Replace your two TextView with this,
<TextView
android:id="#+id/txt_msg_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:text="Lorem"
android:visibility="visible"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/txt_message_time"
android:layout_toStartOf="#+id/txt_message_time"
android:layout_marginRight="32dp"
android:layout_marginEnd="32dp" />
<TextView
android:id="#+id/txt_message_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="00:33"
android:textSize="12sp"
android:textStyle="normal"
android:layout_alignBaseline="#+id/txt_msg_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
I removed all unnecessary alignments from first TextView.
UPDATE
The overall layout looks like,
<?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"
android:paddingBottom="10dp"
android:paddingTop="10dp">
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_weight="20" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="80"
android:gravity="right">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
>
<TextView
android:id="#+id/txt_msg_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:text="Lorem"
android:visibility="visible"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/txt_message_time"
android:layout_toStartOf="#+id/txt_message_time"
android:layout_marginRight="32dp"
android:layout_marginEnd="32dp" />
<TextView
android:id="#+id/txt_message_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="00:33"
android:textSize="12sp"
android:textStyle="normal"
android:layout_alignBaseline="#+id/txt_msg_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
Note : I removed your background for testing.