Develop Reference

TextView break long text into new lines

I have a small TextView inside CardView like design. It used with as Firebase Recycler View to display content. Here its code:
<?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:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="8dp"
android:background="#drawable/main_design">
<ImageView
android:id="#+id/rycImage"
android:layout_width="100dp"
android:layout_height="180dp"
android:layout_marginStart="4dp"
android:layout_marginLeft="4dp"
android:layout_marginTop="4dp"
android:layout_marginBottom="4dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/rycName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:ellipsize="end"
android:justificationMode="inter_word"
android:lines="1"
android:text="Name"
android:textColor="#color/white"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/rycImage"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/rycDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="8dp"
android:ellipsize="end"
android:justificationMode="inter_word"
android:inputType="textMultiLine"
android:maxLines="4"
android:lines="4"
android:text="Desc"
android:textColor="#color/white"
android:textSize="14sp"
app:layout_constraintBottom_toTopOf="#+id/rycPhone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/rycImage"
app:layout_constraintTop_toBottomOf="#+id/rycName" />
<TextView
android:id="#+id/rycMail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="8dp"
android:text="e-mail"
android:textColor="#color/white"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/rycImage" />
<TextView
android:id="#+id/rycPhone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:text="phone"
android:textColor="#color/white"
android:textSize="14sp"
app:layout_constraintBottom_toTopOf="#+id/rycMail"
app:layout_constraintEnd_toEndOf="#+id/rycMail"
app:layout_constraintStart_toStartOf="#+id/rycMail" />
</androidx.constraintlayout.widget.ConstraintLayout>
TextView called rycDesc is a long text and i want it to break into new line if it reached its margin left and right. Right now its going beyond its constrains and over ImageView. How can i make it break line after it reaches his contrains?

<TextView
android:id="#+id/rycDesc"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="8dp"
android:ellipsize="end"
android:justificationMode="inter_word"
android:inputType="textMultiLine"
android:maxLines="2"
android:text="Desc"
android:textColor="#color/white"
android:textSize="14sp"
app:layout_constraintBottom_toTopOf="#+id/rycPhone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/rycImage"
app:layout_constraintTop_toBottomOf="#+id/rycName" />

Since rycDesc's left and right edges are constrained you can give it a width of 0dp so that these constraints are honored instead of wrap_content
Just change:
<TextView
android:id="#+id/rycDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
to
<TextView
android:id="#+id/rycDesc"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
This is how it looks now:
If you are using a newer version of ConstraintLayout you can keep wrap_content and add this to rycDesc:
app:layout_constrainedWidth="true"

replace with
<TextView
android:id="#+id/rycDesc"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:ellipsize="end"
android:maxLines="4"
android:text="Desc"
android:textColor="#color/white"
android:textSize="14sp"
app:layout_constraintBottom_toTopOf="#+id/rycPhone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/rycImage"
app:layout_constraintTop_toBottomOf="#+id/rycName" />

you can use 2 LinearLayout(Horizental) instead ,one for your picture and one for all your text

Use this line inside Your TextView in xml
android:singleLine="false"

Avoid layout element to move the second element out of the layout when is too big

I have two TextViews in the same row, next to each other. The first TextView may be so big that can be bigger than the width of the screen. So when this happens I need the second one to be visible and have the first one with ellipsize = true and show the 3 dots. The second one has more or less the same size always, and it should be always visible.
This is what I have now:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/horizontalItemTitle"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/horizontalItemDescriptionSecond"
app:layout_constraintStart_toStartOf="parent">
<TextView
android:id="#+id/horizontalItemDescription2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/spacing_x_small"
android:maxLines="1"
android:ellipsize="end"
android:textColor="#color/item_subtitle"
android:textSize="#dimen/text_size_caption"
tools:text="10 songs"
style="#style/AppTheme.Text.Body_2" />
<TextView
android:id="#+id/horizontalItemDescriptionSecond2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/spacing_x_small"
android:maxLines="1"
android:layout_toEndOf="#+id/horizontalItemDescription2"
android:textColor="#color/item_subtitle"
android:textSize="#dimen/text_size_caption"
android:visibility="gone"
android:gravity="start"
android:layout_marginLeft="5dp"
android:layout_marginStart="5dp"
tools:text=", 45 min"
tools:visibility="visible"
style="#style/AppTheme.Text.Body_2" />
</RelativeLayout>
I also tried with ConstraintLayout and LinearLayout but I couldn't make it work as I want.
EDIT
Here 2 images of how it have to be. Please focus on the last line
1.- When the first textview is small.
the second text view is just next to the first one.
2.- When the first textview is large.
The first text view end with ... but doesn't move the second text view out of the layout.

I have updated the layout. Try with this layout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1"
app:layout_constraintTop_toBottomOf="#+id/horizontalItemTitle"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/horizontalItemDescriptionSecond"
app:layout_constraintStart_toStartOf="parent">
<TextView
android:id="#+id/horizontalItemDescription2"
android:layout_width="0dp"
android:layout_weight="0.7"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/spacing_x_small"
android:maxLines="1"
android:ellipsize="end"
android:textColor="#color/item_subtitle"
android:textSize="#dimen/text_size_caption"
tools:text="10 songs"
style="#style/AppTheme.Text.Body_2" />
<TextView
android:id="#+id/horizontalItemDescriptionSecond2"
android:layout_width="0dp"
android:layout_weight="0.3"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/spacing_x_small"
android:maxLines="1"
android:textColor="#color/item_subtitle"
android:textSize="#dimen/text_size_caption"
android:visibility="gone"
android:gravity="start"
android:layout_marginLeft="5dp"
android:layout_marginStart="5dp"
tools:text=", 45 min"
tools:visibility="visible"
style="#style/AppTheme.Text.Body_2" />
</RelativeLayout>

You can achieve this behaviour working with the constraint layout:
<androidx.constraintlayout.widget.ConstraintLayout
android:background="#color/red"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
app:layout_constraintTop_toTopOf="parent"
android:id="#+id/test1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/test2"
android:background="#color/green"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constrainedWidth="true"
android:maxLines="1"
android:ellipsize="end"
android:text="10 songs"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintHorizontal_chainStyle="packed" />
<TextView
android:background="#color/primaryLight"
android:id="#+id/test2"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#+id/test1"
app:layout_constraintEnd_toEndOf="parent"
android:maxLines="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=", 45 min" />
</androidx.constraintlayout.widget.ConstraintLayout>

You can do this by using android:layout_weight attribute and by setting android:maxWidth according to big text.
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="horizontal">
<TextView
android:id="#+id/horizontalItemDescription2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:maxWidth="100dp"
android:layout_marginTop="#dimen/spacing_x_small"
android:maxLines="1"
android:ellipsize="end"
android:textColor="#color/item_subtitle"
android:textSize="#dimen/text_size_caption"
tools:text="10 songs"
style="#style/AppTheme.Text.Body_2" />
<TextView
android:id="#+id/horizontalItemDescriptionSecond2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="#dimen/spacing_x_small"
android:maxLines="1"
android:textColor="#color/item_subtitle"
android:textSize="#dimen/text_size_caption"
android:visibility="visible"
android:gravity="start"
android:layout_marginLeft="5dp"
android:layout_marginStart="5dp"
tools:text=", 45 min"
tools:visibility="visible"
style="#style/AppTheme.Text.Body_2" />

You can add a property maxWidth and provide the equal max width in both TextViews like this.
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxWidth="#dimen/_100sdp"
android:maxLines="1"
android:ellipsize="end"
/>
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxWidth="#dimen/_100sdp"
android:maxLines="1"
android:ellipsize="end"
/>

How to proper align three TextViews horizontally with ConstraintLayout

I'm trying to align three TextViews horizontally (as the title may suggest), but even after chaining they together and using app:layout_constrainedWidth="true" they're still being pushed out of the screen, strangely only by the left side when the middle or the last one grows large. Notice that I'm setting the android:maxLines="1" and android:ellipsize="end" and aligning they at the start of the screen, not sure if it matters though.
I also tried to limit their sizes, but on the case where there are two small texts and a very large one the large one will be ellipsized even when the layout still have some space left.
Sample layout:
<?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="#android:color/white"
android:padding="22dp">
<TextView
android:id="#+id/greenTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#android:color/holo_green_dark"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toStartOf="#id/blueTextView"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="TextView" />
<TextView
android:id="#+id/blueTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#android:color/holo_blue_dark"
app:layout_constrainedWidth="true"
app:layout_constraintBaseline_toBaselineOf="#id/greenTextView"
app:layout_constraintEnd_toStartOf="#id/orangetextView"
app:layout_constraintStart_toEndOf="#id/greenTextView"
tools:text="Another TextView " />
<TextView
android:id="#+id/orangetextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#android:color/holo_orange_dark"
app:layout_constrainedWidth="true"
app:layout_constraintBaseline_toBaselineOf="#id/blueTextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/blueTextView"
tools:text="Another TextView" />
</android.support.constraint.ConstraintLayout>
These are some cases using the sample layout
None of the TextViews are ellipsizing:
The first TextView is ellipsizing:
The last TextView don't ellipsize and pushes the other ones out of the screen:
These are some possible solutions that aren't covering all of the cases
Using android:maxWidth="90dp" to prevent the TextView to grow, but also limiting the text unnecessarily:
Using android:layout_width="0dp" to enable "match_constraint" is not a optimal solution as well, since the layout will reserve a third of the display width for each TextView, even if the text is smaller than that:

Use a Flexbox
<com.google.android.flexbox.FlexboxLayout
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"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:alignContent="flex_start"
app:alignItems="flex_start"
app:flexWrap="nowrap"
app:dividerDrawable="#drawable/ic_divider"
app:showDivider="middle">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"
android:textSize="18sp"
app:layout_minWidth="50dp"
android:textColor="#android:color/holo_green_dark"
android:ellipsize="end"
android:text="Text View"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"
android:ellipsize="end"
android:textColor="#android:color/holo_blue_dark"
android:textSize="18sp"
app:layout_minWidth="50dp"
android:text="Another TextView"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"
android:textColor="#android:color/holo_orange_dark"
android:textSize="18sp"
app:layout_minWidth="50dp"
android:ellipsize="end"
android:text="Another TextView"/>
</com.google.android.flexbox.FlexboxLayout>
Output of this layout:

You can use linear layout instead. When the text grows it will ellipsized end with ...
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:padding="22dp">
<TextView
android:id="#+id/greenTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#android:color/holo_green_dark"
tools:text="TextView" />
<TextView
android:id="#+id/blueTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#android:color/holo_blue_dark"
tools:text="Another TextView " />
<TextView
android:id="#+id/orangetextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#android:color/holo_orange_dark"
tools:text="Another TextView" />
</LinearLayout>
OUTPUT:

Can you try this one (just make sure to replace androidx.constraintlayout.widget.ConstraintLayout with android.support.constraint.ConstraintLayout) :
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:padding="22dp">
<TextView
android:id="#+id/greenTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#android:color/holo_green_dark"
app:layout_constraintEnd_toStartOf="#id/blueTextView"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="First Very Long Text 123456789" />
<TextView
android:id="#+id/blueTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#android:color/holo_blue_dark"
app:layout_constraintBaseline_toBaselineOf="#id/greenTextView"
app:layout_constraintEnd_toStartOf="#id/orangetextView"
app:layout_constraintStart_toEndOf="#id/greenTextView"
app:layout_constraintTop_toTopOf="parent"
tools:text="Second Very Long Text 123456789" />
<TextView
android:id="#+id/orangetextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#android:color/holo_orange_dark"
app:layout_constraintBaseline_toBaselineOf="#id/blueTextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/blueTextView"
tools:text="Third Very Long Text 123456789" />
</androidx.constraintlayout.widget.ConstraintLayout>
Ellipsize will work as expected.

ConstraintLayout: Is it possible to make TextView to wrap the text when gets too long?

I want the TextView to be able to warp its text when it gets too long.
I am using chain method for the layout. But didn't get what I want.
This is what it looks like:
This is what I want to achieve:
<?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:layout_gravity="center_vertical"
android:background="#drawable/bg_trans_bg_light_top_bdr"
android:orientation="horizontal"
tools:showIn="#layout/fragm_edit_split">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/iv_user_photo"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_margin="16dp"
android:src="#drawable/homer"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
app:layout_constraintVertical_weight="1"
android:id="#+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:text="This is a very long long long long name"
android:textColor="#000"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="#+id/iv_user_photo"
app:layout_constraintEnd_toStartOf="#+id/v_space"
app:layout_constraintStart_toEndOf="#+id/iv_user_photo"
app:layout_constraintTop_toTopOf="#+id/iv_user_photo" />
<android.support.v4.widget.Space
android:id="#+id/v_space"
android:layout_width="0dp"
android:layout_height="1dp"
app:layout_constraintEnd_toStartOf="#+id/tv_dollar_sign"
app:layout_constraintStart_toEndOf="#+id/tv_name" />
<TextView
android:id="#+id/tv_dollar_sign"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$"
android:textColor="#color/text_light"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="#+id/et_amount"
app:layout_constraintEnd_toStartOf="#+id/et_amount"
app:layout_constraintStart_toEndOf="#id/v_space"
app:layout_constraintTop_toTopOf="#+id/et_amount" />
<EditText
android:id="#+id/et_amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginTop="16dp"
android:background="#null"
android:focusable="true"
android:focusableInTouchMode="true"
android:gravity="center"
android:inputType="number"
android:textColor="#000"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/tv_dollar_sign"
app:layout_constraintTop_toTopOf="parent"
tools:text="20.00" />
</android.support.constraint.ConstraintLayout>
By using RelativeLayout there is no issue. But I prefer ConstraintLayout.

OK. Found out after 10 minutes. Just set the width to 0dp for the TextView..

Add these attributes to your TextView:
<TextView
app:layout_constraintVertical_weight="1"
android:id="#+id/tv_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:text="This is a very long long long long name"
android:textColor="#000"
android:textSize="12sp"
android:ellipsize="end"
android:lines="1"
app:layout_constraintBottom_toBottomOf="#+id/iv_user_photo"
app:layout_constraintEnd_toStartOf="#+id/tv_dollar_sign"
app:layout_constraintStart_toEndOf="#+id/iv_user_photo"
app:layout_constraintTop_toTopOf="#+id/iv_user_photo" />

android:lines="1"
android:ellipsize="end"
add above line in the textView .should do the trick
you can also make use of android:maxEms="10" but layout_width should be wrap_content in order to work

How to update constraints after scale a view in Android ConstraintLayout

Update:
I just used setTextScaleX instead of setScalex to scale the textView and it worked as what I expected this time.
Just like the photos above.
I use ConstraintLayout to keep the space between "$" and center textView and "00".
When I set 5555 to the center textView, it became wider, but I want to keep its original size.
So I scaled the "5555" part, I found the constraints did not update as well.
Can anybody give me some advice?
Thanks a lot!
My layout xml is as following.
<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"
tools:context="com.echo.tipcalculator.fragments.FeeUnitFragment">
<TextView
android:id="#+id/fee_title"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:text="title"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="16dp" />
<TextView
android:id="#+id/fee_unit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$"
android:textSize="20dp"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/fee_title"
app:layout_constraintLeft_toLeftOf="#+id/fee_title" />
<TextView
android:id="#+id/fee_main"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:clickable="true"
android:ellipsize="end"
android:gravity="top"
android:includeFontPadding="false"
android:maxLines="1"
android:text="0"
android:textSize="80dp"
app:layout_constraintLeft_toRightOf="#+id/fee_unit"
app:layout_constraintTop_toTopOf="#+id/fee_unit" />
<TextView
android:id="#+id/fee_decimal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="00"
android:textSize="20dp"
app:layout_constraintTop_toTopOf="#+id/fee_main"
app:layout_constraintLeft_toRightOf="#+id/fee_main"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp" />
</android.support.constraint.ConstraintLayout>