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" />
Related
I need to achieve the following layout:
The title 'Trouble in paradise should be able to expand in height but it shouldn't push 'Ma 21januari' outside of the bounds.
This is my layout at the moment:
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/wrapper_titles"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#id/image_episode"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/image_episode"
app:layout_constraintTop_toTopOf="#id/image_episode"
>
<TextView
android:id="#+id/subtitle_episode"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="bottom"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toTopOf="#+id/title_episode"
tools:text="Ma 21 januari"
style="#style/Text_Episode_Subtitle"
/>
<TextView
android:id="#+id/title_episode"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:text="Trouble in paradise"
style="#style/Text_Episode_Title"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
How can I make title_episode expand to the full height but with subtitle_episode still fixed to the top?
I think the cleanest solution would be to put both TextViews in a packed vertical chain with bias set to 1 so that they stick to the bottom. This means that you need to add top constraints for these TextViews which will also help to prevent them from getting pushed outside. Since the title_episode's height is set to wrap_content, it's also important to set the app:layout_constrainedHeight="true" attribute to enforce its constraints as it expands.
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/wrapper_titles"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#id/image_episode"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/image_episode"
app:layout_constraintTop_toTopOf="#id/image_episode"
>
<TextView
android:id="#+id/subtitle_episode"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="bottom"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintVertical_bias="1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toTopOf="#id/title_episode"
app:layout_constraintTop_toTopOf="parent"
tools:text="Ma 21 januari"
style="#style/Text_Episode_Subtitle"
/>
<TextView
android:id="#+id/title_episode"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/subtitle_episode"
tools:text="Trouble in paradise"
style="#style/Text_Episode_Title"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
I've provided a basic structure meeting your requirements, customize according to your need:
<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="wrap_content">
<ImageView
android:id="#+id/image_thumbnail"
android:layout_width="180dp"
android:layout_height="150dp"
android:scaleType="fitXY"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="#tools:sample/avatars" />
<TextView
android:id="#+id/subtitle_episode"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_marginEnd="15dp"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="#+id/image_thumbnail"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/image_thumbnail"
app:layout_constraintTop_toTopOf="#+id/image_thumbnail"
tools:text="Ma 21 januari" />
<TextView
android:id="#+id/title_episode"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="15dp"
android:textColor="#android:color/black"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/image_thumbnail"
app:layout_constraintTop_toBottomOf="#+id/subtitle_episode"
tools:text="Trouble in paradise Trouble in paradise Trouble in paradise" />
</android.support.constraint.ConstraintLayout>
Here, take a look:
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#+id/image_episode"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/image_episode"
app:layout_constraintTop_toTopOf="#id/image_episode">
<TextView
android:id="#+id/subtitle_episode"
style="#style/Text_Episode_Subtitle"
android:layout_width="0dp"
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"
tools:text="Ma 21 januari" />
<TextView
android:id="#+id/title_episode"
style="#style/Text_Episode_Title"
android:layout_width="0dp"
android:layout_height="0dp"
android:ellipsize="end"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/subtitle_episode"
tools:text="Trouble in paradise Trouble in paradise" />
</android.support.constraint.ConstraintLayout>
I'm trying to give two Textviews the correct position in the Constraintlayout in my layout file. The problem is the textviews needs to be scalable using app: autoSizeTextType="uniform". To make them scale I also have to match_parent on the layout_width and layout_height. This makes the two textviews overlap. How can I accomplish the desired result?
Current XML file:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="1"
android:textColor="#4689C8"
android:textStyle="bold"
app:autoSizeTextType="uniform"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.362" />
<TextView
android:id="#+id/message"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="ABC"
android:textColor="#4689C8"
android:textStyle="bold"
app:autoSizeTextType="uniform"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>
Actual result:
Both textviews scales, but overlaps, and are placed in the center of the constraintlayout.
The current state:
The expected result:
One textview centered in the middle. One textview aligned at the bottom. Both textviews scales with the constraintlayout.
Expected result: (3 different custom compounds in an activity)
you have to give top and bottom proper constraint
<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="match_parent"
android:background="#color/colorPrimary"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="1"
android:textColor="#4689C8"
android:textStyle="bold"
app:autoSizeTextType="uniform"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#+id/message"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/message"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="ABC"
android:textColor="#4689C8"
android:textStyle="bold"
app:autoSizeTextType="uniform"
app:layout_constrainedHeight="true"
app:layout_constraintTop_toBottomOf="#+id/title"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
It might be helpful
<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:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="24dp"
android:gravity="center"
android:text="1"
android:textSize="50sp"
android:textColor="#4689C8"
android:textStyle="bold"
app:autoSizeTextType="uniform"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:gravity="center"
android:text="ABC"
android:textColor="#4689C8"
android:textSize="28sp"
android:textStyle="bold"
app:autoSizeTextType="uniform"
app:layout_constrainedHeight="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title" />
</android.support.constraint.ConstraintLayout>
Textview size we have to add
Modify the TextView to have height and width of 0dp, this will match parent constraint view, add in a constraint for the views in relation to each other and that should give you as you asked for
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="1"
android:textColor="#4689C8"
android:textStyle="bold"
app:autoSizeTextType="uniform"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#id/message"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/message"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="ABC"
android:textColor="#4689C8"
android:textStyle="bold"
app:autoSizeTextType="uniform"
app:layout_constrainedHeight="true"
app:layout_constraintTop_toBottomOf="#id/title"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
I have a layout, which supports RTL. It looks fine in preview in Android studio and on device in default locale, but is broken in Arabic locale. There is an image on start, button on end and two texts in between.
Here's how it is designed and looks like in preview:
For some reason both button and image are placed at the end in Arabic locale. So, texts have no room and are not displayed, but view height is much larger than expected.
Here's how it looks like in LayoutInspector
What can be wrong with it?
I use databinding, if it does matter. This layout is placed in separate file and included with include tag
Here's the layout:
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent" android:layout_height="match_parent"
android:padding="#dimen/spacing_med"
>
<!-- Avatar image -->
<ImageView
android:id="#+id/avatar"
android:layout_width="32dp"
android:layout_height="32dp"
tools:layout_constraintStart_toStartOf="parent"
tools:layout_constraintTop_toTopOf="parent"
/>
<!-- Call button -->
<Button android:layout_width="wrap_content" android:layout_height="32dp"
android:id="#+id/call"
android:text="#string/call"
android:drawableStart="#drawable/ic_phone_pink"
android:paddingLeft="#dimen/spacing_med"
android:paddingRight="#dimen/spacing_med"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:minWidth="70dp"
/>
<!-- Name-->
<TextView
android:id="#+id/name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/spacing_med"
android:layout_marginEnd="#dimen/spacing_med"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toStartOf="#id/call"
app:layout_constraintStart_toEndOf="#id/avatar"
/>
<!-- Phone-->
<TextView
android:id="#+id/phone"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/spacing_med"
android:layout_marginEnd="#dimen/spacing_med"
app:layout_constraintTop_toBottomOf="#id/name"
app:layout_constraintEnd_toStartOf="#id/call"
app:layout_constraintStart_toEndOf="#id/avatar"
/>
</android.support.constraint.ConstraintLayout>
I think that you had some missing constraints and you had some fixed size on your views.
What I did was to create a horizontal chain to all 3 views, make them the same height (exept the textViews with half the height of the other views) and it all worked out fine, here is what I did :
<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">
<ImageView
android:id="#+id/avatar"
android:layout_width="0dp"
android:layout_height="wrap_content"
tools:layout_constraintStart_toStartOf="parent"
tools:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/textView4"
app:layout_constraintTop_toTopOf="#+id/button"
tools:src="#tools:sample/avatars[2]" />
<TextView
android:id="#+id/textView4"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="TextView"
android:textDirection="rtl"
app:layout_constraintBottom_toTopOf="#+id/textView8"
app:layout_constraintEnd_toStartOf="#+id/imageView"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintTop_toTopOf="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/textView4"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView8"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="TextView"
android:textDirection="rtl"
app:layout_constraintBottom_toBottomOf="#+id/imageView"
app:layout_constraintEnd_toEndOf="#+id/textView4"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/textView4"
app:layout_constraintTop_toBottomOf="#+id/textView4" /
And here is how the row looks:
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>
I'm trying to create a two-row ConstraintLayout, each row has two views. The problem with what I have now is the left views is overlapping the right views, as you can see in the screenshot:
This is the code I'm using:
<?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"
android:layout_gravity="center"
android:padding="5dp"
android:orientation="horizontal">
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintTop_toTopOf="parent"
/>
<ImageView
android:id="#+id/download"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:paddingStart="5dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
/>
<TextView
android:id="#+id/date"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="13sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title"
android:layout_marginTop="4dp"
/>
<TextView
android:id="#+id/duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="13sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title"
android:layout_marginTop="4dp"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
I would like the left views (title, date) to stop where the download image and duration start. I haven't worked with ConstraintLayouts much so it might be something easy.
There are a lot of different ways to achieve this, one way would be to constraint your text into the image and give them the same height.
They won't overlap each other if you will do something like this :
In your example, you used android:layout_width="match_parent" on the text so it was expanded throw all of the row and overlapped your other view.You should use android:layout_width="0dp" (it is match_constraint) so your views won't overlap each other.
Here is an example of a layout that looks like the row you want to achieve:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="loot at this text that wont everlap the image"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imageView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
app:layout_constraintBottom_toBottomOf="#+id/textView4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView4"
tools:src="#tools:sample/avatars[1]" />
</androidx.constraintlayout.widget.ConstraintLayout>