iOS Progress Dialog in Android : Android Tutorial

iOS-Style-jQuery-Overlays-Notifications-Plugin-iosOverlay-js.jpg

Have you fell in love with ios new progress bar and trying to implement it in your android app? Then this tutorial is for you. To display the rotating progress bar we need a gif image or use ten frames of gif images instead. You can download ten instance of above progress gif from here.

After you finish download save them in drawable-xxhdpi folder. Now we need to create a drawable file out of those images. Lets create a new xml file called spin_animation.xml.

<?xml version="1.0" encoding="utf-8"?>
<animation-list android:oneshot="false"
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:duration="50" android:drawable="@drawable/pbar1" />
    <item android:duration="50" android:drawable="@drawable/pbar2" />
    <item android:duration="50" android:drawable="@drawable/pbar3" />
    <item android:duration="50" android:drawable="@drawable/pbar4" />
    <item android:duration="50" android:drawable="@drawable/pbar5" />
    <item android:duration="50" android:drawable="@drawable/pbar6" />
    <item android:duration="50" android:drawable="@drawable/pbar7" />
    <item android:duration="50" android:drawable="@drawable/pbar8" />
    <item android:duration="50" android:drawable="@drawable/pbar9" />
    <item android:duration="50" android:drawable="@drawable/pbar10" />
    <item android:duration="50" android:drawable="@drawable/pbar11" />
    <item android:duration="50" android:drawable="@drawable/pbar12" />
</animation-list>

We need a semi-transparent black rounded background for the message container. Create a new drawable bg_alert.xml.

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
  xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#80000000" />
    <corners android:radius="10.0dip" />
</shape>

 

Now lets create a layout for our dialog. Lets create alert_loading_message.xml in
layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:padding="20.0dip">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="200.0dip"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:background="@drawable/bg_alert"
        android:padding="20dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:layout_marginLeft="20.0dip"
            android:text="Loading..."
            android:layout_margin="10dp"
            android:layout_below="@+id/progressImg"
            android:textColor="@color/white"
            android:textSize="20.0dip"
            android:id="@+id/loadingTxt" />

        <ImageView
            android:layout_width="25.0dip"
            android:layout_height="25.0dip"
            android:src="@drawable/spin_animation"
            android:layout_alignParentTop="true"
            android:layout_margin="10dp"
            android:layout_centerHorizontal="true"
            android:id="@+id/progressImg" />
    </RelativeLayout>
</RelativeLayout>

Now Our layout is ready to implement. Lets create a new class called LoadingAlertDialog.java

import android.app.Activity;
import android.app.Dialog;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.widget.TextView;

import com.ansoft.shutterbox.R;

public class LoadingAlertDialog
{

    Activity activity;
    Dialog builder;
    String loadString;

    public LoadingAlertDialog(Activity activity1, String s)
    {
        activity = activity1;
        loadString = s;
    }

    public void dismiss()
    {
        builder.dismiss();
    }

    public void show()
    {
        builder = new Dialog(activity,
                R.style.CustomDialog);

        LayoutInflater inflater = activity.getLayoutInflater();
        View dialogView = inflater.inflate(R.layout.alert_loading_message,
                null);
        builder.setContentView(dialogView);
        Window window = builder.getWindow();
        WindowManager.LayoutParams wlp = window.getAttributes();
        wlp.dimAmount = 0.1f;
        builder.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN);

        wlp.gravity = Gravity.TOP;
        window.setAttributes(wlp);
        TextView loadText=(TextView)dialogView.findViewById(R.id.loadingTxt);
        loadText.setText(loadString);
        builder.show();
    }
}

We need to setup a new style for the dialog. Create a new style named CustomDialog in styles.xml.

<style name="CustomDialog" parent="@android:style/Theme.Dialog">
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowBackground">@color/semi_transparent</item>
    <item name="android:paddingTop">20dp</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:backgroundDimEnabled">false</item>
    <item name="android:windowIsFloating">false</item>
</style>

Now you can create progressbar from any class using following line of code

LoadingAlertDialog dialog=new LoadingAlertDialog(MainActivity.this, &quot;Loading...&quot;);
dialog.show();
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s