自定义imageView的阴影

时间:2020-10-07 02:04:55

标签: android xml android-imageview shadow layer-list

我创建了一个简单的播放图标。我将SVG文件导入了Android Studio,并将其作为imageView进行了来源。但是,不幸的是,我无法移走我的Adope XD文档中的下拉阴影。无论哪种情况,我都试图通过代码复制下拉阴影效果。但是我没有成功。

左边的图像就是我需要的,右边的图像就是我需要的: enter image description here

我一直在弄乱现有代码,但没有成功。这是我到目前为止的内容:

imageView:

<ImageView
    android:id="@+id/thumbnail_next"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:background="@drawable/background_drop_shadow"
    app:srcCompat="@drawable/ic_next_button_image_select" />

ic_next_button_image_select(导入的SVG):

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="40dp"
    android:height="38dp"
    android:viewportWidth="40"
    android:viewportHeight="38">
  <path
      android:pathData="M12,0L28,0A12,12 0,0 1,40 12L40,26A12,12 0,0 1,28 38L12,38A12,12 0,0 1,0 26L0,12A12,12 0,0 1,12 0z"
      android:fillColor="#1ed760"/>
  <path
      android:pathData="M27.6,17.28a2,2 0,0 1,-0 3.439l-10.083,5.987A2,2 0,0 1,14.5 24.987L14.5,13.013a2,2 0,0 1,3.021 -1.72Z"
      android:fillColor="#090909"/>
</vector>

background_drop_shadow(我找到并尝试使用的代码):

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Drop Shadow Stack -->
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <stroke android:color="#02000000" android:width="1dp"  />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <stroke android:color="#05000000" android:width="1dp" />
            <corners android:radius="7dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <stroke android:color="#10000000" android:width="1dp" />
            <corners android:radius="6dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <stroke android:color="#15000000" android:width="1dp" />
            <corners android:radius="5dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <stroke android:color="#20000000" android:width="1dp" />
            <corners android:radius="4dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <stroke android:color="#25000000" android:width="1dp" />
            <corners android:radius="3dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <stroke android:color="#30000000" android:width="1dp" />
            <corners android:radius="3dp" />
        </shape>
    </item>

    <!-- Background -->
    <item>
        <shape>
            <solid android:color="@android:color/transparent" />
            <corners android:radius="3dp" />
        </shape>
    </item>
</layer-list>

1 个答案:

答案 0 :(得分:1)

要实现此目的,您应该使用CardView。所以会是这样:

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#687199"
    >

    <androidx.cardview.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        app:cardBackgroundColor="@android:color/transparent"
        app:cardCornerRadius="40dp"
        app:cardElevation="16dp"
        >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/test"
            />
    </androidx.cardview.widget.CardView>

</FrameLayout>

Example

您只需要使用app:cardElevationapp:cardCornerRadius来获得所需的阴影。

此外,请记住,当对象靠近屏幕底部时,Android阴影系统会绘制更深和更长的阴影。

相关问题