CODEWITHSUNDEEP
androidbuttonandroid-appcompatcompound-drawables
Stella
Stella

Reputation: 1817

Customize AppCompatButton drawableLeft?

How can I place drawableLeft and button text of AppCompatButton like in the image below?

AppCompatButton

I have tried to apply paddingLeft, but the text is moving away from the drawable to the right. 

<android.support.v7.widget.AppCompatButton
                android:id="@+id/filterBy"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:drawableLeft="@drawable/ic_btn_filter"
                android:paddingLeft="20dp"
                android:text="@string/filter_by"
                android:textAllCaps="false" />

And so far the result is looking like

enter image description here

Layout 

   <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/profileHeader"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="10dp">

            <android.support.v7.widget.AppCompatButton
                android:id="@+id/findFriends"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:drawableLeft="@drawable/ic_btn_search"
                android:text="@string/find_friends"
                android:textAllCaps="false" />

            <android.support.v7.widget.AppCompatButton
                android:id="@+id/filterBy"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:drawableLeft="@drawable/ic_btn_filter"
                android:text="@string/filter_by"
                android:textAllCaps="false" />
      </LinearLayout>

And the interpreted requirement for making things clear.

Using layout_weight property am adjusting the width of both buttons and what i have to do is, the text should be in center of the button and the drawable should be aligned near left of the text.

Any suggestion please?

Upvotes: 7

Views: 7625

Answers (3)

Mukendii Ldn
Mukendii Ldn

Reputation: 1

Add padding to the right too; that will push the text and the drawable closer together. Keep adjusting these values to get desired result.

See below:

android:drawableStart="@drawable/ic_water_now"
    android:paddingLeft="10dp"
    android:paddingRight="21dp"

Sample result:

Here is the results

Upvotes: 0

Rajesh
Rajesh

Reputation: 2618

probably you can't, if you want like this then you have to make it using complex layout like this see

Upvotes: 0

Vaisakh N
Vaisakh N

Reputation: 790

use

 android:drawablePadding=""

Upvotes: 5

Related Questions