How to center text and align drawable to the left?

Question

Is there any way I can center text within a textview and then have the drawable aligned to the left hand side, so that the text remains centered but the drawable does not affect this? Currently the whole textview is being centered.

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        android:elevation="4dp">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="MirrorMirror"
        android:textStyle="bold"
        android:drawableLeft="@drawable/ic_mirror_face"
        android:textAlignment="center"
        android:textSize="20sp"
        android:textColor="@android:color/white"
        android:id="@+id/toolbar_title"
        android:layout_gravity="center"/>
</android.support.v7.widget.Toolbar>

You can see the issue in this picture. I want the word to be centred with the word Library.

http://imgur.com/a/2xp07

add an imageview and add drawable as background and set imageview gravity left. — Bruno Ferreira, Aug 09 '17 at 12:53
@benjgorman would it not be easier to use a separate `ImageView` and `TextView` for this? — Ajil O., Aug 09 '17 at 13:30

Ajil O. · Accepted Answer · 2017-08-09T15:41:00.283

I saw an answer posted here which has been deleted since. That solution should work for you.

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="MirrorMirror"
    android:textStyle="bold"
    android:drawableLeft="@mipmap/ic_launcher"
    android:textAlignment="center"
    android:textSize="20sp"
    android:id="@+id/toolbar_title"
    android:layout_gravity="center"
    android:layout_marginRight="10dp"/>

The last line is what's supposed to do the trick. Change the margin value from 10dp to whatever works best for the image you are using.

Or

You could use an ImageView anchored to a TextView to get the same result. But you will have more control in this case as the size of drawable will not affect the alignment of the text.

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/toolbar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="someText"
        android:layout_gravity="center"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        app:layout_anchor="@id/toolbar_title"
        android:layout_gravity="start|center"
        app:layout_anchorGravity="start|center"/>

</android.support.design.widget.CoordinatorLayout>

And this is how the output looks like :

Edit

I now realize that the problem you are facing is probably due to an offset(?) that appears when using a ToolBar. This answer provides a good solution for that. It goes like this

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

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize">

    </android.support.v7.widget.Toolbar>

    <TextView
        android:id="@+id/toolbar_title"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="MirrorMirror"
        android:textStyle="bold"/>

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

</RelativeLayout>

Over here I am not placing the TextView and ImageView inside the Toolbar as it would again offset it slightly to the right. Instead I am placing it over the Toolbar

Let me get this clear. You need a `TextView` that's right in the middle of the layout (centered with Library) and the image next to the `TextView`? — Ajil O., Aug 09 '17 at 14:51
This solved it, had to add some padding to the top of the image to center it vertically but great solution — benjgorman, Aug 09 '17 at 16:46

kulvinder · Answer 2 · 2017-08-09T13:32:57.110

-1

I tried this trick some of the apps, may also help in your case,set left margin of textview in minus(-) according to drawable width. You can try by adding like this

android:layout_marginLeft="-10dp"

I know it is not the exact way for your problem but sometime it helps.

edited Aug 09 '17 at 13:32

answered Aug 09 '17 at 13:23

kulvinder

529
5
17

Would you not have the same effect with `android:layout_marginRight`? – Ajil O. Aug 09 '17 at 13:34
I've learned that negatives margin values are bad. See this discussion over here where Romain Guy is an Android framework engineer at Google as far I understand this https://groups.google.com/forum/#!topic/android-developers/2vfHxC33jtI – glethien Aug 10 '17 at 07:22

score -1 · Answer 3 · answered Aug 09 '17 at 13:36

I have done in my one of the project you can look here

<LinearLayout
    android:id="@+id/ll_action"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_alignParentTop="true">

    <TextView
        android:id="@+id/btn_save"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Save"
        android:drawableLeft="@drawable/ic_done_black_24dp"
        android:drawableStart="@drawable/ic_done_black_24dp"
        android:layout_weight="1"
        android:layout_gravity="center"
        android:gravity="center"
        android:background="@color/colorButtonBg"
        android:textColor="@color/colorInputTextAccent"
        />
    <View
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:background="@color/colorAlphaBlack"
        android:layout_marginTop="2dp"
        android:layout_marginBottom="2dp"
        />
    <TextView
        android:id="@+id/btn_cancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Cancel"
        android:drawableLeft="@drawable/ic_clear_black_24dp"
        android:drawableStart="@drawable/ic_clear_black_24dp"
        android:layout_weight="1"
        android:gravity="center"
        android:background="@color/colorButtonBg"
        android:textColor="@color/colorInputTextAccent"
        />

</LinearLayout>

ic_done_black_24dp.xml in drawable

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
<path
    android:fillColor="#FF000000"
    android:pathData="M9,16.2L4.8,12l-1.4,1.4L9,19 21,7l-1.4,-1.4L9,16.2z"/>

How is this code supposed to help? This is not what is being asked in the question. — Ajil O., Aug 09 '17 at 14:18

How to center text and align drawable to the left?

3 Answers3