Menu
I'm learning how to use ConstraintLayout. I want to make menu with 4 element.
Elements should be centered in parent
Elements should be size 1:5 of parent height (ratio 1:1 - square)
I have made 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 Images width and height. Is it possible to set size of child based on ratio with parent (like in Xcode)
345
If you have the choice start with ConstraintLayout, but if you already have your app in RelativeLayout, stay with it. That's all I have been following. RelativeLayout is very limited in functionality and many complex layouts can't be made using it, especially when ratios are involved.
Let's take an ImageView and apply the constraintDimensionRatio attribute with a 16:9 value and see how that looks like. This will set the height of the ImageView following a 16:9 ratio, while the width of the ImageView will match the constraints of the parent.
ConstraintLayout has dual power of both Relative Layout as well as Linear layout: Set relative positions of views ( like Relative layout ) and also set weights for dynamic UI (which was only possible in Linear Layout). Despite the fact that it's awesome, it fails to serve the purpose with simple UI layouts.
A ConstraintLayout is a ViewGroup which allows you to position and size widgets in a flexible way. Note: ConstraintLayout is available as a support library that you can use on Android systems starting with API level 9 (Gingerbread).
You should never nest a ConstraintLayout inside another one. You should always maintain a flat layout hierarchy.
The "1.1.0-beta3" release of ConstraintLayout allows the usage of percentage dimensions and many more cool features.
Just set the "layout_constraintHeight_default" attribute to "percent" (to use percentage units), and set the percentage using "layout_constraintHeight_percent". (width related attributes are available too)
Here's the solution using Guidelines:
<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!
191
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
