How could I align the drawableLeft icon to the top

Question

Now I need to implement a function just like the html tag , see the pic below:

the currect showing

Firstly, I set the drawableLeft, and it show like this:

the unclect showing

It's not my suppose do. After that I create a class 'LiTextView' implements TextView, and override the onDraw() method like this:

@Override
protected void onDraw(Canvas canvas) {
    Drawable[] drawables = getCompoundDrawables();
    if (drawables != null) {
        Drawable drawableLeft = drawables[0];
        if (drawableLeft != null) {
            canvas.save();
            canvas.translate(10, 50);
            drawableLeft.draw(canvas);
            canvas.restore();
        }
    }
    super.onDraw(canvas);
}

the xml file like this:

<me.naiyu.android.textviewlidemo.widget.LiTextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:drawableLeft="@drawable/circle_dot"
        android:drawablePadding="10dp"
        android:textColor="#000000"
        android:textSize="18sp"
        android:text="Displays text to the user and optionally allows them to edit it. A TextView is a complete text editor, however the basic class is configured to not allow editing"/>

and it became this(have two circle):

enter image description here

How can I implement the picture one, I now have no idear!

I would have used a RelativeLayout with ImageView and TextView inside it, in order to align it like you want. — Carnal, Feb 03 '15 at 13:44
I now implement it as you say., but I have a question that how can I align the ImageView just center to the TextView's first line, if there have many lines? — naiyu, Feb 04 '15 at 01:33
I need the circle align the center of the TextView's fisrt line. just line the html tag
You will have to set some android:layout_marginTop on the ImageView — Carnal, Feb 05 '15 at 08:37

score 0 · Accepted Answer · edited May 23 '17 at 12:22

0

The reason why the "dot" is drawn twice is because you call super.onDraw(canvas). You've drawn the dot yourself in the top-position, and then you let the system draw the dot on the original position by calling the super.

Unfortunately, you have to call super.onDraw(canvas) in order to draw the text. A better approach to achieve what you want is by creating a custom Drawable that wraps the Drawable you want to display, and then override the draw(Canvas) method of the custom Drawable.

See my answer here for an example. The only downside is that you have to set the drawableLeft from code, not XML.

edited May 23 '17 at 12:22

Community

1
1

answered Mar 06 '15 at 20:10

Reinier

3,836
1
27
28

Hi, I have do what you said at [this](http://stackoverflow.com/a/28906636/710990), but the left drawable is gone, is that anything I did wrong? – naiyu Mar 08 '15 at 13:51
Did you call `.setBounds()` on both your (inner) Drawable and the custom Drawable? Note: I forgot to add the `innerDrawable.setBounds(...)` in the example. I added it now. – Reinier Mar 08 '15 at 19:13
I just call '.setBounds()' on the InnerDrawable, I will try it again today, Thanks! – naiyu Mar 09 '15 at 06:00
@Reinier what is the importance of `.setBounds()` for the both drawables? – sam_k Jul 26 '17 at 16:59
@sam_k Without the `.setBounds()` the Drawable will render to its default size of 0px, so it will not draw. The code could be simplified, but the main idea is that you need to set the bounds (boundaries) of the GravityComoundDrawable explicitly, and that you will want its boundaries to match the boundaries of the Drawable it wraps. – Reinier Jul 27 '17 at 08:00

How could I align the drawableLeft icon to the top

1 Answers1