CODEWITHSUNDEEP
androidbuttonnine-patch
Sandro
Sandro

Reputation: 721

Creating custom 9 patch button with diagonal background pattern

I have a custom button with a diagonal background pattern, and I really going crazy to transform it in a nine patch png. I have a lot of button with different size where I should use it and the nine patch looks like it is the way. Is it possibile? Or there is a better solution than a nine patch?

Original Button

Upvotes: 1

Views: 1020

Answers (1)

Sandro
Sandro

Reputation: 721

After some trial and error I made it... the best way was to make a custom button with layer-list and all the elements inside it. The pattern is a bitmap and the round corner are a stroke on top of the bitmap to cover it.

The result

enter image description here

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<item>
    <shape
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle" >
        <stroke
            android:width="1dp"
            android:color="#ff4f565a" />

        <corners
            android:bottomLeftRadius="10dp"
            android:bottomRightRadius="10dp"
            android:topLeftRadius="10dp"
            android:topRightRadius="10dp" />

        <solid android:color="#ff002f44" />
    </shape>
</item>
<item
    android:bottom="7dp"
    android:left="7dp"
    android:right="7dp"
    android:top="7dp">
    <shape>
        <padding
            android:bottom="7dp"
            android:left="7dp"
            android:right="7dp"
            android:top="7dp" />

    </shape>
</item>
<item android:top="-1dp" android:right="-1dp" android:left="-1dp" android:bottom="-1dp">
    <bitmap
        android:gravity="fill"
        android:src="@drawable/bg_btn_pattern_gloss" />
</item>
<item android:top="-5dp" android:right="-5dp" android:left="-5dp" android:bottom="-5dp">
    <shape
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle" >
        <stroke
            android:width="4dp"
            android:color="#ff002f44" />

        <corners
            android:bottomLeftRadius="8dp"
            android:bottomRightRadius="8dp"
            android:topLeftRadius="8dp"
            android:topRightRadius="8dp" />

        <solid android:color="#00000000" />
    </shape>
</item>

</layer-list>

Upvotes: 3

Related Questions