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_heregpr.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" 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 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/neveropen2" /> </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 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 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.
