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" />
Related
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" />
I've had weird experience when i scroll the RecyclerView.
There is a item_layout for the RecyclerView's item.
The item layout xml consists of 3 Textview and 1 ConstraintLayout.
the rootview is ConstriantLayout.
please check this image.
All the TextView's layout_height is wrap_content and layout_width is 0dp(match_constraint) but basically TextView autosize doesn't work correctly when the view's layout_height is wrap_content.
so everytime i scroll the RecyclerView, the TextView3's characters become smaller and then get back to the maxSize.
so i changed the layout_height of TextView3 into 0dp(match_constrarint). it worked fine.
but the reason why i ask is TextView1 and TextView2 works fine even though they still have wrap_content.
how does it work???
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:maxLines="1"
android:textSize="#dimen/detail_txt_title"
app:autoSizeMaxTextSize="#dimen/detail_txt_title"
app:autoSizeMinTextSize="#dimen/detail_txt_summary"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toTopOf="#id/TextView2"
app:layout_constraintRight_toLeftOf="#id/TextView3"
app:layout_constraintHorizontal_weight="2.1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:maxLines="1"
android:textColor="#color/black"
android:textSize="#dimen/detail_txt_title_small"
app:autoSizeMaxTextSize="#dimen/detail_txt_title_small"
app:autoSizeMinTextSize="#dimen/detail_txt_summary"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="#id/textView1"
app:layout_constraintLeft_toLeftOf="#id/textView1"
app:layout_constraintTop_toBottomOf="#id/textView1" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/textview3"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:maxLines="1"
android:textColor="#color/daily_history_text_black"
android:textSize="#dimen/detail_txt_title"
app:autoSizeMaxTextSize="#dimen/detail_txt_title"
app:autoSizeMinTextSize="#dimen/detail_txt_summary"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_weight="2.1"
app:layout_constraintLeft_toRightOf="#id/textview1"
app:layout_constraintTop_toTopOf="parent" />
See this: Autosize textview is not working It seems to be normal for autoSize text to produce inconsistent results when used with wrap_content the fact that it is working is just one of those inconsistences.
Your mistake was only in the names of the textviews and here is the fix for your question:
<?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"
>
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:maxLines="1"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toTopOf="#id/textView2"
app:layout_constraintRight_toLeftOf="#id/textview3"
app:layout_constraintHorizontal_weight="2.1"
android:text="textView1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:maxLines="1"
android:textColor="#color/black"
app:autoSizeTextType="uniform"
android:text="textView2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="#id/textView1"
app:layout_constraintLeft_toLeftOf="#id/textView1"
app:layout_constraintTop_toBottomOf="#id/textView1" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/textview3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:maxLines="1"
android:text="textView3"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_weight="2.1"
app:layout_constraintLeft_toRightOf="#id/textView1"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
or you can use this way:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context=".MainActivity"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center">
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:maxLines="1"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toTopOf="#id/textView2"
app:layout_constraintRight_toLeftOf="#id/textview3"
app:layout_constraintHorizontal_weight="2.1"
android:text="textView1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:maxLines="1"
android:textColor="#color/black"
app:autoSizeTextType="uniform"
android:text="textView2"
/>
</LinearLayout>
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/textview3"
android:layout_weight="1"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:maxLines="1"
android:text="textView3"
app:autoSizeTextType="uniform"
/>
</LinearLayout>
I need layout with three elements:
TextView1 with fixed width
TextView2 with dynamic width
One more TextView3 with fixed width
All elements must be visible on the screen at the same time.
If TextView2 contains a lot of text, the layout should be like this:
If TextView2 contains contains little text, the layout should be like this:
How can I create it using ConstraintLayout ?
Put your TextViews in a horitzontal packed chain with a bias of 1 to align them to parent's end. To make sure that the middle TextView doesn't overlap other Views and satisfies its constraints you need to set app:layout_constrainedWidth="true" attribute for 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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/view1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/view2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:text="view1"/>
<TextView
android:id="#+id/view2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constrainedWidth="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/view3"
app:layout_constraintStart_toEndOf="#id/view1"
app:layout_constraintTop_toTopOf="parent"
android:text="view2"/>
<TextView
android:id="#+id/view3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/view2"
app:layout_constraintTop_toTopOf="parent"
android:text="view3"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Here is the sample code:
Take a look:
Design.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#ff0000"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/textView3"
app:layout_constraintEnd_toStartOf="#+id/textView3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView3" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#63f542"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/textView4"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/textView"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#ff00ff"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/textView3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/textView3"
app:layout_constraintTop_toTopOf="#+id/textView3" />
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
Output:
You can create the view with the code below, but the only constraint is you have to give max width to centered text view
<?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/linearLayout17"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#color/hint_color">
<TextView
android:id="#+id/txt1"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:gravity="center"
android:padding="5dp"
android:text="text1"
android:textColor="#color/txt_color"
android:textSize="#dimen/labels_size"
app:layout_constraintBottom_toBottomOf="#+id/txt2"
app:layout_constraintEnd_toStartOf="#+id/txt2"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/txt2" />
<TextView
android:id="#+id/txt2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:gravity="center"
android:padding="5dp"
android:maxWidth="200dp"
android:text="text2asdadadasdaasdasdddadadadaddadadasdasdasdasdasdasddadasdasdadasdasdasdasdasdasdasdasdasddadadadadadada"
android:textColor="#color/txt_color"
android:textSize="#dimen/labels_size"
app:layout_constraintBottom_toBottomOf="#+id/txt3"
app:layout_constraintEnd_toStartOf="#+id/txt3"
app:layout_constraintTop_toTopOf="#+id/txt3" />
<TextView
android:id="#+id/txt3"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:gravity="center"
android:padding="5dp"
android:text="text3"
android:textColor="#color/txt_color"
android:textSize="#dimen/labels_size"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
I am trying to implement a layout like this:
I had added a code like below, but the problem is that the two ImageViews' heights is zero in the final rendered layout. I don't know why the app:layout_constraintDimensionRatio="1:1" (height to width ratio 1:1) has no effect? Did I missed something?
<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/content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#drawable/orange_gradient"
app:layout_constraintDimensionRatio="1:0.5">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintTop_toTopOf="parent"
android:orientation="horizontal"
android:weightSum="10">
<!-- want height to be constrained by 1:1 to width -->
<ImageView
android:id="#+id/croppedFaceImageView"
android:layout_width="0dp"
android:layout_weight="4"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1"
android:background="#android:color/darker_gray" />
<TextView
android:id="#+id/confidenceLabel"
android:layout_width="0dp"
android:layout_weight="2"
android:layout_height="wrap_content"
android:text="90%"
android:textAlignment="center"
android:textColor="#android:color/black"
android:textSize="8sp"
android:background="#android:color/holo_green_dark" />
<ImageView
android:id="#+id/avartarImageView"
android:layout_width="0dp"
android:layout_weight="4"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1"
android:background="#android:color/holo_orange_dark" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
You can only use app:layout_constraintDimensionRatio in a ConstraintLayout.
However, there is a way to achieve what you're looking for.
Replace the LinearLayout with ConstraintLayout and follow the following code template on your xml design
NB. Notice that the trick to have the child views line out properly is using constraint rules against each child.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/sun"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/mon"
android:text="S"/>
<TextView
android:id="#+id/mon"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#id/sun"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/tue"
android:text="M"/>
<TextView
android:id="#+id/tue"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#id/mon"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/wed"
android:text="T"/>
<TextView
android:id="#+id/wed"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#id/tue"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/thur"
android:text="W"/>
<TextView
android:id="#+id/thur"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#id/wed"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/fri"
android:text="T"/>
<TextView
android:id="#+id/fri"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#id/thur"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/sat"
android:text="F"/>
<TextView
android:id="#+id/sat"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#id/fri"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:text="S"/>
</androidx.constraintlayout.widget.ConstraintLayout>
The above code will create something like:
I had this nested linear layouts
<LinearLayout
android:id="#+id/has_selected_account"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/account_menu_header_signed_in_vertical_margin"
android:layout_marginBottom="#dimen/account_menu_header_signed_in_vertical_margin"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/close_and_recents"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.myImage
android:id="#+id/account_avatar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/account_menu_header_signed_in_avatar_margin_start"
android:layout_marginEnd="#dimen/account_menu_header_signed_in_avatar_margin_end"
android:layout_marginLeft="#dimen/account_menu_header_signed_in_avatar_margin_start"
android:layout_marginRight="#dimen/account_menu_header_signed_in_avatar_margin_end"
android:contentDescription="#null"
app:imageViewSize="#dimen/account_menu_header_signed_in_disc_size"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="#dimen/account_menu_name_and_display_vertical_padding"
android:paddingBottom="#dimen/account_menu_name_and_display_vertical_padding"
android:orientation="vertical">
<TextView
android:id="#+id/account_display_name"
style="#style/AccountDataDisplayName"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center_vertical"
tools:text="DisplayNameIsLongSoItShouldBeTruncatedAtSomePoint"/>
<TextView
android:id="#+id/account_name"
style="#style/AccountDataAccountName"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center_vertical|start"
android:includeFontPadding="false"
tools:text="emailisverylongaswellwewantittogettruncated#gmail.longdomain.com"/>
</LinearLayout>
</LinearLayout>
and i wanted to convert it to one constraint layout:
<merge>
<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/has_selected_account"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/google_blue100">
<com.myView
android:id="#+id/account_avatar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/account_menu_header_signed_in_avatar_margin_start"
android:layout_marginEnd="#dimen/account_menu_header_signed_in_avatar_margin_end"
android:layout_marginLeft="#dimen/account_menu_header_signed_in_avatar_margin_start"
android:layout_marginRight="#dimen/account_menu_header_signed_in_avatar_margin_end"
android:contentDescription="#null"
app:imageViewSize="#dimen/account_menu_header_signed_in_disc_size"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<View
android:id="#+id/account_display_name_top_padding"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="#dimen/account_menu_name_and_display_vertical_padding"
android:background="#color/google_red50"
app:layout_constraintBottom_toTopOf="#id/account_display_name"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/account_avatar"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/account_display_name"
style="#style/AccountDataDisplayName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/google_red100"
android:gravity="center_vertical"
android:includeFontPadding="false"
app:layout_constraintBottom_toTopOf="#+id/account_name"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toEndOf="#+id/account_avatar"
app:layout_constraintTop_toTopOf="#+id/account_display_name_top_padding"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintWidth_default="wrap"
tools:text="DisplayNameIssLongSoItShouldBeTruncatedAtSomePoint"/>
<TextView
android:id="#+id/account_name"
style="#style/AccountDataAccountName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/google_green100"
android:gravity="center_vertical"
android:includeFontPadding="false"
app:layout_constraintBottom_toBottomOf="#+id/account_name_bottom_padding"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toEndOf="#+id/account_avatar"
app:layout_constraintTop_toBottomOf="#+id/account_display_name"
app:layout_constraintWidth_default="wrap"
tools:text="emailisverylongaswellwewantittogettruncated#gmail.longdomain.com"/>
<View
android:id="#+id/account_name_bottom_padding"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="#dimen/account_menu_name_and_display_vertical_padding"
android:background="#color/google_red50"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/account_avatar"
app:layout_constraintTop_toBottomOf="#id/account_name"/>
</android.support.constraint.ConstraintLayout>
</merge>
The result was almost OK, but the textViews are going too up and too close to the Image view.
here is the new result overlapping the old ui:
Does anyone have an idea why? or how to solve this?
I have added margin left to the imageView but it didn't seem to change anything.
Try building a more parallel structure between the TextViews in the LinearLayout and the ones in the ConstraintLayout something like the following. Here I have used a FrameLayout to show the overlay better and took some liberties with sizes, but the concept holds for your layout. As you can see from the image, the TextViews line up precisely except for the final character which is different between the two sets of TextViews to give a visual of the overlay.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="horizontal">
<LinearLayout
android:layout_width="250dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="16dp"
android:paddingBottom="16dp">
<TextView
android:id="#+id/account_display_name"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginStart="16dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:text="DisplayName1" />
<TextView
android:id="#+id/account_name"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginStart="16dp"
android:layout_weight="1"
android:gravity="center_vertical|start"
android:includeFontPadding="false"
android:text="emailisvery1" />
</LinearLayout>
<android.support.constraint.ConstraintLayout
android:layout_width="500dp"
android:layout_height="match_parent">
<TextView
android:id="#+id/account_display_name2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginStart="16dp"
android:gravity="center_vertical"
android:paddingTop="16dp"
android:text="DisplayName2"
app:layout_constraintBottom_toTopOf="#id/account_name2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_weight="1" />
<TextView
android:id="#+id/account_name2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginStart="16dp"
android:gravity="center_vertical|start"
android:includeFontPadding="false"
android:paddingBottom="16dp"
android:text="emailisvery2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/account_display_name2"
app:layout_constraintVertical_weight="1" />
</android.support.constraint.ConstraintLayout>
</FrameLayout>t>