如何只为按钮添加底部阴影

时间:2017-11-20 12:45:06

标签: android android-drawable

我有三个按钮伸展到整个窗口。对于所有这些按钮,我只需要为底部添加阴影。

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

 <LinearLayout
     android:id="@+id/buttons_layout"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:orientation="horizontal"
     >

    <ImageButton
        android:id="@+id/gath"
        android:layout_width="0dp"
        android:layout_height="35dp"
        android:layout_weight="1"
        app:srcCompat="@drawable/ic_gath"
        android:background="@drawable/button_shadow"
        android:layout_marginTop="40dp"
        />

    <ImageButton
        android:id="@+id/foll"
        android:layout_width="0dp"
        android:layout_height="35dp"
        android:layout_weight="1"
        app:srcCompat="@drawable/ic_foll"
        android:background="@drawable/button_shadow"
        android:layout_marginTop="40dp"
         />

    <ImageButton
        android:id="@+id/del"
        android:layout_width="0dp"
        android:layout_height="35dp"
        android:layout_weight="1"
        app:srcCompat="@drawable/ic_del"
        android:background="@drawable/button_shadow"
        android:layout_marginTop="40dp"
        />
 </LinearLayout>
</RelativeLayout>

我创建了图层列表分为两部分:1)按钮的主背景颜色和2)渐变

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
          <solid android:color="@color/colorPrimary"/>
          <size android:height="30dp"/>
    </shape>
</item>
<item>
    <shape android:shape="rectangle">
        <gradient
            android:startColor="#0000"
            android:endColor="#9444"
            android:type="linear"
            android:angle="90">
        </gradient>
        <size android:height="5dp"/>
    </shape>
</item>
</layer-list>

现在我只看到colorPrimary(主背景色)而没有别的。我试图使用高程但不能删除左右侧阴影。

谢谢Jenever。他找到了完美的解决方案。我找到了类似的解决方案:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:left="0dp"
        android:right="0dp"
        android:top="30dp"
        android:bottom="0dp">
        <shape android:shape="rectangle">
            <gradient
                android:startColor="#0000"
                android:endColor="#9444"
                android:type="linear"
                android:angle="90">
            </gradient>
        </shape>

    </item>
        <item
            android:left="0dp"
            android:right="0dp"
            android:top="0dp"
            android:bottom="5dp">
            <shape android:shape="rectangle">
                <solid android:color="@color/colorAccent"/>
            </shape>
        </item>
</layer-list> 

3 个答案:

答案 0 :(得分:2)

我认为最简单的方法是将button_shadow.xml更改为:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android">
            <size android:height="30dp" />
            <solid android:color="#FFFF0000" />
        </shape>
    </item>
    <item android:top="30dp">
        <shape xmlns:android="http://schemas.android.com/apk/res/android">
            <size android:height="5dp" />
            <solid android:color="#FF000000" />
            <gradient
                android:angle="90"
                android:endColor="#FF888888"
                android:startColor="#FF000000"
                android:type="linear" />
        </shape>
    </item>
</layer-list>

您可以使用渐变开始和结束颜色。如果您的ImageButton设置为35dp的总高度并且button_shadow.xml中的android:top设置为30dp,则将显示总高度为5dp。根据开始和结束颜色,您可以看起来阴影在按钮下面稍微开始,或者粘在它上面。

在我的虚拟设备上,它现在看起来像这样:

Red ImageButton with white to black gradient below

答案 1 :(得分:0)

我建议您搜索一些库以在所有API级别上绘制阴影。我使用this one为我的阴影着色,并使它们仅在我的视野下方。您可以根据需要进行更改。

答案 2 :(得分:0)

try this..

&#13;
&#13;
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="true">
        <layer-list>
            <item android:top="-10dp" android:left="-10dp" android:right="-10dp">
                <shape android:shape="rectangle">

                    <gradient
                        android:angle="90" 
                        android:startColor="#FF000000"
                        android:type="linear" />

                    <corners android:radius="5dp" />

                    <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
                </shape>
            </item>
        </layer-list>
    </item>
</selector>
&#13;
&#13;
&#13;

And for Button..

&#13;
&#13;
<ImageButton
            android:id="@+id/gath"
            android:layout_width="0dp"
            android:layout_height="35dp"
            android:layout_marginTop="40dp"
            android:layout_weight="1"
            android:background="@drawable/tiles"
            app:srcCompat="@drawable/ic_del"  />
&#13;
&#13;
&#13;