[Android 9.0 Pie Java] LINE-style chat list screen → personal chat screen transition animation implemented (with sample application)

environment

Android9.0 Pie Java

Introduction

Posted earlier, [Android 9.0 Pie Java] Implement horizontal swipe-> dialog display-> delete in chat app It will be a continuation of.

• When you press an element in the chat list, the fragments on the chat screen overlap so that they cover from right to left.
• <When you press the button, the fragment on the chat screen disappears from left to right.

It works like the following gif.

Finished product URL

I'm omitting it in this article because it would be a big deal to put all the code. If you would like to download and move the chat screen layout and Adapter files, please click here! https://github.com/yuta-matsumoto/chat

code

ChatListFragment.java __ "When you press an element in the chat list, the fragments of the chat screen overlap so that they cover from right to left." __ This is the core part of the implementation. Pick up the onItemClick part of each element in the chat list. Click here for the full text of ChatListFragment.java

ChatListFragment.java

        //Chat list adapter
        final ChatListAdapter adapter = new ChatListAdapter(list) {
            @Override
            public void onItemClick(View view, int pos, List<ChatListRowData> list) {
                //Pass the information of the selected user
                ChatFragment fragment = new ChatFragment();
                //Bundle is convenient for passing data between fragments
                Bundle args = new Bundle();
                if (args != null) {
                    args.putString("userName", list.get(pos).getName());
                    fragment.setArguments(args);
                }
                //Preparing for screen transition
                FragmentTransaction transaction = getFragmentManager().beginTransaction();
                //Animation of layering fragments from left to right
                transaction.setCustomAnimations(R.anim.slide_in_left, R.anim.slide_out_right); // (1)
                //Overlay ChatFragment on top of ChatListFragment
                transaction.add(R.id.mainContainer, fragment, "fragment"); // (2)
                //Add to back stack
                transaction.addToBackStack(null);
                transaction.commit();
            }
        };

(1) To use your favorite animation for screen transitions between Fragments I am using FragmentTransaction.setCustomAnimations. Prepare and load the animation definition under res with the following configuration.

├res/ 　　├anim/ 　　　　├slide_in_left.xml 　　　　└slide_out_right.xml

slide_in_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="100%p" android:toXDelta="0"
        android:duration="@android:integer/config_mediumAnimTime"/>
    <alpha android:fromAlpha="1.0" android:toAlpha="1.0"
        android:duration="@android:integer/config_mediumAnimTime" />
</set>

slide_out_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="0" android:toXDelta="100%p"
        android:duration="@android:integer/config_mediumAnimTime"/>
    <alpha android:fromAlpha="1.0" android:toAlpha="1.0"
        android:duration="@android:integer/config_mediumAnimTime" />
</set>

(2) By using transaction.add, ChatFragment can be overlaid on ChatListFragment.

ChatFragment.java __ "When you press the <button, the fragment on the chat screen disappears from left to right" __ This is the core part of the implementation. Pick up the onViewCreated part of each element in the chat list. Click here for the full text of ChatFragment.java

ChatFragment.java

    @Override
    public void onViewCreated(View view, Bundle savedInstanceState) {
        //···abridgement

        // <Button listener
        ImageButton backButton = view.findViewById(R.id.backButton);
        backButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //Preparing for screen transition
                FragmentTransaction transaction = getFragmentManager().beginTransaction();
                //Animation where fragments disappear from right to left
                transaction.setCustomAnimations(R.anim.slide_in_left, R.anim.slide_out_right); // (1)
                //Remove ChatFragment
                transaction.remove(chatFragment); // (2)
                transaction.commit();
            }
        });
    }

(1) The same as the description of ChatListFragment is OK.

(2) ChatFragment is deleted by using transaction.remove.

that's all.

Finally

In order to reproduce the movement of this animation, it is not decided well if multiple Activities are used. Since the Activity itself is heavy, I chose the configuration of 1 Activity + N Fragment. I recently had it built on an actual machine, and I'm glad that it worked pretty cool! !!