How can I add a progress bar footer at the bottom of my grid view?

Question

How can I add a progress bar footer at the bottom of my grid view that will be visible when I load more grid view items, and hide the progress bar when the loading of requested data are done? I need to know how to implement its UI on my xml file which can be applied on all screen sizes. below, is my code for my grid view:

<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/grid_view"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:numColumns="auto_fit"
    android:gravity="center"
    android:stretchMode="columnWidth"
    android:background="#ffb4d9"> 
</GridView>

GridViewActivity

public class GridViewActivity extends Activity implements AbsListView.OnScrollListener, AbsListView.OnItemClickListener{
    private GridView gridView;
    private GridViewImageAdapter adapter;
    private Utils utils;
    private GenerateData generateData;
    private ArrayList<HashMap<String, String>> galleryAttributes;
    private int columnWidth;
    private int urlPageIndex = 1;
    private boolean hasRequestedMore;

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

        setTitle("Gallery");

        gridView = (GridView) findViewById(R.id.grid_view);
        utils = new Utils(this);
        InitializeGridLayout();

        galleryAttributes = new ArrayList<HashMap<String, String>>();
        generateData = utils.new GenerateData(urlPageIndex);
        try {
            galleryAttributes.addAll(generateData.execute().get());
        } catch (InterruptedException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (ExecutionException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

        adapter = new GridViewImageAdapter(GridViewActivity.this, galleryAttributes , columnWidth);
        gridView.setAdapter(adapter);
        gridView.setOnScrollListener(this);
        gridView.setOnItemClickListener(this);

    }

    public void InitializeGridLayout() { 
        Resources r = getResources();
        float padding = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,AppConstant.GRID_PADDING, r.getDisplayMetrics());
        columnWidth = (int) ((utils.getScreenWidth() - ((AppConstant.NUM_OF_COLUMNS + 1) * padding)) / AppConstant.NUM_OF_COLUMNS);
        gridView.setNumColumns(AppConstant.NUM_OF_COLUMNS);
        gridView.setColumnWidth(columnWidth);
        gridView.setStretchMode(GridView.NO_STRETCH);
        gridView.setPadding((int) padding, (int) padding, (int) padding,(int) padding);
        gridView.setHorizontalSpacing((int) padding);
        gridView.setVerticalSpacing((int) padding);
    }

    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position,
            long id) {
        // TODO Auto-generated method stub
        Intent intent = new Intent(GridViewActivity.this, CarouselViewActivity.class);
        intent.putExtra("position", position);
        intent.putExtra("galleryAttributes", galleryAttributes);
        startActivity(intent);
        Log.e("onItemClick: ", ""+position);
    }

    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {
        // TODO Auto-generated method stub
        Log.e("onScrollStateChanged: ", ""+scrollState);
    }

    @Override
    public void onScroll(AbsListView view, int firstVisibleItem,
            int visibleItemCount, int totalItemCount) {
        // TODO Auto-generated method stub
        Log.e("onScroll: ","firstVisibleItem:"+firstVisibleItem+" visibleItemCount:"+visibleItemCount+" totalItemCount:"+totalItemCount);
        if(!hasRequestedMore){ 
            int lastInScreen = firstVisibleItem+visibleItemCount;
            if(lastInScreen>=totalItemCount){
                hasRequestedMore = true;
                onLoadMoreItems();          
            }
        }
    }

    public void onLoadMoreItems(){
        if(urlPageIndex<3){
            urlPageIndex++;
            generateData = utils.new GenerateData(urlPageIndex);
            try {
                galleryAttributes.addAll(generateData.execute().get());
            } catch (InterruptedException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            } catch (ExecutionException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
            adapter.notifyDataSetChanged();
            hasRequestedMore = false;
        }
    }
}

This is my Utils class, this is where the data are requested:

public class Utils {

private Context context;
private Activity activity;
private ProgressDialog progress;

public Utils(){}

public Utils(Context context){
    this.context = context;
}

public class GenerateData extends AsyncTask<Void, Void, ArrayList<HashMap<String, String>>>{
    private JSONArray dataJsonArr;
    private JsonParser jParser;
    private JSONObject json;
    private JSONObject c;
    private HashMap<String, String> map;
    private ArrayList<HashMap<String,String>> galleryAttributes;
    private int urlPageIndex;


    public GenerateData(int urlPageIndex){
        this.urlPageIndex = urlPageIndex;
        new InitializeJsonArray().execute();
    }


    @Override
    protected ArrayList<HashMap<String, String>> doInBackground(
            Void... params) {
        // TODO Auto-generated method stub

        try{
            for(int i = 0; i< dataJsonArr.length(); i++)
            {
                c = dataJsonArr.getJSONObject(i);
                map = new HashMap<String, String>();
                map.put("Link", c.getString("Link"));
                galleryAttributes.add(map);
            }
        }

        catch (JSONException e) {
            e.printStackTrace();
        }   
        return galleryAttributes;
    }

    public class InitializeJsonArray extends AsyncTask<Void, Void, Void>{

        @Override
        protected Void doInBackground(Void... params) {
            // TODO Auto-generated method stub
            dataJsonArr = null;
            jParser = new JsonParser();
            json = jParser.getJSONFromUrl(AppConstant.JSON_URL+urlPageIndex);
            try {
                dataJsonArr = json.getJSONArray(AppConstant.JSON_ARRAY_NAME);
            } catch (JSONException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
            galleryAttributes = new ArrayList<HashMap<String, String>>();
            galleryAttributes.ensureCapacity(dataJsonArr.length());
            return null;
        }   
    }
}

@SuppressLint("NewApi") public int getScreenWidth() {
    int columnWidth;
    WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
    Display display = wm.getDefaultDisplay();

    final Point point = new Point();
    try {
        display.getSize(point);
    } catch (java.lang.NoSuchMethodError ignore) {
        point.x = display.getWidth();
        point.y = display.getHeight();
    }
    columnWidth = point.x;
    return columnWidth;
}

}

And finally, my adapter class :

public class GridViewImageAdapter extends BaseAdapter{
private Context context;
private int imageWidth;
private ArrayList<HashMap<String, String>> galleryAttributes;
ImageView imageView;

public GridViewImageAdapter(Context context, ArrayList<HashMap<String, String>> galleryAttributes, int imageWidth){
    this.galleryAttributes = galleryAttributes;
    this.context = context;
    this.imageWidth = imageWidth;
}

@Override
public int getCount() {
    // TODO Auto-generated method stub
    return galleryAttributes.size();
}

@Override
public Object getItem(int position) {
    // TODO Auto-generated method stub
    return galleryAttributes.get(position);
}

@Override
public long getItemId(int position) {
    // TODO Auto-generated method stub
    return position;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {

    if (convertView == null) {
        imageView = new ImageView(context);
    } else {
        imageView = (ImageView) convertView;
    }

    Picasso.with(context).load(galleryAttributes.get(position).get("Link")).placeholder(R.drawable.loadingimage).into(imageView);
    imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
    imageView.setLayoutParams(new GridView.LayoutParams(imageWidth,imageWidth));
    return imageView;
}

}

Answer 1

Try positioning the ProgressDialog in bottom like this:

//In your asynctask

ProgressDialog progressDialog;

//In onPreExecute

progressDialog = new ProgressDialog(context);
progressDialog.setMessage("Fetching images");
progressDialog.setProgressStyle(ProgressDialog.STYLE_SPINNER);
progressDialog.setIndeterminate(true);
progressDialog.setCancelable(false);
progressDialog.getWindow().setGravity(Gravity.BOTTOM);
progressDialog.show();

//In onPostExecute
progressDialog.dismiss();

Hope it helps.

Answer 2

Try this way,hope this will help you to solve your problem.

Instead of taken only GridView in you layout take vertical LinearLayout as parent and put ProgressBar after GridView,given weight 1 to GridView.now by default ProgressBar is GONE so when you required to show Progressbar just VISIBLE in you code and GONE when no longer required.

activity_grid_view.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">

    <GridView
        android:id="@+id/grid_view"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:numColumns="auto_fit"
        android:gravity="center"
        android:stretchMode="columnWidth"
        android:background="#ffb4d9">
    </GridView>

    <ProgressBar
        android:id="@+id/progress_bar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone" />

</LinearLayout>

Here is code to how implement interface for your server response and update data to your activity.

WebServicesCallListener.java

public interface WebServicesCallListener {
    public void onResponse(ArrayList<HashMap<String,String>> response);
}

Here modify Utils class using above interface

Utils.java

public class Utils {

    private Context context;

    public Utils(){}

    public Utils(Context context){
        this.context = context;
    }

    public void getDataFromServer(final int urlPageIndex,final WebServicesCallListener listener){
        new AsyncTask<Void,Void,ArrayList<HashMap<String,String>>>(){
            @Override
            protected ArrayList<HashMap<String, String>> doInBackground(Void... params) {
                JsonParser jParser = new JsonParser();
                JSONObject json = jParser.getJSONFromUrl(AppConstant.JSON_URL + urlPageIndex);
                JSONArray dataJsonArr;
                try {
                    dataJsonArr = json.getJSONArray(AppConstant.JSON_ARRAY_NAME);
                } catch (JSONException e) {
                    e.printStackTrace();
                }
                ArrayList<HashMap<String, String>> galleryAttributes = new ArrayList<HashMap<String, String>>();
                galleryAttributes.ensureCapacity(dataJsonArr.length());
                for (int i = 0; i < dataJsonArr.length(); i++) {
                    JSONObject c = dataJsonArr.getJSONObject(i);
                    HashMap<String, String>() map = new HashMap<String, String>();
                    map.put("Link", c.getString("Link"));
                    galleryAttributes.add(map);
                }
                return galleryAttributes;
            }

            @Override
            protected void onPostExecute(ArrayList<HashMap<String, String>> data) {
                super.onPostExecute(data);
                listener.onResponse(data);

            }
        }.execute();
    }
    @SuppressLint("NewApi")
    public int getScreenWidth() {
        int columnWidth;
        WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        Display display = wm.getDefaultDisplay();

        final Point point = new Point();
        try {
            display.getSize(point);
        } catch (java.lang.NoSuchMethodError ignore) {
            point.x = display.getWidth();
            point.y = display.getHeight();
        }
        columnWidth = point.x;
        return columnWidth;
    }
}

Here change Utils implementation

GridViewActivity.java

public class GridViewActivity extends Activity implements AbsListView.OnScrollListener, AbsListView.OnItemClickListener{
    private GridView gridView;
    private GridViewImageAdapter adapter;
    private Utils utils;
    private GenerateData generateData;
    private ArrayList<HashMap<String, String>> galleryAttributes;
    private int columnWidth;
    private int urlPageIndex = 1;
    private boolean hasRequestedMore;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_grid_view);
        setTitle("Gallery");
        gridView = (GridView) findViewById(R.id.grid_view);
        utils = new Utils(this);
        InitializeGridLayout();

        galleryAttributes = new ArrayList<HashMap<String, String>>();

        utils.getDataFromServer(new WebServicesCallListener() {
            @Override
            public void onResponse(ArrayList<HashMap<String, String>> response) {
                galleryAttributes.addAll(response);
                adapter = new GridViewImageAdapter(GridViewActivity.this, galleryAttributes , columnWidth);
                gridView.setAdapter(adapter);
            }
        });
        gridView.setOnScrollListener(this);
        gridView.setOnItemClickListener(this);

    }

    public void InitializeGridLayout() {
        Resources r = getResources();
        float padding = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,AppConstant.GRID_PADDING, r.getDisplayMetrics());
        columnWidth = (int) ((utils.getScreenWidth() - ((AppConstant.NUM_OF_COLUMNS + 1) * padding)) / AppConstant.NUM_OF_COLUMNS);
        gridView.setNumColumns(AppConstant.NUM_OF_COLUMNS);
        gridView.setColumnWidth(columnWidth);
        gridView.setStretchMode(GridView.NO_STRETCH);
        gridView.setPadding((int) padding, (int) padding, (int) padding,(int) padding);
        gridView.setHorizontalSpacing((int) padding);
        gridView.setVerticalSpacing((int) padding);
    }

    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position,long id) {
        Intent intent = new Intent(GridViewActivity.this, CarouselViewActivity.class);
        intent.putExtra("position", position);
        intent.putExtra("galleryAttributes", galleryAttributes);
        startActivity(intent);
        Log.e("onItemClick: ", ""+position);
    }

    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {
        Log.e("onScrollStateChanged: ", "" + scrollState);
    }

    @Override
    public void onScroll(AbsListView view, int firstVisibleItem,int visibleItemCount, int totalItemCount) {
        Log.e("onScroll: ", "firstVisibleItem:" + firstVisibleItem + " visibleItemCount:" + visibleItemCount + " totalItemCount:" + totalItemCount);
        if(!hasRequestedMore){
            int lastInScreen = firstVisibleItem+visibleItemCount;
            if(lastInScreen>=totalItemCount){
                hasRequestedMore = true;
                onLoadMoreItems();
            }
        }
    }

    public void onLoadMoreItems(){
        if(urlPageIndex<3){
            urlPageIndex++;
            utils.getDataFromServer(urlPageIndex,new WebServicesCallListener() {
                @Override
                public void onResponse(ArrayList<HashMap<String, String>> response) {
                    galleryAttributes.addAll(response);
                    adapter.notifyDataSetChanged();
                    hasRequestedMore = false;
                }
            });
        }
    }
}