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

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 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.