如何在Android Material Design风格中创建按钮阴影效果。

Question

新的材料设计指南引入了凸起按钮，这些按钮有漂亮的阴影效果。根据预览SDK文档，新的SDK将提供elevation属性。但是，现在是否有任何方法可以实现类似的效果呢？

- milanseitler

---

这篇回答详细介绍了如何使用9宫格图像实现此功能：https://dev59.com/g2855IYBdhLWcg3wViot#14196186 - Brittany

@milano 你解决了吗？是用 setElevation 还是 ViewCompat.setElevation？ - Jared Burrows

Answer 1

这对我很有用。

布局中有按钮

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

如果您有一个矩形形状的按钮，那么您已经完成了。但是如果您有圆形或椭圆形状的按钮，则它会看起来像这样：

将以下代码添加到您的.java文件中，以从圆形或椭圆形按钮中移除corners。

@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);
        ........
    }
    .....
}

去掉了角形！！现在，它看起来就像

- Apurva

Answer 2

或者你可以将CardView用作按钮并使用其setCardElevation方法。 结合触摸事件和ValueAnimator，您可以获得漂亮的动画阴影效果。

- Michał Kisiel

Answer 3

您可以使用带有阴影的9-patch图像。将图像放置在drawable--xxhdpi中，并将其设置为按钮或其他元素的背景。

android:background="@drawable/shadow_bg"

- Gjoko Bozhinov

---

这不会创建随触摸而改变的动态阴影。 - Sanket Berde