Custom Buttons in Android: How to get border/edge/frame when I read the background from xml?

Question

Using Android Shapes in xml I have defined a gradient which I use as the background for a button.

This all works nice, but there\'s no edge surrounding the button. I wou

Answer 1

I had this problem a while ago. While I don't quite remember why I made each decision, the way I solved it was to use a a shape layer-list. This lets you stack one shape on top of another. For example, the following XML creates a shape with a solid black outline 2px wide, with a 'grey to white to grey' gradient across the middle:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <padding android:left="1dp"
                android:top="1dp"
                android:right="1dp"
                android:bottom="1dp"/>
            <solid android:color="#FF000000"/>
            <corners android:radius="3dp"/>
        </shape>
    </item>

    <item>
        <shape>
            <padding android:left="2dp"
                android:top="2dp"
                android:right="2dp"
                android:bottom="2dp"/>
            <gradient android:startColor="#FFB0B0B0"
                android:centerColor="#FFFFFFFF"
                android:endColor="#FFB0B0B0"
                android:angle="315"/>
        </shape>
    </item>
</layer-list>

If you want to be able to change that color dynamically at runtime, then things get a lot messier. Again, the details of why I had to do things a certain way are hazy, but I ended up having to create a custom view class which contained a custom ShapeDrawable. I started off looking at the examples from the ApiDemos app which comes with the SDK - it's a very good resource.

EDIT: Another reason your stroke might not be appearing is that you forgot the android: before the color="...." bit.

Answer 2

Probably much to late, but you have to add an extra ff before the color.

<stroke android:width="5px" color="#ff000000" />

Greets

Answer 3

Use ImageButton

   <ImageButton
        android:layout_width="40dp"
        android:layout_height="30dp"
        android:src="@drawable/left_arrow"
        android:background="@drawable/button_selector"
        android:gravity="center"/>

Use drawable selector to ImageButton and define your properties

<item android:state_pressed="true" >
    <shape>
        <gradient
            android:startColor="@color/startColor"
            android:endColor="@color/endColor"
            android:angle="270" />
        <stroke
            android:width="0.5dp"
            android:color="@color/borderColor" />
        <corners
            android:topLeftRadius="5dp"
            android:bottomRightRadius="5dp"/>
    </shape>
</item>

<item android:state_focused="true" >
    <shape>
        <gradient
            android:startColor="@color/startColor"
            android:endColor="@color/endColor"
            android:angle="270" />
        <stroke
            android:width="0.5dp"
            android:color="@color/borderColor" />
        <corners
            android:topLeftRadius="5dp"
            android:bottomRightRadius="5dp"/>
    </shape>
</item>

<item>        
    <shape>
        <gradient
            android:startColor="@color/startColor"
            android:endColor="@color/endColor"
            android:angle="270" />
        <stroke
            android:width="0.5dp"
            android:color="@color/borderColor" />
        <corners
            android:topLeftRadius="5dp"
            android:bottomRightRadius="5dp"/>
    </shape>
</item>    

Answer 4

I've had the same problem, what i observed is stroke is not applying to button as border at design time but at run time i see the border.

I jst used the following same code

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" android:padding="10dp">
    <solid android:color="@color/black" />
    <stroke  android:width="1px" android:color="@color/red" />

</shape>

as steve hanley said abvoe you miss the android: for the color attribute.

Hope this helps somebody....

Answer 5

<item android:state_enabled="false" android:drawable="@drawable/button_disabled" />

<item android:state_focused="true" android:drawable="@drawable/button_highlighted"/>
<item android:state_pressed="true" android:drawable="@drawable/button_highlighted"/>

<item>
    <shape>
        <gradient android:startColor="#fdfdfd" android:endColor="#f0f0f0" android:angle="270" />
        <stroke android:width="1dp" android:color="#56390a" />
        <corners android:radius="3dp" />
        <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />
    </shape>
</item>

Adding stroke color #56390a will solve the problem.