Tom Tom - 1 month ago 19
Android Question

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

Answer

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



}
Comments