I want to draw custom panel-like view with raised bevel border (Swing terminology). Are there some predefined methods for this? For example, is it possible to take borders from current button style? Or I obliged to create my own 9 patch or something?
-
i think you create your own nine patch image – Zaz Gmy May 18 '12 at 09:00
-
If all you want is a bevel border, you may be able to do this with shape drawables, but I haven't tried this myself. – Aleks G May 18 '12 at 09:01
1 Answers
A crude approach to this would be to make an XML drawable with a layer list inside and compose the structure of the button yourself. In my example you achieve the following button style.
And all the colors could be changed if needed to suit your style. I'm aware that the corners should be at a 45º angle instead of 90º but there is no easy way for me to show this here without some testing. The source XML is the following:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- The gray part of the border -->
<item>
<shape>
<solid android:color="#fccc"></solid>
</shape>
</item>
<!-- The black part of the border -->
<item android:right="2dip"
android:bottom="2dp">
<shape>
<solid android:color="#f000"></solid>
</shape>
</item>
<!-- The content -->
<item android:left="2dip"
android:top="2dp"
android:right="2dip"
android:bottom="2dp">
<shape>
<solid android:color="#ffafafaf"></solid>
</shape>
</item>
</layer-list>
As a further example of what you can achieve here, just by adding <corners android:radius="4dp"></corners>
to the border shapes we can get a slightly less eye-sore style:
Or you can go for a different approach and avoid the raised bevel border, making it easier on the XML side and probably nicer. To achieve this kind of button:
The XML is just as easy as the following:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="4dp"></corners>
<solid android:color="#fccc"></solid>
<stroke android:width="2dp" android:color="#ff6f6f6f"></stroke>
</shape>

- 20,634
- 8
- 68
- 91