Как сделать так, чтобы Android макет был похож на выбор изображений в Instagram?

Question

Пытаюсь создать макет активности выбора изображения, похожий на Instagram, как на картинке ниже.

Но в моем случае, когда я добавлю RelativeLayout >> GridView, image_button и camera_button будут вытеснены с экрана.

Может кто-нибудь помочь, как мне организовать макет, чтобы дать мне ожидаемый результат?

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@color/white"
    tools:context=".imageEditClass"
    android:id="@+id/activity_image_edit_class">

        <FrameLayout
            android:id="@+id/top_frame"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <com.fenchtose.nocropper.CropperView
                android:background="#ff282828"
                android:id="@+id/croppingImagePreview"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:nocropper__grid_opacity="0.8"
                app:nocropper__grid_thickness="0.8dp"
                app:nocropper__padding_color="@color/colorAccent"
                app:nocropper__grid_color="@color/colorAccent" />

            <ImageView
                android:id="@+id/snap_button"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_margin="16dp"
                android:padding="8dp"
                android:layout_gravity="start|bottom"
                android:background="@drawable/black_transp_circ_ripple"
                android:scaleType="center"
                android:src="@mipmap/ic_crop_free_white_24dp"
                android:contentDescription="Crop" />

            <ImageView
                android:id="@+id/rotate_button"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:padding="8dp"
                android:layout_margin="16dp"
                android:layout_gravity="end|bottom"
                android:background="@drawable/black_transp_circ_ripple"
                android:scaleType="center"
                android:src="@mipmap/ic_rotate_right_white_24dp"
                android:contentDescription="Rotate" />

        </FrameLayout>


    <GridLayout
        android:id="@+id/bottom_grid"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:columnCount="3"
        android:rowCount="3"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="211dp">

            <GridView
                android:id="@+id/galleryGridView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:columnWidth="280dp"
                android:gravity="center"
                android:horizontalSpacing="1dp"
                android:numColumns="4"
                android:padding="1dp"
                android:stretchMode="columnWidth"
                android:verticalSpacing="2dp">

            </GridView>

        </RelativeLayout>


            <Button
                android:layout_width="125dp"
                android:layout_height="wrap_content"
                android:text="@string/galleryText"
                android:background="@color/white"
                android:textColor="@color/colorPrimary"
                android:id="@+id/image_button"/>

            <Button
                android:layout_width="125dp"
                android:layout_height="wrap_content"
                android:text="@string/photoText"
                android:background="@color/white"
                android:textColor="@color/colorPrimary"
                android:id="@+id/camera_button"/>

            <Button
                android:layout_width="120dp"
                android:layout_height="wrap_content"
                android:text="@string/saveText"
                android:background="@color/colorPrimary"
                android:layout_gravity="end|bottom"
                android:id="@+id/crop_save_button"/>

        </GridLayout>

    </RelativeLayout>

Answer 1

Вы определили свой GridLayout, чтобы иметь 3 строки и 3 столбца. Затем вы предоставляете RelativeLayout, содержащий GridView в качестве первой ячейки (позиция 0/0). Затем вы предоставляете Button для «Галереи», которая будет занимать позицию 0/1. Затем вы предоставляете Button для «Фото», которое будет занимать позицию 0/2. Ваша кнопка «Сохранить» теперь будет занимать ячейку в строке 1, столбце 0. Это не то, что вам нужно.

Почему у вас есть RelativeLayout, содержащий GridView внутри GridLayout? Кажется, что вам нужно только GridLayout, чтобы равномерно расположить кнопки внизу.

В качестве альтернативы можно указать, что RelativeLayout должен занимать 3 столбца в пределах GridLayout, что будет располагать 3 кнопки в 3 ячейках указателя строки 1. Это можно сделать, указав RelativeLayout a ColumnSpec с columnSpan=3. Это говорит GridLayout, что RelativeLayout хочет иметь 3 ячейки (ie: вся ширина строки).