How to set android:drawable to left and top?

Question

I just wanted to set icon to the top and left corner of my TextView. This is my code and the output respectively:

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/Content"
    android:drawableLeft="@drawable/icon" />

Output:

outPut

but I want to set my icon to the top and left like this one :

Its not possible easily to do it with single view and you might have to use Relativelayout and a separate imageview for the image. — Kapil G, Aug 08 '17 at 10:16
See also https://stackoverflow.com/questions/59115360/how-to-set-drawable-in-top-left-in-a-textview. — CoolMind, Feb 02 '22 at 22:11

score 5 · Accepted Answer · edited Aug 08 '17 at 10:33

For this purpose you have to take the seperate imageView like this and in textview field you have to add one line code that android:layout_toRightOf="@+id/imageView": For better understanding see following code:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView"
        android:background="@mipmap/ic_launcher"
        />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
      android:layout_toRightOf="@+id/imageView"
        android:text="this si fodfjkhsdhaffjsdfasdfjhsdfhjsdhfjhsdfhsdhfhdsjfhsdjhfjhdsfhsdhfjhsdjhfjsdhfjhsdjfhjsdhfjhsdjfhjdshfsdjhfjsdhfsdkjhfjsdhfjhsdjfhjsdhjfhsdjhfjsdhfjhjsdhfjsdhjfhsdjf"
        />

</RelativeLayout>

Thanks for your feedback@DeepakRana – Shahin Ghasemi Aug 08 '17 at 11:35 — Shahin Ghasemi, Aug 08 '17 at 11:35

score 0 · Answer 2 · edited Aug 08 '17 at 10:26

0

You can use setCompoundDrawablesWithIntrinsicBounds(int left, int top, int right, int bottom)

(For better Understand refer this link:)

https://developer.android.com/reference/android/widget/TextView.html#attr_android:drawableTop

edited Aug 08 '17 at 10:26

komal akhani

553
6
20

answered Aug 08 '17 at 10:16

Harshit Trivedi

764
9
33

Looks like perfect answer – IntelliJ Amiya Aug 08 '17 at 10:17
it can't be done to approach my solution , because when i set Top and Left value to my icon it copy two version of this icon ... – Shahin Ghasemi Aug 08 '17 at 10:30
If you give your xml file – Harshit Trivedi Aug 08 '17 at 10:32

score 0 · Answer 3 · answered Aug 08 '17 at 10:17

0

Use below code;

<TextView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="@string/Content"
   android:drawableTop="@drawable/def"
   android:drawableLeft="@drawable/icon" />

answered Aug 08 '17 at 10:17

Vishal Vaishnav

3,346
3
26
57

AskNilesh · Answer 4 · 2017-08-08T10:59:49.367

0

try this

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

<TextView
    android:id="@+id/tv1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="hello world"
    android:layout_toEndOf="@+id/imageView" />



<ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_error" />


</RelativeLayout>

edited Aug 08 '17 at 10:59

answered Aug 08 '17 at 10:18

AskNilesh

67,701
16
123
163

Nested layouts are bad for performances. Consider using a RelativeLayout, instead. Or a GridView, a TableLayout, ... whatever allows you not to nest LinearLayouts inside one another. – Phantômaxx Aug 08 '17 at 10:47
I'd put THE ImageView (it's actually ONE) before. And then put the TexView relative to it. But then you'd get @deepakrana's answer. – Phantômaxx Aug 08 '17 at 10:58

score 0 · Answer 5 · answered Aug 08 '17 at 10:23

You can align a compound-Drawable to the top (or bottom) by creating a custom Drawable that wraps your Drawable.

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());
textView.setCompoundDrawables(gravityDrawable, null, null, null);

Custom GravityCompoundDrawable class:

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();
 }
}

copied from here: https://stackoverflow.com/a/28906636/1749806 — Goran Horia Mihail, Sep 07 '20 at 12:42

score 0 · Answer 6 · answered Aug 08 '17 at 10:57

This code will help you and see the attached image.

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

    <LinearLayout
        android:id="@+id/llMain"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="1">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="0.10"
            android:orientation="vertical">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher" />

        </LinearLayout>

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="0.90"
            android:text="It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using" />
    </LinearLayout>
</LinearLayout>

https://i.stack.imgur.com/hLUGT.png

Oh, no... again! Nested layouts are bad for performances. Consider using a RelativeLayout, instead. Or a GridView, a TableLayout, ... whatever allows you not to nest LinearLayouts inside one another. — Phantômaxx, Aug 08 '17 at 10:59

score 0 · Answer 7 · answered Sep 07 '20 at 14:28

None of the solutions from SO worked form me. In the end I did it like this:

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()
                    }
                }
            }
        }
    }
}

score 0 · Answer 8 · answered Aug 15 '22 at 17:23

If you want to resolve it using compound drawable, you should create a custom textview and use it.

import android.content.Context
import android.graphics.Canvas
import android.util.AttributeSet
import androidx.appcompat.widget.AppCompatTextView


class TopAlignCompoundDrawableTextView: AppCompatTextView {
    constructor(context: Context) : super(context)
    constructor(context: Context, attrs: AttributeSet) : super(context, attrs)
    constructor(context: Context, attrs: AttributeSet, defStyle: Int) : super(
        context,
        attrs,
        defStyle
    )

    override fun dispatchDraw(canvas: Canvas?) {
        super.dispatchDraw(canvas)
        val centerTextView = height / 2

        val drawableLeft = compoundDrawables[0]
        drawableLeft?.let {
            val topDrawable = it.intrinsicHeight/2 - centerTextView
            it.setBounds(
                0,
                topDrawable,
                it.intrinsicWidth,
                it.intrinsicHeight + topDrawable
            )
        }

        val drawableRight = compoundDrawables[2]
        drawableRight?.let {
            val topDrawable = it.intrinsicHeight/2 - centerTextView
            it.setBounds(
                0,
                topDrawable,
                it.intrinsicWidth,
                it.intrinsicHeight + topDrawable
            )
        }
    }
}

How to set android:drawable to left and top?

8 Answers8

Linked