See the related Medium article for more info and a GIF showing the final result.
Last active
April 13, 2020 14:11
-
-
Save hormesiel/ff6dd6822a2c899927f51ae21e1142dc to your computer and use it in GitHub Desktop.
Easiest XML-only solution I know to add a <ripple> to an <ImageView> (tested on API >= 21)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?xml version="1.0" encoding="utf-8"?> | |
<ripple | |
xmlns:android="http://schemas.android.com/apk/res/android" | |
android:color="?colorControlHighlight"> | |
<item android:drawable="@drawable/card_image" /> | |
</ripple> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- ... --> | |
<!-- We want to add a ripple to our image, but : | |
* we can't use `foreground` since it isn't supported on APIs < 23 | |
* we can't wrap the image with a <ripple> and set it as the `background` cause in some | |
cases the image is stretched, and it wouldn't be viable to hard-code the view's height ; | |
so we need to use the `src` and `adjustViewBounds` attrs to get the right image size | |
* if we use `src` and put the ripple as `background` it'll be drawn beneath it | |
The solution I've found is to use `src` + `adjustViewBounds` to get the right view size, | |
hide the `src` image by tinting it to transparent, and use `background` to show the same | |
image wrapped in a <ripple> --> | |
<ImageView | |
android:adjustViewBounds="true" | |
android:background="@drawable/card_ripple" | |
android:layout_height="wrap_content" | |
android:layout_width="wrap_content" | |
android:src="@drawable/card_image" | |
android:tint="@android:color/transparent" | |
android:tintMode="src_in" /> | |
<!-- ... --> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment