Android Scaling Animation: translate and scale to parent's parent's centre

Question

I'm trying to build an app where if you click on a profile pic, the pic will expand to the centre of the screen with the background of the app dimmed (similar to what you would experience if you click on a profile pic on whatsapp). Clicking anywhere on the dimmed area would reverse the animation and the profile pic will reset back into the original position.

I have the following xml layout:

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:id="@+id/profilepage"
android:layout_height="wrap_content">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/brown_400"
    android:id="@+id/profileBox">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/profilepic"
        android:src="@drawable/ic_person_black_24dp"
        />

    <TextView
        android:layout_toRightOf="@+id/profilepic"
        android:layout_alignTop="@+id/profilepic"
        android:textSize="20sp"
        android:textColor="@color/white"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/profileName"
        tools:text="Johnny Appleseed"/>

</RelativeLayout>
 ...other layout stuff like buttons etc to be put here...
</LinearLayout>

I want to click on the little man above and it should translate and scale to the middle of the screen.

I found some code here Translate and Scale animation in parallel which serve my purpose:

private void moveViewToScreenCenter( final View view ){
    view.bringToFront(); //brings the view to the front
    DisplayMetrics dm = new DisplayMetrics();
    getWindowManager().getDefaultDisplay().getMetrics( dm );

    int originalPos[] = new int[2];
    view.getLocationOnScreen( originalPos );

    int xDelta = (dm.widthPixels - view.getMeasuredWidth() - originalPos[0])/2;
    int yDelta = (dm.heightPixels - view.getMeasuredHeight() - originalPos[1])/2;

    AnimationSet animSet = new AnimationSet(true);
    animSet.setFillAfter(true);
    animSet.setDuration(1000);
    animSet.setInterpolator(new BounceInterpolator());
    TranslateAnimation translate = new TranslateAnimation( 0, xDelta , 0, yDelta);
    animSet.addAnimation(translate);
    ScaleAnimation scale = new ScaleAnimation(1f, 2f, 1f, 2f, ScaleAnimation.RELATIVE_TO_PARENT, .5f, ScaleAnimation.RELATIVE_TO_PARENT, .5f);
    animSet.addAnimation(scale);
    view.startAnimation(animSet);
}

However, the code would only scale relative to the parent of the profile pic ImageView, which in my case is the RelativeLayout (@+id/profileBox) and not the parent's parent (@+id/profilepage) which is what I want it to do.

Also, the code: view.bringToFront(); doesn't bring the profile picture to the front of the LinearLayout (profilepage) to scale and translate, but instead brings it to the front of the RelativeLayout (profileBox).

How can I bring it to the front of profilepage and scale it appropriately so that it will be centered in my app screen?

score 0 · Accepted Answer · edited May 23 '17 at 11:58

I managed to find an answer to first question: Android View Disappearing When Go Outside Of Parent

I needed to set this for profileBox:

    android:clipChildren="false"
    android:clipToPadding="false"

And this for profilepage:

android:clipChildren="false"

But I am starting to realise that this might not be the correct strategy for what I want to do as I want the background to be dimmed when the profile pic is translating / scaling and the buttons behind the profile picture not to be accessible as the activity is in a Paused state.

My code above will only translate / scale the image without pausing the activity below so clicking on 'Log Out' will log out the user.

Android Scaling Animation: translate and scale to parent's parent's centre

1 Answers1