How to vertically align text in a TextView with Compound Drawable

Question

This question is in a way a continuation of my last question.

My problem now is pretty much the same, except that instead of separating the image and text in differend views (namely ImageView and TextView) I learned I can use the attribute android:drawableLeft to set an image "for" my text (the suggestion was pointed to me by Eclipse with a warning icon on the LinearLayout line).

I thought the only difference would be that instead of setting the ImageView with setImageResource() method I would simply set the TextView's drawableLeft attributed with the setCompoundDrawablesWithIntrinsicBounds() method. Instead, when I made the change, I was taken back to my original issue: the text aligns with the top edge of the view rather than the center.

This is what my TextView looks like:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    >       
    <TextView 
        android:id="@+id/account_login"
        android:layout_marginTop="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:drawableLeft="@drawable/pm_gmail"
        android:drawablePadding="8dp"
        android:text="[email protected]"
        android:paddingLeft="16dp"
        android:layout_gravity="left|center_vertical" />

    <View
        android:layout_width="fill_parent"
        android:layout_height="1dip"
        android:layout_centerVertical="true"
        android:layout_below="@id/account_login"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginTop="5dp"
        android:background="#DDDDDD" />

</RelativeLayout>

The second View is just a separator.

... and this is what the layout looks like after setting the above mentioned attributes: (I don't have enough reputation to post images yet, so here's the link to it)

(Just to be clear, this is only a static example. My text and image are both set dynamically in the code at runtime).

Any help is greatly appreciated.

Polyurethane

Dang it! Why does always have to be so simple yet I don't get it? @Frank N. Stein, Do you mind explaining me the difference? And don't you want to answer the question so I can accept it? – Polyurethane

Just did. The explanation is VEEEEERY simple. – Leclerc

Answer 1

Change android:layout_gravity="left|center_vertical" to android:gravity="center_vertical".
layout_gravity is for positioning a View inside a container (layout), while gravity is referred to the View contents (that is, in this case, the text inside the TextView).

Seizing

Thank you very much! I love the Stack Overflow community! – Polyurethane

We are here to help each other. Maybe, one day, I'll have a question and you'll have the answer. – Leclerc

@BobMalooga or whoever, how do you change the gravity of the icon? I expected foregroundGravity to work but it did not seem to. (e.g. if you need them both way up at the top to match the design) (and you are stuck with Textview with compound drawable because it's part of NavigationView) – Sanjuanitasank

@Sanjuanitasank For positioning the compound drawable inside the TextView, simply choose the correct draawble: drawableTop, drawableLeft, drawableBottom or drawableRight. You can also specify the amount of padding by choosing a value for drawablePadding. For the rest, the compound drawable is part of the TextView and sticks with it. – Leclerc

@BobMalooga When you choose left it 'centers' it vertically on the left - 9 o'clock. Unfortunately, the requirement is that the icon floats to the top, lining up with the text at the top of it rather than being centered in front of the text. I was trying to use drawables that point to <bitmap gravity="something" src=realdrawable.png/> but it didnt' seem to work. – Sanjuanitasank

I'm not sure I understood you requirement. If I understood it correctly, you want the icon on top of the text an the text on the bottom. If so, just choose darawableTop – Leclerc