Contoh XML Dua Button Dengan Width Sama Di Constraint Layout Android

by

Membuat dua button dengan width yang sama dalam satu baris cukup sulit dilakukan jika menggunakan Constraint Layout. Apalagi jika harus membuatnya tetap di center.

Dua button dengan width sama di Constraint Layout

Jika di Linear Layout bisa menggunakan android:layout_weight, di Constraint Layout tidak bisa. Dan salah satu solusinya yaitu menggunakan guideline.

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/btn_menu_1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:drawableTop="@drawable/icon1"
        android:drawablePadding="10dp"
        android:text="@string/text_menu_1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/guideline"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5" />

    <Button
        android:id="@+id/btn_menu_2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:drawableTop="@drawable/icon2"
        android:drawablePadding="10dp"
        android:text="@string/text_menu_2"
        app:layout_constraintStart_toEndOf="@id/guideline"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Guideline di set di tengah-tengah agar button pertama terletak di sebelah kiri guideline dan button kedua terletak di sebelah kanan guideline.

Jadi mau bagaimanapun ukuran layar device, dua button ini akan responsive dan tetap center dengan width yang sama dalam satu baris.

Leave a Reply