Elevation on circular Image not woking Android

Question

the elevation is not working even after adding padding to the view, here is the Relative layout, what else I should add for a shadow in the image view.

  <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/tvContinueWith"
        android:layout_marginTop="@dimen/_10dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent">

        <ImageView android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/imgFb"
            android:layout_alignParentStart="true"
            android:layout_centerInParent="true"
            android:elevation="@dimen/_5dp"
            android:src="@drawable/fb"
            />

        <ImageView android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/imgGoogle"
            android:layout_toRightOf="@+id/imgFb"
            android:layout_marginLeft="@dimen/_5dp"
            android:layout_centerInParent="true"
            android:src="@drawable/google"
            android:elevation="@dimen/_5dp"
            />

    </RelativeLayout>

score 12 · Accepted Answer · answered Nov 23 '18 at 10:08

I use the code below to add shadow to any View that looks circular. Works on Lollipop and above.

myCircularImageView.setOutlineProvider(new ViewOutlineProvider() {
        @Override
        public void getOutline(View view, Outline outline) {
            outline.setOval(0, 0, view.getWidth(), view.getHeight());
        }
    });
    myCircularImageView.setClipToOutline(true);

I don't encourage using CardView because it makes your layout more complex.

Neha Chauhan · Answer 2 · 2018-11-23T10:06:07.987

you can use cardview as parent layout of relative layout & give the elevation to cardview. It will give shadow to your imageview. Hope it will work for you.

  <android.support.v7.widget.CardView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:cardElevation="5dp"
      app:cardCornerRadius="5dp"
      card_view:cardBackgroundColor="@color/colortransperent">
 <RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toBottomOf="@+id/tvContinueWith"
    android:layout_marginTop="@dimen/_10dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent">

    <ImageView android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imgFb"
        android:layout_alignParentStart="true"
        android:layout_centerInParent="true"
        android:elevation="@dimen/_5dp"
        android:src="@drawable/fb"
        />

    <ImageView android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imgGoogle"
        android:layout_toRightOf="@+id/imgFb"
        android:layout_marginLeft="@dimen/_5dp"
        android:layout_centerInParent="true"
        android:src="@drawable/google"
        android:elevation="@dimen/_5dp"
        />

</RelativeLayout>
 </android.support.v7.widget.CardView>

its a circular image at which i am trying and its not happening. — varun setia, Nov 23 '18 at 10:05
it adds the elevation to the whole view, what i want is only to the image. it is answered above, still thnx a lot! — varun setia, Nov 23 '18 at 10:16

score -1 · Answer 3 · answered Nov 23 '18 at 10:02

-1

Easy way is to use textview in a card view and then add shadow to it using android:elevation="", see this on how to use CardView.

answered Nov 23 '18 at 10:02

Abdul Rahman Shamair

580
1
11
22

score -2 · Answer 4 · answered Nov 23 '18 at 10:22

Best is to use CardView and add the RelativeLayout inside the CardView and fill it with match_parent.

Then use 'elevation' attribute of CardView

<android.support.v7.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:elevation="5dp">

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toBottomOf="@+id/tvContinueWith"
            android:layout_marginTop="@dimen/_10dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent">

            <ImageView android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/imgFb"
                android:layout_alignParentStart="true"
                android:layout_centerInParent="true"
                android:elevation="@dimen/_5dp"
                android:src="@drawable/fb"
                />

            <ImageView android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/imgGoogle"
                android:layout_toRightOf="@+id/imgFb"
                android:layout_marginLeft="@dimen/_5dp"
                android:layout_centerInParent="true"
                android:src="@drawable/google"
                android:elevation="@dimen/_5dp"
                />

        </RelativeLayout>

    </android.support.v7.widget.CardView>

Dependency for CardView

implementation 'com.android.support:cardview-v7:28.0.0'

Elevation on circular Image not woking Android

4 Answers4