TextView set DrawableRight/Left... alignment

Question

I have few TextViews with drawable icons on left side. layout:

         <android.support.v7.widget.CardView
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/card_margin">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:padding="@dimen/detail_padding">                  

                <TextView
                    android:id="@+id/location"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="@dimen/title_margin"
                    android:drawableLeft="@drawable/ic_location"
                    android:drawablePadding="@dimen/drawable_padding"
                    android:drawableStart="@drawable/ic_location" />

                <TextView
                    android:id="@+id/status"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="@dimen/title_margin"
                    android:drawableLeft="@drawable/ic_status"
                    android:drawablePadding="@dimen/drawable_padding"
                    android:drawableStart="@drawable/ic_status"/>

                <TextView
                    android:id="@+id/description"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="@dimen/title_margin"
                    android:drawableLeft="@drawable/ic_description"
                    android:drawablePadding="@dimen/drawable_padding"
                    android:drawableStart="@drawable/ic_description"/>
            </LinearLayout>
        </android.support.v7.widget.CardView>

Screenshot:

enter image description here

If the text is too big, icon stand in the center of textview. I want to set icon aligned top of textview. Is it possible?

I suggest you to see this link answer is here http://stackoverflow.com/questions/10267352/align-top-of-image-to-top-of-textview/28906636#28906636][1] — Zaigham Raza, May 05 '16 at 12:23
@elya_a I suggest you to use `Text View` and `Image View` instead if you want Exact result even with bigger and small text data with `Align Top`. — Jay Rathod, May 05 '16 at 12:29
@jaydroider thank you. I just hoped there is decision with only textview, but i have to use imageview — elya_a, May 05 '16 at 12:34
@elya_a I can give you example if you want to apply it ? it will bit easier for you. and if you know how to use then it's good. — Jay Rathod, May 05 '16 at 12:35

karthikeya lk · Answer 1 · 2016-05-05T12:25:05.650

You must keep the layout as RelativeLayout

<android.support.v7.widget.CardView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="@dimen/card_margin">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="@dimen/detail_padding">                  
            <TextView
                android:id="@+id/location"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="@dimen/title_margin"
                android:drawableLeft="@drawable/ic_location"
                android:drawablePadding="@dimen/drawable_padding"
                android:drawableStart="@drawable/ic_location" />
            <TextView
                android:id="@+id/status"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="@dimen/title_margin"
                android:drawableLeft="@drawable/ic_status"
                android:drawablePadding="@dimen/drawable_padding"
                android:drawableStart="@drawable/ic_status"/>
            <TextView
                android:id="@+id/description"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="@dimen/title_margin"
                android:drawableLeft="@drawable/ic_description"
                android:drawablePadding="@dimen/drawable_padding"
                android:drawableStart="@drawable/ic_description"/>
        </RelativeLayout>
    </android.support.v7.widget.CardView>

Flexibility to move items – karthikeya lk May 05 '16 at 12:40 — karthikeya lk, May 05 '16 at 12:40

score 0 · Answer 2 · answered May 05 '16 at 12:32

0

You can set

  android:layout_toRightOf="@+id/imageId"

on the textview, and

  android:layout_alignParentLeft="true"

on the image.

hope this helps.

answered May 05 '16 at 12:32

Aman jangra

268
1
16

It solved your problem ? you have accepted that one. I dont think it will work for you. – Jay Rathod May 05 '16 at 12:36
He want to `Align Top` that Drawable with `Text View1`. This will not do that thing. – Jay Rathod May 05 '16 at 12:39
i use linearlayout in same way – elya_a May 05 '16 at 12:44

score 0 · Answer 3 · answered May 05 '16 at 12:41

Just use ImageView

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="@dimen/detail_padding">

    <TextView
        android:id="@+id/location"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="@dimen/title_margin"
        android:drawableLeft="@drawable/ic_location"
        android:drawablePadding="@dimen/drawable_padding"
        android:drawableStart="@drawable/ic_location" />

    <TextView
        android:id="@+id/status"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="@dimen/title_margin"
        android:drawableLeft="@drawable/ic_status"
        android:drawablePadding="@dimen/drawable_padding"
        android:drawableStart="@drawable/ic_status" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="@dimen/drawable_padding"
            android:src="@drawable/ic_description" />

        <TextView
            android:id="@+id/description"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/title_margin" />
    </LinearLayout>
</LinearLayout>

score 0 · Answer 4 · answered May 05 '16 at 12:42

For doing this you will have to create a custom Drawable that wraps your Drawable, and then manipulate the drawing of your custom Drawable by overriding the method onDraw(Canvas).

There is a sample below. 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:

GravityTopDrawable gravityDrawable = new GravityTopDrawable(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 GravityTopDrawable extends Drawable {

    // inner Drawable
    private final Drawable mDrawable;

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

TextView set DrawableRight/Left... alignment

4 Answers4