ConstraintLayout max width percentage
Solution 1
I achieved the max width percentage using two attributes:
app:layout_constraintWidth_max="wrap"
app:layout_constraintWidth_percent="0.4"
Example:
<TextView
android:id="@+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Helo world"
android:textAlignment="viewStart"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_max="wrap"
app:layout_constraintWidth_percent="0.4" />
The text width will increase to 40% of parent and then wrap if the content exceeds that.
Solution 2
If I'm understanding your problem right then You're almost there. I think you're giving frameLayout
static height that's why it is not giving the appropriate result on tablet.. because you set the height according to phone preview. What you need to do is make the height of frameLayout
relative to imageView
.. so when imageView
grows in size the frameLayout
also grows with it.
I think you should do something like this
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:src="@android:drawable/ic_menu_add"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.3" />
<FrameLayout
android:id="@+id/frameLayoutTwo"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@android:color/black"
app:layout_constraintBottom_toBottomOf="@+id/imageView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/imageView"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
I checked and this gives the same result in phone and tablet. Correct me if I misunderstood your problem.
![Admin](/assets/logo_square_200-5d0d61d6853298bd2a4fe063103715b4daf2819fc21225efa21dfb93e61952ea.png)
Admin
Updated on July 04, 2022Comments
-
Admin almost 2 years
I've been experimenting with ConstraintLayout, is there a way to set the max width of a view to a percentage of the parent (and a height of match constraint and dimension ratio of 1:1)?
Here is the code without using max width:
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="wrap_content"> <FrameLayout android:id="@+id/frameLayout3" android:layout_width="0dp" android:layout_height="259dp" android:layout_marginEnd="8dp" android:layout_marginStart="8dp" android:background="@android:color/black" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.0" app:layout_constraintStart_toEndOf="@+id/imageView" app:layout_constraintTop_toTopOf="parent"/> <ImageView android:id="@+id/imageView" android:layout_width="0dp" android:layout_height="0dp" android:src="@android:drawable/ic_menu_add" app:layout_constraintBottom_toBottomOf="@+id/frameLayout3" app:layout_constraintDimensionRatio="1:1" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintWidth_percent="0.3"/> </android.support.constraint.ConstraintLayout>
This is the result:
Tablet:
Phone:
-
fiipi over 5 yearsThis is a great tip. That worked, and should be the accepted answer.
-
Sergey Grishin almost 5 years@thomson-varghese, I've tried your answer, but I've not received correct result/ Maybe, I've done something wrong. Can you check my code, please and write, how to set max width as percentage of parent, but just "regular" width should be like wrap_content: 1) first variant , when text is to long, and width should be as % from parent 2) second variant, when width shoundn't be so huge, jast wrap_content My code
-
momvart about 4 yearsnice job! could you please explain what does
layout_constraintWidth_max="wrap"
actually mean? -
Michał Ziobro about 4 yearsdoes not work when such textview is placed in vertical Flow when it obscures view being above and below
-
user924 almost 4 yearsbut if taken space is less than 0.4 pct, it still will be minimum matched 0.4 pct
-
David Ibrahim over 3 yearsit doesn't wrap if the text is in multiple lines
-
z3ntu about 3 yearsWorks great, except when
android:text=""
the view takes up the maximum % of the width, even though I want it to be 0dp (or at least close to it). My workaround is setting a space instead of an empty string when that would be set. -
reavcn over 2 yearsVery useful, worked for me! Remember to set 0dp on both views in the horizontal chain and set the chain style to spread_inside
-
RoShan Shan over 2 yearsThanks @reavcn, it should be horizontal chain for both view. if not, it always set the width 0.4