Menu
I'm trying to make 5 ImageButton on ConstraintLayout with Equal spacing between them, but i get some problem to anchor them and make it easily for example:
My xml code:
android:id="@+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="@drawable/sheet_shadow"
android:padding="5dp">
<ImageButton
android:id="@+id/btn1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="18dp"
android:layout_marginBottom="8dp"
android:background="?attr/selectableItemBackgroundBorderless"
android:tint="@color/grey_40"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/ic_more_vert" />
<ImageButton
android:id="@+id/btn2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="18dp"
android:layout_marginBottom="8dp"
android:background="?attr/selectableItemBackgroundBorderless"
android:tint="@color/grey_40"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@+id/btn1"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/ic_more_vert" />
<ImageButton
android:id="@+id/btn3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="18dp"
android:layout_marginBottom="8dp"
android:background="?attr/selectableItemBackgroundBorderless"
android:tint="@color/grey_40"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@+id/btn2"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/ic_more_vert" />
<ImageButton
android:id="@+id/btn4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="18dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:background="?attr/selectableItemBackgroundBorderless"
android:tint="@color/grey_40"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/btn5"
app:layout_constraintStart_toEndOf="@+id/btn3"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/ic_more_vert" />
<ImageButton
android:id="@+id/btn5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="18dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:background="?attr/selectableItemBackgroundBorderless"
android:tint="@color/grey_40"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/ic_more_vert" />
</android.support.constraint.ConstraintLayout>
840
You can create linear layouts now with ConstraintLayout by constraining the sides of each element with each other. The quick way of creating these layouts is to select all the views together and right click to center horizontally or vertically.
Results show that the fastest layout is Relative Layout, but difference between this and Linear Layout is really small, what we can't say about Constraint Layout. More complex layout but results are the same, flat Constraint Layout is slower than nested Linear Layout.
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).
ConstraintLayout has flat view hierarchy unlike other layouts, so does a better performance than relative layout. Yes, this is the biggest advantage of Constraint Layout, the only single layout can handle your UI.
You should create chain and set:
app:layout_constraintHorizontal_chainStyle=”spread”
Here you've got some resource about creating chains with ConstraintLayout: https://constraintlayout.com/basics/create_chains.html
Update:
Example
<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"
tools:context=".MainActivity">
<ImageButton
android:id="@+id/imageView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="8dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toStartOf="@id/imageView2"
app:layout_constraintHorizontal_chainStyle="spread"
android:src="@mipmap/ic_launcher"/>
<ImageButton
android:id="@+id/imageView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="8dp"
app:layout_constraintStart_toEndOf="@id/imageView1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toStartOf="@id/imageView3"
android:src="@mipmap/ic_launcher"/>
<ImageButton
android:id="@+id/imageView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="8dp"
app:layout_constraintStart_toEndOf="@id/imageView2"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toStartOf="@id/imageView4"
android:src="@mipmap/ic_launcher"/>
<ImageButton
android:id="@+id/imageView4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="8dp"
app:layout_constraintStart_toEndOf="@id/imageView3"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toStartOf="@id/imageView5"
android:src="@mipmap/ic_launcher"/>
<ImageButton
android:id="@+id/imageView5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="8dp"
app:layout_constraintStart_toEndOf="@id/imageView4"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:src="@mipmap/ic_launcher"/>
144
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
