Search code examples
androidandroid-layoutandroid-gridviewandroid-cardviewandroid-gridlayout

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


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


Solution

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