Search code examples
androidbuttongraphic

Custom button: glass effect


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

Custom button graphics with "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:

Custtom button whit no "glass" effect

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


Solution

  • 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!