Android高程没有在Button上显示阴影

时间:2016-07-09 04:01:10

标签: java android android-studio button material-design

无法显示按钮阴影。

将我的代码简化为最小的例子:

activity_main.xml中

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

    <LinearLayout
        android:id="@+id/main_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="10dp"
            android:layout_marginLeft="10dp">

            <Button
                android:id="@+id/my_button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_marginLeft="20dp"
                android:elevation="10dp"
                android:translationZ="10dp"
                android:background="@android:color/holo_green_light"
                android:text="BUTTON"/>

        </RelativeLayout>

    </LinearLayout>

</ScrollView>

我需要那种布局结构。

MainActivity.java

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

}

在Android Studio设计器中可以看到阴影:

enter image description here

但未在运行时显示:

enter image description here

经过测试:

  • Genymotion Google Nexus 5X - Marshmallow 6.0.0 - API 23
  • Genymotion Google Nexus 5 - Lollipop 5.1.0 - API 22
  • Genymotion三星Galaxy S2 - Jelly Bean 4.1.1 - API 16
  • 硬件设备,三星Galaxy S5 mini - KitKat 4.4.2 - API 19

所有相同的结果。

我正在使用:

  • Android Studio 2.1.2
  • minSdkVersion 16
  • targetSdkVersion 24

请在Andriod Studio中创建一个新项目,空活动模板,然后将该代码复制并粘贴到activity_main.xmlMainActivity.java中,以便测试并告诉我。

3 个答案:

答案 0 :(得分:22)

  

Button下的默认Material样式有StateListAnimator   它控制着android:elevationandroid:translationZ   属性。

<子> copied from here

只需将此属性添加到Button即可。您可以使用android:stateListAnimator属性设置自己的属性。

android:stateListAnimator="@null"

完整代码:

        <Button
                android:id="@+id/my_button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_marginLeft="20dp"
                android:elevation="2dp"
                android:translationZ="2dp"
                android:stateListAnimator="@null"
                android:background="@android:color/holo_green_light"
                android:text="BUTTON">

UpDate:

了解我将它设置为10dp ..

xml代码:

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp">

        <Button
            android:id="@+id/my_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginLeft="20dp"
            android:elevation="10dp"
            android:translationZ="10dp"
            android:stateListAnimator="@null"
            android:background="@android:color/holo_green_light"
            android:text="BUTTON"/>

    </RelativeLayout>

enter image description here

答案 1 :(得分:1)

我一直在玩Lollipop上的阴影,这就是我发现的:

看起来,由于某种原因,父ViewGroup的边界会切断其子项的阴影,而使用android:elevation设置的阴影会被View的边界切断,而不是通过边距延伸的边界;

获取子视图以显示阴影的正确方法是在父级上设置填充并在该父级上设置android:clipToPadding=false

根据我所知,这是我给你的建议:

将顶级RelativeLayout设置为等于您在要显示阴影的相对布局上设置的边距; 在同一RelativeLayout上设置android:clipToPadding=false;

从RelativeLayout中删除也有高程设置的边距。

在一天结束时,您的顶级相对布局应如下所示:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
style="@style/block" android:gravity="center"
android:layout_gravity="center"
android:background="@color/lightgray"
android:paddingLeft="40dp"
android:paddingRight="40dp"
android:paddingTop="20dp"
android:paddingBottom="20dp"
android:clipToPadding="false" >

内部相对布局应如下所示:

<RelativeLayout 
android:layout_width="300dp" 
android:layout_height="300dp" 
android:background="[some non-transparent color]" 
android:elevation="30dp" >

答案 2 :(得分:0)

这是我的情况,试一试app:elevation

<Button
    android:id="@+id/my_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_marginLeft="20dp"
    android:layout_topLeft="20dp"
    app:elevation="2dp"
    android:translationZ="2dp"
    android:background="@android:color/holo_green_light"
    android:text="BUTTON">