CODEWITHSUNDEEP
androidxml
Jonas
Jonas

Reputation: 7885

Drawable with padding for Button with Icon and Text

Im trying to have an icon and text on my custom button. I want both to be centered. For this Im using phillipcalvin-iconbutton. This works quite well however the drawable is set does not have any padding so it looks like this:

enter image description here

I have tried to create another drawable with the same same resource that has a padding like this:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:bottom="3dp"
    android:left="3dp"
    android:right="3dp"
    android:top="1dp">

    <selector xmlns:android="http://schemas.android.com/apk/res/android">


        <item android:drawable="@drawable/btn_done"
            >

            <padding
                android:left="50dp"
                android:top="50dp"
                android:right="50dp"
                android:bottom="50dp"
                />

        </item>
    </selector>
</item>

That does not make a difference.

I don't want to use some sort of Layout were I set a wrap a TextView and a ImageView because I loose the button animation.

Any Idea how I can solve this?

Just incase you want to see my custom button:

<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="@color/darkRipple">

<item android:id="@android:id/mask"
    android:bottom="4dp" android:left="4dp" android:right="4dp"     android:top="4dp"
    tools:targetApi="lollipop">
    <shape android:shape="rectangle">
        <solid android:color="@color/darkRipple" />
        <corners android:radius="7dp" />
    </shape>
</item>

<item android:id="@android:id/background"
    android:bottom="4dp" android:left="4dp" android:right="4dp"          android:top="4dp">
    <shape android:shape="rectangle">
        <corners android:radius="7dp" />
        <solid android:color="@color/dark" />
        <size android:width="110dp" android:height="40dp" />
    </shape>
</item>
</ripple>

and here is how I use it:

<com.phillipcalvin.iconbutton.IconButton
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:background="@drawable/btn_dark"
    android:drawableLeft="@drawable/btn_ic_done"
    app:iconPadding="10dp"
    android:text="DONE"
    android:textColor="@color/White"/>

Upvotes: 0

Views: 1938

Answers (2)

Anshul Tiwari
Anshul Tiwari

Reputation: 66

I think one way to get around the problem could be to import the image used as a drawableLeft (android:drawableLeft="@drawable/btn_ic_done" in this case) to android studio as a new Image Asset. That'll allow you to set padding to the image at the time you import it(or you could set padding to the image using some external image editor).

Steps to achieve this:

  • Right click res folder

  • res -> new -> image asset

  • [Customise the image according to your needs][1]

       [1]: https://i.sstatic.net/6Weu6.png

Upvotes: 1

LifeStyle
LifeStyle

Reputation: 409

From official documrntation:

    <LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/your.project.package"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
<!-- ... -->
<com.phillipcalvin.iconbutton.IconButton
android:id="@+id/search"
android:drawableLeft="@drawable/action_search"
android:text="@string/search"
app:iconPadding="10dp" />

Upvotes: 0

Related Questions