Evenly spread views inside a cardview Horizontaly - android

I need help, I have ConstraintLayout and a few child views, I also have a card view which is a child view of the ConstraintLayout, I need to spread it evenly 3 views on the card view using only one ConstraintLayout to keep the flat hierarchy
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/black"
android:padding="#dimen/padding_normal">
<com.google.android.material.imageview.ShapeableImageView
android:id="#+id/profile_image"
android:layout_width="84dp"
android:layout_height="84dp"
android:backgroundTint="#color/black"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_person" />
<TextView
android:id="#+id/full_name"
style="#style/Material.Headline6.Light"
android:layout_width="wrap_content"
android:layout_height="#dimen/none"
app:layout_constraintStart_toEndOf="#id/profile_image"
app:layout_constraintTop_toTopOf="parent"
tools:text="Roger Mphile Nkosi" />
<TextView
android:id="#+id/job_title"
style="#style/Material.Subtitle1.Light"
android:layout_width="wrap_content"
android:layout_height="#dimen/none"
app:layout_constraintStart_toEndOf="#id/profile_image"
app:layout_constraintTop_toBottomOf="#id/full_name"
tools:text="Android Developer" />
<androidx.cardview.widget.CardView
app:layout_constraintTop_toBottomOf="#id/job_title"
app:layout_constraintStart_toEndOf="#id/profile_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/years_title"
style="#style/Material.Caption.Light"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toStartOf="#+id/coffees_title"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toEndOf="#+id/profile_image"
app:layout_constraintTop_toBottomOf="#id/job_title"
tools:text="Years" />
<TextView
android:id="#+id/coffees_title"
style="#style/Material.Caption.Light"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toStartOf="#+id/bugs_title"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toEndOf="#+id/years_title"
app:layout_constraintTop_toBottomOf="#id/job_title"
app:layout_constraintVertical_chainStyle="packed"
tools:text="Coffees" />
<TextView
android:id="#+id/bugs_title"
style="#style/Material.Caption.Light"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/coffees_title"
app:layout_constraintTop_toBottomOf="#id/job_title"
tools:text="Bugs" />
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
I have tried chain styles but no winning. Is it possible to achieve what I want to achieve using only one ConstraintLayout?


The main problem here is with your xml structure of the 3 views which are direct children of the CardView instead of a ConstraintLayout so any constraints attributes you apply there cannot work because the direct parent is the CardView.
Therefore your structure should look like this:
<androidx.cardview.widget.CardView>
<androidx.constraintlayout.widget.ConstraintLayout>
<TextView android:id="#+id/years_title"/>
<TextView android:id="#+id/coffees_title" />
<TextView android:id="#+id/bugs_title"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
Now to evenly spread the above 3 views in the ConstraintLayout horizontally you have to apply for each TextView the attribute app:layout_constraintHorizontal_weight="1", the android:layout_width="0dp" and link every TextView child with its neighbours eg. for the second TextView will be: app:layout_constraintStart_toEndOf="#+id/years_title" , app:layout_constraintEnd_toStartOf="#+id/bugs_title".
So your new structure of the CardView should look like the below:
<androidx.cardview.widget.CardView
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/job_title"
app:layout_constraintStart_toEndOf="#id/profile_image"
app:layout_constraintEnd_toEndOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white">
<TextView
android:id="#+id/years_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:background="#android:color/holo_blue_dark"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#+id/coffees_title"
app:layout_constraintHorizontal_weight="1"
tools:text="Years" />
<TextView
android:id="#+id/coffees_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:background="#android:color/holo_orange_dark"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#+id/years_title"
app:layout_constraintEnd_toStartOf="#+id/bugs_title"
app:layout_constraintHorizontal_weight="1"
tools:text="Coffees" />
<TextView
android:id="#+id/bugs_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:background="#android:color/holo_green_dark"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#+id/coffees_title"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_weight="1"
tools:text="Bugs" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
Result:
Or in case you want the CardView to wrap to its content it should look like this:
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/job_title"
app:layout_constraintStart_toEndOf="#id/profile_image">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/years_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:background="#android:color/holo_blue_dark"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#+id/coffees_title"
app:layout_constraintHorizontal_weight="1"
tools:text="Years" />
<TextView
android:id="#+id/coffees_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:background="#android:color/holo_orange_dark"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#+id/years_title"
app:layout_constraintEnd_toStartOf="#+id/bugs_title"
app:layout_constraintHorizontal_weight="1"
tools:text="Coffees" />
<TextView
android:id="#+id/bugs_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:background="#android:color/holo_green_dark"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#+id/coffees_title"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_weight="1"
tools:text="Bugs" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
Result:

Related

Guideline does not shift based on change in Views dimensions inside barrier in ConstraintLayout

I have my root layout as ConstraintLayout in my activity. I have added one Guideline which is Percentage based and it is about 35 % from top. The Guideline divides the Layout in 2 section (35% top & 65% bottom). In top 25% section I have 2 TextViews. The textview text is dynamically changing. One Barrier is added in Layout which has my Guideline added in it. Top constraint of Image inside the below Section 65% is given to bottom of Barrier & bottom constraint of textview inside the 25% section is given to top of Barrier. When my Text inside above textview is increased, it is not shifting the Guideline & violating Barrier working. How it can be done ?
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/clIntroMainContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/intro_screen_background">
<androidx.constraintlayout.widget.Barrier
android:id="#+id/mybarrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="imageView,textView4,textView3,guideline2"
tools:layout_editor_absoluteY="731dp" />
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="fitXY"
android:visibility="visible"
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.0"
app:srcCompat="#drawable/intro_background_cross" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="50dp"
android:layout_height="50dp"
app:layout_constraintBottom_toBottomOf="#+id/imageView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.50"
app:srcCompat="#mipmap/ic_launcher" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="3dp"
android:gravity="center"
android:text="#string/auto_expense_title"
android:textColor="#color/white"
android:textSize="#dimen/ExtraLargeText"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="#+id/imageView2"
app:layout_constraintStart_toStartOf="#+id/imageView2"
app:layout_constraintTop_toBottomOf="#+id/imageView2" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="3dp"
android:gravity="center"
android:text="#string/auto_expense_info"
android:textColor="#color/white"
android:textSize="#dimen/MedText"
app:layout_constraintBottom_toTopOf="#+id/mybarrier"
app:layout_constraintEnd_toEndOf="#+id/textView3"
app:layout_constraintStart_toStartOf="#+id/textView3"
app:layout_constraintTop_toBottomOf="#+id/textView3" />
<ImageView
android:id="#+id/iv2"
android:layout_width="wrap_content"
android:layout_height="330dp"
android:layout_gravity="center"
android:adjustViewBounds="true"
app:layout_constraintBottom_toTopOf="#+id/mybarrier"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline2"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="#drawable/phone_blue_black_final_intro" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.35" />
</androidx.constraintlayout.widget.ConstraintLayout>

As I understand the question you want to change top part based on "textView4"'s text size changed, If text is small then above part will not stay 25% in my answer. Let me know if your requirement is different, I will update it.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/clIntroMainContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/color_grey">
<androidx.constraintlayout.widget.Barrier
android:id="#+id/mybarrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="imageView,textView4,textView3,guideline2"
tools:layout_editor_absoluteY="731dp" />
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="fitXY"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#color/browser_actions_text_color" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="50dp"
android:layout_height="50dp"
app:layout_constraintBottom_toBottomOf="#+id/imageView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.50"
app:srcCompat="#drawable/ic_pen" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="3dp"
android:gravity="center"
android:text="auto_expense_title"
android:textColor="#color/white"
android:textSize="#dimen/_12ssp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="#+id/imageView2"
app:layout_constraintStart_toStartOf="#+id/imageView2"
app:layout_constraintTop_toBottomOf="#+id/imageView2" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="3dp"
android:gravity="center"
android:text="auto_expense_info auto_expense_info auto_expense_info auto_expense_info"
android:textColor="#color/white"
android:textSize="#dimen/_15ssp"
app:layout_constraintBottom_toTopOf="#+id/mybarrier"
app:layout_constraintEnd_toEndOf="#+id/textView3"
app:layout_constraintStart_toStartOf="#+id/textView3"
app:layout_constraintTop_toBottomOf="#+id/textView3" />
<ImageView
android:id="#+id/iv2"
android:layout_width="wrap_content"
android:layout_height="330dp"
android:layout_gravity="center"
android:adjustViewBounds="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/mybarrier"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="#drawable/empty_star" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.35" />
</androidx.constraintlayout.widget.ConstraintLayout>

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" />

ConstraintLayout: How to align Two TextViews vertically center

XML Code:
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView
android:id="#+id/card_view"
style="#style/Widget.MaterialComponents.CardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/mtrl_card_spacing"
android:layout_marginTop="#dimen/mtrl_card_spacing"
android:layout_marginRight="#dimen/mtrl_card_spacing"
android:layout_marginBottom="#dimen/mtrl_card_spacing"
app:cardCornerRadius="4dp"
app:cardElevation="2dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="84dp">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/iv_logo_home_team"
android:layout_width="#dimen/match_item_team_logo"
android:layout_height="#dimen/match_item_team_logo"
android:layout_marginStart="#dimen/unit_dp_10"
android:layout_marginLeft="#dimen/unit_dp_10"
android:layout_marginEnd="#dimen/unit_dp_10"
android:layout_marginRight="#dimen/unit_dp_10"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#drawable/ic_launcher_background" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tv_player_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/unit_sp_12"
android:gravity="center"
android:textAlignment="center"
android:textSize="#dimen/unit_sp_10"
app:fontFamily="#font/avenir_next_bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/iv_logo_home_team"
app:layout_constraintTop_toTopOf="parent"
tools:text="#tools:sample/lorem" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tv_player_role"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/unit_sp_12"
android:layout_marginLeft="#dimen/unit_sp_12"
android:gravity="center"
android:textAlignment="center"
android:textSize="#dimen/unit_sp_10"
app:fontFamily="#font/avenir_next_bold"
app:layout_constraintLeft_toRightOf="#+id/iv_logo_home_team"
app:layout_constraintTop_toBottomOf="#id/tv_player_name"
tools:text="#tools:sample/lorem" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
Design View:

Constrain tv_player_name top to iv_logo_home_team top, constrain tv_player_role bottom to iv_logo_home_team bottom, set vertical chain style to packed. Also constrain tv_player_name and tv_player_role to each other vertically (create a chain). In other words:
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tv_player_name"
...
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintLeft_toRightOf="#+id/iv_logo_home_team"
app:layout_constraintTop_toTopOf="#+id/iv_logo_home_team"
app:layout_constraintBottom_toTopOf="#+id/tv_player_role" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tv_player_role"
...
app:layout_constraintLeft_toRightOf="#+id/iv_logo_home_team"
app:layout_constraintTop_toBottomOf="#id/tv_player_name"
app:layout_constraintBottom_toBottomOf="#+id/iv_logo_home_team" />

For your view tv_player_name replace this app:layout_constraintBottom_toBottomOf="parent"
attribute to app:layout_constraintBottom_toTopOf="#+id/tv_player_role", and for view tv_player_role add this attribute app:layout_constraintBottom_toBottomOf="parent".
It will look like this.
Code
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tv_player_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:textAlignment="center"
app:layout_constraintBottom_toTopOf="#+id/tv_player_role"
app:layout_constraintLeft_toRightOf="#+id/iv_logo_home_team"
app:layout_constraintTop_toTopOf="parent"
tools:text="#tools:sample/lorem" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tv_player_role"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:textAlignment="center"
app:layout_constraintLeft_toRightOf="#+id/iv_logo_home_team"
app:layout_constraintTop_toBottomOf="#id/tv_player_name"
app:layout_constraintBottom_toBottomOf="parent"
tools:text="#tools:sample/lorem" />
If you want to make it center like this.
Then add this attribute app:layout_constraintVertical_chainStyle="packed" for both views.
Code
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tv_player_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
app:layout_constraintVertical_chainStyle="packed"
android:textAlignment="center"
app:layout_constraintBottom_toTopOf="#+id/tv_player_role"
app:layout_constraintLeft_toRightOf="#+id/iv_logo_home_team"
app:layout_constraintTop_toTopOf="parent"
tools:text="#tools:sample/lorem" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tv_player_role"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
app:layout_constraintVertical_chainStyle="packed"
android:textAlignment="center"
app:layout_constraintLeft_toRightOf="#+id/iv_logo_home_team"
app:layout_constraintTop_toBottomOf="#id/tv_player_name"
app:layout_constraintBottom_toBottomOf="parent"
tools:text="#tools:sample/lorem" />

How to layout 2 textviews in a custom compound constraint layout

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" />

Constraint Layout - Grouping together layouts in chains

I want to create a chain in constraint layout that is spread but keeping the title and the text together, without a gap between them.
I am trying to achieve the same view, but without the linear layout and instead a flat constraint layout:
<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/scrollView3"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.exampleapp.fragments.carousel.MainCarouselOneFragment">
<ImageView
android:id="#+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/main_carousel_image_2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textview1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:paddingEnd="8dp"
android:paddingStart="8dp"
android:text="#string/text1"
android:textAlignment="center"
android:textColor="#color/grey_transparent_50"
android:textSize="10sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/image_view" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:lineSpacingExtra="4sp"
android:text="#string/text2"
android:textAlignment="center"
android:textColor="#color/grey_transparent_50"
android:textSize="10sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/textview1" />
<LinearLayout
android:id="#+id/ll_title_and_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#+id/find_out_more_btn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2">
<TextView
android:id="#+id/textView3"
style="#style/TextAppearance.Actionbar.Title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="#string/text3" />
<TextView
android:id="#+id/textView4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:lineSpacingExtra="0sp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:text="#string/text4"
android:textSize="#dimen/text_size_small" />
</LinearLayout>
<Button
android:id="#+id/find_out_more_btn"
style="#style/Widget.Button.Secondary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:text="#string/find_out_more"
android:textColor="#color/white"
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/ll_title_and_text" />
</android.support.constraint.ConstraintLayout>
Could you please advise me if this is possible and if so, how to do it?

If I understand correctly, you want to create the layout as per the screenshot but without using a LinearLayout. If that is the case, then this should be possible if you ignore the fact that there are view pairs when you create the vertical chains. In other words, think about the positioning of textView1, textView3 and Button first, and then worry about the positioning of textView2 and textView4.
It's a bit tricky to explain, so I have created a simple layout that should do what you need. In order to create this layout, I constrained textView1 to the imageView, and textView3 to textView1. Then I created vertical chains between textView3 and button. Finally, I constrained textView2 to textView1 and textView4 to textView3. (I assumed that you wanted textView1 directly below the image)
<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">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#color/colorPrimary" />
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/image"
tools:text="text1" />
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/text1"
tools:text="text2" />
<TextView
android:id="#+id/text3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/text1"
tools:text="text3" />
<TextView
android:id="#+id/text4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/text3"
tools:text="text4" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/text3"
tools:text="More" />
This should give you something like:

Categories

Resources