3

I wanted to create a reveal effect like WhatsApp's attachment feature. I while looking around to create something custom, I came across Android's android.support.design.circularreveal.cardview.CircularRevealCardView view available already without adding any external library.

I implemented this view like so :-

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.circularreveal.cardview.CircularRevealCardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/ccv_attachment_reveal"
    style="@style/style_mw"
    android:elevation="@dimen/dimen_2dp"
    android:orientation="vertical"
    android:padding="@dimen/dimen_margin_16dp"
    app:cardCornerRadius="@dimen/dimen_8dp"
    >

    <android.support.v7.widget.LinearLayoutCompat
        style="@style/style_mw"
        android:orientation="vertical">

        <RelativeLayout
            android:id="@+id/rl_attachment_first_row"
            style="@style/style_ww"
            android:layout_marginStart="@dimen/dimen_30dp"
            android:layout_marginTop="@dimen/dimen_margin_16dp"
            android:layout_marginEnd="@dimen/dimen_30dp">

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/fab_add_gallery_image"
                style="@style/style_ww"
                android:layout_alignParentStart="true"
                android:src="@drawable/ic_gallery_image"/>

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/fab_add_camera_image"
                style="@style/style_ww"
                android:layout_centerHorizontal="true"
                android:src="@drawable/ic_camera"/>

        </RelativeLayout>

        <RelativeLayout
            style="@style/style_ww"
            android:layout_marginStart="@dimen/dimen_30dp"
            android:layout_marginTop="@dimen/dimen_margin_16dp"
            android:layout_marginEnd="@dimen/dimen_30dp"
            android:layout_marginBottom="@dimen/dimen_margin_16dp">

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/fab_add_gallery_image1"
                style="@style/style_ww"
                android:layout_alignParentStart="true"
                android:src="@drawable/ic_gallery_image"/>

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/fab_add_camera_image1"
                style="@style/style_ww"
                android:layout_centerHorizontal="true"
                android:src="@drawable/ic_camera"/>
        </RelativeLayout>
    </android.support.v7.widget.LinearLayoutCompat>
</android.support.design.circularreveal.cardview.CircularRevealCardView>

This displays fine on my app like a regular CardView and I can set it visibile/invisible on a button click. But however I cannot find any implementations online showing how to apply the reveal animation while making this view visible. Is there an in built feature to apply the animation or do I have to create one myself?

user3034944
  • 1,541
  • 2
  • 17
  • 35
  • Possible duplicate of [Circular Reveal Android Compat With Design Library 28](https://stackoverflow.com/questions/51432581/circular-reveal-android-compat-with-design-library-28) – karan Feb 13 '19 at 06:54
  • https://developer.android.com/reference/com/google/android/material/circularreveal/CircularRevealCompat – Eugen Pechanec Feb 13 '19 at 07:03

1 Answers1

0

Please try this

int x = layoutContent.getRight();
int y = layoutContent.getBottom();

int startRadius = 0;
int endRadius = (int) Math.hypot(layoutMain.getWidth(), layoutMain.getHeight());

Animator anim = ViewAnimationUtils.createCircularReveal(layoutButtons, x, y, startRadius, endRadius);

layoutButtons.setVisibility(View.VISIBLE);
anim.start();
user_8275
  • 233
  • 4
  • 15
  • `ViewAnimationUtils.createCircularReveal` is only on API 21+. See https://developer.android.com/reference/com/google/android/material/circularreveal/CircularRevealCompat – Eugen Pechanec Feb 13 '19 at 07:04
  • Which API level you are using? – user_8275 Feb 13 '19 at 07:22
  • On Lollipop you get circular clipping out-of-the-box. The only reason to bother with `android.support.design.circularreveal` widgets is to get it working on Android 4. – Eugen Pechanec Feb 13 '19 at 07:44
  • Okay please see the below link hope this helps you https://stackoverflow.com/a/38394442/4329037 – user_8275 Feb 13 '19 at 08:14
  • Circular reveal and ripple effect are two different things. The question is about circular reveal. All you have to do now, to make your code compatible with Android 4, is read the documentation I linked in my first comment, *change* 1 line of code, and *add* 1 line of code. Understand what you're typing, don't just copy paste code. – Eugen Pechanec Feb 13 '19 at 08:22