Question

I need to create a custom button graphic with a border, a gradient background and a glass effect:

I don’t want to use 9patch or code a custom class, just xml (shapes, layers, …).

Here the XML code I use to draw the button (it doesn’t not include the “glass effect” yet!):

<layer-list>
</shape>

    <!-- item to draw the inner border and the background -->
    <item>
        <shape>
            <stroke
                android:width="4px"
                android:color="#5f87aa" />

            <corners android:radius="10dp" />

            <gradient
                android:angle="270"
                android:endColor="#034b89"
                android:startColor="#03437b" />
        </shape>
    </item>

    <!-- item to draw the outer border (transparent background) -->
    <item>
        <shape>

            <stroke
                android:width="2px"
                android:color="#212121" />

            <corners android:radius="10dp" />

        <solid android:color="#00000000" />
    </item>
</layer-list>

it looks like this:

So what can I do to have also the glass effect on it?

Answer 1

I answer my own question: seems there are no solution to my problem. Only code (and 9-patch) can solve it. So, I make my own button extending the standard “Button”.

This is the code used to draw the shine effect when regenerating the button graphic:

//get the drawing rectangle (calculate inner/outer border width)
RectF sr = new RectF();

sr.set(cr.left + innerBorderScaledSize / 2f, 
       cr.top + innerBorderScaledSize / 2f, 
       cr.right - innerBorderScaledSize / 2f,
(cr.top - innerBorderScaledSize / 2f 
+ cr.bottom - innerBorderScaledSize / 2f) / 2f);

RectF cor = new RectF();
cor.set(sr.left, sr.top, sr.left + cornerScaledRaius, sr.top + cornerScaledRaius);

//here the interesting part: draw the shape   
Path path = new Path();
path.reset();
path.moveTo(sr.left, sr.bottom);
path.lineTo(sr.left, sr.top + cornerScaledRaius);
path.arcTo(cor, 180, 90);
cor.set(sr.right - cornerScaledRaius, sr.top, sr.right, sr.top + cornerScaledRaius);
path.arcTo(cor, 270, 90);
path.lineTo(sr.right, sr.bottom);
path.close();
canvas.drawPath(path, shinePaint);

So I simply draw a custom and rounded semi-transparent shape on the background using a Paint

Paint shinePaint = new Paint();
shinePaint.setAntiAlias(true);
shinePaint.setStyle(Paint.Style.FILL);
shinePaint.setColor(0x16ffffff);

u

here the XML code for the button layout:

<xxx.uicomponents.iconbutton.IconButton
android:layout_height="match_parent"
android:layout_width="match_parent"
android:background="@drawable/standard_button_background"
android:textColor="@drawable/standard_button_text"
android:textStyle="bold"
android:textSize="14dp"
android:text="Click me" />

Hope this help!