How can i do this layout in android

Question

Anyone has idea how can i do this gridview?

I think its a imageview with a background rounded in top, but the bottom of image? I dont have idea.

This is my code:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:bootstrapbutton="http://schemas.android.com/apk/res-auto"
    android:orientation="horizontal"
    android:id="@+id/panel_content"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:descendantFocusability="blocksDescendants"
    android:background="#686868">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#686868">

        <com.etsy.android.grid.util.DynamicHeightImageView
            android:id="@+id/grid_item_image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_alignParentStart="true"
            android:focusableInTouchMode="false"
            android:layout_above="@+id/linearLayout"
            android:layout_marginBottom="8dp"
            android:scaleType="fitCenter"
            android:background="@drawable/shadow" />

        <com.beardedhen.androidbootstrap.BootstrapButton
            android:id="@+id/btnDeletePhoto"
            bootstrapbutton:bb_size="small"
            android:layout_width="wrap_content"
            bootstrapbutton:bb_icon_right="fa-trash-o"
            bootstrapbutton:bb_type="danger"
            android:layout_height="wrap_content"
            android:layout_gravity="center|right"
            android:layout_margin="4dp"
            android:layout_alignParentTop="true"
            android:layout_alignParentRight="true" />

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="right|bottom"
            android:layout_toEndOf="@id/grid_item_image"
            android:layout_alignParentEnd="false"
            android:layout_alignParentRight="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:background="@drawable/bg_card"
            android:id="@+id/linearLayout"
            android:gravity="end"
            android:weightSum="1">

            <com.etsy.android.grid.util.DynamicHeightTextView
                android:id="@+id/photoDesc"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:text="Descrpciooon blablabla"
                android:textColor="#9A9A9A"
                android:maxLength="15"
                android:padding="4dp"
                android:singleLine="true"
                android:textStyle="bold"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="1dp"
                android:layout_weight="1" />

        </LinearLayout>

    </RelativeLayout>

</FrameLayout>

This is my result:

I need something xml to do the similar bottom of my example. Anyone has a example like this? I tried to do with a card-ui xml layout but it isnt like this. Thanks.

Answer 1

You can try this example, it will solve your problem.

http://www.androidviews.net/2013/01/pinterest-like-adapterview/

Answer 2

You need to create two Layout with rounded corners background . The top layout will have rounded corner only in top and bottom layout only in bottom corner. Add all the inner views(Image and text) inside the top layout. The bottom layout background color should match the main GridView layout , so that you will get the shadow feeling.

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" 
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
    android:layout_height="wrap_content"
    android:layout_width="fill_parent"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:background="@drawable/grid_item_bg">
 </LinearLayout>
 <LinearLayout
    android:layout_height="2dp"
    android:layout_width="fill_parent"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:background="@drawable/bottom_border"></LinearLayout>
 </LinearLayout>

Create a grid_item_bg drawable as

 <shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
  <solid android:color="@color/White"></solid>
  <corners android:topRightRadius="2dp" android:topLeftRadius="2dp"></corners>
</shape>

And bottom drawable as

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
 <corners android:bottomLeftRadius="2dp" android:bottomRightRadius="2dp"></corners>
 <gradient android:startColor="@color/DimGray" android:endColor="@color/DimGray"></gradient>
</shape>

Answer 3

Create activity layout file as GridView with the padding and spacing required and android:numColumns="2"

<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:horizontalSpacing="10dp"
    android:verticalSpacing="10dp"
    android:padding="10dp"
    android:numColumns="2">
</GridView>

Create a shape for the rounded corners.

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="10dp" />
</shape>

Create the image and title layout as LinearLayout with android:orientation="vertical" and android:background="@drawable/shape"

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@drawable/shape">
    <ImageView
        android:id="@+id/grid_item_image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </ImageView>
    <TextView
        android:id="@+id/grid_item_label"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </TextView>
</LinearLayout>