Layout of images dynamically after photo is captured

2

How do I create a layout exactly like this (The layout is the same as the left and the right):

I will explain how I intend to do this and if possible help me because I do not know how to do this:

I'm browsing in my app and pressing a button that goes to the pictures screen. This image screen is empty. So I press the action bar icon to take a photo, I take the photo and when I finish taking the photo, I go back to the screen of images that were empty before, that only one image with a description below appears. This description would be empty and I would place it after the photo was taken. Now I press the take photo button again and the same process occurs instead of having an image, we would now have two images and so on.

How can I do this?

    
asked by anonymous 08.05.2014 / 16:49

2 answers

3

To do this: You need to use a GridView with two columns, you 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 height of the image 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 the layout of the item within the 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 while maintaining the Aspect Ratio. Of course some details are missing, but the bulk is that.

Ah, I did not comment on adding images dynamically in the GridView and how to access the camera features, but I believe the question was about the layout.

    
08.05.2014 / 17:22
0

I was able to do the layout with the help of @Walkim, I followed your example 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 it to you.

fragment_instrumento.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 Fragment layout where it has a GridView that will be populated dynamically with a CustomAdapter of mine. The TextView is only for displaying the text "No Data" when there is no data available to display. When I get summed with TextView .

Each item of GridView takes the form of a ImageView with a CheckBox to mark the image or not. Let's now look at the layout of each item in the GridView .

item_instrumento.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 the GridView I used a CustomAdapter implementing the ViewHolder pattern. I'm just informing you here if someone wants to know how I filled in dynamically because my question was actually about the layout and not the fill, as I already knew how to do it. Note that I did not leave the images glued to each other as I wanted first because I thought it was bad and I also gave a space of each of the main window. Now let's see how all this layout went into practice?

No image available ...

Withanimageavailable...

With two images available ...

Withfourimagesavailable...

    
13.05.2014 / 19:50