简体   繁体   中英

How to set elevation for circle imageview?

Requirement : I need to set elevation shadow for circle imageview.

在此处输入图片说明

Problem: If I set elevation for imageview shadow applied for square image. (circle shadow not applied)

I used circleimageview from this library -> https://github.com/hdodenhof/CircleImageView

Too many google search & SO search not able to find solution. Anyone give hint to fix this issue.

Here is the solution, Use drawable background for rounded saddow

<de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/imgDrawerUser"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="@drawable/back_avtar"
        android:src="@drawable/ic_profile" />

Create back_avtar.xml inside drawable folder

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

    <item>
        <shape android:shape="oval">
            <solid android:color="@color/colorPrimary" />
            <corners android:radius="3dp" />
        </shape>
    </item>
</layer-list>

I hope this will works for you.

Finally I found the CircularImageView library for circle elevation.

Library link - https://github.com/lopspower/CircularImageView

They give the default shadow feature

app:civ_shadow_radius

Sample code

<com.mikhaellopez.circularimageview.CircularImageView
    android:layout_width="250dp"
    android:layout_height="250dp"
    android:src="@drawable/image"
    app:civ_border_color="#3f51b5"
    app:civ_border_width="4dp"
    app:civ_shadow="true"
    app:civ_shadow_radius="10"
    app:civ_shadow_color="#3f51b5"/>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM