CODEWITHSUNDEEP
androidandroid-layoutandroid-activity
Peter
Peter

Reputation: 1931

How to make Android layout activity similar with instagrams image selection?

Am trying to create image selection activity layout similar with Instagram like below image.

enter image description here

But in my case when i add RelativeLayout >> GridView, the image_button and camera_button is will be pushed off the screen.

Please can anyone help how do I arrange the layout to give me expected result?

enter image description here

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

Upvotes: 0

Views: 68

Answers (1)

David Wasser
David Wasser

Reputation: 95588

You've defined your GridLayout to have 3 rows and 3 columns. You then provide a RelativeLayout containing a GridView as the first cell (position 0/0). You then provide a Button for "Gallery" which will be occupy position 0/1. You then provide a Button for "Photo" which will occupy position 0/2. Your "Save" `Button' will now occupy the cell at row 1, column 0. This isn't what you want.

Why do you have the RelativeLayout containing the GridView inside the GridLayout? It seems that you only need the GridLayout to evenly space the buttons at the bottom.

An alternative would be to indicate that the RelativeLayout should occupy 3 columns within the GridLayout, which would position the 3 buttons in the 3 cells of row index 1. You can do this by providing the RelativeLayout a ColumnSpec that has columnSpan=3. This tells the GridLayout that the RelativeLayout wants to be 3 cells (ie: the entire width of the row) wide.

Upvotes: 1

Related Questions