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