Gridview VS Gridlayout in Android Apps

GridView VS GridLayout in Android Apps

A GridView is a ViewGroup that displays items in two-dimensional scrolling grid. The items in the grid come from the ListAdapter associated with this view.

This is what you'd want to use (keep using). Because a GridView gets its data from a ListAdapter, the only data loaded in memory will be the one displayed on screen.
GridViews, much like ListViews reuse and recycle their views for better performance.

Whereas a GridLayout is a layout that places its children in a rectangular grid.

It was introduced in API level 14, and was recently backported in the Support Library.
Its main purpose is to solve alignment and performance problems in other layouts.
Check out this tutorial if you want to learn more about GridLayout.

Is it safe to use GridView in Android?

So I know GridView is depreciated

GridView is not deprecated, according to the JavaDocs

The Android Studio client says it has been depreciated in favor of ConstraintLayout

GridView and ConstraintLayout are not equivalent things, so that recommendation does not make sense.

GridLayout is comparable to ConstraintLayout. GridLayout is also not deprecated.

but is it okay to use GridView for production code?

Both GridView and GridLayout are safe for use in production code. They are obsolete, and I would not recommend that anyone use them, but they are safe.

• If what you want is a scrollable container of items in a grid, you can use GridView, though RecyclerView and GridLayoutManager would be a better choice

• If what you want is a non-scrollable container of items in a grid, you can use GridLayout or perhaps TableLayout, though ConstraintLayout would be a better choice

GridView, GridLayout or TableLayout?

GridView is scrollable. it would only make sense to use GridView if you load all of the buttons at once and drop the previous and next buttons.

GridLayout is the way to go.

Android - Difference between Gridlayout and Staggered Gridlayout

Grid View : It is is a ViewGroup that displays items in a two-dimensional, scrollable grid. In this each Grid is of same size (Height and width). Grid View shows symmetric items in view.

Staggered Grid View : It is basically an extension to Grid View but in this each Grid is of varying size(Height and width). Staggered Grid View shows asymmetric items in view.

Tutorial to implement Staggered Grid View :

1. Staggered Grid View
2. Pinterest Masonry layout Staggered Grid View

GridLayout (not GridView) how to stretch all children evenly

UPDATE: Weights are supported as of API 21. See PaulT's answer for more details.

There are limitations when using the GridLayout, the following quote is taken from the documentation.

"GridLayout does not provide support for the principle of weight, as
defined in weight. In general, it is not therefore possible to
configure a GridLayout to distribute excess space in non-trivial
proportions between multiple rows or columns ... For complete control
over excess space distribution in a row or column; use a LinearLayout
subview to hold the components in the associated cell group."

Here is a small example that uses LinearLayout subviews. (I used Space Views that takes up unused area and pushes the buttons into desired position.)

<GridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:columnCount="1"
>
    <TextView
        android:text="2x2 button grid"
        android:textSize="32dip"
        android:layout_gravity="center_horizontal" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" android:orientation="horizontal">
        <Space
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 1" />
        <Space
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="start"
            android:text="Button 2" />
        <Space
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
    >
        <Space
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 3" />
        <Space
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="start"
            android:text="Button 4" />
        <Space
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1" />
    </LinearLayout>
</GridLayout>

android gridlayout implementation

You might want to take a look at http://developer.android.com/design/building-blocks/grid-lists.html. Not exactly sure what you are trying to do, but I hope this helps. It uses GridView instead of GridLayout. A good post about that can be found GridView VS GridLayout in Android Apps

Edit: Here is my example

Note: Most of this is taken from http://developer.android.com/guide/topics/ui/layout/gridview.html. The ImageAdapter used in GridViewExample is taken directly from there as are the pictures used.

Here is my layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        android:textColor="@android:color/black"
        android:textStyle="bold"
        android:textSize="50sp"
        android:gravity="center_horizontal"
        android:text="Page Title" />

    <!-- Insert some sort of scrolling if desired -->

    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/black"
            android:textColor="@android:color/white"
            android:textSize="25sp"
            android:gravity="center_horizontal"
            android:text="Grid 1 Title" />

        <GridView
            android:id="@+id/gridView1"
            android:layout_width="fill_parent"
            android:layout_height="100dp"
            android:columnWidth="50dp"
            android:numColumns="auto_fit"
            android:verticalSpacing="5dp"
            android:horizontalSpacing="5dp"
            android:stretchMode="columnWidth"
            android:gravity="center" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/black"
            android:textColor="@android:color/white"
            android:textSize="25sp"
            android:gravity="center_horizontal"
            android:text="Grid 2 Title" />

        <GridView
            android:id="@+id/gridView2"
            android:layout_width="fill_parent"
            android:layout_height="100dp"
            android:columnWidth="50dp"
            android:numColumns="auto_fit"
            android:verticalSpacing="5dp"
            android:horizontalSpacing="5dp"
            android:stretchMode="columnWidth"
            android:gravity="center" />         
    </LinearLayout>
</LinearLayout>

Here is my Main Activity:

package com.example.gridviewdemo;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;
import android.widget.Toast;

public class GridViewExample extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.gridview_example);

        GridView gridView1 = (GridView) findViewById(R.id.gridView1);
        gridView1.setAdapter(new ImageAdapter(this));

        gridView1.setOnItemClickListener(new OnItemClickListener() {
            public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
                Toast.makeText(GridViewExample.this, "1: " + position, Toast.LENGTH_SHORT).show();
            }
        });

        GridView gridView2 = (GridView)findViewById(R.id.gridView2);
        gridView2.setAdapter(new ImageAdapter(this));

        gridView2.setOnItemClickListener(new OnItemClickListener(){
            public void onItemClick(AdapterView<?> parent, View v, int position, long id){
                Toast.makeText(GridViewExample.this, "2: " + position, Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Produces:

It looks like the layout is a little off on a tablet, but with some work I am sure that can be fixed

---

Related Topics