How to create button shadow in android material design style
11,297
This worked for me.
Layout having button
<Button
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="@dimen/button_size"
android:layout_height="@dimen/button_size"
android:background="@drawable/circular_button_ripple_selector"
android:textAppearance="?android:textAppearanceLarge"
android:textColor="@color/button_text_selector"
android:stateListAnimator="@anim/button_elevation"/>
drawble/button_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true"
android:drawable="@drawable/button_selected"/>
<item android:state_pressed="true"
android:drawable="@drawable/button_pressed"/>
<item android:drawable="@drawable/button"/>
</selector>
anim/button_elevation.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_enabled="true"
android:state_pressed="true">
<objectAnimator
android:duration="@android:integer/config_shortAnimTime"
android:propertyName="translationZ"
android:valueFrom="2dip"
android:valueTo="4dip"
android:valueType="floatType" />
</item>
<item>
<objectAnimator
android:duration="@android:integer/config_shortAnimTime"
android:propertyName="translationZ"
android:valueFrom="4dip"
android:valueTo="2dip"
android:valueType="floatType" />
</item>
</selector>
If you have a button in rectangular shape then you are done here. But if you have circular or oval shaped button then it would be looking like,
To remove corners from circular or oval shaped button add this code to your .java
file.
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
...........
int buttonSize = (int) getResources().getDimension(R.dimen.button_size);
Outline circularOutline = new Outline();
circularOutline.setOval(0, 0, buttonSize, buttonSize);
for (int i = 0; i < MAX_BUTTONS; i++) {
Button button = ......
.......
button.setOutline(circularOutline);
........
}
.....
}
Angular shape removed!! Now, it would look exactly like
Comments
-
milanseitler about 2 years
New material design guidelines introduce elevated buttons which are dropping nice shadow. According to the preview SDK documentation there will be
elevation
attribute available in new SDK. However, is there any way to achieve similar effect now?