CircleImageView

So I need to make the CirleImageView to be more like a button. And I want this view to show some custom or maybe online image. So FloatActionButton won't be a solution.

I referenced to this issue and come up with a solution:

So to have a elevation, we must have a background, this is my background

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

The background color can't be @android:color/transparent, it will make elevation disappear.
Then set this background to CircleImageView. and set an elevation. But I soon find out that the elevation is partially cut off like this

wrong_cllip

I think that's because the shadow reached the boarder of view
So I added a Layout to wrap around CircleImageView and make it slightly larger than CircleImageView.
So the code looks like this

 <FrameLayout
    android:layout_width="@dimen/logo_wrapper_size"
    android:layout_height="@dimen/logo_wrapper_size"
    android:layout_marginEnd="@dimen/large_margin"
    app:layout_constraintEnd_toEndOf="parent">

    <de.hdodenhof.circleimageview.CircleImageView
      android:id="@+id/logo"
      android:layout_width="@dimen/logo_size"
      android:layout_height="@dimen/logo_size"
      android:layout_gravity="center"
      android:background="@drawable/circle_background"
      android:elevation="@dimen/standard_margin"
      android:foreground="@drawable/round_selector"
      android:onClick='@{() -> clickListener.onItemActionClick(itemViewModel, "")}'
      android:src="@drawable/placeholder_bitmap" />
</FrameLayout>

<dimen name="logo_wrapper_size">78dp</dimen>
<dimen name="logo_size">54dp</dimen>

And this makes CircleImageView have a nice shadow like a FAB. It's even better when I added a ripple animation using this workaround

device-2018-05-17-111412