How to implement progressBar while loading data?

Question

I want to implement progressBar like on the picture below.

Right now, I have AsyncTask whic is sperated from fragments classes, and I use that AsyncTask to load data, and right now I have implement progressBar dialog, but I want to get rid of that, because I want make a better UX.

I show that ProgressBar dialog in onPreExecute() method, and then dismiss it onPostExecute.

So, how I can implement background Progress bar like on the picture below

Answer 1

With the same asynctask using publishProgress()

Answer 2

If you just want to show progress, take a look at this code. This might give you an idea: public class MainActivity extends Activity implements OnClickListener {

myTask mytask = new myTask();
Button button1;
ProgressBar progressbar;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    button1 = (Button) findViewById(R.id.button1);
    progressbar = (ProgressBar) findViewById(R.id.progressBar);
    button1.setOnClickListener(this);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
}

@Override
public void onClick(View view) {
    mytask.execute();
}

class myTask extends AsyncTask<String, String, String> {
    @Override
    protected void onPreExecute() {
        progressbar.setProgress(0);
        progressbar.setMax(100);
        int progressbarstatus = 0;
    };

    @Override
    protected String doInBackground(String... params) {
        for (int i = 0; i < 20; i++) {
            try {
                Thread.sleep(1000);
            } catch (InterruptedException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
            progressbar.incrementProgressBy(10);
        }
        return "completed";
    }

    @Override
    protected void onPostExecute(String result) {
        // TODO Auto-generated method stub
        super.onPostExecute(result);

    }

    @Override
    protected void onProgressUpdate(String... values) {

        super.onProgressUpdate(values);
    }
}

}

But if you want to show like a dialog, take a look at this code:

public class YoutubeVideoMain extends Activity {

ListView videolist;

ArrayList<String> videoArrayList = new ArrayList<String>();

ArrayAdapter<String> videoadapter;
Context context;
String feedURL = "https://gdata.youtube.com/feeds/api/users/twistedequations/uploads?v=2&alt=jsonc&start-index=1&max-results=5";

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    context = this;
    setContentView(R.layout.youtubelist);
    videolist = (ListView) findViewById(R.id.videolist);

    videoadapter = new ArrayAdapter<String>(this, R.layout.video_list_item,
            videoArrayList);

    videolist.setAdapter(videoadapter);
    VideoListTask loadertask = new VideoListTask();
    loadertask.execute();

}

private class VideoListTask extends AsyncTask<Void, String, Void> {

    ProgressDialog dialogue;

    @Override
    protected void onPostExecute(Void result) {
        super.onPostExecute(result);
        dialogue.dismiss();

        videoadapter.notifyDataSetChanged();
    }

    @Override
    protected void onPreExecute() {
        dialogue = new ProgressDialog(context);
        dialogue.setTitle("Loading items..");
        dialogue.show();
        super.onPreExecute();

    }

    @Override
    protected Void doInBackground(Void... params) {

        HttpClient client = new DefaultHttpClient();
        HttpGet getRequest = new HttpGet(feedURL);
        try {
            HttpResponse response = client.execute(getRequest);
            StatusLine statusline = response.getStatusLine();
            int statuscode = statusline.getStatusCode();

            if (statuscode != 200) {

                return null;
            }

            InputStream jsonStream = response.getEntity().getContent();

            BufferedReader reader = new BufferedReader(
                    new InputStreamReader(jsonStream));

            StringBuilder builder = new StringBuilder();
            String line;

            while ((line = reader.readLine()) != null) {

                builder.append(line);

            }
            String jsonData = builder.toString();



            JSONObject json = new JSONObject(jsonData);


            JSONObject data = json.getJSONObject("data");

            JSONArray items = data.getJSONArray("items");

            for (int i = 0; i < items.length(); i++) {


                JSONObject video = items.getJSONObject(i);



                videoArrayList.add(video.getString("title"));



            }

            Log.i("YouJsonData:", jsonData);

        } catch (ClientProtocolException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        } catch (JSONException e) {
            e.printStackTrace();
        }


        return null;
    }
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
}

}

Maybe this can help you.

Answer 3

Dude,

If you really just want a progress bar like the picture you posted, you can simply set the progress bar indeterminate property to true :)

You can eighter do on code or directly on the xml.

In code:

yourProgressBar.setIndeterminate(true);

In your XML, just set the attribute indeterminate to true.

Here's is a simple layout as an example:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    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=".MainActivity" >

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

</RelativeLayout>

Answer 4

class YourCLassName extends AsyncTask<String, Integer, Void> {

    private ProgressDialog pd = new ProgressDialog(Files.this);

    @Override
    protected void onPreExecute() {
        // TODO Auto-generated method stub
        super.onPreExecute();
        pd.setTitle("your message");

        pd.show();

    }

    @Override
    protected Void doInBackground(String... params) {
            // YOUR PIECE OF CODE

        return null;
    }

    @Override
    protected void onPostExecute(Void result) {
        // TODO Auto-generated method stub
        super.onPostExecute(result);


            pd.setMessage("Task Completed  .. whatever");


    @Override
    protected void onProgressUpdate(Integer... values) {
        // TODO Auto-generated method stub
        super.onProgressUpdate(values);
    }


}