Rounded ProgressBar with Loading.... Text in Android

Question

I want to use the progress bar with rounded circle and with loading.... text in my application. I have searched more. But still not getting the clear idea.

Default Bar:

Expected Bar:

Note: I want to do this only in xml file for webview. Could anybody please help me

Answer 1

You should code your custom webview client where you can implement your logic to show custom dialog on page load and hide on page finish.

Take a look at Android WebView and the Indeterminant Progress Solution

I want to do this only in xml file for webview. Could anybody please help me

What does it mean? Do you want to change the UI of progress bar?

If yes then take a look at my blog for Customization of circular progress bar, which can help you to change the UI.

Answer 2

Try the below code :

Layout : main.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<WebView
    android:id="@+id/webView"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" />

<LinearLayout
    android:id="@+id/llProgress"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:gravity="center"
    android:orientation="horizontal" 
    android:visibility="gone" >

    <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/tvMessage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp" />
</LinearLayout>

</FrameLayout>

Code : MainActivity.java

public class MainActivity extends Activity {

private LinearLayout llProgress;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    llProgress = (LinearLayout) findViewById(R.id.llProgress);
    showProgress("Loading...");
}

private void showProgress(String message) {
    ((TextView) llProgress.findViewById(R.id.tvMessage)).setText(message);
    llProgress.setVisibility(View.VISIBLE);

}

private void hideProgress() {
    ((TextView) llProgress.findViewById(R.id.tvMessage)).setText("");
    llProgress.setVisibility(View.GONE);
}

}

Answer 3

MyProgressDialog.class :- The Class that will return circular dialog while called.

import android.app.Dialog;
import android.content.Context;
import android.view.ViewGroup.LayoutParams;
import android.widget.ProgressBar;

public class MyProgressDialog extends Dialog {
public static MyProgressDialog show(Context context, CharSequence title,
        CharSequence message) {
    return show(context, title, message, false);
}

public static MyProgressDialog show(Context context, CharSequence title,
        CharSequence message, boolean indeterminate) {
    return show(context, title, message, indeterminate, false, null);
}

public static MyProgressDialog show(Context context, CharSequence title,
        CharSequence message, boolean indeterminate, boolean cancelable) {
    return show(context, title, message, indeterminate, cancelable, null);
}

public static MyProgressDialog show(Context context, CharSequence title,
        CharSequence message, boolean indeterminate,
        boolean cancelable, OnCancelListener cancelListener) {
    MyProgressDialog dialog = new MyProgressDialog(context);
    dialog.setTitle(title);
    dialog.setCancelable(cancelable);
    dialog.setOnCancelListener(cancelListener);
    /* The next line will add the ProgressBar to the dialog. */
    dialog.addContentView(new ProgressBar(context), new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
    dialog.show();

    return dialog;
}

public MyProgressDialog(Context context) {
    super(context, R.style.NewDialog);
}
}

NewDialog's Style that should be putted in the String.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
<!--=====This is the Style for the progressBar====================  -->
  <style name="NewDialog">
    <item name="android:windowFrame">@null</item>
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowIsFloating">true</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowTitleStyle">@null</item>
    <item name="android:windowAnimationStyle">@android:style/Animation.Dialog</item>
    <item name="android:windowSoftInputMode">stateUnspecified|adjustPan</item>
    <item name="android:backgroundDimEnabled">false</item>
    <item name="android:background">@android:color/transparent</item>
  </style>
<!--============================================== -->
</resource>

Now,How to call this ProgressDialog ?? It's this Way:-

Dialog pd;   // Declare it on the Top of the Activity using it to make it Global.  

//Start of Dialog
pd=MyProgressDialog.show(ActivityName.this, "Loading", "");     

// To Stop the Dialog
pd.dismiss();