Android - How To Display 4 Text Views With Icons?

I want to display 4 texts with images exactly like showed in this screenshot: Notice the 4 texts at the buttom of the image, with the icons next to them. My question is how do I d

Solution 1:

Use drawableLeft for this

<TextView

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableLeft="@drawable/icon_1"
        android:gravity="center_vertical"
        android:textStyle="bold"
        android:textSize="24dip"
        android:maxLines="1"
       />

OR

In java code

TextView textView = (TextView) findViewById(R.id.yourTV);
textView.setCompoundDrawablesWithIntrinsicBounds(R.drawable.icon_1, 0, 0, 0);

Solution 2:

You can just use a TextView, and add for example android:drawableLeft="@drawable/your_icon" Use left/right depending of where you want your icon.

Solution 3:

<LinearLayout

     android:orientation="vertical"
     android:layout_width="match_parent"
     android:layout_height="match_parent">

    <LinearLayout
            android:orientation="horizontal"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content">

        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Text"
                android:layout_weight="1"
                android:drawableLeft="@drawable/icon"
                android:gravity="center_horizontal"/>

        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Text"
                android:layout_weight="1"
                android:drawableLeft="@drawable/icon"
                android:gravity="center_horizontal"/>
    </LinearLayout>

    <LinearLayout
            android:orientation="horizontal"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">

        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Text"
                android:layout_weight="1"
                android:drawableLeft="@drawable/icon"
                android:gravity="center_horizontal"/>

        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Text"
                android:layout_weight="1"
                android:drawableLeft="@drawable/icon"
                android:gravity="center_horizontal"/>
    </LinearLayout>
</LinearLayout>

Solution 4:

Ideal approach to implement this would be:

textView.setCompoundDrawables(getDrawable(R.drawable.image), 15), null, null, null);

add below function to your code as well:

public Drawable getDrawable(int drawable, float form_factor) {
    Drawable top = getApplicationContext().getResources().getDrawable(drawable);
    top.setBounds(0, 0, (int)form_factor, (int)form_factor);
    return top;
}

This way your can set/choose/resize your text-icons appropriately(by adjusting the value of form-factor) which is not possible when done through xml.

NOTE: I've written above function for square-drawables, for rectangular images we will have to do setBounds accordingly.