Whatsapp like profile picture animation

Question

I wanted to have picture animation just like whatsapp does on friend's profile picture. Can anyone tell me how to achieve this ?

Edited

I my case, the imagview is on top and below it, there is listview. when i scroll down the listview, the imageview should increase its size and when i scroll up, the imageview size should reduce its size. The maximum height of imageview can be 500 and minimum height of imageview can be 100. I have already achieve this. What i am doing is, changing the imagview height. But its not that much smooth.

I got it and added my answer please check and let me know if you have any issues. — Shailendra Madda, Feb 19 '18 at 08:07

score 4 · Answer 1 · edited Dec 08 '21 at 12:39

Make a global method to show the image in full view in your YourApplication.java:

public static void showExpandableImage(Context context, String imageUri, String title, View view) {
        try {

            Intent intent = new Intent(context, ViewImageActivity.class);
            intent.putExtra("image", imageUri);
            intent.putExtra("title", title);

            if (TextUtils.isEmpty(imageUri)) {
                imageUri = getURLForResource(R.drawable.user_placeholder); // default image in drawable
            }

            Pair<View, String> bodyPair = Pair.create(view, imageUri);
            ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(((Activity)context), bodyPair);

            ActivityCompat.startActivity(context, intent, options.toBundle());

        } catch (Exception e) {
            e.printStackTrace();
        }
}

public static String getURLForResource (int resourceId) {
        return Uri.parse("android.resource://com.yourpackage.name/" + resourceId).toString();
    }

Add this code in image_view_layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/mainLay"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/black"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitCenter" />

</LinearLayout>

Add this code in ViewImageActivity:

public class ViewImageActivity extends AppCompatActivity {
    private ImageView imageView;
    private TextView title;
    private String my_title, imgPath;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.image_view_layout);

        imageView = findViewById(R.id.imageView);
        title = findViewById(R.id.title);

        imgPath = getIntent().getExtras().getString("image");
        my_title = getIntent().getExtras().getString("title");

        if (!TextUtils.isEmpty(my_title)) {
                title.setText(my_title);
            }

        if (!TextUtils.isEmpty(imgPath)) {

            ViewCompat.setTransitionName(imageView, imgPath);
            Picasso.with(this).load(imgPath)
                        .placeholder(R.drawable.user_placeholder)
                        .error(R.drawable.user_placeholder)
                        .into(imageView);

        } else {
                ViewCompat.setTransitionName(imageView, "NotAvailable");
                Picasso.with(this).load(R.drawable.user_placeholder)
                        .placeholder(R.drawable.user_placeholder)
                        .error(R.drawable.user_placeholder)
                        .into(imageView);
            }

    }

}

Simply call this method where ever you want to show WhatsApp like animation:

An Example in Activity:

ImageView image_view = findViewById(R.id.pic_image_view);
showExpandableImage(MyActivity.this, "UrlOfImage", "MyTitle", image_view); // replace with your content

An example in Adapter:

ImageView image_view = itemView.findViewById(R.id.pic_image_view);
showExpandableImage(context, "UrlOfImage", "MyTitle", image_view); // replace with your content

The animation for going back is not smooth. How to achieve that? if we want smoother animations. — Fazal, Oct 18 '18 at 12:43

score 2 · Answer 2 · answered Aug 01 '15 at 06:51

2

you have to Use Android Design Support Library and using that you can Achieve

Here is the Link :: http://android-developers.blogspot.in/2015/05/android-design-support-library.html

in which you have to find Collapsing Toolbars using this control you can achieve this.

for more you can refer this Link :: https://github.com/chrisbanes/cheesesquare it will very helpful to you.

answered Aug 01 '15 at 06:51

But image should not be fully invisible. and the image must be able to pull down to increase its size – Bunny Aug 01 '15 at 07:17
Hey. I'm looking for the same.. Did you find a solution? – spaceMonkey Dec 01 '15 at 11:43
1

For iOS, https://github.com/MaitrayeeGhosh/ParallaxScrollingAnimationEffectTutorial – Avijit Nagare Apr 13 '17 at 06:33
@spaceMonkey I got it and added my answer above please check and let me know if you have any issues. – Shailendra Madda Feb 19 '18 at 08:02

Whatsapp like profile picture animation

2 Answers2