Image layout dynamically after photo is captured

Question

How do I create a layout exactly like this (The layout is equal to both left and right):

I’ll explain how I intend to do this and if possible help me because I don’t know how to do it this way:

I am browsing in my app and press a button that goes to the picture screen. This picture screen is empty. Then I press the icon on action bar To take the picture, I take the picture and when I finish taking the picture, I go back to the screen of images that was previously empty and now it looks like this image above, only appearing only an image with a description below. This description would be empty and I would post it after the photo was taken. Now I press the photo button again and the same process occurs only instead of having an image, we would now have two images and so on.

How can I do that?

Answer 1

To do this: You need to use one GridView with two columns, could use a StaggeredGridView (etsy Stagerredgridview) if the images have different heights, but this is not the case.

To make a square image, I suggest this subclass of Imageview:

public class SquareImageView extends ImageView {
    public SquareImageView(Context context) {
        super(context);
    }

    public SquareImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public SquareImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(getMeasuredWidth(), getMeasuredWidth()); //Snap to width
    }
}

It forces the image height to be the same length as the width.

For the layout of the view, I recommend the following:

<GridView
        android:id="@+id/gridview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:stretchMode="columnWidth"
        android:numColumns="2" />

For item layout within Gridview:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <SquareImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop" />

    <TextView
        android:id="@+id/name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:text="Fulaninho"
        android:textColor="@color/white"
        android:ellipsize="end"
        android:lines="2"
        android:gravity="center_vertical"
        android:fontFamily="sans-serif-light"
        android:background="#99000000" />
</FrameLayout>

In this case the image will be scaled keeping the Aspect Ratio. Of course some details are missing, but the thick one is this one.

Ah, I didn’t comment on adding images dynamically in Gridview and how to access camera features, but I believe the question was about the layout.

Answer 2

I managed to make the layout thanks to the help of @Walkim, followed his example by modifying according to my needs. First I wanted the layout as the question, but I had to make modifications and my layout was as I will show you.

fragment_imagem_instrument.xml

<GridView
    android:id="@+id/gridview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:verticalSpacing="10dp"
    android:horizontalSpacing="10dp"
    android:stretchMode="columnWidth"
    android:layout_margin="5dp"
    android:numColumns="2"/>

<TextView
    android:id="@+id/textViewSemDados"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingLeft="8dp"
    android:paddingRight="8dp"
    android:text="@string/sem_dados"
    android:textColor="#FFFFFF"
    android:textSize="20sp"/>

This Layout above refers to the main layout of the Fragment where there is a GridView which will be dynamically filled with a Customadapter of mine. The TextView serves only to display text "Dataless" when there is no data available to be displayed. When there is I juice with the TextView.

Each item of GridView takes the form of a ImageView with a CheckBox to mark the image or not. Let’s see now the layout of each item of GridView.

item_imagem_instrument.xml

<?xml version="1.0" encoding="utf-8"?>

<nome.do.meu.pacote.SquareImageView
    android:id="@+id/squareImageView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="centerCrop"
    android:layout_alignParentLeft="true"
    android:layout_marginLeft="0dp"
    android:layout_alignParentTop="true"
    android:layout_marginTop="0dp"/>

<CheckBox
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/checkBoxImagemSelecionada"/>

To fill Gridview I used a Customadapter implementing the Viewholder standard. I’m just informing you here in case anyone wants to know how I dynamically filled in because my question was actually about the layout and not the fill-in, because I already knew how to do it. Note that I didn’t leave the images glued together as I wanted to first because I thought it got bad like this, and I also gave a space of each of the main window. Now let’s see how the whole layout has turned out?

No image available...

---

With an available image...

---

With two images available...

---

With four images available...