Android : How to simplify my layout?

Question

I am trying to create this interface :

But today my result is :

As you can see, i have some problems in my layout :

• I would like to have a fix height for each item
• There is some white space..

Here is the code of my grid_single.xml :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#E9EAEA"
    android:orientation="vertical"
    android:padding="7dp" >

    <ImageView
        android:id="@+id/grid_image"
        android:layout_width="wrap_content"
        android:layout_height="170dp"
        android:scaleType="centerCrop" >

    </ImageView>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_linearlayout"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/grid_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="3dp"
            android:text="ufehiuhrieu gihtrg irth gi rtghrtg trgihtgtr"
            android:textColor="#5D5D5D"
            android:textSize="14sp"
            android:textStyle="bold" />

    </LinearLayout>

</LinearLayout>

Answer 1

You can make the size of the TextView fixed, either using a pre-determined android:layout_height or by using android:lines. (I prefer the second option)

<TextView
    android:id="@+id/grid_text"
    android:lines="3"
    ... />

Answer 2

You may want to try compound drawables, which tear down the View count (and optimize performances):

Here's an extreme simplification of your layout (for best performances):

<?xml version="1.0" encoding="utf-8"?>
<TextView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/grid_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="3dp"
    android:background="@drawable/bg_linearlayout"
    android:drawableTop="@drawable/top1"
    android:drawablePadding="8dp"
    android:padding="7dp"
    android:text="ufehiuhrieu gihtrg irth gi rtghrtg trgihtgtr"
    android:textColor="#5D5D5D"
    android:textSize="14sp"
    android:textStyle="bold"
/>

Note the drawableTop attribute: That's the compound drawable saying: "put this image on the top of this text"

To use it in Java code:

Drawable drw = getResources().getDrawable(R.drawable.your_drawable_here);
// setCompoundDrawablesWithIntrinsicBounds (int left, int top, int right, int bottom)
myText.setCompoundDrawablesWithIntrinsicBounds(null, drw, null, null);