Image view shadow like material design

Question

I know there are many questions but it do not work out for me so i am posting this question:

I a adding a circular Imageview to my application, and i want some elevation/shadow to it so that it worked on all Api not only after 21. so what should i do?

this is my code:

xml :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"
    >


    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/mybackground"

        />
</RelativeLayout>

this is mybackground in drawable :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#42000000" />
    <corners android:radius="5dp" />
</shape>

this is my code :

public class MainActivity extends AppCompatActivity {
Bitmap bmp;

    @TargetApi(Build.VERSION_CODES.JELLY_BEAN)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        bmp = BitmapFactory.decodeResource(getResources(), R.drawable.frames);
        bmp = getroundedBitmap(bmp);
        ImageView iv = (ImageView) findViewById(R.id.imageView);
iv.setImageBitmap(bmp);
       //iv.setBackground(new BitmapDrawable(getResources(),bmp));
        Outline outline = null;
       /* if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
         //   outline = new Outline();
          //  outline.setOval(0,0,iv.getWidth(),iv.getHeight());
          iv.setElevation(1500);

        }*/

    }

    private Bitmap getroundedBitmap(Bitmap bmp) {
        int targetwidth = 250;
        int targetheight = 250;
        Bitmap targetBitmap = Bitmap.createBitmap(targetwidth,targetheight,Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(targetBitmap);
        Path path = new Path();
        path.addCircle(((float) targetwidth - 1) / 2, ((float) targetheight - 1) / 2, Math.min(targetwidth, targetheight) / 2, Path.Direction.CCW);
        canvas.clipPath(path);

        Paint p = new Paint();
        p.setColor(Color.WHITE);
        canvas.drawBitmap(bmp, new Rect(0, 0, bmp.getWidth(), bmp.getHeight()), new Rect(0, 0, targetwidth, targetheight), null);

        return targetBitmap;
    }


}

Please help me out. i ma working in android studio

score 0 · Answer 1 · edited Nov 20 '15 at 11:30

0

Elevation cannot work before API 21 but you can have a work around by help of shadows. Create a shadow (circular in your case) in your mybackground drawable itself. Use layer-list as the parent element and gradient to create the shadow layer inside it.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <gradient android:startColor="#d1c4e9"
                android:endColor="@android:color/transparent"
                android:angle="270"/>
        </shape>
    </item>
    <item android:right="1dp" android:left="1dp" android:bottom="3dp">
        <shape android:shape="oval">
            <solid android:color="#673ab7"/>
        </shape>
    </item>
</layer-list>

edited Nov 20 '15 at 11:30

Bartłomiej Semańczyk

59,234
49
233
358

answered Nov 20 '15 at 07:43

Varun Kumar

1,241
1
9
18

please give a code , i have added shadow in mybackground but it is not showing. and i am using moto g 1st gen with lollypop so it should show the elevation. it isnt showing that either. and this is a comment not an answer, appriate your help but code or link would be more helpful – Parth Anjaria Nov 20 '15 at 08:22
code added, make drawable in your res folder and add the xml as a background on the ImageView. – Varun Kumar Nov 20 '15 at 08:45
i am getting an ovular shadow behind the imageview, and it is horizontal oval – Parth Anjaria Nov 20 '15 at 09:46
Its a gradient with end color as transparent, thats why it looks like a horizontal oval. Change the colors according to your need. – Varun Kumar Nov 20 '15 at 09:57

score 0 · Answer 2 · answered Nov 24 '15 at 06:57

0

We can take ImageView Inside CardView,and height and width match with cardView try once,it will work.

answered Nov 24 '15 at 06:57

Ramesh Bhupathi

408
7
10

Image view shadow like material design

2 Answers2