info@androidpaper.co.in

GridView Tutorial With Examples In Android

In Android Studio, GridView is a UI component that displays items in a grid format. It is a view group that allows you to organize data, typically images or text, in rows and columns. GridView provides a convenient way to present data in a grid-like layout, allowing users to scroll through the items horizontally and vertically.

GridView consists of a set of cells, where each cell represents an item in the grid. By default, GridView automatically arranges the items based on the available space, resizing and positioning them accordingly. It also supports features like item selection, item click events, and scrolling.

GridView is commonly used in various scenarios, such as displaying image galleries, product catalogs, or any type of data that needs to be presented in a grid format. It offers flexibility in customizing the appearance of the items, allowing you to create visually appealing and interactive interfaces.

To use GridView in Android Studio, you need to define it in the XML layout file and then set up an adapter to populate it with data. The adapter is responsible for creating the views for each item in the grid and binding the data to them. You can also customize the layout and behavior of the GridView by specifying attributes like the number of columns, column width, and spacing.

Overall, GridView is a versatile and powerful component in Android Studio that simplifies the implementation of grid-based layouts, making it easier to showcase and navigate through collections of items in your Android applications.

Using the GridView in Android Studio is a great way to display data in a grid format, such as images, text, or a combination of both. Here's a step-by-step guide on how to use the GridView in your Android Studio project:

Start by creating a new Android project in Android Studio or open an existing project.

Open the XML layout file where you want to add the GridView. You can do this by navigating to the "res" folder, then the "layout" folder, and opening the desired XML file (e.g., activity_main.xml).

Inside the XML layout file, add the GridView widget by using the tag. Set the required attributes like android:id, android:numColumns (number of columns in the grid), and android:columnWidth (width of each column).

Create a new XML layout file for the grid item view. This layout file will define the appearance of each item in the GridView. You can add ImageView, TextView, or other UI elements as per your requirements.

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:background="@color/teal_700">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="Grid View"
            android:textColor="@color/white"
            android:textSize="18sp" />
    </LinearLayout>

    <GridView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:numColumns="2"
        android:horizontalSpacing="2dp"
        android:verticalSpacing="2dp"
        android:id="@+id/gv_id"/>

</LinearLayout>

Create a custom adapter class that extends BaseAdapter or ArrayAdapter. This adapter will be responsible for populating the GridView with data. Override the necessary methods like getCount(), getItem(), and getView() to handle data retrieval and view creation.

In your activity or fragment, initialize the GridView and set the adapter by calling setAdapter() method on the GridView object. Pass an instance of your custom adapter to this method.
Adapter Class Exampe

ArrayList<Flower> mFlower;
    Context mContext;
    String [] flwrname = {"Rose","Jamine","Tulip","Lily","Lavender","Lotus"};

    public FlowerAdapter(Context mContext){
    this.mContext = mContext;
    }
    @Override
    public int getCount() {
        return flwrname.length;
    }

    @Override
    public Object getItem(int position) {
        return null;
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        TextView mfflowernn;

        if (convertView == null) {
            mfflowernn = new TextView(mContext);
            mfflowernn.setLayoutParams(new GridView.LayoutParams(185, 185));
    

Retrieve the data you want to display in the GridView, whether from a database, API, or local resources. Store the data in an appropriate data structure like an array or a list.

Bind the data to the GridView by implementing the getView() method in your custom adapter. Inflate the grid item layout, retrieve the relevant data for the current position, and set the data to the corresponding views in the layout.

public class Flower {

    String f_name;
    int f_img;

    public Flower() {
    }

    public String getF_name() {
        return f_name;
    }

    public void setF_name(String f_name) {
        this.f_name = f_name;
    }

    public int getF_img() {
        return f_img;
    }

    public void setF_img(int f_img) {
        this.f_img = f_img;
    }
}

Handle item clicks in the GridView by setting an OnItemClickListener on the GridView object. Implement the onItemClick() method to perform the desired action when an item is clicked.

Run your Android application on an emulator or a physical device to see the GridView in action.

public class GridvActivity extends AppCompatActivity {
    GridView gv_id;
    String [] flwrname = {"Rose","Jamine","Tulip","Lily","Lavender","Lotus"};


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_gridv);

        gv_id =findViewById(R.id.gv_id);
        gv_id.setAdapter(new FlowerAdapter(this));
    }
}

By following these steps, you can effectively use GridView in Android Studio to create beautiful grid-based layouts for your app. Experiment with different customization options and explore additional functionalities to enhance the user experience.