I'm trying to create a layout composition using ConstraintLayout.
In order to simplify my case, my layout should have three parts:
The first layout (in red), that should grow according to the remaining space and has a max height.
The second layout (in green), which has a fixed size of 150dp and should always be below the first layout.
The first layout (in pink), also has a fixed size of 150dp and should be aligned to the bottom the view.
The part I'm struggling with is setting a max height for the first layout (red). It seems like the ConstraintLayout ignores my "max height statements":
app:layout_constraintHeight_max="300dp"
Here's my current result (the red part ignores the height limit..):
Here's the full XML:
<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/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
tools:context="com.mixtiles.android.reviewOrder.ReviewOrderActivity"
tools:layout_editor_absoluteY="25dp">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white">
<android.support.v7.widget.Toolbar
android:id="#+id/review_order_toolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/red"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/red"
app:layout_constraintBottom_toTopOf="#+id/green"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_max="300dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/appBarLayout"
app:layout_constraintVertical_chainStyle="spread_inside">
</FrameLayout>
<FrameLayout
android:id="#+id/green"
android:layout_width="0dp"
android:layout_height="150dp"
android:background="#color/greenish"
app:layout_constraintBottom_toTopOf="#+id/pink"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/red">
</FrameLayout>
<FrameLayout
android:id="#+id/pink"
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="#color/pink"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/green">
</FrameLayout>
android:layout_height="wrap_content"
app:layout_constraintHeight_max="300dp"
app:layout_constrainedHeight="true"
be sure to set the height wrap_content
<View
android:id="#+id/view2"
android:layout_width="88dp"
android:layout_height="0dp"
android:background="#F44"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintHeight_max="300dp"
/>
<View
android:id="#+id/view"
android:layout_width="88dp"
android:layout_height="150dp"
android:background="#690"
app:layout_constraintBottom_toTopOf="#+id/view3"
app:layout_constraintTop_toBottomOf="#+id/view2"
/>
<View
android:id="#+id/view3"
android:layout_width="88dp"
android:layout_height="150dp"
android:background="#93C"
app:layout_constraintBottom_toBottomOf="parent"
/>
The issue could be that you can't have both those constraints set at the same time on the red view:
app:layout_constraintBottom_toTopOf="#+id/green"
app:layout_constraintTop_toBottomOf="#+id/appBarLayout"
If both those constraints are set, then the red view will be attached on top to the appBarLayout, and on the bottom to the green view, and this means that it will occupy all the space between those two views.
If you want to have the max height constraint be respected, you need to remove one of those two constraints. Which one should be removed depends on what kind of final result you are expecting.
OLD ANSWER
I think you should use android:maxHeight instead of app:layout_constraintHeight_max.
Related
Want I want to achieve is to compose two views, where one has some fixed aspect ratio and the other one stays below the first (unless the first gives enough space for the second one).
Here is one case:
Here is second case:
These two views are placed inside ConstraintLayout. I tried to use this part of 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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/view1"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="0.75"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/view2"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintHeight_min="100dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/view1"/>
</androidx.constraintlayout.widget.ConstraintLayout>
But it works only in the first case where there is enough space for View 2. In the second case, View 2 is moved below View 1 and it's outside the screen.
Edit
I've found solution, which I'm not proud of it, but it works. Still waiting for better idea. How it works? I put additional view (placeholder) which doesn't have constrained width to MATCH_PARENT but it has bottom margin (simulating minimum height for View 2). Placeholder behaves in the same way like View 1 when there is more space than minimum height, but in other cases it narrows a little bit to leave bottom margin.
<?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"
android:background="#android:color/black">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/view1"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintDimensionRatio="0.75"
app:layout_constraintTop_toTopOf="parent"/>
<View
android:id="#+id/placeholder"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="100dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintDimensionRatio="0.75"
app:layout_constraintVertical_bias="0"
app:layout_constraintBottom_toBottomOf="parent"/>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/view2"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#id/placeholder"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Well for starters, I don't see you trying to add any constraint to the dimensions of the first view. If you want it to have a fixed aspect ratio of 3:4 you should set app:layout_constraintDimensionRatio="H,3:4" to your desired view and remove the app:layout_constraintDimensionRatio="0.75". Therefore you won't need the placeholder view any longer. So your layout would look something like this:
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/view1"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="H,3:4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/view2"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/view1" />
But if you wish to keep your view1 heigh to a 75% screen ratio, then you should replace your placeholder view with a horizontal Guideline to which you set your app:layout_constraintGuide_percent="0.75". So the layout would look like this:
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/view1"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/guideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.75" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/view2"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/view1" />
Also please keep in mind that using match_parent inside a ConstraintLayout is not recommended. Instead, use the 0dp height/width dimension and set the appropriate constraint for the margins depending on the case (top, bottom / start, end)
I'm trying to build an intro to my AndroidX app with a ViewPager and Fragments (similar to this Intro Slider Tutorial) and have run into a layout problem.
I've got a Fragment in which I want the contents to be vertically centered. I've added a ScrollView as the root element of the Fragment in case the contents are too long to fit the screen.
If the contents aren't too long they are centered perfectly and nothing is cut off:
centering working
If they are too long though, the top of the content gets cut off and some extra space is added to the bottom (seems to be exactly the height of what was cut off the top):
overlong content, title cut off
overlong content, additional space at the bottom
Fragment layout
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:scrollbars="vertical">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/web_view_fragment_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical">
<TextView
android:id="#+id/web_view_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimaryDark"
android:lineSpacingMultiplier="1.2"
android:text="Title"
android:textAlignment="center"
android:textColor="#android:color/white"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<WebView
android:id="#+id/web_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/web_view_title" />
<TextView
android:id="#+id/web_view_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/design_default_color_on_secondary"
android:lineSpacingMultiplier="1.2"
android:padding="0dp"
android:text="Description"
android:textAlignment="center"
android:textColor="#android:color/white"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/web_view" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
Please note:
Android Studio displays a warning for the ScrollView:
ScrollView size validation
This androidx.constraintlayout.widget.ConstraintLayout should use android:layout_height="wrap_content"
ScrollView children must set their layout_width or layout_height attributes to wrap_content rather than fill_parent or match_parent in the scrolling dimension
Issue id: ScrollViewSize
However, changing the layout_height of the ScrollView to wrap_content doesn't fix the problem and an error is shown instead of the warning:
WebViews in wrap_content parents
Placing a in a parent element that uses a wrap_content layout_height can lead to subtle bugs; use match_parent instead
The WebView implementation has certain performance optimizations which will not work correctly if the parent view is using wrap_content rather than match_parent. This can lead to subtle UI bugs.
Issue id: WebViewLayout
Activity layout with ViewPager
<?xml version="1.0" encoding="utf-8"?>
<!-- intro_activity -->
<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/intro_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/blueGray700">
<androidx.viewpager.widget.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/divider"
app:layout_constraintEnd_toStartOf="#id/divider"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="spread_inside" />
<View
android:id="#+id/divider"
android:layout_width="0dp"
android:layout_height="1dp"
android:background="?android:attr/listDivider"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/intro_tab_layout" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/intro_tab_layout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/intro_continue_button"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/intro_skip_button"
app:layout_constraintTop_toBottomOf="#+id/pager"
app:tabBackground="#drawable/tab_selector"
app:tabGravity="center"
app:tabIndicatorHeight="0dp"
app:tabMaxWidth="16dp" />
<Button
android:id="#+id/intro_skip_button"
style="#style/Widget.AppCompat.Button.Borderless"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="#string/intro_skip_button"
android:textColor="#android:color/white"
android:onClick="finishTutorial"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/pager" />
<Button
android:id="#+id/intro_continue_button"
style="#style/Widget.AppCompat.Button.Borderless"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="nextFragment"
android:padding="5dp"
android:text="#string/intro_continue_button"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/pager"
app:layout_constraintTop_toBottomOf="#+id/pager" />
</androidx.constraintlayout.widget.ConstraintLayout>
Clearly there's something wrong with my layouts but I can't figure out what the problem is. Any help would be greatly appreciated!
What I have found out so far:
The padding of the TextViews is not the problem.
If I remove android:layout_gravity="center_vertical" from the ConstraintLayout nothing is cut off. But then my contents are obviously not centered (which I want for aesthetical reasons).
How to make View FrameLayout fill all remaining space in ConstraintLayout
I have xml like:
<ImageView
android:background="#FF0000"
android:id="#+id/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_header"
android:scaleType="fitXY"
android:adjustViewBounds="true"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_default="wrap"
app:layout_constraintWidth_default="spread"/>
<FrameLayout
android:background="#00FF00"
app:layout_constraintHeight_default="spread"
app:layout_constraintWidth_default="wrap"
app:layout_constraintTop_toBottomOf="#id/header"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#id/footer"
android:id="#+id/task_fragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<LinearLayout
android:background="#FFFF00"
android:orientation="vertical"
android:id="#+id/footer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_default="spread"
app:layout_constraintWidth_default="spread"
app:layout_constraintBottom_toBottomOf="parent">
<ImageButton
style="?borderlessButtonStyle"
android:id="#+id/btn_ar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:padding="0dp"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:src="#drawable/ic_ar"/>
</LinearLayout>
There are header, footer and FrameLayout in the middle I want to make FrameLayout to fill all remaining space.
I don't understand, which properties I have to use to expand FrameLayout. Please help me!
EDIT: Or any solution with different layout.
This is really simple. To make any view fill up the available space either horizontally or vertically, just set the layout_width/layout_height to 0dp according to your need.
This work, go with ConstraintLayout because has better performance.
<?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">
<ImageView
android:background="#FF0000"
android:id="#+id/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_header"
android:minHeight="30dp"
android:scaleType="fitXY"
android:adjustViewBounds="true"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_default="wrap"
app:layout_constraintWidth_default="spread"/>
<FrameLayout
android:id="#+id/task_fragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#00FF00"
android:orientation="vertical"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#+id/btn_ar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_default="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/header"
app:layout_constraintWidth_default="wrap">
</FrameLayout>
<ImageButton
android:id="#+id/btn_ar"
style="?borderlessButtonStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:padding="0dp"
android:scaleType="fitXY"
android:src="#drawable/ic_ar"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
<FrameLayout
android:id="#+id/task_fragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#00FF00"
android:orientation="vertical"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#+id/btn_ar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_default="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/header"
app:layout_constraintWidth_default="wrap">
</FrameLayout>
This should work.
Explanation:
All you want is to make the top of this FrameLayout constraint to the bottom of the header, and the bottom of this FrameLayout constraint to the top of the footer.
After setting all the constraints, you still need to set the layout param of FrameLayout to match the constraint. In order to do this, you can try to set layout_height to 0dp. This will make the height of FrameLayout have the effect of match_constraint.
For more detail, you can check this doc: https://developer.android.com/reference/android/support/constraint/ConstraintLayout (just search the keyword match constraint and you will find that block), or simply check this similar answer: Set width to match constraints in ConstraintLayout
This layout will display a View with a color and another with another color.
When layout_constraintWidth_percent = 1 the views are the same width. When I set it between 0.92 <> 1 the foreground view becomes bigger then the background.
Can anyone solve this? I need the foreground to be x percentage of the background
<?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:paddingTop="15dp"
android:paddingBottom="15dp"
>
<View
android:id="#+id/background"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:background="#color/colorPrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<View
android:id="#+id/foreground"
android:layout_width="0dp"
android:layout_height="80dp"
android:background="#color/colorAccent"
app:layout_constraintWidth_percent="0.94"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintBottom_toBottomOf="#id/background"
app:layout_constraintLeft_toLeftOf="#id/background"
app:layout_constraintRight_toRightOf="#id/background"
app:layout_constraintTop_toTopOf="#id/background"
/>
</android.support.constraint.ConstraintLayout>
Remove the start and end margins of the background. If you want left and right margins, put them on the parent ConstraintLayout instead. As it is now you have margins on background but not on foreground.
Also set the background width to 0dp (the same as foreground). This way the background will be the full width of the parent ConstraintLayout (which can itself apply the margins you want) and the foreground will be the specified percentage of the background. Also set the horizontal bias of the foreground to 0.5 if you want it to be centered.
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="match_parent"
android:paddingTop="15dp"
android:paddingBottom="15dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
>
<View
android:id="#+id/background"
android:layout_width="0dp"
android:layout_height="100dp"
android:background="#color/colorPrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<View
android:id="#+id/foreground"
android:layout_width="0dp"
android:layout_height="80dp"
android:background="#color/colorAccent"
app:layout_constraintWidth_percent="0.94"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintBottom_toBottomOf="#id/background"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#id/background"
/>
</android.support.constraint.ConstraintLayout>
As stated from the doc, the percentage is relative to the parent:
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
The app:layout_constraintWidth_percent attribute is calculated according to the parent ConstraintLayout's dimension and not the horizontal constraints of the View. So you need to wrap the foreground in another ConstraintLayout like this (which is a bit ugly because of the nested layout):
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="15dp"
android:paddingBottom="15dp">
<View
android:id="#+id/background"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:background="#color/colorPrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#id/background"
app:layout_constraintLeft_toLeftOf="#id/background"
app:layout_constraintRight_toRightOf="#id/background"
app:layout_constraintTop_toTopOf="#id/background">
<View
android:id="#+id/foreground"
android:layout_width="0dp"
android:layout_height="80dp"
android:background="#color/colorAccent"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintWidth_percent="0.94"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
Keep in mind that using app:layout_constraintWidth_percent and margins on a View at the same time can potentially lead to some problems because the margins aren't taken into account for the width percentage.
You can also consider removing the margins from the background and possibly adding them to root ConstraintLayout as padding and I think this would help avoid having a nested layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="15dp"
android:paddingBottom="15dp"
android:paddingStart="16dp"
android:paddingEnd="16dp">
<View
android:id="#+id/background"
android:layout_width="0dp"
android:layout_height="100dp"
android:background="#color/colorPrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<View
android:id="#+id/foreground"
android:layout_width="0dp"
android:layout_height="80dp"
android:background="#color/colorAccent"
app:layout_constraintWidth_percent="0.94"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintBottom_toBottomOf="#id/background"
app:layout_constraintLeft_toLeftOf="#id/background"
app:layout_constraintRight_toRightOf="#id/background"
app:layout_constraintTop_toTopOf="#id/background"/>
</android.support.constraint.ConstraintLayout>
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"/>