[Android] Glossy gradient button

activity_main.xml

    <Button
        android:id="@+id/button1"
        style="@style/GlossyGradientButtonStyle"
        android:layout_width="wrap_content"
        android:layout_height="@dimen/button_height"
        android:minWidth="100dp"
        android:text="OK" />

    <Button
        android:id="@+id/button2"
        style="@style/GlossyGradientButtonStyle"
        android:layout_width="wrap_content"
        android:layout_height="@dimen/button_height"
        android:minWidth="100dp"
        android:text="やれやれだぜ" />

button_selected.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- くぼみ -->
    <item>
        <shape android:shape="rectangle" >
            <corners android:radius="@dimen/button_radius" />
            <solid android:color="#3D3D3D" />
        </shape>
    </item>

    <!-- グラデーション下地 -->
    <item
        android:bottom="@dimen/button_inner_margin"
        android:left="@dimen/button_inner_margin"
        android:right="@dimen/button_inner_margin"
        android:top="@dimen/button_inner_margin">
        <shape android:shape="rectangle" >
            <corners android:radius="@dimen/button_inner_radius" />
            <gradient
                android:angle="270"
                android:endColor="#7B7B7B"
                android:startColor="#6A6A6A"
                android:type="linear" />
        </shape>
    </item>

    <!-- グラデーション陰影 -->
    <item
        android:bottom="@dimen/button_inner_margin"
        android:left="@dimen/button_inner_margin"
        android:right="@dimen/button_inner_margin"
        android:top="@dimen/button_glossy_marginTop">
        <shape android:shape="rectangle" >
            <corners
                android:bottomLeftRadius="@dimen/button_inner_radius"
                android:bottomRightRadius="@dimen/button_inner_radius"
                android:topLeftRadius="0dp"
                android:topRightRadius="0dp" />
            <solid android:color="#60000000" />
        </shape>
    </item>

</layer-list>

button_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Active -->
    <item android:drawable="@drawable/button_selected"     android:state_enabled="true"  android:state_focused="false" android:state_pressed="false" android:state_selected="true"/>
    <!-- Inactive -->
    <item android:drawable="@drawable/button_unselected" android:state_enabled="true"  android:state_focused="false" android:state_pressed="false" android:state_selected="false"/>
    <!-- Pressed -->
    <item android:drawable="@drawable/button_selected"     android:state_enabled="true"  android:state_focused="false" android:state_pressed="true" />
    <!-- Selected (using d-pad) -->
    <item android:drawable="@drawable/button_selected"     android:state_enabled="true"  android:state_focused="true" android:state_pressed="false" android:state_selected="true"/>
    <!-- Disable -->
    <item android:drawable="@drawable/button_disabled"     android:state_enabled="false"/>
    
</selector>

button_unselected.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- くぼみ -->
    <item>
        <shape android:shape="rectangle" >
            <corners android:radius="@dimen/button_radius" />
            <solid android:color="#5D5D5D" />
        </shape>
    </item>

    <!-- グラデーション下地 -->
    <item
        android:bottom="@dimen/button_inner_margin"
        android:left="@dimen/button_inner_margin"
        android:right="@dimen/button_inner_margin"
        android:top="@dimen/button_inner_margin">
        <shape android:shape="rectangle" >
            <corners android:radius="@dimen/button_inner_radius" />
            <gradient
                android:angle="270"
                android:endColor="#D9D9D9"
                android:startColor="#F7F7F7"
                android:type="linear" />
        </shape>
    </item>

    <!-- グラデーション陰影 -->
    <item
        android:bottom="@dimen/button_inner_margin"
        android:left="@dimen/button_inner_margin"
        android:right="@dimen/button_inner_margin"
        android:top="@dimen/button_glossy_marginTop">
        <shape android:shape="rectangle" >
            <corners
                android:bottomLeftRadius="@dimen/button_inner_radius"
                android:bottomRightRadius="@dimen/button_inner_radius"
                android:topLeftRadius="0dp"
                android:topRightRadius="0dp" />
            <solid android:color="#20000000" />
        </shape>
    </item>

</layer-list>

dimens.xml

<resources>

    <!-- Button -->
    <dimen name="button_height">48dp</dimen> <!-- ボタンの高さ -->
    <dimen name="button_radius">15dp</dimen> <!-- くぼみの丸み -->
    <dimen name="button_inner_radius">11dp</dimen> <!-- ボタンの丸み -->
    <dimen name="button_inner_margin">4dp</dimen> <!-- ボタンのマージン(くぼみの太さ) -->
    <dimen name="button_glossy_marginTop">24dp</dimen> <!-- ボタンの光沢グラデーション位置(ボタンの高さの中央値) -->
    <dimen name="button_content_paddingLeft">8dp</dimen> <!-- ボタン内の文字の左部パディング -->
    <dimen name="button_content_paddingRight">8dp</dimen> <!-- ボタン内の文字の右部パディング -->
    <dimen name="button_content_paddingTop">4dp</dimen> <!-- ボタン内の文字の上部パディング -->
    <dimen name="button_content_paddingBottom">4dp</dimen> <!-- ボタン内の文字の下部パディング -->

</resources>

styles.xml

<resources xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Glossy Gradient Button Style -->
    <style name="GlossyGradientButtonStyle" parent="@android:style/Widget.Button">
        <item name="android:background">@color/button_selector</item>
        <item name="android:shadowColor">#979797</item>
        <item name="android:shadowRadius">3.0</item>
        <item name="android:shadowDx">-0.5</item>
        <item name="android:shadowDy">-0.5</item>
        <item name="android:paddingLeft">@dimen/button_content_paddingLeft</item>
        <item name="android:paddingRight">@dimen/button_content_paddingRight</item>
        <item name="android:paddingTop">@dimen/button_content_paddingTop</item>
        <item name="android:paddingBottom">@dimen/button_content_paddingBottom</item>
    </style>

</resources>

Good one!

Tnx

Hello,

can you please tell what is the colour for button selector in below line.

<style name="GlossyGradientButtonStyle" parent="@android:style/Widget.Button"> @color/button_selector