How to center two text views inside a Constraint Layout constantly spaced? - android

I've this layout for a RecyclerView(standard stuff omitted):
<androidx.constraintlayout.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
<TextView
android:id="#+id/id_tv_movie_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toStartOf="#+id/id_tv_movie_release_year"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/id_tv_movie_release_year"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/id_tv_movie_name" />
</androidx.constraintlayout.ConstraintLayout>
But when I add really long and really short titles I get this:
Colored lines show every row has the exact distance between
startOfParent-startOf1-endOf1-startOf2-endOf2-endOfParent.
How can I separate this textViews into 2 constant width columns and when title is bigger, break it into more lines?
Something like
The Lord of The Rings: 2001
The FellowShip of the Ring
MIB 1997


you can do like 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Title asdf asdf asdg asgasdg asdfg"
android:textAppearance="?android:textAppearanceLarge"
app:layout_constraintEnd_toStartOf="#+id/text"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteY="66dp" />
<TextView
android:id="#+id/text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:text="2015"
android:textAppearance="?android:textAppearanceLarge"
app:layout_constraintBottom_toBottomOf="#+id/textView3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView3"
app:layout_constraintTop_toTopOf="#+id/textView3" />
</android.support.constraint.ConstraintLayout>


The easiest way to split the item so that each TextView consumes a constant width is to specify layout_constraintWidth_percent like this for 50% of the width:
app:layout_constraintWidth_percent="0.5"
To allocate 70% of the width to the title (centered) and 30% to the year (right-justified), do the following:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/id_tv_movie_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:gravity="center"
android:text="A Very, Very, Very, Very, Very, Very, Very, Very, Very Long Movie Title"
android:textAppearance="#style/TextAppearance.AppCompat.Body2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/id_tv_movie_release_year"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.7" />
<TextView
android:id="#+id/id_tv_movie_release_year"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:gravity="end"
android:text="2002"
android:textAppearance="#style/TextAppearance.AppCompat.Body2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.3" />
</androidx.constraintlayout.widget.ConstraintLayout>
Which will display the following:
The same layout can be made with a horizontal chain and layout weights if other than a 50/50 split is needed.


Another easy option that you can use is chains:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Button"
app:layout_constraintEnd_toStartOf="#+id/button2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Related

How to align TextView in two lines between images in ConstraintLayout

I'm doing some design in constraintlayout that is give me a pain. I have an image at the left, two text in a vertical orientation that is align at the end of this image and I have other constraints at right with an image and text.
If I type a long text in the two text that i have in a vertical orientation the text cover the constraint that I have at right of my view. That I want to do is if this text is long can't cover this constraint, have to expand to other line.
This is my code:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/image_slider"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_margin="8dp"
android:scaleType="centerInside"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="#drawable/ic_error" />
<TextView
android:id="#+id/txt_title_animation_native_cart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:textColor="#color/app_primary_medium"
android:textSize="15sp"
app:layout_constraintStart_toEndOf="#+id/image_slider"
app:layout_constraintTop_toTopOf="#+id/image_slider"
tools:text="Title" />
<TextView
android:id="#+id/txt_subtitle_animation_native_cart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:maxLines="2"
android:textColor="#color/app_grey_medium"
android:textSize="12sp"
app:layout_constraintStart_toStartOf="#+id/txt_title_animation_native_cart"
app:layout_constraintTop_toBottomOf="#+id/txt_title_animation_native_cart"
tools:text="Subtitle asfda sdfowei oiwue rpoweiru oiwue twoeiu t oiweu t" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraint_undo_button"
android:layout_width="31dp"
android:layout_height="match_parent"
android:layout_marginEnd="24dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/image_undo"
android:layout_width="14dp"
android:layout_height="16dp"
android:src="#drawable/icon_loop"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="#drawable/icon_loop"
tools:visibility="visible" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:gravity="center"
android:text="Ree"
android:textColor="#color/app_primary_medium"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/image_undo" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

I recommend you use only one parent view and read about Guideline view, Constraints Chains and Barriers. So a possible solution could be the next:
And the 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:padding="16dp">
<!-- In the parent constraint group add your custom background -->
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline_80_percent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.85" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/image_slider"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/ic_launcher_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/txt_title_animation_native_cart"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
app:layout_constraintEnd_toEndOf="#id/guideline_80_percent"
app:layout_constraintStart_toEndOf="#id/image_slider"
app:layout_constraintTop_toTopOf="#id/image_slider"
tools:text="Title" />
<TextView
android:id="#+id/txt_subtitle_animation_native_cart"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:ellipsize="end"
android:maxLines="2"
app:layout_constraintBottom_toBottomOf="#id/image_slider"
app:layout_constraintEnd_toEndOf="#id/txt_title_animation_native_cart"
app:layout_constraintStart_toStartOf="#id/txt_title_animation_native_cart"
app:layout_constraintTop_toBottomOf="#id/txt_title_animation_native_cart"
tools:text="Subtitle asfda sdfowei oiwue rpoweiru oiwue twoeiu t oiweu t adfadf adflkjadfkj adlkjadflk" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/image_undo"
android:layout_width="16dp"
android:layout_height="16dp"
android:src="#drawable/ic_launcher_background"
app:layout_constraintBottom_toTopOf="#id/text_undo"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#id/guideline_80_percent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<TextView
android:id="#+id/text_undo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#id/image_undo"
app:layout_constraintStart_toStartOf="#id/image_undo"
app:layout_constraintTop_toBottomOf="#id/image_undo"
tools:text="Ree" />
</androidx.constraintlayout.widget.ConstraintLayout>

First, you don't need two nested constraint layouts, one is enough.
Then just set the text with endToStartoOf image_undo and set the width to 0dp instead of wrap_content

Just do this:
<TextView
android:id="#+id/txt_subtitle_animation_native_cart"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginEnd="4dp"
android:maxLines="2"
android:textColor="#color/app_grey_medium"
android:textSize="12sp"
app:layout_constraintStart_toStartOf="#+id/txt_title_animation_native_cart"
app:layout_constraintTop_toBottomOf="#+id/txt_title_animation_native_cart"
app:layout_constraintEnd_toStartOf="#+id/constraint_undo_button"
tools:text="Subtitle asfda sdfowei oiwue rpoweiru oiwue twoeiu t oiweu t" />

How to fit listview inside constraint layout which has max height limit?

I want the layout to be visible based on the content till max 80% of the device height.
Listview which is inside the constraint layout needs to fit (with scroll) between the above text and below button.
Problem:
ListView is overlapping with the above and below views.
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/error_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_max="wrap"
app:layout_constraintHeight_percent="0.8"
app:layout_constraintStart_toStartOf="parent">
<Button
android:id="#+id/error_instruction_again"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="12dp"
android:background="#drawable/primary_button"
android:fontFamily="#font/poppins_medium"
android:minWidth="180dp"
android:text="#string/error_try_again"
android:textAlignment="center"
android:textAllCaps="false"
android:textColor="#FFFFFF"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<ListView
android:id="#+id/instruction_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="18dp"
app:layout_constraintBottom_toTopOf="#+id/error_instruction_again"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/instruction_subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="12dp"
android:fontFamily="#font/poppins_medium"
android:text="Please read the instructions below and try again to get accurate results"
android:textAlignment="center"
android:textColor="#FEFEFE"
android:textSize="12sp"
app:layout_constraintBottom_toTopOf="#+id/instruction_list"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/instruction_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="6dp"
android:fontFamily="#font/poppins_bold"
android:text="#string/instruction_title"
android:textAlignment="center"
android:textColor="#FFFFFF"
android:textSize="16sp"
app:layout_constraintBottom_toTopOf="#+id/instruction_subtitle"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Draw TextView1 (instruction_title) at the top of parent, then draw TextView 2 (instruction_subtitle) below TextView1 (top_toBottomOf).
Then draw Button at the bottom of parent.
Finally draw ListView top_toBottomOf TextView 2 (instruction_subtitle) and bottom_toTopOf Button (error_instruction_again) and set height of listview to 0dp to make sure that ListView will expand all height.
<?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:id="#+id/error_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.Guideline
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.2"
android:id="#+id/guideLine"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#color/black"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/guideLine"
app:layout_constraintStart_toStartOf="parent">
<TextView
android:id="#+id/instruction_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="6dp"
android:text="instruction_title"
android:textAlignment="center"
android:textColor="#FFFFFF"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/instruction_subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="12dp"
android:text="Please read the instructions below and try again to get accurate results"
android:textAlignment="center"
android:textColor="#FEFEFE"
android:textSize="12sp"
app:layout_constraintTop_toBottomOf="#+id/instruction_title"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/error_instruction_again"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="12dp"
android:minWidth="180dp"
android:background="#drawable/background_button_highlight"
android:text="error_try_again"
android:textAlignment="center"
android:textAllCaps="false"
android:textColor="#FFFFFF"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<ListView
android:id="#+id/instruction_list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="18dp"
android:background="#android:color/holo_blue_dark"
app:layout_constraintBottom_toTopOf="#+id/error_instruction_again"
app:layout_constraintTop_toBottomOf="#id/instruction_subtitle"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

You have two issues from what I can see, one is the chaining: when you want to order elements with a constraint layout you have to define both the top and bottom relationship for everything (or start and end if you're stacking them horizontally).
For example your instruction_subtitle is missing the top constraint. You can read about chains here. You can add them automatically selecting elements in the component tree of the design view, right clicking them and choosing chains -> create/modify existing chains. For small layouts like this you can simply write them.
Another thing about chaining, if you want your widgets layout to be stretched according to the constraints, you need to use 0dp for the layout_width or layout_height. Change your list layout_height to 0dp.
After that, remove app:layout_constraintHeight_max="wrap" from your contraintlayout
Some notes:
you can use tools:listitem="#layout/your_list_item_layout" to show a preview of your items in the list
why use a listview instead of a recyclerview?
Keep your widget in the same order as they appear on the screen, you have button - list - text - text but what you need is text - text - list - button
Final code:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/error_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.8"
app:layout_constraintStart_toStartOf="parent">
<TextView
android:id="#+id/instruction_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="6dp"
android:fontFamily="#font/poppins_bold"
android:text="#string/instruction_title"
android:textAlignment="center"
android:textColor="#FFFFFF"
android:textSize="16sp"
app:layout_constraintBottom_toTopOf="#+id/instruction_subtitle"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/instruction_subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="12dp"
android:fontFamily="#font/poppins_medium"
android:text="Please read the instructions below and try again to get accurate results"
android:textAlignment="center"
android:textColor="#FEFEFE"
android:textSize="12sp"
app:layout_constraintBottom_toTopOf="#+id/instruction_list"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/instruction_title" />
<ListView
android:id="#+id/instruction_list"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="18dp"
app:layout_constraintBottom_toTopOf="#+id/error_instruction_again"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/instruction_subtitle" />
<Button
android:id="#+id/error_instruction_again"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="12dp"
android:background="#drawable/primary_button"
android:fontFamily="#font/poppins_medium"
android:minWidth="180dp"
android:text="#string/error_try_again"
android:textAlignment="center"
android:textAllCaps="false"
android:textColor="#FFFFFF"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/instruction_list" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Autosize a multiline textview in a ConstraintLayout

I'm trying to get a TextView which could be multiple lines tall and with the minimal width needed large.
I tried a wrap_content width, but the TextView stays on a single line and overlaps parent if the text is too long.
Then, I put the width to 0dp, and layout_constraintWidth_default to wrap.
That's almost perfect, but if the text is too long for a single line, the TextView takes all the remaining space.
Here's what I have and what I'd like to have :
And the xml :
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/clMatchRow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp">
<TextView
android:id="#+id/tvHomeTeam"
style="#style/DefaultTheme.MatchTextview"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center_vertical|end"
android:padding="5dp"
android:text="ThisTime not veryShort"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/tvHomeScore"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_default="wrap" />
<TextView
android:id="#+id/tvHomeScore"
style="#style/DefaultTheme.MatchTextview"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:gravity="center_vertical|end"
android:padding="5dp"
android:text="5"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/guidelineHome"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toEndOf="#id/tvHomeTeam"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Guideline
android:id="#+id/guidelineHome"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.45" />
<android.support.constraint.Guideline
android:id="#+id/guidelineAway"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.55" />
<TextView
android:id="#+id/tvAwayScore"
style="#style/DefaultTheme.MatchTextview"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:gravity="center_vertical|start"
android:padding="5dp"
android:text="2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/tvAwayTeam"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="#id/guidelineAway"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tvAwayTeam"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center_horizontal|start"
android:padding="5dp"
android:text="Short"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toEndOf="#id/tvAwayScore"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_default="wrap" />
</android.support.constraint.ConstraintLayout>

For TextView with id=tvHomeTeam
Set:
android:layout_width="wrap_content"
android:textAlignment="viewEnd"

Constraint Layout to stretch to edge of the screen

here is the image of the pic i want without the space on the rightI have a nested constraint layout.
I am trying to use a drawable as a background for my constraint layout. The only problem is that it does not stretches to the edges of the screen. what I want is to have the drawable on the edge of the screen so that it can be a part of the edge of the screen.
<?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:background="#drawable/img_bg"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageButton
android:id="#+id/imageButton"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginEnd="12dp"
android:translationZ="8dp"
app:layout_constraintBottom_toBottomOf="#+id/innter_constraint"
app:layout_constraintEnd_toEndOf="#id/innter_constraint"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/barrier"
app:srcCompat="#drawable/ic_btn_enter" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="of spa booking"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_termsandconditions">
</TextView>
<TextView
android:id="#+id/tv_termsandconditions"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="102dp"
android:gravity="center"
android:text="#string/terms_and_condititons"
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/imageButton"
app:layout_constraintVertical_bias="0.736" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="innter_constraint"
tools:layout_editor_absoluteY="437dp">
</androidx.constraintlayout.widget.Barrier>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/innter_constraint"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:alpha="0.5"
android:background="#drawable/ic_img_bg"
android:orientation="vertical"
android:padding="40dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.51"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintLeft_toRightOf="#+id/guideline_vertical"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline_vertical"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.499">
<EditText
android:id="#+id/editText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="(+91)Enter the mobile number"
android:inputType="phone"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="#+id/imageView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/imageView" />
<ImageView
android:id="#+id/imageView"
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_gravity="center"
android:src="#drawable/ic_icon_phone"
app:layout_constraintEnd_toStartOf="#+id/editText"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/editText" />
<TextView
android:id="#+id/not_verify_short"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="16dp"
android:text="Hello,"
android:textColor="#color/colorViews"
android:textSize="40sp"
app:layout_constraintBottom_toTopOf="#+id/editText"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="20dp"
app:barrierDirection="bottom"
app:constraint_referenced_ids="editText" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.2" />
</androidx.constraintlayout.widget.ConstraintLayout>
as you can see I really don't want the space that is out there and need to just stick it to the right edge of the screen. How can I make sure that it is scalable in all the phones. I used padding but it goes off the screen and is not a recommended practice. What constraint should I add to fill my space on the right side of the screen with the drawable background.

Create a row of evenly distributed squares with Android Constraintlayout

I'm struggling to create a layout to consists of a chain of evenly distributed squares that grow to fill the available space.
I want the layout in the end to look like this:
The idea is that on phones with a different aspect ratio this squares grow a little bit to use up the extra space.
I managed to create a chain with weights that with 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"
android:id="#+id/activity_main_inference"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView1"
android:layout_width="32dp"
android:layout_height="0dp"
android:text="All"
app:layout_constraintDimensionRatio="w,1:1"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/textView2"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView2"
android:layout_width="32dp"
android:layout_height="0dp"
android:text="2"
app:layout_constraintDimensionRatio="w,1:1"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="#+id/textView1"
app:layout_constraintRight_toLeftOf="#id/textView4"/>
<TextView
android:id="#+id/textView4"
android:layout_width="32dp"
android:layout_height="0dp"
android:text="4"
app:layout_constraintDimensionRatio="w,1:1"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="#+id/textView2"
app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>
This looks like this:
This is fine except that the width of the Textviews is fix to 32dp.
I hoped, that if I set the width also to zero, match constraints would first determine the needed width to cover all the space and then set the height to width to make the views square.
Sadly my layout looks like this:
Is this idea of a layout that I want to achieve possible with ContraintLayout?

Here is one way to do what you are looking for that depends on the proper sizing of the first TextView. There may be some additional refinement (do you need all the ratios set, for instance), but this will give you a start.
XML Layout
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/activity_main_inference"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="0dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:background="#android:color/darker_gray"
android:gravity="center"
android:text="All"
app:layout_constraintDimensionRatio="w,1:1"
app:layout_constraintEnd_toStartOf="#+id/textView2"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="0dp"
android:background="#android:color/darker_gray"
android:gravity="center"
android:text="2"
app:layout_constraintBottom_toBottomOf="#id/textView1"
app:layout_constraintDimensionRatio="w,1:1"
app:layout_constraintEnd_toStartOf="#id/textView4"
app:layout_constraintStart_toEndOf="#+id/textView1"
app:layout_constraintTop_toTopOf="#+id/textView1" />
<TextView
android:id="#+id/textView4"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="0dp"
android:background="#android:color/darker_gray"
android:gravity="center"
android:text="4"
app:layout_constraintBottom_toBottomOf="#+id/textView1"
app:layout_constraintDimensionRatio="w,1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView2"
app:layout_constraintTop_toTopOf="#+id/textView2" />
</android.support.constraint.ConstraintLayout>

I hope there is a more elegant way to do it, but I have been able to create this kind of design with the help of guidelines :
<?xml version="1.0" encoding="utf-8"?>
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="All"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.50" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="parent" />

Categories

Resources