[android] how to show progress bar(circle) in an activity having a listview before loading the listview with data

I have a ListView in my second activity.OnItemClick of it I called a webservice and trying to fetch data. And after that I am moving to third activity which also have a ListView having description of previous activities ListView item.

I want to display a progress dialog before populating this ListView.

I don't understand how to do it on ListView? Does anybody know how to do it?

My Code-

ThirdActivity.java

   package com.google.iprotect;

import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import org.xmlpull.v1.XmlPullParserException;

import com.google.iprotect.layout.TitleBarLayout;

import android.app.Activity;
import android.app.ListActivity;
import android.app.ProgressDialog;
import android.content.Intent;
import android.content.res.ColorStateList;
import android.content.res.XmlResourceParser;
import android.os.AsyncTask;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.AdapterView;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.ProgressBar;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.TextView;

public class ThirdActivity extends ListActivity implements OnItemClickListener{

    JSONArray jArray1,jArray2;
    String one,two,three,tablename;
    String color,r;
    JSONObject responseJSON;
    TitleBarLayout titlebarLayout;
    final ArrayList<Tables> arraylist = new ArrayList<Tables>();
    TextView tableName;
    ColorStateList colorStateList1;
    String email1,password1;
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.thirdactivity);

        ListView lv=getListView();
        lv.setOnItemClickListener(this);


        tablename=getIntent().getExtras().getString("Table Name");
        email1 = getIntent().getExtras().getString("email");
        password1 =getIntent().getExtras().getString("password");

        titlebarLayout = new TitleBarLayout(ThirdActivity.this);
        titlebarLayout.setLeftButtonText("go Back");
        titlebarLayout.setRightButtonText("Logout");
        titlebarLayout.setTitle(tablename);
        titlebarLayout.setLeftButtonSize(70,40);
        titlebarLayout.setRightButtonSize(70,40);
        //titlebarLayout.setLeftButtonLeftDrawable(R.drawable.refresh);

        //titlebarLayout.setRightButtonLeftDrawable(R.drawable.buttonrefresh);
        //titlebarLayout.setLeftButtonBackgroundColor(Color.rgb(255,255,255));
        //titlebarLayout.setRightButtonBackgroundColor(Color.rgb(34,49,64));
        //titlebarLayout.setLeftButtonTextColor(Color.rgb(255,255,255));
        //titlebarLayout.setRightButtonTextColor(Color.rgb(255,255,0));     

        XmlResourceParser parser1 =getResources().getXml(R.color.colorstatelist);


        try {
            colorStateList1 = ColorStateList.createFromXml(getResources(), parser1);
            titlebarLayout.setRightButtonTextColor(colorStateList1);
        } catch (XmlPullParserException e) {    
            e.printStackTrace();
        } catch (IOException e) {

            e.printStackTrace();
        }

        OnClickListener listener = new OnClickListener() {

            public void onClick(View v) {
                // TODO Auto-generated method stub
                if (v.getId() == R.id.left_button) {
                    Intent intent = new Intent(ThirdActivity.this,SecondActivity.class);
                    intent.putExtra("email", email1);
                    intent.putExtra("password", password1);
                    startActivity(intent);
                    finish();

                } else if (v.getId() == R.id.right_button) {
                    Intent intent = new Intent(ThirdActivity.this,
                            MainActivity.class);
                    //intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
                    intent.setFlags( Intent.FLAG_ACTIVITY_CLEAR_TASK | Intent.FLAG_ACTIVITY_NEW_TASK);
                    ThirdActivity.this.startActivity(intent);

                }
            }
        };
        titlebarLayout.setLeftButtonOnClickListener(listener);
        titlebarLayout.setRightButtonOnClickListener(listener);


        updateTableList();




    }

    private void updateTableList() {
        // TODO Auto-generated method stub
        //final ProgressDialog pd1=ProgressDialog.show(this, "Calling Webservice", "Waiting...", true, false);

        final ProgressBar pbHeaderProgress = (ProgressBar) findViewById(R.id.pbHeaderProgress);

        new AsyncTask<Void, Void, Void>() {


            protected void onPreExecute() {
                // TODO Auto-generated method stub
                super.onPreExecute();
                pbHeaderProgress.setVisibility(View.VISIBLE);
            }



            protected Void doInBackground(Void... params) {
                r = invokeWebService1(tablename);
                //pd1.dismiss();

                try {
                    responseJSON = new JSONObject(r);
                    //json reading
                    jArray1 = responseJSON.getJSONArray("FirstThree");//get JSONArray jArray1 from JSONObject with name FirstThree
                    jArray2 = responseJSON.getJSONArray("Color");//get JSONArray jArray2 from JSONOobject with name Color
                    JSONObject json_data1 = null;
                    JSONObject json_data2 = null;

                    for (int i = 0; i < jArray1.length(); i++) {
                        json_data1 = jArray1.getJSONObject(i);//get JSONObject json_data1 from JSONArray at index i;
                        one = json_data1.getString("One");//get value from JSONObject json_data1 with key "One"
                        two = json_data1.getString("Two");
                        three = json_data1.getString("Three");
                        json_data2 = jArray2.getJSONObject(i);
                        color = json_data2.getString("color");//get value from JSONObject json_data2 with key "color"

                        Tables tables = new Tables();
                        //set value to Tables Class
                        tables.column1 = one;
                        tables.column2 = two;
                        tables.column3 = three;
                        tables.tableName=tablename;
                        tables.color=color;
                        //add Tables object into ArrayList<Tables>
                        arraylist.add(tables);

                        Log.i("ONE", json_data1.getString("One"));
                        Log.i("TWO", json_data1.getString("Two"));
                        Log.i("THREE", json_data1.getString("Three"));
                        Log.i("color",""+ json_data2.getString("color"));
                    }

                } catch (JSONException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
                return null;
            }

            protected void onPostExecute(Void result) {
                pbHeaderProgress.setVisibility(View.GONE);

                //Custom Adapter for ListView
                TableDetailAdapter adaptor = new TableDetailAdapter(ThirdActivity.this,
                        R.layout.table_data_list_item, arraylist);
                setListAdapter(adaptor);
            }
        }.execute();

    }

    protected String invokeWebService1(String tablename2) {
        // TODO Auto-generated method stub
        String response = "";
        try {
            WebService webService = new WebService(
            "http://sphinx-solution.com/iProtect/api.php?");

            // Pass the parameters if needed
            Map<String, String> params = new HashMap<String, String>();
            params.put("action", "getTableRecords");
            params.put("tablename", tablename2);
            params.put("email", email1);
            params.put("password", password1);

            // Get JSON response from server the "" are where the method name
            // would normally go if needed example
            response = webService.WebGet("auth", params);

        } catch (Exception e) {
            Log.d("Error: ", e.getMessage());
        }
        return response;
    }


    public void onItemClick(AdapterView<?> arg0, View arg1, int position, long arg3) {
        // TODO Auto-generated method stub

        Log.v("", "Click ListItem Number "+position);
        Intent intent = new Intent(ThirdActivity.this,FourthActivity.class);
        intent.putExtra("Json", responseJSON.toString());//sending json Object as a string to next activity
        intent.putExtra("Table Name", tablename);
        intent.putExtra("email", email1);
        intent.putExtra("password", password1);
        intent.putExtra("Item No", position);
        startActivity(intent);

    }

}

thirdactivity.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/linlaHeaderProgress"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".ThirdActivity" >

    <include
        android:id="@+id/titlebar"
        layout="@layout/titlebar_layout" />

    <ProgressBar
        android:id="@+id/pbHeaderProgress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="2" >
    </ProgressBar>

    <ListView
        android:id="@android:id/list"
        android:layout_width="match_parent"
        android:layout_height="260dp" 
        android:layout_weight="5.04">
    </ListView>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="@dimen/titlebar_height"
        android:layout_alignParentBottom="true"
        android:background="@color/footer_bg_color"
        android:gravity="bottom"
        android:orientation="horizontal" >

        <include
            android:id="@+id/footer"
            android:layout_height="@dimen/titlebar_height"
            android:layout_gravity="bottom|center_horizontal"
            layout="@layout/footer_layout" />
    </LinearLayout>

</LinearLayout>

I am using this:

loading = ProgressDialog.show(example.this,"",null, true, true);

I used this one for list view loading may helpful.

activity_main.xml

<?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:paddingLeft="5dp"
android:paddingRight="5dp" >

<LinearLayout
    android:id="@+id/progressbar_view"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:orientation="horizontal" >

        <ProgressBar
            style="?android:attr/progressBarStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical|center_horizontal" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical|center_horizontal"
            android:text="Loading data..." />
    </LinearLayout>

    <View
        android:layout_width="fill_parent"
        android:layout_height="1dp"
        android:background="#C0C0C0" />
</LinearLayout>

<ListView
    android:id="@+id/listView"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_marginTop="1dip"
    android:visibility="gone" />

</RelativeLayout>

and my MainActivity class is,

public class MainActivity extends Activity {
ListView listView;
LinearLayout layout;
List<String> stringValues;
ArrayAdapter<String> adapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    listView = (ListView) findViewById(R.id.listView);
    layout = (LinearLayout) findViewById(R.id.progressbar_view);

    stringValues = new ArrayList<String>();

    adapter = new ArrayAdapter<String>(this,
            android.R.layout.simple_list_item_1, stringValues);

    listView.setAdapter(adapter);
    new Task().execute();
}

class Task extends AsyncTask<String, Integer, Boolean> {
    @Override
    protected void onPreExecute() {
        layout.setVisibility(View.VISIBLE);
        listView.setVisibility(View.GONE);
        super.onPreExecute();
    }

    @Override
    protected void onPostExecute(Boolean result) {
        layout.setVisibility(View.GONE);
        listView.setVisibility(View.VISIBLE);
        adapter.notifyDataSetChanged();
        super.onPostExecute(result);
    }

    @Override
    protected Boolean doInBackground(String... params) {
        stringValues.add("String 1");
        stringValues.add("String 2");
        stringValues.add("String 3");
        stringValues.add("String 4");
        stringValues.add("String 5");

        try {
            Thread.sleep(3000);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }
}
}

this activity display progress for 3sec then it will display listview, instead of adding data statically to stringValues list you can get data from server in doInBackground() and display it.

Are you extending ListActivity?

If so, put a circular progress dialog with the following line in your xml

<ProgressBar
android:id="@android:id/empty"
...other stuff...
/>

Now, the progress indicator will show up till you have all your listview information, and set the Adapter. At which point, it will go back to the listview, and the progress bar will go away.

Process Bar:

Dependency:

     implementation 'com.github.castorflex.smoothprogressbar:library:1.0.0'

XML:

     <fr.castorflex.android.smoothprogressbar.SmoothProgressBar
        xmlns:android="http://schemas.android.com/apk/res/android"                
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/myProcessbar"
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:indeterminate="true" />

In Res->color

      <color name="pocket_color_1">#ff1635</color>
      <integer-array name="pocket_background_colors">
          <item>@color/pocket_color_1</item>
      </integer-array>

      <color name="pocket_color_stop">#00ff00</color>
      <integer-array name="pocket_background_stop">
          <item>@color/pocket_color_stop</item>
      </integer-array>

In Main:

      public class MainActivity extends AppCompatActivity{
        SmoothProgressBar smoothProgressBar;

        @Override
        protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.activity_main);
          smoothProgressBar=findViewById(R.id.myProcessbar);
          showProcessBar();
          stopAnimation();    // call when required to stop process
        }

        public void showProcessBar(){
          smoothProgressBar.setVisibility(View.VISIBLE);
          smoothProgressBar.setIndeterminateDrawable(new SmoothProgressDrawable.Builder(getApplicationContext())
            .interpolator(new AccelerateInterpolator())
            .progressiveStart(true)
            .progressiveStopSpeed(1000)
            .build());
          smoothProgressBar.setSmoothProgressDrawableBackgroundDrawable(
          SmoothProgressBarUtils.generateDrawableWithColors(
                    getResources().getIntArray(R.array.pocket_background_colors),
                    ((SmoothProgressDrawable)  smoothProgressBar.getIndeterminateDrawable()).getStrokeWidth()));
        }

        public void stopAnimation(){
          smoothProgressBar.setSmoothProgressDrawableBackgroundDrawable(
          SmoothProgressBarUtils.generateDrawableWithColors(
                    getResources().getIntArray(R.array.pocket_background_stop),
                    ((SmoothProgressDrawable)  smoothProgressBar.getIndeterminateDrawable()).getStrokeWidth()));
          smoothProgressBar.progressiveStop();
          Handler handler=new Handler();
          handler.postDelayed(new Runnable() {
            @Override
            public void run() {
               smoothProgressBar.animate().alpha(0.0f).setDuration(6000).translationY(1000);
               smoothProgressBar.setVisibility(View.GONE);
            }
          },1000);
}

      }

ProgressDialog dialog = ProgressDialog.show(Example.this, "", "Loading...", true);

Use This Within button on Click option or your needs:

final ProgressDialog progressDialog;
progressDialog = new ProgressDialog(getApplicationContext());
progressDialog.setMessage("Loading..."); // Setting Message
progressDialog.setTitle("ProgressDialog"); // Setting Title
progressDialog.setProgressStyle(ProgressDialog.STYLE_SPINNER); // Progress Dialog Style Spinner
progressDialog.show(); // Display Progress Dialog
progressDialog.setCancelable(false);
new Thread(new Runnable() {
    public void run() {
        try {
            Thread.sleep(5000);
        } catch (Exception e) {
            e.printStackTrace();
        }
        progressDialog.dismiss();
    }
}).start();

You can do this easier.
Source: http://www.tutorialspoint.com/android/android_loading_spinner.htm
It helped me.

Layout:

<ProgressBar
   android:id="@+id/progressBar1"
   style="?android:attr/progressBarStyleLarge"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_centerHorizontal="true" />

After defining it in xml, you have to get its reference in java file through ProgressBar class. Its syntax is given below:

private ProgressBar spinner;
spinner = (ProgressBar)findViewById(R.id.progressBar1);

After that you can make its disappear , and bring it back when needed through setVisibility Method. Its syntax is given below:

spinner.setVisibility(View.GONE);
spinner.setVisibility(View.VISIBLE);

You can add the ProgressBar to listview footer:

private ListView listview;
private ProgressBar progressBar;

...

progressBar = (ProgressBar) LayoutInflater.from(this).inflate(R.layout.progress_bar, null);

listview.addFooterView(progressBar);

layout/progress_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<ProgressBar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/load_progress"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:indeterminate="true"
     />

when the data is loaded to the adapter view call:

        listview.removeFooterView(progressBar);

I suggest you when working with listview or recyclerview to use SwipeRefreshLayout. Like this

    <android.support.v4.widget.SwipeRefreshLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/swiperefresh"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/card_recycler_view"
            android:scrollbars="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

</android.support.v4.widget.SwipeRefreshLayout>

Only wrap your view and this will create an animation of refresh when loading data or by swipping down the screen as we can do in many apps.
Here's the documentation of how to use it:
https://developer.android.com/training/swipe/add-swipe-interface.html https://developer.android.com/training/swipe/respond-refresh-request.html

Happy coding !

Please use the sample at tutorialspoint.com. The whole implementation only needs a few lines of code without changing your xml file. Hope this helps.

STEP 1: Import library

import android.app.ProgressDialog;

STEP 2: Declare ProgressDialog global variable

ProgressDialog loading = null;

STEP 3: Start new ProgressDialog and use the following properties (please be informed that this sample only covers the basic circle loading bar without the real time progress status).

loading = new ProgressDialog(v.getContext());
loading.setCancelable(true);
loading.setMessage(Constant.Message.AuthenticatingUser);
loading.setProgressStyle(ProgressDialog.STYLE_SPINNER);

STEP 4: If you are using AsyncTasks, you can start showing the dialog in onPreExecute method. Otherwise, just place the code in the beginning of your button onClick event.

loading.show();

STEP 5: If you are using AsyncTasks, you can close the progress dialog by placing the code in onPostExecute method. Otherwise, just place the code before closing your button onClick event.

loading.dismiss();

Tested it with my Nexus 5 android v4.0.3. Good luck!

Create an xml file any name (say progressBar.xml) in drawable and add <color name="silverGrey">#C0C0C0</color> in color.xml.

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="720" >

    <shape
        android:innerRadiusRatio="3"
        android:shape="ring"
        android:thicknessRatio="6"
        android:useLevel="false" >
        <size
            android:height="200dip"
            android:width="300dip" />

        <gradient
            android:angle="0"
            android:endColor="@color/silverGrey"
            android:startColor="@android:color/transparent"
            android:type="sweep"
            android:useLevel="false" />

    </shape>
</rotate>

Now in your xml file where you have your listView add this code:

 <ListView
            android:id="@+id/list_form_statusMain"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
        </ListView>

        <ProgressBar
            android:id="@+id/progressBar"
            style="@style/CustomAlertDialogStyle"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_centerInParent="true"
            android:layout_gravity="center_horizontal"
            android:indeterminate="true"
            android:indeterminateDrawable="@drawable/circularprogress"
            android:visibility="gone"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"/>

In AsyncTask in the method:

@Override
protected void onPreExecute()
{
    progressbar_view.setVisibility(View.VISIBLE);

    // your code
}

And in onPostExecute:

@Override
protected void onPostExecute(String s)
{
    progressbar_view.setVisibility(View.GONE);

    //your code
}