How to make 3 imageButtons responsive?

Question

I'm trying to achieve something like this:

A three image button menu that occupy the entire screen , the three of them have to be the equal height , width would be device's , I'm having a hard time making it, with a ConstraintLayout I sort of made it 'responsive' but depending on the device size, gaps appear, not sure why:

This is my layout:

<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="#921B1F33"
tools:context="com.example.minacar.MainActivity">


<ImageButton
    android:id="@+id/transferButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:contentDescription="@string/descripcion_button_1"
    android:scaleType="fitXY"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@drawable/menutransfer"

    />


<ImageButton
    android:id="@+id/rentaCarButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:contentDescription="@string/descripcion_button_2"
    android:scaleType="fitXY"
    app:layout_constraintBottom_toTopOf="@+id/transferButton"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@drawable/menurent" />

<ImageButton
    android:id="@+id/carButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:contentDescription="@string/descripcion_button_3"
    android:scaleType="fitXY"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/transferButton"
    app:srcCompat="@drawable/menucar" />

Any help or guidance would be very much appreciated, thanks in advance!

Not sure if it'd help, the images I'm using are the three the same size, 1417x929 PNG.

Answer 1

Use a vertical chain in your layout and make sure the ImageButtons match the constraints by setting all four of them (top, bottom, start, end) and then setting width and height to 0. The spaces you get in-between come form the ImageButton 's default padding. To prevent that add a transparent background to all of them.

<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="#921B1F33">


    <ImageButton
        android:id="@+id/transferButton"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        app:layout_constraintBottom_toTopOf="@id/carButton"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/rentaCarButton"
        app:srcCompat="@drawable/menutransfer"
        android:background="@color/transparent"
        />


    <ImageButton
        android:id="@+id/rentaCarButton"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        app:layout_constraintBottom_toTopOf="@+id/transferButton"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed"
        app:srcCompat="@drawable/menurent"
        android:background="@color/transparent"/>

    <ImageButton
        android:id="@+id/carButton"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/transferButton"
        app:srcCompat="@drawable/menucar"
        android:background="@color/transparent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Answer 2

I recommend using LinerLayout in this situation, setting the weight of each element = 1, and the width of match_parent will achieve the desired behavior.

<LinerLayout android:orientation = "vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#921B1F33"
tools:context="com.example.minacar.MainActivity">

<ImageButton
    android:id="@+id/carButton"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:weight = "1" />

<ImageButton
    android:id="@+id/carButton"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:weight = "1" />

<ImageButton
    android:id="@+id/carButton"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:weight = "1" />

<LinerLayout>

Answer 3

You can use chains with:

  app:layout_constraintVertical_chainStyle="spread"

Refer to:https://medium.com/@nomanr/constraintlayout-chains-4f3b58ea15bb