Align top of image to top of TextView

Question

I want to create a layout that aligns the top of an image to the top of a TextView like this:

---------  Text text text text text text text
| Image |  text text text text text text text
---------  text text text text text text text
           text text text text text text text
           text text text text text.

I tried doing this by setting android:drawableLeft to my image, but that centers the image vertically:

           Text text text text text text text
---------  text text text text text text text
| Image |  text text text text text text text
---------  text text text text text text text
           text text text text text.

Is this possible with just a TextView or do I need to create a RelativeLayout containing a TextView and an ImageView?

Here is the XML layout for my TextView that gives the incorrect layout:

<TextView
    android:gravity="top"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:drawableLeft="@drawable/image"
    android:drawablePadding="8dp"
    android:text="@string/text" />

The android:gravity="top" attribute only seems to affect the text, not the drawable.

@Claes Did you find answer to this? I am also facing similar problem — user3265443, Jan 13 '15 at 05:36
@user3265443 Use a custom Drawable that wraps your Drawable. See my answer for sample code: http://stackoverflow.com/a/28906636/710990. — Reinier, Mar 06 '15 at 20:01

Reinier · Accepted Answer · 2015-03-08T19:15:32.737

33

You can align a compound-Drawable to the top (or bottom) by creating a custom Drawable that wraps your Drawable, and then manipulate the drawing of your custom Drawable by overriding the method onDraw(Canvas).

The sample below is the simplest possible example. This aligns the image to the top, but you can also make it align to the bottom, left or right of the TextView by implementing the required logic in the onDraw(Canvas)-method. You might also want to build in a margin in the onDraw(Canvas), to make your design implementation pixel perfect.

Sample usage:

GravityCompoundDrawable gravityDrawable = new GravityCompoundDrawable(innerDrawable);
// NOTE: next 2 lines are important!
innerDrawable.setBounds(0, 0, innerDrawable.getIntrinsicWidth(), innerDrawable.getIntrinsicHeight());
gravityDrawable.setBounds(0, 0, innerDrawable.getIntrinsicWidth(), innerDrawable.getIntrinsicHeight());
mTextView.setCompoundDrawables(gravityDrawable, null, null, null);

Sample code:

public class GravityCompoundDrawable extends Drawable {

    // inner Drawable
    private final Drawable mDrawable;

    public GravityCompoundDrawable(Drawable drawable) {
        mDrawable = drawable;
    }

    @Override
    public int getIntrinsicWidth() {
        return mDrawable.getIntrinsicWidth();
    }

    @Override
    public int getIntrinsicHeight() {
        return mDrawable.getIntrinsicHeight();
    }

    @Override
    public void draw(Canvas canvas) {
        int halfCanvas= canvas.getHeight() / 2;
        int halfDrawable = mDrawable.getIntrinsicHeight() / 2;

        // align to top
        canvas.save();
        canvas.translate(0, -halfCanvas + halfDrawable);
        mDrawable.draw(canvas);
        canvas.restore();
    }
}

edited Mar 08 '15 at 19:15

answered Mar 06 '15 at 19:57

Reinier

3,836
1
27
28

great solution. This has to be the accepted answer. – TharakaNirmana Jul 21 '15 at 09:18
1

how to used it to align text and left drawable to left of textview – Reprator Mar 02 '16 at 05:16
I had to set the bottom bounds of the gravityDrawable to 0: gravityCompoundDrawable.setBounds(0, 0, originalCompoundDrawable.getIntrinsicWidth(), 0); – luckyhandler May 23 '16 at 13:57
1

I don't understand how this is the accepted answer. It won't compile unless you also override getOpacity(), setAlpha(...) and setColorFilter(...). What would be the functionality for those 3 methods? – Tharkius Nov 14 '17 at 16:51
2

@Tharkius Those methods were ommitted from the answer because they are not related to the problem of alignment, but you're right that they need to be implemented when you are creating a custom Drawable, as we are doing here. In this specific case you would probably call the respective method on the mDrawable field for each of the methods getOpacity(), setAlpha() and setColorFilter(). So in getOpacity() you would return mDrawable.getOpacity(), in setAlpha() you would call mDrawable.setAlpha(..), etc. The meaning of those methods you can find in the documentation of Drawable. – Reinier Nov 15 '17 at 20:15
Upvoted , I want to give +100 to this answer but I cant.Thanks a lot @Reinier. I want to show the text below the image so could you please suggest how to do that with the above code.Thanks – mobi_dev Dec 28 '22 at 11:07

score 1 · Answer 2 · answered Apr 23 '12 at 04:26

Try to USe RelativeLayout......

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/imageView1"
        android:text="@string/text" />

</RelativeLayout>

The point of CompoundDrawable is to keep minimize the number of views in the the View hierarchy. This solution doesn't answer the question, even though it will visually look the same. — rds, Jun 13 '16 at 13:21

score 0 · Answer 3 · answered Nov 30 '12 at 05:33

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/imageView1"
        android:text="@string/text" />

</RelativeLayout>

This would do it.

score 0 · Answer 4 · answered Feb 20 '14 at 08:05

Use layout_alignTop. With it you can align the top of the view to the top of another view

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/text" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/textView1"
        android:layout_toLeftOf="@id/textView1"
        android:src="@drawable/ic_launcher" />    

</RelativeLayout>

Goran Horia Mihail · Answer 5 · 2020-09-07T13:47:42.853

This is what has worked for me:

class MyTextView @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null
) : AppCompatTextView(context, style) {
    private val leftDrawable = ContextCompat.getDrawable(context, R.drawable.checkmark)

    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        setBulletPoint(compoundDrawables[0], canvas)
    }

    private fun setBulletPoint(drawableLeft: Drawable?, canvas: Canvas?) {
        if (!TextUtils.isEmpty(text)) {
            leftDrawable?.let { drlft ->
                if (lineCount == 1) {
                    setCompoundDrawablesWithIntrinsicBounds(drlft, null, null, null)
                } else {
                    val buttonWidth = drlft.intrinsicWidth
                    val buttonHeight = drlft.intrinsicHeight
                    val topSpace = abs(buttonHeight - lineHeight) / 2
           
                    drlft.setBounds(0, topSpace, buttonWidth, topSpace + buttonHeight)
                    canvas?.apply {
                        save()
                        drlft.draw(canvas)
                        restore()
                    }
                }
            }
        }
    }
}

Align top of image to top of TextView

5 Answers5

Linked

Related