Circular reveal over top of other views gives error "cannot start this animator on a detached view"

Question

i had gone through research about for couple of days but didn't get it resolved. Problem in this Question is similar to mine but I couldn't solve my issue using this either.

I had tried to get the circular reveal effect just like whatsapp where the revealed view will be inflated over the top of other views. In my case when I apply the animation on a layout already present in the layout.xml of current java class then its work fine but the problem is that the revealing layout which in my case is LInearLayout will push the other contents(which are under it) down and make place for it.

My layout in this case is as follow,

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<io.codetail.widget.RevealFrameLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content">
       <LinearLayout
           android:id="@+id/reveal_items"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:orientation="horizontal"  >
           <LinearLayout
               android:layout_width="0dp"
               android:layout_height="wrap_content"
               android:layout_weight="1"
               android:gravity="center"
               android:orientation="vertical">
               <ImageButton
                   android:layout_width="70dp"
                   android:layout_height="70dp"
                   android:background="@drawable/icon_camera" />
               <TextView
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:layout_marginTop="16dp"
                   android:text="Gallery" />
           </LinearLayout>
           <!-- Other 2 icons here-->

       </LinearLayout>
   </io.codetail.widget.RevealFrameLayout>

   <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Enter Name" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="OK" />

LinearLayout/>

my reveal layout will push the EditText and button down to make place for it but i want to reveal over the top of them..

Then I tried to put the revealing view code in another reveal-layout.xml file and inflate that layout to a View(LinearLayout in my case) created in javacode. And then try to apply the revealing effect on this LinearLayout but it gives me this "cannot start this animator on a detached view" exception.

My revealing-layout.xml looks like

<io.codetail.widget.RevealFrameLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content">
       <LinearLayout
           android:id="@+id/reveal_items"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:orientation="horizontal"  >
           <LinearLayout
               android:layout_width="0dp"
               android:layout_height="wrap_content"
               android:layout_weight="1"
               android:gravity="center"
               android:orientation="vertical">
               <ImageButton
                   android:layout_width="70dp"
                   android:layout_height="70dp"
                   android:background="@drawable/icon_camera" />
               <TextView
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:layout_marginTop="16dp"
                   android:text="Gallery" />
           </LinearLayout>
           <!-- Other 2 icons here-->

       </LinearLayout>
   </io.codetail.widget.RevealFrameLayout>

In button click i call function revealView(); which looks as below,

public void revealView()
{
    int cx = (mRevealView.getLeft() + mRevealView.getRight());
    int cy = mRevealView.getTop();
    int radius = Math.max(mRevealView.getWidth(), mRevealView.getHeight());

    // and all animations here, the animator is working fine so i did not put the code here
} 

If i initialize mRevealView in my MainActivity onCreate() methoed as, mRevealView=(LinearLayout)findviewbyid(R.id.reveal_items) and inflate and assign view to it then the animator will work fine on this view. But when i try to create new layout like, mRevealView=new LinearLayout(this) and set its parameters etc everything then it will gives this error when i apply animator on it. Cannot start this animation on a detached view.

What I am doing wrong here can anybody suggest me.

Answer 1

To achieve a similar effect like whatsapp using the Circular Effect like whatsapp library you mentioned i first set my parent view as FrameLayout. This parent Framelayout includes two childrens first is LinearLayout and second is FrameLayout(Here comes the code you want to display on top of view written in LinearLayout). Write all your code which you want display on the screen in the first LinearLayout and the reveal effect code in second FrameLayout as i mentioned. Its simply the use of FrameLayout property. You are good to go. You can use the same java code provided in the discription of the library.

Answer 2

Try to put your reveal code in a ViewTreeObserver of intended reveal-layout, something like this:

boolean reveal = false;
button.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            reveal = true;
        }
    });

LinearLayout layout = (LinearLayout) findViewById(R.id.reveal_items);
layout.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {                        
            if(reveal) {
                reveal = false;
                // start reveal animation here
                // ...
            }
            // for SDK >= 16
           ll.getViewTreeObserver().removeOnGlobalLayoutListener(this);
        }
 });