Как сделать 3 кнопки изображения отзывчивыми?

Question

Я пытаюсь добиться чего-то вроде этого:

Меню с тремя кнопками изображения, которое занимает весь экран три из них должны иметь равную высоту , ширина будет равна устройства, мне трудно это сделать, с ConstraintLayout я вроде бы сделал его «отзывчивым» но в зависимости от размера устройства появляются пробелы, не знаю почему:

Это мой макет:

<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" />

Любая помощь или руководство будут очень благодарны, заранее спасибо!

Не уверен, что это поможет, изображения, которые я использую, имеют три одинакового размера, 1417x929 PNG.

Answer 1

Используйте вертикальную цепочку в макете и убедитесь, что кнопки ImageButtons соответствуют ограничениям, установив все четыре из них (верх, низ, начало, конец), а затем установив ширину и высоту равными 0. Пробелы, которые вы получаете между формирует заполнение ImageButton по умолчанию. Чтобы предотвратить это, добавьте прозрачный фон для всех них.

<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

Вы можете использовать цепочки с:

  app:layout_constraintVertical_chainStyle="spread"

См .: https://medium.com/@nomanr / constraintlayout-chain-4f3b58ea15bb

Answer 3

Я рекомендую использовать LinerLayout в этой ситуации, установив вес каждого элемента = 1, и ширина match_parent достигнет желаемого поведения.

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