2

I want make button with white border and bitmap at the left side:

enter image description here

I have xml for background:

<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <corners android:radius="10.0dip"/>
            <stroke
                android:width="2px"
                android:color="@android:color/white"/>
        </shape>
    </item>
    <item>
        <bitmap
            android:gravity="left"
            android:src="@drawable/vk_login">
        </bitmap>
    </item>
</layer-list>

And result is:

enter image description here

I don't know how make border and cut corners from bitmap. What is best way to make background like first image?

zella
  • 4,645
  • 6
  • 35
  • 60

2 Answers2

5

I have create shape file as per your requirement:

1) Here is your drawable named as : btn_vk_drawable.xml

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

    <item>
        <shape android:shape="rectangle">
            <solid android:color="#FABC38"></solid>
            <padding
                android:bottom="10dp"
                android:left="10dp"
                android:right="10dp"
                android:top="10dp" />
        </shape>
    </item>
    <item>
        <bitmap
            android:gravity="left|center_horizontal"
            android:src="@drawable/vk_login"></bitmap>
    </item>
    <item>
        <shape>
            <corners android:radius="10dip" />
            <stroke
                android:width="2px"
                android:color="@android:color/white" />
        </shape>
    </item>

</layer-list>

2) In your layout layout xml you can define button like: 

 <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="100dp"
        android:background="@drawable/btn_vk_drawable"
        android:text="VK"
        android:ems="12"
        android:textAlignment="center" />

enter image description here

Using 9 patch : btn_vk_drawable.xml

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

    <item>
        <shape android:shape="rectangle">
            <solid android:color="#FABC38"></solid>
            <padding
                android:bottom="10dp"
                android:left="10dp"
                android:right="10dp"
                android:top="10dp" />
        </shape>
    </item>
    <item>
        <!--<bitmap-->
        <!--android:gravity="left|center_horizontal"-->
        <!--android:src="@drawable/t"></bitmap>-->
        <nine-patch
            android:dither="true"
            android:src="@drawable/common_signin_btn_text_normal_dark.9" />
    </item>

</layer-list>

enter image description here

Hitesh Bhalala
  • 2,872
  • 23
  • 40
  • Okey, how I understand i can't crop bitmap corners, so bitmap should be with same corner radius as shape. May be simply use one 9-path drawable without layer-list? – zella Dec 16 '15 at 12:57
  • Yes you can achieve using 9 patch image. Please see my edited answer – Hitesh Bhalala Dec 16 '15 at 13:35
0

You just need to add padding in your code:

I have updated your code :-

<item>
    <shape>
        <padding
            android:bottom="5dp"
            android:left="5dp"
            android:right="5dp"
            android:top="5dp" />

        <corners android:radius="10.0dip" />

        <stroke
            android:width="2px"
            android:color="@android:color/black" />
    </shape>
</item>
<item>
    <bitmap
        android:gravity="left"
        android:src="@drawable/bg_casedetail_audio" >
    </bitmap>
</item>

Priyanka1990
  • 16
  • 2