How to set Staggered grid layout in different screen dimensions.?

Question

I am using staggered grid layout manager to set staggered grid in my app,I have used Imageview inside "card view".The staggered effect is working properly ,but some cases when image size is too large,then the layout will be like this

[![enter image description here][1]][1]

my xml file

<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/card_view"
android:layout_width="220dp"
android:layout_height="180dp"
card_view:cardUseCompatPadding="true"
card_view:cardCornerRadius="8dp"
android:layout_marginBottom="16dp">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/country_photo"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:contentDescription="@string/action_settings"
        android:src="@drawable/three"

        android:scaleType="centerCrop" />

    <ImageView
        android:id="@+id/outside_imageview"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_marginBottom="8dp"
        android:layout_marginRight="8dp"

        android:src="@drawable/varified"
        android:layout_alignBottom="@id/country_photo"

        android:layout_alignRight="@id/country_photo"
        android:scaleType="fitEnd" />
</RelativeLayout>

The width of the cardview is 220dp and height is 180 dp ,and image views width = "match_parent " and height = "wrap_content" also the scale type is centerCrop,This is working properly for small sized images.The layout will be like below screen shot,in case of large sized images.How to solve this problem??

The View is like below, on small sized devices

Answer 1

Below are some basic steps to create a staggered grid in Oodles Technologies-

Create a view.

Set StaggeredGridLayout LayoutManager.

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-

<relativelayout android:layout_height="match_parent" android:layout_width="match_parent" android:paddingtop="@dimen/activity_vertical_margin" tools:context="com.deepanshu.staggered_gridlayout.MainActivity" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">

    <android.support.v7.widget.recyclerview android:id="@+id/favPlaces" android:layout_height="match_parent" android:layout_width="match_parent">
</android.support.v7.widget.recyclerview></relativelayout>

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-

    <android.support.v7.widget.cardview android:layout_height="wrap_content" android:layout_width="match_parent" app:cardcornerradius="4dp" app:cardusecompatpadding="true">
        <linearlayout android:background="@color/colorPrimary" android:layout_height="match_parent" android:layout_width="match_parent" android:orientation="vertical">

          <imageview android:adjustviewbounds="true" android:id="@+id/placePic" android:layout_height="match_parent" android:layout_width="match_parent" android:scaletype="fitXY">

           <textview android:gravity="center" android:id="@+id/placeName" android:layout_height="wrap_content" android:layout_width="match_parent" android:textsize="16sp">


    </textview></imageview></linearlayout>
</android.support.v7.widget.cardview>

</linearlayout>
 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
<staggeredadapter.viewholder>{

    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();
    }
}
</staggeredadapter.viewholder>

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;
    }
}

minchar

Answer 2

Set different number of columns for large screen ' layout's ,normal screen layout's ,and small screen layout's etc.Check the device screen size programmatically by using this code .

public void checkScreenSize()
{

int screenSize = getResources().getConfiguration().screenLayout &
        Configuration.SCREENLAYOUT_SIZE_MASK;
String toastMsg;
switch (screenSize) {
        case Configuration.SCREENLAYOUT_SIZE_XLARGE:
            toastMsg = "XLarge screen";

            //set action

            break;
        case Configuration.SCREENLAYOUT_SIZE_UNDEFINED:
            toastMsg = "XLarge screen";
              //set action
             break;
        case Configuration.SCREENLAYOUT_SIZE_LARGE:
            toastMsg = "Large screen";
             //set action
            break;

        case Configuration.SCREENLAYOUT_SIZE_NORMAL:
            toastMsg = "Normal screen";
             //set action
            break;
        case Configuration.SCREENLAYOUT_SIZE_SMALL:
             //set action
            toastMsg = "Small screen";
            break;
        default:
            toastMsg = "Screen size is neither large, normal or small";



}