How to create a custom loading popup with many images

Do you want to create your own custom popup? So you come to the right site for this. To create it we may use many images and each image is different like these:

We will create animation xml first by right click of the res -> New -> Android Resource File

Don't forget to copy all images to a drawable folder in the android studio. And then we will create xml for animation like below:

	<?xml version="1.0" encoding="utf-8"?>
	<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
	android:oneshot="false">
	<item android:drawable="@drawable/img_loading01" android:duration="100" />
	<item android:drawable="@drawable/img_loading02" android:duration="100" />
	<item android:drawable="@drawable/img_loading03" android:duration="100" />
	<item android:drawable="@drawable/img_loading04" android:duration="100" />
	<item android:drawable="@drawable/img_loading05" android:duration="100" />
	<item android:drawable="@drawable/img_loading06" android:duration="100" />
	<item android:drawable="@drawable/img_loading07" android:duration="100" />
	<item android:drawable="@drawable/img_loading08" android:duration="100" />
	<item android:drawable="@drawable/img_loading09" android:duration="100" />
	<item android:drawable="@drawable/img_loading10" android:duration="100" />
	<item android:drawable="@drawable/img_loading11" android:duration="100" />
	</animation-list>

view raw gistfile1.txt hosted with ❤ by GitHub

And then we will create a class to handle the loading like below and you read some comments to understand more about the code:

	package com.example.ratanak.loading;
	import android.app.Activity;
	import android.app.Dialog;
	import android.content.Context;
	import android.graphics.Color;
	import android.graphics.drawable.AnimationDrawable;
	import android.graphics.drawable.ColorDrawable;
	import android.view.LayoutInflater;
	import android.view.View;
	import android.view.Window;
	import android.view.WindowManager;
	import android.widget.ImageView;
	public class Loading {
	//create some fields
	private Context mContext;
	private Dialog mDialog;
	private AnimationDrawable mAnimation;
	public Loading(Context mContext) {
	this.mContext = mContext;
	}
	public void show() {
	//use context from activity, and show dialog on UI Thread
	((Activity) mContext).runOnUiThread(new Runnable() {
	@Override
	public void run() {
	if (!((Activity) mContext).isFinishing()) {
	//check if dialog object null, we will create it
	if (mDialog == null) {
	//inflate layout from xml
	View loaidng = LayoutInflater.from(mContext).inflate(R.layout.layout, null);
	ImageView imageView = (ImageView) loaidng.findViewById(R.id.iv_loading);
	//cast imageview background to animationdrawable
	mAnimation = (AnimationDrawable) imageView.getBackground();
	//start animation
	mAnimation.start();
	//create dialog popup
	mDialog = new Dialog(mContext);
	//give feature dialog
	mDialog.getWindow().requestFeature(Window.FEATURE_NO_TITLE);
	mDialog.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
	mDialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
	mDialog.setContentView(loaidng);
	//true -> user can click outsite to dimiss popup, false -> user unable to dimiss popup
	mDialog.setCanceledOnTouchOutside(false);
	}
	//start showing the dialog
	mDialog.show();
	}
	}
	});
	}
	//call this method to dimiss popup
	public void dimiss() {
	if (mDialog == null) {
	return;
	}
	if (mDialog.isShowing()) {
	mDialog.dismiss();
	}
	}
	}

view raw Loading.java hosted with ❤ by GitHub

Create a layout.xml and create ImageView by providing the width, height, and background. For background property, we will use the drawable animation that we created above.

	<?xml version="1.0" encoding="utf-8"?>
	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical" android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:gravity="center_vertical|center_horizontal">
	<ImageView android:id="@+id/iv_loading"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:background="@drawable/loading_anim"/>
	</LinearLayout>

view raw layout.xml hosted with ❤ by GitHub

Create an Activity so you call MainActivity, so Android Studio will create the xml layout automatically. In this xml layout we will create TextView and create an Event Click After the user clicks this TextView, it will show the popup.

	<?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/activity_main"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:paddingBottom="@dimen/activity_vertical_margin"
	android:paddingLeft="@dimen/activity_horizontal_margin"
	android:paddingRight="@dimen/activity_horizontal_margin"
	android:paddingTop="@dimen/activity_vertical_margin"
	tools:context="com.example.ratanak.loading.MainActivity">
	<TextView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Show Loading"
	android:textColor="#000"
	android:id="@+id/btn_loading"
	android:textSize="20dp"
	android:layout_centerInParent="true"/>
	</RelativeLayout>

view raw activity_main.xml hosted with ❤ by GitHub

In MainActivity class we call TextView ID and provide the action to handle an action when the user clicks on it.

	package com.example.ratanak.loading;
	import android.os.Handler;
	import android.support.v7.app.AppCompatActivity;
	import android.os.Bundle;
	import android.view.View;
	import android.widget.TextView;
	public class MainActivity extends AppCompatActivity implements View.OnClickListener {
	private TextView loading;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
	loading = (TextView) findViewById(R.id.btn_loading);
	loading.setOnClickListener(this);
	}
	@Override
	public void onClick(View view) {
	switch (view.getId()){
	case R.id.btn_loading:
	final Loading loading = new Loading(this);
	loading.show();
	//delay the time of animation for 500s
	new Handler().postDelayed(new Runnable() {
	@Override
	public void run() {
	loading.dimiss();
	}
	}, 1000);
	break;
	}
	}
	}

view raw MainActivity.java hosted with ❤ by GitHub

Click here to download the source code