Android - How to display 4 text views with Icons?

Question

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 do it, I mean, how do I attach an icon to each text field and display it symmetrically at the bottom of the page.

I want to position my texts with the icons exactly like this example.

Thanks for your help, it's a really great exercise for a newbie :)

Dvir

Answer 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);

Answer 2

<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>

Answer 3

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.

Answer 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.