Staggered GridLayout in Android

Posted By : Deepanshu Harbola | 30-Jun-2016
android

grid layout in android

StaggeredGridLayout is a LayoutManager, it is just like a grid view but in this grid each view have its own size(height and width). It supports both vertical and horizontal layouts.

Pinterest and Samepinchh both android apps are the best example of staggered grid.

For more read the official android docs- https://developer.android.com/reference/android/support/v7/widget/StaggeredGridLayoutManager.html

Here we will know about staggered grid by an example app-

Below are some basic steps to create a staggered grid-

  1. Create a view.
  2. Set StaggeredGridLayout LayoutManager.
  3. Adapter to inflate the staggeredgrid views.

1- Create a view-

As we know staggeredgrid is not a direct view it is a layoutmanager that lays out children in a staggered grid formation. We use RecyclerView as a view for staggerd grid.

here is our recyclerview in layout-

2- Set StaggeredGridLayout LayoutManager-

Our view is ready, let's use Layoutmanager to create grids on the view.

 RecyclerView favPlaces = (RecyclerView) findViewById(R.id.favPlaces);
        StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL);
        layoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE);
        favPlaces.setLayoutManager(layoutManager);
        favPlaces.setHasFixedSize(true);

3-  Adapter to inflate the staggeredgrid views-

To inflate the data in form of grid first we need a layout which will represent that data.We are using CardView for this and the layout is-

 Now we have our layout to inflate the data. Let's bind the data on view with the help of adapter-

public class StaggeredAdapter extends 
RecyclerView.Adapter
{

    private ArrayList<placedetails> placeList;
    // Provide a reference to the views for each data item
    public static class ViewHolder extends RecyclerView.ViewHolder {

        public TextView placeName;
        public ImageView placePic;

        public ViewHolder(View itemView) {
            super(itemView);
            placeName = (TextView) itemView.findViewById(R.id.placeName);
            placePic = (ImageView) itemView.findViewById(R.id.placePic);
        }
    }

    public StaggeredAdapter(ArrayList<placedetails> placeList){
        this.placeList = placeList;
    }


    // Create new views (invoked by the layout manager)
    @Override
    public StaggeredAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,
                                                   int viewType) {
        // create a new view
        View v = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.staggered_layout, parent, false);
        // set the view's size, margins, paddings and layout parameters
        return new ViewHolder(v);
    }

    // Replace the contents of a view (invoked by the layout manager)
    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {

        holder.placeName.setText(placeList.get(position).getName());
        holder.placePic.setImageResource(placeList.get(position).getImageUrl());


    }

    // Return the size of your dataset (invoked by the layout manager)
    @Override
    public int getItemCount() {
        return placeList.size();
    }
}

We setup our all the basic steps, it's  time to complete our main activity. here is the complete code of main activity-

public class MainActivity extends AppCompatActivity {

    int placeImage[]= {R.drawable.agattia_airport_lakshadweep,R.drawable.nainital,R.drawable.goa,
            R.drawable.lotus_temple,R.drawable.valley_of_flowers,R.drawable.ranikhet,R.drawable.dehradun,R.drawable.nainital1};

    String placeName[]= {"Lakshadweep, India","Nainital, India","Goa, India","Lotus-Temple, India","Valley-Of-Flowers, India","Ranikhet, India",
    "Dehradun, India","Nainital, India"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        RecyclerView favPlaces = (RecyclerView) findViewById(R.id.favPlaces);
        StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL);
        layoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE);
        favPlaces.setLayoutManager(layoutManager);
        favPlaces.setHasFixedSize(true);
        ArrayList<PlaceDetails> placeList = getPlaces();

        StaggeredAdapter staggeredAdapter = new StaggeredAdapter(placeList);
        favPlaces.setAdapter(staggeredAdapter);
    }

    private ArrayList<PlaceDetails> getPlaces() {
        ArrayList<PlaceDetails> details = new ArrayList<>();
        for (int index=0; index<placeImage.length;index++){
            details.add(new PlaceDetails(placeImage[index],placeName[index]));
        }
        return details;
    }
}

 

You can also download the project from here 

Thanks

Related Tags
swift
Kotlin
mobile application
Dart
Flutter
ios
css
React Native
phonegap
cordova
titanium

About Author

Author Image
Deepanshu Harbola

Deepanshu is an Android application developer with experience in Titanium Framework . Deepanshu likes to play basketball ,volleyball and listens to music in his free time.

Request for Proposal

Name is required

Comment is required

Sending message..