OverCoder OverCoder - 4 months ago 23
Android Question

How to make glassy quare button with drawable on top?

I want to make a glassy button with application icon drawable on top.
I tried

Button
, set
android:background
to the glassy drawable, and attached an application icon using
drawableTop
, however, the application icon doesn't center in the button

So I tried to use
ImageButton
but
ImageButton
doesn't have
android:background
and that means I can't set the glassy drawable and app icon together.


  • How can I make glassy drawable using XML?

  • How can I apply both backgrounds and center the app icon?

  • The button is
    75x75
    dp


Answer

Here is the view for your requirement

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableTop="@drawable/android"
        android:text="Android"
        android:padding="20dp"
        android:gravity="center"
        android:layout_gravity="center"
        android:drawablePadding="15dp"/>

I have tried this with 75 * 75 dp drawable. It is aligning to the center. You can also set background to the button for glassy look. To do it so use this tool to generate background drawable for your need and customize accordingly

Here is the glassy button background that i have created for you. Set this in your android:background=@drawable/glassybutton

glassybutton.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <layer-list>
            <item>
                <shape android:shape="rectangle">
                    <solid android:color="#ff0000"/>
                    <corners android:radius="5dp"/>
                </shape>
            </item>
            <item android:bottom="10dp">
                <shape android:shape="rectangle">
                    <gradient android:angle="270"
                        android:startColor="#80FFFFFF"
                        android:endColor="#20FFFFFF"/>
                    <corners android:radius="5dp"/>
                </shape>
            </item>
        </layer-list>
    </item>
</selector>
Comments