Dots Loading Android Using Android Studio

 Introduction

In this article, we are going to see how to create a Dot Loader in Android app using the Android Studio. In a user interface, the Dot Loader plays a unique role. It is the only thing on a Splash page which will attract the user. We can define different levels of motions to the Dots.

Step 1

Create a new project in Android Studio.

Android

Give a name to the project and click "Next".
 
Android

Select "Phone and Tablet" and click "Next".

 Android

Select an empty activity and click "Next".

 Android

At last, give the activity name and click on "Finish".

 Android

Step 2

Set up the gradle by just locating the Gradle Scripts>>Build.Gradle.

 Android

And type the following dependency in your app's build.gradle.

 Android

Code copy is given below.
  1. compile 'com.steelkiwi:dots-loader-view:1.0.0'  
Step 3

Next, go to app >> res >> layout >> activity_main.xml. Select activity page.

 Android

And just type the code as given below.

 Android

Code copy is mentioned below.
  1. <steelkiwi.com.library.DotsLoaderView  
  2.         android:id="@+id/dotsLoader"  
  3.         android:visibility="visible"  
  4.         android:layout_width="match_parent"  
  5.         android:layout_height="match_parent"  
  6.         app:dlv_item_drawable="@drawable/circle_background"  
  7.         app:dlv_line_color="@color/point_color"  
  8.         />  
Step 4

 Next, go to app >> java>>Mainactivity.java. Select Mainactivity page.

 Android

And just type the code as given.

 Android

  1. DotsLoaderView dotsLoaderView;  
  2. @Override  
  3. protected void onCreate(Bundle savedInstanceState) {  
  4.     super.onCreate(savedInstanceState);  
  5.     setContentView(R.layout.activity_main);  
  6.   
  7.     dotsLoaderView = (DotsLoaderView)findViewById(R.id.dotsLoader);  
  8.       
  9.     downloadDemo();  
  10. }  
  11.   
  12. private void downloadDemo() {  
  13.     AsyncTask<String,String,String> demoAsync = new AsyncTask<String, String, String>() {  
  14.   
  15.         @Override  
  16.         protected void onPreExecute() {  
  17.             dotsLoaderView.show();  
  18.         }  
  19.   
  20.         @Override  
  21.         protected String doInBackground(String... params) {  
  22.             try {  
  23.                 Thread.sleep(5000);  
  24.             } catch (InterruptedException e) {  
  25.                 e.printStackTrace();  
  26.             }  
  27.             return "done";  
  28.         }  
  29.   
  30.         @Override  
  31.         protected void onPostExecute(String s){  
  32.             if(s.equals("done"))  
  33.                 dotsLoaderView.hide();  
  34.         }  
  35.     };  
  36.     demoAsync.execute();  
Step 5

After step 4, sync all the dependency gradles and Mainactivity.java resource files by clicking the Sync button on the top right corner of the gradle page.

 Android

Step 6

Verify the preview.

After the code is applied, the preview will appear like this.

 Android

Step 7

Next, go to Android Studio and deploy the application. Select an emulator or your Android mobile with USB debugging enabled. Give it a few seconds to make installations and set permissions.

 Android

Run the application in your desired emulator (Shift + F10).

 Android

Explanation of source code

The source code provided in this article is just the dependencies of motions and the code used in activity_main.xml will make the dots move and define its attributes.

Summary

In this article, we created the app named Dots Loader, then we have inserted a Gradle and we learned how to give motion to the dot and finally, we have deployed that as an output.

*Support and Share; Thank You*

X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now