2

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?

Suzan Cioc
  • 29,281
  • 63
  • 213
  • 385

1 Answers1

3

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.

enter image description here

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:

enter image description here

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:

enter image description here

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>
Juan Cortés
  • 20,634
  • 8
  • 68
  • 91