Auto fit according to screen size in grid layout android Auto fit according to screen size in grid layout android android android

Auto fit according to screen size in grid layout android


Here's a custom implementation of GridLayout that will do what you need: AutoGridLayout

public class AutoGridLayout extends GridLayout {    private int defaultColumnCount;    private int columnWidth;    public AutoGridLayout(Context context) {        super(context);        init(null, 0);    }    public AutoGridLayout(Context context, AttributeSet attrs) {        super(context, attrs);        init(attrs, 0);    }    public AutoGridLayout(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        init(attrs, defStyleAttr);    }    private void init(AttributeSet attrs, int defStyleAttr) {        TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.AutoGridLayout, 0, defStyleAttr);        try {            columnWidth = a.getDimensionPixelSize(R.styleable.AutoGridLayout_columnWidth, 0);            int[] set = { android.R.attr.columnCount /* id 0 */ };            a = getContext().obtainStyledAttributes(attrs, set, 0, defStyleAttr);            defaultColumnCount = a.getInt(0, 10);        } finally {            a.recycle();        }        /* Initially set columnCount to 1, will be changed automatically later. */        setColumnCount(1);    }    @Override    protected void onMeasure(int widthSpec, int heightSpec) {        super.onMeasure(widthSpec, heightSpec);        int width = MeasureSpec.getSize(widthSpec);        if (columnWidth > 0 && width > 0) {            int totalSpace = width - getPaddingRight() - getPaddingLeft();            int columnCount = Math.max(1, totalSpace / columnWidth);            setColumnCount(columnCount);        } else {            setColumnCount(defaultColumnCount);        }    }}

Just add to your XML layout file like this:

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent">    <com.km.myproject.customview.AutoGridLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:columnCount="5"        app:columnWidth="50dp"/></FrameLayout>

Using columnWidth will try to calculate how many columns can fit and set the optimal span count automatically. If not used (or failed to measure for some reason), the columnCount attribute will be used.

Hope this helps!


Use FlexboxLayout with RecyclerView to handle this type of layout

RecyclerView recyclerView = (RecyclerView) context.findViewById(R.id.recyclerview);FlexboxLayoutManager layoutManager = new FlexboxLayoutManager(context);layoutManager.setFlexDirection(FlexDirection.COLUMN);layoutManager.setJustifyContent(JustifyContent.FLEX_START);recyclerView.setLayoutManager(layoutManager);

For more check FlexboxLayout,

FlexboxLayout also handle different width height of view just like images in Gallery


Do the following;

  • Use your code to calculate column count in onCreate or onCreateView. Keep in mind spacing between columns.

  • Call setColumnCount on the GridLayout with above count

  • In your xml, add the attribute android:layout_columnWeight="1" to all items in GridLayout. This will cause the columns to stretch in API 21 and above.

  • In pre API 21, you can either horizontal center the GridView itself, so that it looks decent. Or better yet, calculate preferred columnWidth (gridWidth / columnCount), and iterate through all items in grid (ViewGroup), and set their width to columnWidth.