Question

我正在尝试从材料设计指南中重新创建按钮。我正在关注外观，但我似乎无法让他们完全正确。我附上了一张图片，以便更好地解释其中的差异。底部对来自材料设计指南。似乎有更多的阴影，它们看起来更光滑圆角。有人可以帮忙吗？提前谢谢。

activity_main.xml中

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/buttonTest"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        style="@style/buttonTest1" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/buttonTest"
        android:layout_toEndOf="@id/buttonTest"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:textColor="@color/colorWhite"
        style="@style/buttonTest2" />

</RelativeLayout>

styles.xml

<resources>

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryDark">@color/primaryColorDark</item>
        <item name="colorAccent">@color/accentColor</item>
    </style>

    <style name="buttonTest1" parent="android:style/Widget.Material.Button">
        <item name="android:background">@drawable/button1_background</item>
    </style>

    <style name="buttonTest2" parent="android:style/Widget.Material.Button">
        <item name="android:background">@drawable/button2_background</item>
    </style>

</resources>

button2_background.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
    <item android:drawable="@color/colorRedTest"/>
</ripple>

Answer 1

像这样创建一个drawable并将其作为按钮背景......

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/BACKGROUND_COLOR" />
<corners android:radius="6dp" />
</shape>

并添加

 android:elevation="30dp"

到你的按钮

Answer 2

Eventually solved my problem using a state list animator. For the rounded corners i used Rishad Appat's solution. I provided some xml-codes below. Just apply the style buttonTest1 to your button, and it should work.

styles.xml

<style name="buttonTest1" parent="android:style/Widget.Material.Button">
    <item name="android:background">@drawable/button1_background</item>
    <item name="android:stateListAnimator">@anim/buttons_state_list_animator</item>
</style>

buttons_state_list_animator.xml

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

    <item
        android:state_pressed="true"
        android:state_enabled="true">
        <set>
            <objectAnimator
                android:propertyName="translationZ"
                android:duration="@integer/button_duration"
                android:valueTo="@dimen/button_rise"
                android:valueType="floatType" />
            <objectAnimator
                android:propertyName="elevation"
                android:duration="0"
                android:valueTo="@dimen/button_elevation"
                android:valueType="floatType" />
        </set>
    </item>

    <item
        android:state_enabled="true">
        <set>
            <objectAnimator
                android:propertyName="translationZ"
                android:duration="@integer/button_duration"
                android:valueTo="0"
                android:startDelay="@integer/button_duration"
                android:valueType="floatType" />
            <objectAnimator
                android:propertyName="elevation"
                android:duration="0"
                android:valueTo="@dimen/button_elevation"
                android:valueType="floatType" />
        </set>
    </item>

    <item>
        <set>
            <objectAnimator
                android:propertyName="translationZ"
                android:duration="0"
                android:valueTo="0"
                android:valueType="floatType" />
            <objectAnimator
                android:propertyName="elevation"
                android:duration="0"
                android:valueTo="0"
                android:valueType="floatType" />
        </set>
    </item>

</selector>

button1_background.xml

<ripple android:color="?attr/colorControlHighlight" xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/button_background"></item>
</ripple>

button_background.xml, as provided by Rishad Appat

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/colorBackgroundTest" />
<corners android:radius="2dp" />
</shape>

材质设计按钮显得更平滑，阴影更多

2 个答案: