Liquid Swipe Animation in Android

The Liquid Swipe animation is a popular user interface (UI) animation technique used in Android app development. It creates a visually appealing transition effect where the user can swipe or slide between different screens or views, resembling the fluid motion of liquid.

The Liquid Swipe animation is characterized by some key features in android.

Elasticity − The animation gives the impression of stretching and bouncing back, similar to the behavior of liquid.

Colorful Transitions − It often involves vibrant colors and smooth transitions between different elements or screens.

Finger Tracking − The animation tracks the user's finger movement as they swipe, providing a dynamic and interactive experience.

Implementation of Liquid Swipe Animation

Now that you understand what Liquid Swipe animations are, let’s try to implement the same using Java.

• Step 1 − Set up your Android project

  To begin, kindly create a fresh project in your preferred development environment like Android Studio.

• Step 2 − Next set up the essential dependencies and incorporate the library dependency. Once done with that. Sync your project to guarantee seamless integration of the library.

Add the following dependency to your app-level build.gradle file −

implementation 'com.cuberto:liquid-swipe:1.0.0'

• Step 3 − Create the layout file

  Create a layout file (activity_main.xml or any other name you prefer) that will contain the Liquid Swipe animation. Here's an example layout −

<com.cuberto.liquid_swipe.LiquidPager
   android:id="@+id/liquidPager"
   android:layout_width="match_parent"
   android:layout_height="match_parent" />

• Step 4 − Prepare the liquid fragments

  Create the necessary fragments that will be displayed as pages in the Liquid Swipe animation. Each fragment represents a separate screen or view.

public class Fragment1 extends Fragment {
   // Fragment 1 implementation
}

public class Fragment2 extends Fragment {
   // Fragment 2 implementation
}

public class Fragment3 extends Fragment {
   // Fragment 3 implementation
}

• Step 5 − Implement the LiquidSwipeAdapter

  Create a custom adapter that extends LiquidSwipeAdapter and override the necessary methods. This adapter will provide the fragments to be displayed in the LiquidPager. Here's an example implementation −

public class CustomAdapter extends LiquidSwipeAdapter {

   public CustomAdapter(FragmentManager fragmentManager) {
      super(fragmentManager);
   }

   @Override
   public Fragment getItem(int position) {
      switch (position) {
         case 0:
            return new Fragment1();
         case 1:
            return new Fragment2();
         case 2:
            return new Fragment3();
         default:
            return null;
      }
   }

   @Override
   public int getItemCount() {
      return 3; // Number of fragments/pages
   }
}

• Step 6 − Set the adapter in MainActivity

  To display the Liquid Swipe animation on your MainActivity or the desired activity, simply assign the adapter for the LiquidPager. For instance −

public class MainActivity extends AppCompatActivity {

   private LiquidPager liquidPager;
   private CustomAdapter adapter;

   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);

      liquidPager = findViewById(R.id.liquidPager);
      adapter = new CustomAdapter(getSupportFragmentManager());
      liquidPager.setAdapter(adapter);
   }
}

• Step 7 − Customize the Liquid Swipe animation (optional)

  You can customize the Liquid Swipe animation further by modifying properties such as colors, durations, and interpolators. To access available customization options, consult either the library's documentation or its source code, as both resources contain relevant information.

Algorithm

• Set up the Android project and include the necessary dependencies.

• Create a layout file with the LiquidPager component.

• Create fragments representing separate screens or views.

• Implement a custom adapter extending LiquidSwipeAdapter to provide the fragments.

• Set the custom adapter on the LiquidPager.

• Optionally, customize the animation properties.

Code Base for Liquid Swipe Animation in Android using Java

Example

MainActivity.java −

import android.os.Bundle;
import android.view.View;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

import com.cuberto.liquid_swipe.LiquidPager;

public class MainActivity extends AppCompatActivity {

   private LiquidPager liquidPager;
   
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);

      liquidPager = findViewById(R.id.liquidPager);
      CustomAdapter adapter = new CustomAdapter(getSupportFragmentManager());
      liquidPager.setAdapter(adapter);

      // Set a listener for swipe events
      liquidPager.setOnLiquidSwipeListener(new LiquidPager.OnLiquidSwipeListener() {
         @Override
         public void onSwipeComplete(int position) {
            if (position == 0) {
               // Handle swipe down event
               showNotifications();
            }
         }

         @Override
         public void onSwipeCancel() {
            // Handle swipe cancel event if needed
         }
      });
   }

   private void showNotifications() {
      // Show notifications or perform related actions
      Toast.makeText(this, "Showing notifications", Toast.LENGTH_SHORT).show();
   }
}

CustomAdapter.java −

import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentStatePagerAdapter;

public class CustomAdapter extends FragmentStatePagerAdapter {

   public CustomAdapter(FragmentManager fragmentManager) {
      super(fragmentManager);
   }

   @Override
   public Fragment getItem(int position) {
      // Return the appropriate fragment based on position
      return NotificationFragment.newInstance(position);
   }

   @Override
   public int getCount() {
      // Return the number of fragments/pages
      return 2;
   }
}

NotificationFragment.java −

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

public class NotificationFragment extends Fragment {

   private static final String ARG_PAGE_INDEX = "page_index";

   private int pageIndex;

   public NotificationFragment() {
      // Required empty public constructor
   }

   public static NotificationFragment newInstance(int pageIndex) {
      NotificationFragment fragment = new NotificationFragment();
      Bundle args = new Bundle();
      args.putInt(ARG_PAGE_INDEX, pageIndex);
      fragment.setArguments(args);
      return fragment;
   }

   @Override
   public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      if (getArguments() != null) {
         pageIndex = getArguments().getInt(ARG_PAGE_INDEX);
      }
   }

   @Override
   public View onCreateView(LayoutInflater inflater, ViewGroup container,
      Bundle savedInstanceState) {
         // Inflate the layout for this fragment
         return inflater.inflate(R.layout.fragment_notification, container, false);
   }
}

Learn the noteworthy technique of integrating Liquid Swipe animation into your Android app with Java. This implementation guide takes you through the process to allow smooth swiping from top to bottom within the app, resulting in a cohesive notification experience for end-users.

Conclusion

Liquid Swipe Animation is a very interesting feature of Android. It allows for a better interface experience for the users. In the example above, we have used Java language to create a liquid swipe animation in android studio.

This button basically allows users to see their app notification inside the app by allowing them to swipe the screen from top panel.