Skip to content

Instantly share code, notes, and snippets.

@ahmadronaghdev

ahmadronaghdev/activity_main.xml

Forked from granoeste/activity_main.xml
Created February 5, 2018 19:13
Show Gist options
  • Save ahmadronaghdev/e31c935d9c999218087ce1b89cacf3ea to your computer and use it in GitHub Desktop.
Save ahmadronaghdev/e31c935d9c999218087ce1b89cacf3ea to your computer and use it in GitHub Desktop.
Download ZIP
[Android] Glossy gradient button
Raw
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="やれやれだぜ" />
Raw
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>
Raw
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>
Raw
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>
Raw
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>
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment