CODEWITHSUNDEEP
androidandroid-layoutandroid-constraintlayoutconstraint-layout-chains
Drocchio
Drocchio

Reputation: 413

three horizontal buttons with a small margin between them with ConstraintLayout

I want to draw a keyboard with big buttons for a calc app, three per row, and between these three buttons I need to put a small empty margin. I know how to do that with a LinearLayout but I completly ignore how this can be achieved with Constraint Layouts.

I tried to assign some distance between the buttons, centering the central one and then constraining to the central button the right and the left one. the result is terrible because using different screens the distance between the button can become huge, while instead I want to achieve the same proportions in all the screens, in other words the distance between the buttons(the small margins) should be always really tiny, undependently by the screen, filling almost all the screen surface with the buttons and not with the empty spaces.

Upvotes: 0

Views: 1447

Answers (1)

Tamir Abutbul
Tamir Abutbul

Reputation: 7661

To achieve this in constraintLayout you can use barriers/guidelines/chains.

The easiest solution would be to use chains:

<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/frameLayout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Fragments.MenusDesign.ExpandableCategoriesMenu.ExpandableCategoriesMenu">


<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintBottom_toBottomOf="@+id/button2"
    app:layout_constraintEnd_toStartOf="@+id/button2"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/button2" />

<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/button3"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/button3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintBottom_toBottomOf="@+id/button2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button2"
    app:layout_constraintTop_toTopOf="@+id/button2" />

Upvotes: 2

Related Questions