custom gridview trong android

By Admin 23/10/2023 0

This article will be building an application to lớn demonstrate the use of CustomArrayAdapters in GridView. GridViews are view containers that display views in two-dimensional (rows and columns) they are used in my app android applications one simple example would be the gallery tiện ích. The adapter connects the UI elements with the data source, It helps populate data with us taking care of it. e.g when the user is scrolling through a gallery tiện ích the GridView is automatically populated without specifying anything.

There are different Adapters to lớn name a few:

  • ArrayAdapter 
  • BaseAdapter 
  • Custom ArrayAdapter 

This article will be covering the Custom ArrayAdapter.

Why use a Custom ArrayAdapter? 

Android already provides the implementation for an ArrayAdapter, which can be used with just a single line demonstrated below. They are used when Whenever we have a list of single items we can use ArrayAdapter. For instance, a list of phone contacts, countries, or names. Below is the syntax of the ArrayAdapter used for displaying text data.

Bạn đang xem: custom gridview trong android

Syntax:

ArrayAdapter(Context context, int resource, int textViewResourceId, T[] objects)

Parameters:

  • Context: is the application context being used 
  • resource: The second parameter is the resource id used to lớn phối the layout(xml file). 
  • textViewResourceId: Id of the TextView element where the data will be displayed 
  • objects: are the data elements stored in an array.

The problem with or limitation of this method is we cannot use complex layouts eg. Imagine we were building an tiện ích lượt thích Netflix or prime where each element is made up of many elements eg an ImageView, TextView, etc. Such complex views are not possible with the simple implementation of the ArrayAdapter for this we need to lớn create our custom Adapter by extending the ArrayAdapter class. The following code shows the structure of the Custom ArrayAdapter.

Java

import android.content.Context;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ArrayAdapter;

import java.util.List;

public class CustomAdapter extends ArrayAdapter {

    public CustomAdapter(Context context, int resource, List objects) {

        super(context, resource, objects);

    }

    @Override

    public int getCount() {

        return super.getCount();

    }

    @Override

    public View getView(int position, View convertView, ViewGroup parent) {

        return super.getView(position, convertView, parent);

    }

}

Kotlin

import android.content.Context

import android.view.View

import android.view.ViewGroup

import android.widget.ArrayAdapter

class CustomAdapter(context: Context?, resource: Int, objects: List<*>?) : ArrayAdapter<Any?>(context!!, resource, objects!!) {

    override fun getCount(): Int {

        return super.getCount()

    }

    override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {

        return super.getView(position, convertView, parent)

    }

}

The two important methods used are:

  1. getCount(): returns the number of data elements present in the List.
  2. getView(): this is the important method where will be initializing and returning the custom view.

Example

A sample GIF is given below to lớn get an idea about what we are going to lớn vì thế in this article. We are going to implement this project using both Java and Kotlin Programming Language for Android. 

GridView Using Custom ArrayAdapter in Android

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to lớn Create/Start a New Project in Android Studio. The code for that has been given in both Java and Kotlin Programming Language for Android.

Step 2: Working with the XML Files

Next, go to lớn the activity_main.xml file, which represents the UI of the project. Below is the code for the activity_main.xml tệp tin. Comments are added inside the code to lớn understand the code in more detail.

XML

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout 

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context=".MainActivity">

    <GridView

        android:id="@+id/grid_view"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:horizontalSpacing="10dp"

        android:numColumns="auto_fit"

        android:verticalSpacing="10dp"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Creating a new layout XML file 

Creating a new tệp tin named custom_view.xml in the same thư mục as the activity_main.xml tệp tin. This Custom View will host an ImageView and a TextView.

XML

<?xml version="1.0" encoding="utf-8"?>

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical">

    <ImageView

        android:id="@+id/imageView"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        tools:srcCompat="@tools:sample/avatars" />

    <TextView

        android:id="@+id/textView"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:text="TextView"

        android:textAlignment="center" />

</LinearLayout>

Step 3: Working with the Java/Kotlin Files

Now to lớn hold the info of our custom view we need to lớn create a getter setter class. We can vì thế things without this just using two arrays one for images and the other for text but what if we want to lớn modify your view to lớn add a Button? Then will again need a third array. Hence a class that holds the custom view is a more flexible option. Create the class In the same thư mục as the MainActivity create a new class called items. Below is the code for the items file.

Java

public class items {

    private int image_id;

    private String text;

    public int getImage_id() {

        return image_id;

    }

    public void setImage_id(int image_id) {

        this.image_id = image_id;

    }

    public String getText() {

        return text;

    }

    public void setText(String text) {

        this.text = text;

    }

    items(int img, String text) {

        image_id = img;

        this.text = text;

    }

}

Kotlin

class items internal constructor(private var image_id: Int, private var text: String) {

    fun getImage_id(): Int {

        return image_id

    }

    fun setImage_id(image_id: Int) {

        this.image_id = image_id

    }

    fun getText(): String {

        return text

    }

    fun setText(text: String) {

        this.text = text

    }

    fun items(img: Int, text: String) {

        image_id = img

        this.text = text

    }

}

Note: For an image, we store the id of the image and not the image.

Step 4: Implementing the CustomAdapter class

Create a new class classed as CustomAdapter in the same thư mục as items. The main method of the Adapter is the getView(). 

Java

import android.content.Context;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ImageView;

import android.widget.TextView;

import androidx.annotation.NonNull;

import androidx.annotation.Nullable;

@NonNull

@Override

public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {

    View v = convertView;

    if (v == null) {

        LayoutInflater inflater = (LayoutInflater)getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        v = inflater.inflate(custom_layout_id, null);

    }

    ImageView imageView = v.findViewById(R.id.imageView);

    TextView textView = v.findViewById(R.id.textView);

    items item = items_list.get(position);

    imageView.setImageResource(item.getImage_id());

    textView.setText(item.getText());

    return v;

}

Kotlin

import android.content.Context

import android.view.LayoutInflater

import android.view.View

import android.view.ViewGroup

Xem thêm: phim tình yêu và sự cách trở tập 1

import android.widget.ImageView

import android.widget.TextView

fun getView(position: Int, convertView: View?, parent: ViewGroup): View {

    var v = convertView

    if (v == null) {

        val inflater = getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater

        v = inflater.inflate(custom_layout_id, null)

    }

    val imageView = v!!.findViewById<ImageView>(R.id.imageView)

    val textView = v.findViewById<TextView>(R.id.textView)

    val item: items = items_list.get(position)

    imageView.setImageResource(item.getImage_id())

    textView.setText(item.getText())

    return v

}

public View inflate (int resource,ViewGroup root)

Inflate a new view hierarchy from the specified xml resource. Throws InflateException if there is an error.

resource  int: ID for an XML layout resource to lớn load (e.g., R.layout.main_page)

root  ViewGroup: Optional view to lớn be the parent of the generated hierarchy. This value may be null.

This method first parses out the custom_view.xml tệp tin using the inflate() method. This method is quite computationally expensive and should be used only when needed eg. when the adapter has to lớn populate new items when the user reaches the over of the screen. After getting the reference of the view we then initialize the image view and text view from the custom_view.xml tệp tin phối the data and return the view. Below is the complete code for the CustomAdapter file. Comments are added inside the code to lớn understand the code in more detail.

Java

import android.content.Context;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ImageView;

import android.widget.TextView;

import androidx.annotation.NonNull;

import androidx.annotation.Nullable;

public class CustomAdapter extends ArrayAdapter<items> {

    List<items> items_list;

    int custom_layout_id;

    public CustomAdapter(@NonNull Context context, int resource, @NonNull List<items> objects) {

        super(context, resource, objects);

        items_list = objects;

        custom_layout_id = resource;

    }

    @Override public int getCount() {

        return items_list.size();

    }

    @NonNull

    @Override

    public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {

        View v = convertView;

        if (v == null) {

            LayoutInflater inflater = (LayoutInflater)getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);

            v = inflater.inflate(custom_layout_id, null);

        }

        ImageView imageView = v.findViewById(R.id.imageView);

        TextView textView = v.findViewById(R.id.textView);

        items item = items_list.get(position);

        imageView.setImageResource(item.getImage_id());

        textView.setText(item.getText());

        return v;

    }

}

Kotlin

import android.content.Context

import android.view.LayoutInflater

import android.view.View

import android.view.ViewGroup

import android.widget.ArrayAdapter

import android.widget.ImageView

import android.widget.TextView

class CustomAdapter(context: Context, resource: Int, objects: List<items>) : ArrayAdapter<items?>(context, resource, objects) {

    init {

        items_list = objects

        custom_layout_id = resource

    }

    private var items_list: List<items>

    private var custom_layout_id: Int

    override fun getCount(): Int {

        return items_list.size

    }

    fun getView(position: Int, convertView: View?, parent: ViewGroup): View {

        var v = convertView

        if (v == null) {

            val inflater = context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater

            v = inflater.inflate(custom_layout_id, null)

        }

        val imageView = v!!.findViewById<ImageView>(R.id.imageView)

        val textView = v.findViewById<TextView>(R.id.textView)

        val item: items = items_list[position]

        imageView.setImageResource(item.getImage_id())

        textView.setText(item.getText())

        return v

    }

}

Step 5: Working with the MainActivity File

Go to lớn the MainActivity File and refer to lớn the following code. Below is the code for the MainActivity File. Comments are added inside the code to lớn understand the code in more detail. For the images, here we have used app android studio icons. The images are present in the res/drawable folder. Should look lượt thích this 

Java

import android.os.Bundle;

import android.widget.GridView;

import androidx.appcompat.app.AppCompatActivity;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        List<items> itemsList = new ArrayList<>();

        itemsList.add(new items(R.drawable.android_1, "image_1"));

        itemsList.add(new items(R.drawable.android_2, "image_2"));

        itemsList.add(new items(R.drawable.android_3, "image_3"));

        itemsList.add(new items(R.drawable.android_4, "image_4"));

        itemsList.add(new items(R.drawable.android_5, "image_5"));

        itemsList.add(new items(R.drawable.android_1, "image_6"));

        itemsList.add(new items(R.drawable.android_2, "image_7"));

        itemsList.add(new items(R.drawable.android_3, "image_8"));

        itemsList.add(new items(R.drawable.android_4, "image_9"));

        itemsList.add(new items(R.drawable.android_5, "image_10"));

        GridView gridView = findViewById(R.id.grid_view);

        CustomAdapter customAdapter = new CustomAdapter(this, R.layout.custom_view, itemsList);

        gridView.setAdapter(customAdapter);

    }

}

Kotlin

import android.os.Bundle

import android.widget.GridView

import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)

        setContentView(R.layout.activity_main)

        val itemsList: List<items> = ArrayList<Any>()

        itemsList.add(items(R.drawable.android_1, "image_1"))

        itemsList.add(items(R.drawable.android_2, "image_2"))

        itemsList.add(items(R.drawable.android_3, "image_3"))

        itemsList.add(items(R.drawable.android_4, "image_4"))

        itemsList.add(items(R.drawable.android_5, "image_5"))

        itemsList.add(items(R.drawable.android_1, "image_6"))

        itemsList.add(items(R.drawable.android_2, "image_7"))

        itemsList.add(items(R.drawable.android_3, "image_8"))

        itemsList.add(items(R.drawable.android_4, "image_9"))

        itemsList.add(items(R.drawable.android_5, "image_10"))

        val gridView = findViewById<GridView>(R.id.grid_view)

        val customAdapter = CustomAdapter(this, R.layout.custom_view, itemsList)

        gridView.adapter = customAdapter

    }

}

Final Project Structure

Output:

Whether you're preparing for your first job interview or aiming to lớn upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to lớn success. We provide top-quality nội dung at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to lớn vì thế the same for you. Don't miss out - kiểm tra it out now!

Xem thêm: 온디스크 10만 포인트 쿠폰


Last Updated : 30 Aug, 2022

Like Article

Save Article