How to evenly distribute objects in Android constraint layout?

Question

I created a number pad that enters a pass code to get to another activity, and it works great, but the layout is a mess. In my screen shot, you can see it's a simple numeric keypad, but I have the buttons sized at 46dp. When I switch to another emulator or when I deploy to my own device which has the same dimensions, it puts the buttons all over the place and of the screen. It need to look like the screenshot on any Android device, at least in portrait mode.

I found similar questions that were not helpful because they used linear layouts. I would like to do this in constraint layout if possible. I come from a web dev background, so I would normally handle this using % for width/heights, but not sure how it works in Android development.

I'm just putting in 1 button in my sample code here, because all of the other buttons are pretty much the same except for their values and constraint relations.

<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"
    android:background="#9C8A7C"
    tools:context=".PswdActivity">

<Button
    android:id="@+id/button5"
    android:layout_width="125dp"
    android:layout_height="125dp"
    android:layout_marginStart="24dp"
    android:layout_marginTop="24dp"
    android:layout_marginEnd="24dp"
    android:textSize="50sp"
    android:text="5"
    android:onClick="btnEnterCode"
    app:layout_constraintEnd_toStartOf="@+id/button6"
    app:layout_constraintStart_toEndOf="@+id/button4"
    app:layout_constraintTop_toBottomOf="@+id/button2" />

Answer 1

I think, a Grid Layout will be better for this purpose as the buttons look like a grid.

This will fit itself on any screen.

<?xml version="1.0" encoding="utf-8"?>
<GridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:padding="20dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="3"
    android:rowCount="5"
    android:background="#fff"
    >
    <Button 
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"/>
    <Button 
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"/>
    <Button 
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"/>
    <Button 
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"/>
    <Button 
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"/>
    <Button 
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"/>
    <Button 
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"/>
    <Button 
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"/>
    <Button 
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"/>
    <Button 
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"/>
    <Button 
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"/>
    <Button 
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"/>
    <Button 
        android:layout_columnWeight="3"
        android:layout_rowWeight="1"
        android:layout_columnSpan="3"
        />
</GridLayout>

Answer 2

<Button
            android:id="@+id/three"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_alignParentTop="true"
            android:layout_marginStart="2dp"
            android:layout_marginTop="4dp"
            android:background="?attr/selectableItemBackgroundBorderless"
            android:clickable="true"
            android:focusable="true"
            android:text="@string/three"
            android:textColor="@color/colorPrimaryDark"
            android:textSize="18sp"
            app:layout_column="2"
            app:layout_constraintEnd_toStartOf="@+id/button2"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toEndOf="@+id/two"
            app:layout_constraintTop_toBottomOf="@+id/six"
            app:layout_row="2" />

you can use it like i had made the calculator using this type of view in Framelayout and if you want full xml code i can share with you

Answer 3

<?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/button1"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="1"
    app:layout_constraintEnd_toStartOf="@id/button2"
    app:layout_constraintHeight_percent="0.19"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@id/button2"
    app:layout_constraintWidth_percent="0.3" />

<Button
    android:id="@+id/button2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="2"
    app:layout_constraintBottom_toTopOf="@id/button5"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_percent="0.19"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintWidth_percent="0.3" />

<Button
    android:id="@+id/button3"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="3"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_percent="0.19"
    app:layout_constraintStart_toEndOf="@id/button2"
    app:layout_constraintTop_toTopOf="@id/button2"
    app:layout_constraintWidth_percent="0.3" />

<Button
    android:id="@+id/button4"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="4"
    app:layout_constraintEnd_toStartOf="@id/button5"
    app:layout_constraintHeight_percent="0.19"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@id/button5"
    app:layout_constraintWidth_percent="0.3" />

<Button
    android:id="@+id/button5"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="5"
    app:layout_constraintBottom_toTopOf="@id/button8"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_percent="0.19"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/button2"
    app:layout_constraintWidth_percent="0.3" />

<Button
    android:id="@+id/button6"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="6"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_percent="0.19"
    app:layout_constraintStart_toEndOf="@id/button5"
    app:layout_constraintTop_toTopOf="@id/button5"
    app:layout_constraintWidth_percent="0.3" />

<Button
    android:id="@+id/button7"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="7"
    app:layout_constraintEnd_toStartOf="@id/button8"
    app:layout_constraintHeight_percent="0.19"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@id/button8"
    app:layout_constraintWidth_percent="0.3" />

<Button
    android:id="@+id/button8"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="8"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_percent="0.19"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintWidth_percent="0.3" />

<Button
    android:id="@+id/button9"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="9"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_percent="0.19"
    app:layout_constraintStart_toEndOf="@id/button8"
    app:layout_constraintTop_toTopOf="@id/button8"
    app:layout_constraintWidth_percent="0.3" />

<Button
    android:id="@+id/button10"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="X"
    app:layout_constraintEnd_toStartOf="@id/button11"
    app:layout_constraintHeight_percent="0.19"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@id/button11"
    app:layout_constraintWidth_percent="0.3" />

<Button
    android:id="@+id/button11"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="0"
    app:layout_constraintBottom_toTopOf="@id/button13"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_percent="0.19"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/button8"
    app:layout_constraintWidth_percent="0.3" />

<Button
    android:id="@+id/button12"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="OK"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_percent="0.19"
    app:layout_constraintStart_toEndOf="@id/button11"
    app:layout_constraintTop_toTopOf="@id/button11"
    app:layout_constraintWidth_percent="0.3" />

<Button
    android:id="@+id/button13"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="back"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_percent="0.19"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/button11"
    app:layout_constraintWidth_percent="0.95" />

This layout is good for any screen size or orientation.

Portrait orientation:

Landscape orientation: