Add glow/shadow in ImageView

Question

What I am trying to achieve:

What I am able to achieve:

Code:

<de.hdodenhof.circleimageview.CircleImageView
        android:padding="5dp"
        android:background="@drawable/sub_cat_background"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:id="@+id/tab_image"
        android:src="@drawable/mehendi_tab"
        android:layout_gravity="center_horizontal"/>

sub_cat_background.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:innerRadius="0dp"
       android:shape="ring"
       android:thicknessRatio="2"
       android:useLevel="false" >
    <solid android:color="@android:color/transparent" />

    <stroke
        android:width="5dp"
        android:color="@color/white" />
</shape>

This is what I am able to get after King of masses suggestions:

Now How would I change the grey ring to shadow effect as shown in above figure

Edit 4:

I tried with the canvas way also.

For this,So instead of setting the white ring with the xml, I am using the image with white circle as shown above(image 2).

 Bitmap bitmap=BitmapFactory.decodeResource(getResources(),R.drawable.salon_selected);

            int imageMaxSize = Math.max(bitmap.getWidth(), bitmap.getHeight());


            RadialGradient gradient = new RadialGradient(imageMaxSize / 2, imageMaxSize / 2, imageMaxSize / 2,
                    new int[] {0xFFFFFFFF, 0xFFFFFFFF, 0x00FFFFFF},
                    new float[] {0.0f, 0.8f, 1.0f},
                    android.graphics.Shader.TileMode.CLAMP);
            Paint paint = new Paint();
            paint.setShader(gradient);


            Canvas canvas=new Canvas();
// in onDraw(Canvas)
            canvas.drawBitmap(bitmap, 0.0f, 0.0f, paint);

            tabImage.setImageBitmap(bitmap);

But I didn't get any effect, Code source (How to achieve feathering effect in Android?)

score 0 · Answer 1 · answered Sep 22 '17 at 10:13

By playing with these attributes you can get glow and shadow effects

android:shadowColor
android:shadowDx
android:shadowDy
android:shadowRadius

Should you need to achieve the same effect programatically. Android provides the following shadow related API.

public void setShadowLayer (float radius, float dx, float dy, int color)

So, I tried it with some different fonts, shadow settings, colors and transparency settings.

here is a results image

you can also do this with any view i.e imageview, button, textview etc.

source code for reference

these function only work with Textview not on Image view – Ankur_009 Sep 25 '17 at 07:43 — Ankur_009, Sep 25 '17 at 07:43

score -1 · Answer 2 · answered Sep 22 '17 at 09:51

-1

In android studio there is in build drawable that you can use for apply shadow to any View. That is similar like a drop shadow.

android:background="@drawable/abc_menu_dropdown_panel_holo_light"

Using this you can not change the background color of the view & its border color. If you want your own custom drawable then use layer-list

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--the shadow comes from here-->
    <item
        android:bottom="0dp"
        android:drawable="@android:drawable/dialog_holo_light_frame"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp">

    </item>

    <item
        android:bottom="2dp"
        android:left="2dp"
        android:right="2dp"
        android:top="2dp">
        <!--whatever you want in the background, here i preferred solid white -->
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white" />

        </shape>
    </item>
</layer-list>

and apply to your view like below

android:background="@drawable/custom_drop_shadow_drawable"

If this not work you can try something like this with ShadowImageView

answered Sep 22 '17 at 09:51

King of Masses

18,405
4
60
77

I am not able to figure out what should I put in the shadow section. – Ankur_009 Sep 22 '17 at 09:59
In the same way how u created the xml and stetted as a background, create that from my answer and check – King of Masses Sep 22 '17 at 10:04
I tried but I am not able to figure out the code for the shadow. Basically I am not getting what will be the code for the shadow @King. – Ankur_009 Sep 22 '17 at 10:08
Or it is better you can refer some documentation or article so that I can better understand how outer shadow will add. – Ankur_009 Sep 22 '17 at 10:12
I provided one link in my answer. you check it there – King of Masses Sep 22 '17 at 10:28
Check this answer of mine for similar question way back https://stackoverflow.com/questions/13005714/how-to-show-shadow-around-the-linearlayout-in-android/35914091#35914091 – King of Masses Sep 25 '17 at 05:51
I change the code to this https://gist.github.com/anonymous/ad483559da9acf32b640211c63eb967d and check the edit what I am able to generate. I am not able to change the width of white circle and grey. And also I am not able to get the shadow effect for grey circle. – Ankur_009 Sep 25 '17 at 07:26
I am able to change the with of rings. but now how would I change the outer ring to show shadow effect as shown in the picture. – Ankur_009 Sep 25 '17 at 07:40

Add glow/shadow in ImageView

What I am trying to achieve:

What I am able to achieve:

2 Answers2