Liquid Swipe Animation in Android

Liquid Swipe animation is used to slide the page like water which show different design and pattern on the screen. It creates a floating state. Liquid Swipe animation is a significantly trending design procedure. Movement can help keep clients inspired by your UI design longer and more motivated to collaborate with content. This method provides the app with a smooth look in a new way. In this article, we are going to develop the Liquid Swipe animation effect in android studio.

What we are going to build in this article? 

In this article, we will develop a sample application with the Liquid Swipe animation effect over its activity. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language. 

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Create a file name github.properties

Now inside the Project folder go to the gradle.properties> New> File and then create a new file named github.properties. A picture of step-by-step implementation is provided below for your help.

Step 3: Working with file github.properties

Add below-written lines of code in github.properties file, but remember you have to put your github username in front of gpr.usr and github token in front of gpr.key.

Java

gpr.usr = github_username_here
gpr.key = github_generated_token_here

How to generate the Github token?

Inside your GitHub account go to the Settings > Developer Settings > Personal Access Tokens > Generate a new token and put that generated token inside github.properties in the front of gpr.key.

Step 4: Add maven repository

Now, go to the root build.gradle(Project) and add these lines at the end of repositories below the jcenter() inside the allprojects{ } section.

Java

def githubProperties = new Properties()
    githubProperties.load(new FileInputStream(rootProject.file("github.properties")))
    repositories {
        maven {
            name = "GitHubPackages"

            url = uri("https://maven.pkg.github.com/Cuberto/liquid-swipe-android")
            credentials {
                /** Create github.properties in root project folder file with
                ** gpr.usr=GITHUB_USER_ID & gpr.key=PERSONAL_ACCESS_TOKEN
                ** Or set env variable GPR_USER & GPR_API_KEY if not adding a properties file**/
                username = githubProperties['gpr.usr'] ?: System.getenv("GPR_USER")
                password = githubProperties['gpr.key'] ?: System.getenv("GPR_API_KEY")
            }
      }
}

Step 5: Add dependency

Now, Navigate to the Gradle Scripts > build.gradle(Module:app) add the below dependencies in the dependencies section. 

Java

implementation 'com.cuberto:liquid-swipe:1.0.0'
implementation 'androidx.core:core-ktx:1.3.2'
implementation "org.jetbrains.kotlin:kotlin-stdlib:1.4.10"

Finally, sync your project and now we have everything which we will need during implementation so now, move towards its implementation.  

Step 6: Create two blank fragments

To create a blank fragment please refer to How to Create a New Fragment in Android Studio. Follow the steps provided in the link and create two blank fragments for this application. For this article, we have created two fragments by the name of Fragment1 and Fragment2.

Step 7: Working with the fragment_1.xml file

Go to the app >res > layout > fragment_1.xml and paste the below-written code in the fragment_1.xml  file. 

XML

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#0F9D58"
    tools:context=".Fragment1">

    <!-- TODO: Update blank fragment layout -->

    <!-- Create a ImageView and set it's position -->
    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="100dp"
        android:layout_marginTop="200dp"
        android:src="@drawable/geeksforgeeks2" />

</FrameLayout>

Step 8: Working with the fragment_2.xml file

Next, go to the app >res > layout > fragment_2.xml and paste the below-written code in the fragment_2.xml  file. 

XML

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFC107"
    tools:context=".Fragment2">

    <!-- TODO: Update blank fragment layout -->

</FrameLayout>

Step 9: Create a class viewPager 

Go to the app > java > package name and create a new class named viewPager.java and add below-written code in the viewPager class. Comments are added inside the code to understand the code in more detail.

Java

import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;

public class viewPager extends FragmentPagerAdapter {

    // creation of constructor of viewPager class
    public viewPager(@NonNull FragmentManager fm, int behaviour) {
        super(fm, behaviour);
    }

    @NonNull

    @Override

    // create the getItem method of
    // FragmentPagerAdapter class
    public Fragment getItem(int position) {

        switch (position) {
            case 0:
                return new Fragment1();    // Fragment1 is the name of first blank fragment,
                                           // you can replace its name with your created fragment name
            case 1:
                return new Fragment2();    // Fragment2 is the name of second blank fragment,
                                           // you can replace its name with your created fragment name
        }
        return null;
    }

    @Override
    public int getCount() {
        return 2;
    }
}

Step 10: Working with the activity_main.xml file

Now, go-to the app >res > layout > activity_main.xml and paste the below-written code in the activity_main.xml file.

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/relative_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#0F9D58"
    tools:context=".MainActivity">

    <!-- apply LiquidPager on main activity -->
    <com.cuberto.liquid_swipe.LiquidPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></com.cuberto.liquid_swipe.LiquidPager>

</RelativeLayout>

Step 11: Working with the MainActivity.java file

Go to the app > java > package name > MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

Java

import android.os.Bundle;

import androidx.appcompat.app.AppCompatActivity;

import com.cuberto.liquid_swipe.LiquidPager;

public class MainActivity extends AppCompatActivity {

    // declare LiquidPager
    LiquidPager pager;

    // declare viewPager
    viewPager viewPager;

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

        // definition of pager using method findViewById()
        pager = findViewById(R.id.pager);

        // calling the constructor of viewPager class
        viewPager = new viewPager(getSupportFragmentManager(), 1);
        pager.setAdapter(viewPager);
    }
}

That’s all, now the application is ready to install on the device. Here is what the output of the application looks like.

Output: