Transition with Drawer Layout

Question

I am build an Application which need and image to slide in and out according to the movement of the DrawerLayout. Like, When we open drawer the image shrinks a little bit and when we close the drawer then the image regain its size. I have this image in the Toolbar.

My Code :

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:layout_scrollFlags="scroll|enterAlways"
        android:background="@android:color/transparent"
        android:paddingLeft="10dp"/>
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/left"
        android:layout_centerVertical="true"
        android:id="@+id/img"/>
</RelativeLayout>

I have tried doing this by adding the below code

mImage.setAnimation(AnimationUtils.loadAnimation(context,R.anim.animation));

in the onDrawerClosed(View view) and onDrawerOpened(View drawerView)

But these are not useful as I need to have this animation or transition syncing with the drawer movement.

If Anybody have any suggestions please share.

Are you just wanting to shrink and grow the image, or move it horizontally, too? — Mike M., Jan 27 '17 at 08:03
So, you wanna kinda squeeze it? Same height, but thinner? And no sliding? — Mike M., Jan 27 '17 at 08:19
kind of .. I need do it either by shrinking it or by sliding it , because as viewer they are the same — Atula, Jan 27 '17 at 08:24
Hmm, I'm still not sure if I'm quite getting exactly what you want. Have a look at [this post](http://stackoverflow.com/q/37335300). Is it something like that? I'm actually right in the middle of creating a better, more flexible solution for my answer there, so if what you're trying to do is just a little different, lemme know how. — Mike M., Jan 27 '17 at 08:28
@MikeM. this is nice but its the layout getting changed not the image i.e, I only need to change an image like that which is in my toolbar — Atula, Jan 27 '17 at 08:30

score 0 · Answer 1 · answered Jan 27 '17 at 07:46

0

Implement DrawerLayout.DrawerListener and in void onDrawerSlide (View drawerView, float slideOffset) calculate the animation logic.

img.animate().scaleX(slideOffset).scaleY(slideOffset);

You need to calculate the scale value based on slideOffset. Also, in void onDrawerClosed (View drawerView) reset scale to

img.animate().scaleX(1).scaleY(1);

answered Jan 27 '17 at 07:46

Anurag Singh

6,140
2
31
47

hi, I tried this and this is not exactly what I want . It is just a reverse of that... – Atula Jan 27 '17 at 08:13
@Atula you need to adjust the slideOffset value. You need to calculate like img.animate().scaleX(1f - slideOffset).scaleY(1f - slideOffset); – Anurag Singh Jan 27 '17 at 08:28
not like the way I want ... it is looking like one page is flipping – Atula Jan 27 '17 at 11:53

Transition with Drawer Layout

1 Answers1