ConstraintLayout View Size – Ratio to parent… here is a solution to the problem.
ConstraintLayout View Size – Ratio to parent
I’m learning how to use ConstraintLayout. I want to make a menu with 4 elements.
The element should be centered in the parent element
The size of the element should be 1:5 of the height of the parent element (ratio 1:1 – square).
I did 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="match_parent">
<android.support.constraint.Guideline
android:id="@+id/split"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.6" />
<android.support.constraint.ConstraintLayout
android:id="@+id/tiles_container"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="@color/colorPrimary"
app:layout_constraintBottom_toTopOf="@+id/split"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0">
<android.support.constraint.Guideline
android:id="@+id/container_v"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
<android.support.constraint.Guideline
android:id="@+id/container_h"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<ImageView
android:id="@+id/tile_1"
android:layout_width="@dimen/tile_size"
android:layout_height="@dimen/tile_size"
android:layout_marginBottom="@dimen/tile_margin"
android:layout_marginEnd="@dimen/tile_margin"
app:layout_constraintBottom_toTopOf="@+id/container_v"
app:layout_constraintEnd_toStartOf="@+id/container_h"
app:srcCompat="@mipmap/ic_launcher" />
<ImageView
android:id="@+id/tile_2"
android:layout_width="@dimen/tile_size"
android:layout_height="@dimen/tile_size"
android:layout_marginBottom="@dimen/tile_margin"
android:layout_marginStart="@dimen/tile_margin"
app:layout_constraintBottom_toTopOf="@+id/container_v"
app:layout_constraintStart_toStartOf="@+id/container_h"
app:srcCompat="@mipmap/ic_launcher" />
<ImageView
android:id="@+id/tile_3"
android:layout_width="@dimen/tile_size"
android:layout_height="@dimen/tile_size"
android:layout_marginTop="@dimen/tile_margin"
android:layout_marginEnd="@dimen/tile_margin"
app:layout_constraintEnd_toStartOf="@+id/container_h"
app:layout_constraintTop_toTopOf="@+id/container_v"
app:srcCompat="@mipmap/ic_launcher" />
<ImageView
android:id="@+id/tile_4"
android:layout_width="@dimen/tile_size"
android:layout_height="@dimen/tile_size"
android:layout_marginTop="@dimen/tile_margin"
android:layout_marginStart="@dimen/tile_margin"
app:layout_constraintStart_toStartOf="@+id/container_h"
app:layout_constraintTop_toTopOf="@+id/container_v"
app:srcCompat="@mipmap/ic_launcher" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
Unfortunately, I had to hardcode the width and height of the image. Whether the size of the child can be set in proportion to the parent, as in Xcode
Solution
You should never nest one ConstraintLayout inside another. You should always maintain a flat layout hierarchy.
The “1.1.0-beta3” version of ConstraintLayout allows for the use of percentage sizes and many cooler features.
Simply set the
layout_constraintHeight_default property to % (using percentage units), and then set the percentage using layout_constraintHeight_percent. (Width-related properties are also available).
Here is the solution to use the guide:
<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/parent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#caf">
<android.support.constraint.Guideline
android:id="@+id/guideline_ver"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent=".5" />
<android.support.constraint.Guideline
android:id="@+id/guideline_hor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent=".5" />
<View
android:id="@+id/topLeft"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="4dp"
android:background="#fff"
app:layout_constraintBottom_toTopOf="@+id/guideline_hor"
app:layout_constraintDimensionRatio="h,1:1"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent=".2"
app:layout_constraintRight_toLeftOf="@+id/guideline_ver" />
<View
android:id="@+id/topRight"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="4dp"
android:background="#fff"
app:layout_constraintBottom_toTopOf="@+id/guideline_hor"
app:layout_constraintDimensionRatio="h,1:1"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent=".2"
app:layout_constraintLeft_toRightOf="@+id/guideline_ver" />
<View
android:id="@+id/bottomLeft"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="4dp"
android:background="#fff"
app:layout_constraintDimensionRatio="h,1:1"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent=".2"
app:layout_constraintRight_toLeftOf="@+id/guideline_ver"
app:layout_constraintTop_toBottomOf="@+id/guideline_hor" />
<View
android:id="@+id/bottomRight"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="4dp"
android:background="#fff"
app:layout_constraintDimensionRatio="h,1:1"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent=".2"
app:layout_constraintLeft_toRightOf="@+id/guideline_ver"
app:layout_constraintTop_toBottomOf="@+id/guideline_hor" />
</android.support.constraint.ConstraintLayout>
Hope this helps!