I am having an issue with ConstraintLayout and a specific view.
What is wanted : 3 imageviews in a 6:5 ratio, the first one is bigger with the two other stacked vertically on its right. The whole view has a maxed width of 414dp.
When trying to set the horizontal chain style at packed, the views don't display at all over 414dp.
There is no issue under that limit or with a chain style other than packed.
Here are
the layout :https://gist.github.com/xcaEi/ba46e5e8c2d1d5682e1a5f3221325ed0
screenshots of the problem : https://imgur.com/a/0uZckj0
Am I missing something ?
To achieve what you want, I believe you must nest a ConstraintLayout inside another ConstraintLayout.
The problem is that you can't have both app:layout_constraintWidth_percent and layout_constraintWidth_max defined on the same view; each of these is one option for how to constrain a view set to "match constraints".
MATCH_CONSTRAINT dimensions (Added in 1.1)
When a dimension is set to MATCH_CONSTRAINT, the default behavior is to have the resulting size take all the available space. Several additional modifiers are available:
layout_constraintWidth_min and layout_constraintHeight_min: will set the minimum size for this dimension
layout_constraintWidth_max and layout_constraintHeight_max: will set the maximum size for this dimension
layout_constraintWidth_percent and layout_constraintHeight_percent: will set the size of this dimension as a percentage of the parent
(From https://developer.android.com/reference/android/support/constraint/ConstraintLayout)
You can work around this by having your inner ConstraintLayout specify its maximum width, and then have the ImageView children of that inner ConstrainLayout specify their percentages.
<?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">
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#eee"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintWidth_max="414dp">
<ImageView
android:id="#+id/main_imageview"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="fitXY"
android:background="#caf"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintDimensionRatio="H,6:5"
app:layout_constraintWidth_percent="0.666"/>
<ImageView
android:id="#+id/second_imageview"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="fitXY"
android:background="#fac"
app:layout_constraintTop_toTopOf="#+id/main_imageview"
app:layout_constraintLeft_toRightOf="#+id/main_imageview"
app:layout_constraintBottom_toTopOf="#+id/third_imageview"
app:layout_constraintDimensionRatio="W,6:5"/>
<ImageView
android:id="#+id/third_imageview"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="fitXY"
android:background="#afc"
app:layout_constraintTop_toBottomOf="#+id/second_imageview"
app:layout_constraintLeft_toRightOf="#+id/main_imageview"
app:layout_constraintBottom_toBottomOf="#+id/main_imageview"
app:layout_constraintDimensionRatio="W,6:5"/>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
I think this is your need 3 imageview first one bigger. You can change layout_constraintHorizontal_weight properties check below
<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/imageView9"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#android:color/black"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="6:5"
app:layout_constraintEnd_toStartOf="#+id/imageView10"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintHorizontal_weight="2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView10"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#android:color/darker_gray"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="6:5"
app:layout_constraintEnd_toStartOf="#+id/imageView11"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/imageView9"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView11"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#android:color/holo_orange_dark"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="6:5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/imageView10"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Related
Say, I have 2 View: A and B. A's size is set to wrap_content, causing its size might change when content varies: text size, image size, data amounts... etc.
I want View B's height/width related to View A's, but by ratio ---- for example, B's height is 1/3 of A's. How can I achieve it?
As far as I know, ConstraintLayout should come to rescue. But I could only make it
equals by setting constraintTop_toTopOf="#+id/viewA" and app:layout_constraintBottom_toBottomOf="#+id/viewA". I tried using Guideline to locate the "dedicated height" -- but it seems Guideline is only related to parent (not constraint).
TL;DR
My solution so far is: combined layout_constraintHeight_percent (or layout_constraintWidth_percent) with a ConstraintLayout wrapper.
Limit of "Percent"
I went around asking people. Some say that layout_constraintHeight_percent (or layout_constraintWidth_percent) should be used in this case:
<?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/baseA"
android:layout_width="100dp"
android:layout_height="300dp"
android:background="#color/teal_200"
android:gravity="center"
android:text="base A"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:layout_width="100dp"
android:layout_height="0dp"
android:background="#color/purple_200"
android:gravity="center"
android:text="base B"
app:layout_constraintBottom_toBottomOf="#+id/baseA"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.7"
app:layout_constraintHeight_percent="0.33"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/baseA" />
</androidx.constraintlayout.widget.ConstraintLayout>
However, layout_constraintHeight_percent encountered the same problem as Guideline: they are calculated according to parent's size, no matter what constraint they have:
Some say layout_constrainedHeight should set to true, but nothing changed:
Adaption: B-specified Wrapper
Above behavior gave me an idea: since constraint percent is only calculated by parent, then we could modify the parent -- by giving it a custom one.
Change above code, take view B to a new ConstraintLayout, migrate B into it, constraint to parent, and use percent again:
<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/baseA"
android:layout_width="100dp"
android:layout_height="300dp"
android:background="#color/teal_200"
android:gravity="center"
android:text="base A"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#+id/baseA"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.7"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/baseA">
<TextView
android:layout_width="100dp"
android:layout_height="0dp"
android:background="#color/purple_200"
android:gravity="center"
android:text="base B"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.33"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Now it works like a charm.
Better Approach: Inside Same Wrapper
Another solution is to put A and B inside the same ConstraintLayout, and set its height/width to wrap_content, causing its size to equal to A:
<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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
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">
<TextView
android:id="#+id/baseA"
android:layout_width="100dp"
android:layout_height="300dp"
android:background="#color/teal_200"
android:gravity="center"
android:text="base A"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:layout_width="100dp"
android:layout_height="0dp"
android:background="#color/purple_200"
android:gravity="center"
android:text="base B"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.7"
app:layout_constraintHeight_percent="0.33"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
And I think it's a better solution -- because in only-B-wrapper solution, you cannot set padding in that wrapper ConstraintLayout, as layout_constraintHeight_percent only calculated size inside (it ignores padding and margin). But in above share-wrapper solution, you can set a padding without worry (as they share the same parent size).
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:
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.
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.
No, there is not. I think we should file a feature request. I am pretty sure that PercentRelativeLayout also does not have this feature. (This answer is accurate for ConstraintLayout 1.1)
You can set a LinearLayout or other ViewGroup as exact percent width and place your wrap_content view inside this layout.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/image_place_holder"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!-- This LinearLayout will have exact 80% of parent width-->
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.8">
<!-- This MaterialCardView will get a wrap_content width,
with a max width of his parent LinearLayout, which is 80% -->
<com.google.android.material.card.MaterialCardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/half_activity_horizontal_margin"
android:layout_marginTop="#dimen/half_activity_vertical_margin"
android:layout_marginEnd="#dimen/half_activity_horizontal_margin"
android:layout_marginBottom="#dimen/half_activity_vertical_margin"
android:backgroundTint="?attr/colorPrimary">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"
android:paddingStart="#dimen/half_activity_horizontal_margin"
android:paddingEnd="#dimen/half_activity_horizontal_margin"
android:text="Lorem ipsum"
android:textAppearance="?attr/textAppearanceCaption" />
</com.google.android.material.card.MaterialCardView>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I've encountered a problem while trying to create a layout with ConstraintLayout 1.1.0-beta4.
My scenario is as follows: A ConstraintLayout wrapped in a ScrollView, with layout_height="wrap_content" and layout_width="match_parent". In it, I have a horizontal chain of three child views. They are supposed to fill out the full width of the screen, and have their height determined according to their width with an aspect ratio of 3:4. When the ConstraintLayout has layout_height="match_parent" applied, everything works fine, but with wrap_content, the size of the child views can't be computed. I expected it to work the same way.
Here is my XML:
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="16dp"
android:paddingTop="16dp"
>
<View
android:id="#+id/button_1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:background="#android:color/black"
app:layout_constraintDimensionRatio="3:4"
app:layout_constraintEnd_toStartOf="#+id/button_2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<View
android:id="#+id/button_2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:background="#android:color/black"
app:layout_constraintBottom_toBottomOf="#+id/button_1"
app:layout_constraintEnd_toStartOf="#+id/button_3"
app:layout_constraintStart_toEndOf="#+id/button_1"
app:layout_constraintTop_toTopOf="#+id/button_1"
/>
<View
android:id="#+id/button_3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:background="#android:color/black"
app:layout_constraintBottom_toBottomOf="#+id/button_1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button_2"
app:layout_constraintTop_toTopOf="#+id/button_1"
/>
</android.support.constraint.ConstraintLayout>
</ScrollView>
Why can ConstraintLayout not compute the sizes of the child views in this case? Am I missing something?
Thank you in advance.
Looks like constraintLayout does have issues chaining views with dimension ratios. If you're fine with a work around, create extra invisible view with increased ratio and constrain top/bottom of views to it:
<View
android:id="#+id/viewButtonConstraint"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#FF00FF"
app:layout_constraintDimensionRatio="W,3:12"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/button_1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:background="#android:color/black"
app:layout_constraintEnd_toStartOf="#+id/button_2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/viewButtonConstraint"
app:layout_constraintBottom_toBottomOf="#+id/viewButtonConstraint"
/>
...etc
Using constraints in a ConstraintLayout, I have created a layout as following:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
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"
app:cardCornerRadius="2dp"
app:cardElevation="4dp"
app:cardUseCompatPadding="true">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="4dp"
>
<ImageView
android:id="#+id/post_photo"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
app:srcCompat="#drawable/ic_photo"
/>
<ImageButton
android:id="#+id/create_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
app:layout_constraintTop_toBottomOf="#+id/post_photo"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/share_button"
app:srcCompat="#drawable/ic_action_share"
android:scaleType="fitCenter"
/>
<ImageButton
android:id="#+id/share_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
app:layout_constraintTop_toBottomOf="#+id/post_photo"
app:layout_constraintLeft_toRightOf="#+id/create_button"
app:layout_constraintRight_toRightOf="parent"
app:srcCompat="#drawable/ic_action_share"
android:scaleType="fitCenter"
/>
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
My problem is that lower ImageButtons are not shown whenever height of image in ImageView is more than its width. If we hardcode a height (some kind of sufficient) on ConstraintLayout then buttons can get some height depending on the height of ImageView. I believe that the problem is when View Bounds are adjusted for ImageView. How can I overcome this situation?
wrap_content only asks the widget to measure itself, but won't limit its expansion against eventual constraints
add following attribute to your ImageView which is used when parent constraint layout set to wrap_content then there will be height measuring problem so overcome that
app:layout_constraintHeight_default="wrap"
and also set ImageView height to 0dp
<ImageView
android:id="#+id/post_photo"
android:layout_width="0dp"
app:layout_constraintHeight_default="wrap"
android:layout_height="0dp"
android:layout_marginTop="4dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
app:srcCompat="#drawable/ic_photo"
/>
for information same approach we can use in width problem
just replace width to 0dp and following property
app:layout_constraintWidth_default="wrap"
If you want to prevent this situation, you need to define percent or (dp) value.
1 - You can use maxWidth / maxHeight on ConstraintLayout like
<ImageView
...
android:maxHeight="192dp"
/>
2 - Also you can use Guideline like
<Guideline
id="guideLineMaxHeightOfImage"
guideLinePercent="0.4"
orientation="horizontal"
>
ImageView
<ImageView
...
app:layout_constraintTop_toTopOf="#+id/guideLineMaxHeightOfImage"
/>
I used constraintLayout and layout_constraintDimensionRatio="1:1"
(width is wrap_content, height is 0dp (match_constraint))
As a result, I expected width and height to be 1:1, but it's not working.
What is wrong?
I attached code and screenshot.
<?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/t1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:background="#android:color/holo_blue_bright"
android:gravity="center"
android:text="Hello World!11"
app:layout_constraintDimensionRatio="1:1" />
</android.support.constraint.ConstraintLayout>
screenshot
I quote android developer site about Constraintlayout.
https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html#DimensionConstraints
Ratio :: You can also define one dimension of a widget as a ratio of
the other one. In order to do that, you need to have at least one
constrained dimension be set to 0dp (i.e., MATCH_CONSTRAINT), and set
the attribute layout_constraintDimentionRatio to a given ratio. For
example:
<Button android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1" />
will set the height of the button to be the same as its width.
but it was not working.
You forget to add your constraints
<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/t1"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:background="#android:color/holo_blue_bright"
android:gravity="center"
android:text="Hello World!11"
app:layout_constraintDimensionRatio="1" />
</android.support.constraint.ConstraintLayout>
0dp is only applied to the child views of ConstraintLayout.
Any view should apply the attribute rules of its parent.
As off version 1.1.0 this has changed.
You can now define:
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintDimensionRatio="W,1:1"
app:layout_constraintDimensionRatio="H,1:1"
Check the link below to find all the documentation regarding DimensionConstraints:
Link to the docs
In my case I have a problem like i have to fill my layout inside container with A4 size paper ratio.
Problem
I am getting A4 size resume pages as images from backend so i have to append those images in Viewpager in which i am using ImageView to display those images.
Solution
I went through Constraint layout document in which Ratio section is there. So i can use layout_constraintDimensionRatio for solving my problem.
So my xml that is used to Display the whole Layout is following, in my case i have used app:layout_constraintDimensionRatio="1:1.27" as with:height ratio but the actual ratio is app:layout_constraintDimensionRatio="1:1.41"
<?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="match_parent"
android:background="#color/orange">
<!-- divider line which i used as restricting my A4 size container height-->
<View
android:id="#+id/divider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/headline_title_color"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias=".85"/>
<!-- A4 size Image View-->
<ImageView
android:id="#+id/resumeContainer"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginLeft="12dp"
android:layout_marginTop="16dp"
android:layout_marginRight="12dp"
android:layout_marginBottom="16dp"
android:background="#color/green"
android:text="#string/change"
android:src="#drawable/banner"
app:layout_constraintBottom_toTopOf="#id/divider"
app:layout_constraintDimensionRatio="1:1.27"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<!-- for Bottom two buttons -->
<com.bold.job.utils.CustomButton
android:id="#+id/preview"
style="#style/tertiaryButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:onClick="preview"
android:text="#string/preview_resume"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/guideline"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#id/divider"
/>
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<com.bold.job.utils.CustomButton
android:id="#+id/preview2"
style="#style/tertiaryButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:onClick="preview"
app:layout_constraintLeft_toRightOf="#id/guideline"
app:layout_constraintRight_toRightOf="parent"
android:text="#string/preview_resume"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#id/divider"
/>
</android.support.constraint.ConstraintLayout>
Please notice the last line, adding constraints around the edges makes the constraint work.
You can also use the design view in Studio, and drag and drop the constraints between objects.
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Available chats" />
<ListView
android:id="#+id/listChats"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/textView"/>