如何在android材料设计风格中创建按钮阴影

Posted 2023-02-26

【中文标题】如何在android材料设计风格中创建按钮阴影

【英文标题】：How to create button shadow in android material design style

【发布时间】：2014-08-18 00:08:53

【问题描述】：

新的材料设计指南引入了高架按钮，这些按钮可以投射出漂亮的阴影。根据预览版 SDK 文档，新 SDK 中将提供 elevation 属性。但是，现在有什么办法可以达到类似的效果吗？

【问题讨论】：

这个答案详细说明了如何使用 9 个补丁图像：***.com/questions/4406524/…

@milano 你解决了吗？ setElevation 或 ViewCompat.setElevation?

【参考方案1】：

这对我有用。

具有按钮

的布局

<Button
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_
    android:layout_
    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 文件中。

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

角形已移除！！现在，它看起来就像

【参考方案2】：

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

android:background="@drawable/shadow_bg"

【讨论】：

这不会创建在触摸时改变的动态阴影。

【参考方案3】：

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