Search code examples
javaandroidandroid-imagebutton

How to make 3 imageButtons responsive?


I'm trying to achieve something like this:

enter image description here

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:

enter image description here

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.


Solution

  • 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>