I want my textView to be center align to screen and also don't want it to overlap the image. Can you please help me achieve this using constraint.
<android.support.constraint.ConstraintLayout
android:id="#+id/merge"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/iv_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/paa_action_bar_back_margin"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/vc_nav_bar_back" />
<TextView
android:id="#+id/tv_actionbar_page_title"
style="#style/db_title_4.semibold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#{title}"
android:textColor="#color/shade_grease"
android:textSize="16sp"
android:visibility="#{TextUtils.isEmpty(title) ? View.GONE : View.VISIBLE}"
app:layout_constraintBottom_toBottomOf="#+id/iv_close"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/iv_close"
tools:text="#tools:sample/lorem"
tools:visibility="visible" />
</android.support.constraint.ConstraintLayout>
You need to set margins, as for marginTop, marginBottom, marginLeft, marginRight.
For example:
<TextView
android:id="#+id/tv_actionbar_page_title"
style="#style/db_title_4.semibold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#{title}"
android:textColor="#color/shade_grease"
android:textSize="16sp"
android:visibility="#{TextUtils.isEmpty(title) ? View.GONE : View.VISIBLE}"
app:layout_constraintBottom_toBottomOf="#+id/iv_close"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/iv_close"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
tools:text="#tools:sample/lorem"
tools:visibility="visible" />
You can configure the different margin values and make it fit your requirements. Or you can even remove some margins. In the end, it depends on you and your design.
Edit: As a reminder constraint layout works in a relative kind of manner. One object depends on the other, so make sure that your lines/guidelines are correct (in the .xml labeled as constraint_toStartOf, etc.)
This should work. Text will never overlap with the Image and Image will be aligned to the start.
<android.support.constraint.ConstraintLayout android:id="#+id/merge"
android:layout_width="match_parent"
android:layout_height="match_parent"
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">
<ImageView
android:id="#+id/iv_close"
android:layout_width="0dp"
app:layout_constraintWidth_default="wrap"
android:layout_height="wrap_content"
android:layout_margin="#dimen/paa_action_bar_back_margin"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/tv_actionbar_page_title"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/vc_nav_bar_back" />
<TextView
android:id="#+id/tv_actionbar_page_title"
style="#style/db_title_4.semibold"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#{title}"
android:textColor="#color/shade_grease"
android:textSize="16sp"
android:visibility="#{TextUtils.isEmpty(title) ? View.GONE : View.VISIBLE}"
app:layout_constraintBottom_toBottomOf="#+id/iv_close"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/iv_close"
app:layout_constraintTop_toTopOf="#+id/iv_close"
tools:text="#tools:sample/lorem"
tools:visibility="visible" />
</android.support.constraint.ConstraintLayout>
Try to constrain your text view to your image and give it android:layout_width="0dp" so it will only expand according to the space available.
Because his new width is not wrap_content your text view will not overlap the image and that's why he will only expand according to his constraints.
So you need to do something like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageView
android:id="#+id/iv_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher_background"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_actionbar_page_title"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:gravity="center"
android:text="some very long txtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasda"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="#+id/iv_close"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/iv_close"
app:layout_constraintTop_toTopOf="#+id/iv_close" />
</android.support.constraint.ConstraintLayout>
If you want your text view to be exactly the same height as the image view add android:layout_height="0dp", now when you will have a long text it will get scrollable and will not expand vertically.
It will look like this:
Edit according to comment:
You can use your layout like this:
<?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">
<TextView
android:id="#+id/tv_actionbar_page_title"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:gravity="center"
android:text="some very long txtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasda"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/iv_close"
app:layout_constraintVertical_bias="0.0" />
<ImageView
android:id="#+id/iv_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher_background"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
In order to get this look:
Or you can use this 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">
<TextView
android:id="#+id/tv_actionbar_page_title"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:gravity="center"
android:text="some very long txtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasda"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<ImageView
android:id="#+id/iv_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher_background"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
In order to get this look:
Related
I need to create chain with ConstraintLayout.I want the TextView to be attached to the left side, the text is immediately followed by a ImageView, and another ImageView is attached to the right side of the screen. See an example.
If the TextView contains long text, I need the text to go to another line. That is, so that the TextView does not overlap with the image view on the right, but is limited to margin. See an example.
Here is my code:
<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"
tools:ignore="MissingPrefix">
<TextView
android:id="#+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text"
android:textColor="#color/black"
android:textSize="#dimen/text_size_14"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0" />
<ImageView
android:id="#+id/ivFirst"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="16dp"
android:src="#drawable/ic_first"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/ivSecond"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toEndOf="#id/tvTitle"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0" />
<ImageView
android:id="#+id/ivSecond"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_second"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0" />
</androidx.constraintlayout.widget.ConstraintLayout>
If the text is not long, then everything works well, but if the text is long, then it is superimposed on the ImageView and goes beyond the screen. I tried to use chain but nothing worked. Please, help me.
You can achieve this by fixing ivSecond to the end of the parent and then creating a horizontal chain of tvTitle and ivFirst, so long as you apply a packed chain style and a bias of 0 to the chain and use constrainedWidth on the text view.
<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">
<TextView
android:id="#+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constrainedWidth="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/ivFirst"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="hello world"/>
<ImageView
android:id="#+id/ivFirst"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/ivSecond"
app:layout_constraintStart_toEndOf="#id/tvTitle"
app:layout_constraintTop_toTopOf="parent"/>
<ImageView
android:id="#+id/ivSecond"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
When the text is short, the first image is right up against it:
When the text is long, the first image stops at the edge of the second image and the text wraps to another line:
you can do it with layout_constrainedWidth . For this your text view needs to be constrained horizontally . try the layout below i have made few changes in it .
<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"
tools:ignore="MissingPrefix">
<TextView
android:id="#+id/tvTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="14sp"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toStartOf="#+id/ivFirst"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0" />
<ImageView
android:id="#+id/ivFirst"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="16dp"
android:src="#mipmap/ic_launcher"
app:layout_constraintEnd_toStartOf="#id/ivSecond"
app:layout_constraintStart_toEndOf="#id/tvTitle"
app:layout_constraintTop_toTopOf="parent"
/>
<ImageView
android:id="#+id/ivSecond"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
You can use FlexboxLayout to wrap the tvTitle TextView & the ivFirst ImageView; So that it controls to wrap the content of the TextView to the next line and avoid pushing the ivFirst to the right/end.
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.flexbox.FlexboxLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="horizontal"
app:alignContent="center"
app:alignItems="center"
app:flexDirection="row"
app:flexWrap="nowrap"
app:layout_constraintBottom_toBottomOf="#+id/ivSecond"
app:layout_constraintEnd_toStartOf="#+id/ivSecond"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text"
android:textColor="#color/black"
android:textSize="#dimen/text_size_14"
app:layout_flexShrink="10000" />
<ImageView
android:id="#+id/ivFirst"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_first"
android:layout_marginStart="8dp"
android:layout_marginEnd="16dp"/>
</com.google.android.flexbox.FlexboxLayout>
<ImageView
android:id="#+id/ivSecond"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_second"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Also make sure to add the gradle dependency at module level:
implementation 'com.google.android.flexbox:flexbox:3.0.0'
Preview:
Note: I am troubling aligning text within the bounding box not within the parent view.
This happens when I apply background color to the TextView so I can reduce one parent layout just to add background color
XML File
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/item_card"
style="#style/CardViewTheme"
android:layout_width="96dp"
android:layout_height="96dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/item_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginBottom="8dp"
android:src="#drawable/ic_item_icon"
app:layout_constraintBottom_toTopOf="#+id/item_name"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="spread_inside" />
<TextView
android:id="#+id/item_name"
style="#style/BodyMenuText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:gravity="center"
android:text="Flat Tire"
android:textAlignment="center"
app:layout_constraintBottom_toTopOf="#+id/item_price"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/item_icon" />
<TextView
android:id="#+id/item_price"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorDarkestGray"
android:gravity="center"
android:padding="4dp"
android:text="USD 40"
android:textSize="#dimen/app_caption_text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/item_name" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
Here's your solution:
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/item_card"
android:layout_width="96dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
The layout_height of your CardView wasn't high enough and the bottom of the TextView was getting cut off. Setting it to wrap_content does the trick.
I have a layout that exceeds the view boundaries after applying all the margins I'm looking for. I read that applying a chain will make it keep the same ratios while packing all the elements inside the view boundaries.
<?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">
<TextView
android:id="#+id/Texto2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="dsadsadsadsadasd"
app:layout_constraintTop_toBottomOf="#+id/texto1" />
<TextView
android:id="#+id/texto1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="gggggg" />
<ImageView
android:id="#+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/tut_first_img"
app:layout_constraintTop_toBottomOf="#+id/Texto2" />
<Button
android:id="#+id/botao"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ggggggggggggggggggggg"
app:layout_constraintTop_toBottomOf="#+id/img" />
</android.support.constraint.ConstraintLayout>
This is what's happening without margins after all margins applied it will exceed the view screen. How can I compact it while keeping the ratios? Also, how can I center all views in a vertical line?
Here is the code as per your use case, pls. check:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00ff00">
<TextView
android:id="#+id/Texto2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="dsadsadsadsadasd"
app:layout_constraintBottom_toTopOf="#+id/img"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/texto1" />
<TextView
android:id="#+id/texto1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="gggggg"
app:layout_constraintBottom_toTopOf="#+id/Texto2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/common_full_open_on_phone"
app:layout_constraintBottom_toTopOf="#+id/botao"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/Texto2" />
<Button
android:id="#+id/botao"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ggggggggggggggggggggg"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/img" />
</android.support.constraint.ConstraintLayout>
I hope it helps you, looking forward if any further help is required from my end.
Screenshot:
Try this:
<?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"
tools:context=".MainActivity">
<TextView
android:id="#+id/Texto2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="dsadsadsadsadasd"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/texto1" />
<TextView
android:id="#+id/texto1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="gggggg"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/img"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toTopOf="#+id/botao"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/Texto2" />
<Button
android:id="#+id/botao"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="ggggggggggggggggggggg"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>
Just copy paste it and let me know if it works.
I hope that the below mentioned code helps you in achieving your desired 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"
android:background="#android:color/holo_blue_bright"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/Texto2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="dsadsadsadsadasd"
app:layout_constraintBottom_toTopOf="#id/texto1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="spread" />
<TextView
android:id="#+id/texto1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="gggggg"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/Texto2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="#id/img" />
<ImageView
android:id="#+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#android:drawable/sym_def_app_icon"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/texto1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="#id/botao" />
<Button
android:id="#+id/botao"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ggggggggggggggggggggg"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/img"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
Screenshot (of the UI achieved by the above code):
The chain symbol (right most symbol; below the first view in the layout) can be used to toggle and thus apply different chain styles (as per your need), if you aren't familiar with ConstraintLayout.
I'm trying to make a ConstraintLayout to replace a regular layout with Relative and Linear layout but I'm having some troubles to center vertically two views inside a cardview.
The below layout file is my current layout that I want to replace.
<?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:layout_marginEnd="#dimen/main_button_side_margin"
android:layout_marginStart="#dimen/main_button_side_margin"
android:layout_marginTop="#dimen/main_button_top_margin"
android:paddingBottom="2dp"
android:paddingLeft="1dp"
android:paddingRight="1dp"
android:paddingTop="2dp">
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/select_language_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:foreground="?android:attr/selectableItemBackground"
card_view:cardBackgroundColor="#android:color/transparent"
card_view:cardCornerRadius="0dp"
card_view:cardElevation="0dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/language_stroke"
android:minHeight="80dp">
<ImageView
android:id="#+id/img_language"
android:layout_width="#dimen/main_button_size"
android:layout_height="#dimen/main_button_size"
android:layout_centerVertical="true"
android:layout_marginLeft="#dimen/main_button_icon_margin"
android:layout_marginStart="#dimen/main_button_icon_margin"
android:src="#drawable/ic_language_white_48dp"
android:tint="#color/language_color" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/menu_text_margin"
android:layout_marginLeft="#dimen/menu_text_margin"
android:layout_marginRight="#dimen/menu_text_margin"
android:layout_marginStart="#dimen/menu_text_margin"
android:layout_toEndOf="#id/img_language"
android:layout_centerVertical="true"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/main_button_text_title_margin"
android:text="Text" />
<TextView
android:fontFamily="sec-roboto-light"
android:gravity="start"
android:id="#+id/language_desc"
android:text="description"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>
</FrameLayout>
My current result is below:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:id="#+id/select_language_button"
android:layout_width="0dp"
android:layout_height="80dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:foreground="?android:attr/selectableItemBackground"
app:cardBackgroundColor="#android:color/transparent"
app:cardCornerRadius="0dp"
app:cardElevation="0dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/language_stroke">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:text="desc"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="#+id/textView1"
app:layout_constraintTop_toBottomOf="#+id/textView1" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:text="Text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/img_language"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/img_language"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginBottom="8dp"
android:layout_marginLeft="12dp"
android:layout_marginStart="12dp"
android:layout_marginTop="8dp"
android:src="#drawable/ic_language_white_48dp"
android:tint="#color/language_color"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
</android.support.constraint.ConstraintLayout>
The problem is to center textView + textView1 inside cardview. I'm only getting textView centered and textView1 below.
I already tried to "pack vertically" and then "center vertically" both but I'm not getting the result that a LinearLayout (holding the two textsview) achieve when it's android:layout_centerVertical="true" inside the cardview.
I would like to do it with the visual editor instead changing the xml.
I know that the way to achive it is using Chains but I'm not able to do it inside cardview, using layout edit.
Can someone help with some screenshots/screen recorder ?
Yep, you have to use vertical packed chain for your textView and textView1 to center them within your CardView.
To add chain in Layout Editor you should select both textView and textView1, right-click on them and select "Center Vertically"
To change chain style to packed, you should tap on "chain" icon until packed style selected
Build a Responsive UI with ConstraintLayout - Control linear groups with a chain contains a video showing how to add chain in Layout Editor and change its style.
XML layout for your particular case:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:id="#+id/select_language_button"
android:layout_width="0dp"
android:layout_height="80dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:foreground="?android:attr/selectableItemBackground"
app:cardBackgroundColor="#android:color/transparent"
app:cardCornerRadius="0dp"
app:cardElevation="0dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/language_stroke">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:text="desc"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="#+id/textView1"
app:layout_constraintTop_toBottomOf="#+id/textView1" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:text="Text"
app:layout_constraintBottom_toTopOf="#+id/textView"
app:layout_constraintLeft_toRightOf="#+id/img_language"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<ImageView
android:id="#+id/img_language"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginBottom="8dp"
android:layout_marginLeft="12dp"
android:layout_marginStart="12dp"
android:layout_marginTop="8dp"
android:src="#drawable/ic_language_white_48dp"
android:tint="#color/language_color"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
</android.support.constraint.ConstraintLayout>
I'm trying to utilize a ConstraintLayout (version 1.0.2) to set the height of 2 side-by-side views to match the tallest one of them. This serves as a ViewHolder in for a RecyclerView, where each TextView gets an arbitrary length of text...
If I set each to wrap_content, the shorter one will shrink.
If I set both to 0dp (match_contraints), both end up 0 height.
Here's the setup:
<?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_marginLeft="2dp"
android:layout_marginRight="2dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/id1"
android:layout_width="60dp"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#+id/id2"/>
<TextView
android:id="#+id/id2"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/id1"
app:layout_constraintEnd_toEndOf="parent"/>
</android.support.constraint.ConstraintLayout>
I suppose this is a bug, as "0dp" should act more like match_parent than actual 0 dp.
On iOS, by the way, the equivalent Auto Layout rules (of setting views' heights to match top and bottom of parent) produce the expected result.
Of course this is pretty simple using LinearLayout, but this layout plays part in a larger layout, and I'd like to trim the view hierarchy...
Answering, in case anyone is looking out for answer in future.
ConstraintLayout introduced Barrier in v1.1 to achieve one such functionality asked by the OP in the question
The above mentioned functionality can be achieved using below xml:
<?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_marginLeft="2dp"
android:layout_marginRight="2dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/id1"
android:layout_width="60dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="#+id/barrier"
app:layout_constraintVertical_bias="0.0"
android:text="#string/id1_text" />
<TextView
android:id="#+id/id2"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="#+id/id1"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="#+id/barrier"
app:layout_constraintVertical_bias="0.0"
android:text="#string/id2_text" />
<android.support.constraint.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="id1,id2" />
</android.support.constraint.ConstraintLayout>
This might help you.
<android.support.constraint.ConstraintLayout
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin">
<TextView
android:id="#+id/tv_1"
android:layout_width="150dp"
android:layout_height="match_parent"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:background="#color/colorAccent"
android:gravity="center"
android:padding="#dimen/activity_vertical_margin"
android:text="sjdjhshdjhdjhsdgfjhgsdjfgjsdgfjsdgfhgdsjhfghs"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/tv_2"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_2"
android:layout_width="150dp"
android:layout_height="match_parent"
android:background="#color/colorPrimary"
android:gravity="center"
android:padding="#dimen/activity_vertical_margin"
android:text="sjdjhsjhd"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/tv_1"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
This is tricky and slow, but it works.
The point is:
Add additional invisible same layout for measure height. This one has wrap_content height attribute, so it will stretch parent if it is big enough.
Set your visible layout height to 0dp, so it will fill rest of parent.
As you can see the capture below, we have two layouts. Hidden one is wrap_contents
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/view_1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:background="#DDDDDD"
android:text="#android:string/yes"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/view_2"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/view_1_invisible"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#DDDDDD"
android:text="#android:string/yes"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/view_2"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/view_2"
android:layout_width="100dp"
android:layout_height="0dp"
android:background="#DDDDDD"
android:text="#android:string/httpErrorBadUrl"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/view_1"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/view_2_invisible"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:background="#DDDDDD"
android:text="#android:string/httpErrorBadUrl"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/view_1"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
I've managed to do this with LinearLayout
parent to be height = wrap content
children to be height = match parent
children width = 0 and same weight
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="horizontal"
>
<TextView
android:layout_weight="1"
android:id="#+id/id1"
android:layout_height="match_parent"
android:layout_width="0dp"
android:background="#color/green_400"
android:text="11"
android:textSize="50sp"
/>
<TextView
android:layout_weight="1"
android:id="#+id/id2"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:background="#color/cat_grey_lite"
android:text="2222222222"
android:textSize="50sp"
/>
</LinearLayout>
<TextView
android:id="#+id/txt_service_request_id"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/bg_rectangle_blue"
android:gravity="center"
android:padding="8dp"
android:text="#string/service_request_id"
android:textColor="#android:color/white"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/txt_service_request_status"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/txt_service_request_status"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/bg_rectangle_blue"
android:gravity="center"
android:padding="8dp"
android:text="#string/service_request_status"
android:textColor="#android:color/white"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="#+id/txt_service_request_id"
app:layout_constraintEnd_toStartOf="#+id/txt_service_request_desc"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/txt_service_request_id"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/txt_service_request_desc"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/bg_rectangle_blue"
android:gravity="center"
android:padding="8dp"
android:text="#string/service_request_desc"
android:textColor="#android:color/white"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="#+id/txt_service_request_id"
app:layout_constraintEnd_toStartOf="#+id/txt_service_request_cat"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/txt_service_request_status"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/txt_service_request_cat"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/bg_rectangle_blue"
android:gravity="center"
android:padding="8dp"
android:text="#string/service_request_cat"
android:textColor="#android:color/white"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="#+id/txt_service_request_id"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/txt_service_request_desc"
app:layout_constraintTop_toTopOf="parent" />