如何在圆形imageview周围添加阴影

Question

我想在圆形imageView周围添加阴影.这是我的代码.我想做这样的形象

这是我的.xml文件检查此图像.

activity_main.xml中

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<RelativeLayout
    android:id="@+id/layoutTop"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:background="#355482" >
</RelativeLayout>

<RelativeLayout
    android:id="@+id/layoutBottom"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_alignParentBottom="true"
    android:layout_below="@+id/layoutTop"
    android:background="@drawable/loading" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="113dp"
        android:text="Profile"
        android:textColor="#355482"
        android:textSize="20dp"
        android:textStyle="bold" />
</RelativeLayout>

<ImageView
    android:id="@+id/overlapImage"
    android:layout_width="150dp"
    android:layout_height="150dp"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="132dp"
    android:adjustViewBounds="true"
    android:background="@drawable/round_image"
    android:src="@drawable/ic_launcher" />

这是round_image.xml:

<?xml version="1.0" encoding="utf-8"?>

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

<solid android:color="#ffffff" />
<corners android:radius="2dp"/>

<size
    android:height="80dp"
    android:width="80dp" />

<padding
    android:bottom="0dp"
    android:left="0dp"
    android:right="0dp"
    android:top="0dp" />

</shape>

我尝试了一些阴影效果的代码,但它不起作用.

Answer 1

希望对你有帮助:)

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape android:shape="oval">
              <solid android:color="@color/gray"/>
                <!--shadow Color-->
        </shape>
    </item>

    <item
        android:left="0dp"
        android:right="0dp"
        android:top="0dp"
        android:bottom="3dp">
        <shape android:shape="oval">
             <solid android:color="@color/lightgrey"/>//Background Color
        </shape>
    </item>
</layer-list>

根据需要更改背景颜色和阴影颜色..

Answer 2

它比你想象的要简单得多。您的 ImageView 需要根据椭圆形背景显示为圆形，因为默认情况下它是方形的。然后你需要包括高程，它会按你的预期显示。您不能将椭圆背景设置为透明，因为它不允许阴影高度。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="@android:color/white"/>
        </shape>
    </item>
</layer-list>

现在在你的图像视图中，我在这里跳过你如何包含你的图像

<ImageView
    android:id="@+id/alert_icon"
    android:layout_width="@dimen/alert_icon"
    android:layout_height="@dimen/alert_icon"
    android:contentDescription="@string/your_shadow_rulez"
    android:background="@drawable/white_oval"
    android:elevation="@dimen/elevation_fab" />

当然，请确保您的图像视图宽度和高度都匹配。海拔越大阴影越大

看看这看起来多么简单和漂亮

Answer 3

创建一个circle_shadow.xml文件并使用此代码对我来说很好。根据您的要求更改半径。

circle_shadow.xml

<!-- Drop Shadow -->
<item>
    <shape android:shape="oval">
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#00CCCCCC" />

        <corners android:radius="3dp" />
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#10CCCCCC" />

        <corners android:radius="3dp" />
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#20CCCCCC" />

        <corners android:radius="3dp" />
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#30CCCCCC" />

        <corners android:radius="3dp" />
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#50CCCCCC" />

        <corners android:radius="3dp" />
    </shape>
</item>

<!-- Background Color (white) -->
<item>
    <shape android:shape="oval">
        <solid android:color="@android:color/white" />

        <corners android:radius="3dp" />
    </shape>
</item>

Answer 4

在回答之前，我想提供一些建议。您只需要在 Google 中输入问题的标题即可。我试图用 shadow android像圆形 imageview一样搜索：

不使用库：

更改android:color="#BDBDBD"在形状的标签。你round_image.xml会像：

<?xml version="1.0" encoding="utf-8"?>

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

<solid android:color="#BDBDBD" />
<corners android:radius="2dp"/>

<size
    android:height="80dp"
    android:width="80dp" />

<padding
    android:bottom="0dp"
    android:left="0dp"
    android:right="0dp"
    android:top="0dp" />

</shape>

使用库：

你试过这个CircularImageView

您可以使用此库，或者如果您不想使用，则从该库内部res文件夹中获取一些代码。

谢谢你。

Answer 5

在这里，我分享了我的最佳实践，以显示带有一些细节的圆形图像/资源的阴影效果。

上面示例图像的图标为 56dp x 56dp，并使用缩放视图进行裁剪，因此它可能看起来不那么吸引人，但结果在肉眼下的实际设备上显示良好。

上面的例子是通过使用：

• 一定程度的高度，以留下阴影。
• 为视图提供几乎两倍高程的边距以适应阴影。
• 确保父视图提供几乎两倍高程的空间来适应阴影。
• 创建并使用 OutlineProvider 来创建阴影。

现在我们从代码开始。

<FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="@dimen/margin_14dp"> // Point no. 3

        <androidx.appcompat.widget.AppCompatImageView
            android:id="@+id/img"
            android:layout_width="@dimen/margin_56dp"
            android:layout_height="@dimen/margin_56dp"
            android:layout_margin="@dimen/margin_14dp" // Point no. 2
            android:elevation="@dimen/margin_8dp" // Point no. 1
            android:src="@drawable/ic_bell" />
 </FrameLayout>

让我们继续讨论第 no 点。4、这里是圆形轮廓的 OutlineProvider 类。

import android.graphics.Outline;
import android.view.View;
import android.view.ViewOutlineProvider;

public class CircularOutlineProvider extends ViewOutlineProvider {  
    @Override
    public void getOutline(View view, Outline outline) {
        outline.setRoundRect(0, 0, view.getWidth(), view.getHeight(), (view.getWidth() / 2F));
    }
}

我们在 Java/Kotlin 类中使用 OutlineProvider 在运行时发挥作用。

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) 
    findViewById(R.id.img).setOutlineProvider(new CircularOutlineProvider());

魔法课程结束！

更多体验和增强细节请阅读官方文章。