অ্যান্ড্রয়েড অ্যাপে GridView লেআউট তৈরির পদ্ধতি

GridView ব্যবহার করে গ্রিড লেআউট তৈরি করা

GridView একটি AdapterView যা আইটেমগুলো дву-মাত্রিক গ্রিডে প্রদর্শন করে। এটি ছবি গ্যালারি, ক্যালেন্ডার, অ্যাপ ড্রয়ার ইত্যাদির জন্য আদর্শ।

ধাপ ১: নতুন প্রজেক্ট তৈরি করুন

Android Studio-তে নতুন প্রজেক্ট শুরু করুন।

ধাপ ২: লেআউট XML (activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <GridView
        android:id="@+id/gridView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:numColumns="2"
        android:verticalSpacing="10dp"
        android:horizontalSpacing="10dp"
        android:stretchMode="columnWidth"
        android:gravity="center"/>
</RelativeLayout>

ধাপ ৩: build.gradle-এ নির্ভরতা যোগ করুন

dependencies {
    implementation 'com.android.support:gridlayout-v7:28.0.0'
    // আধুনিক AndroidX-এর জন্য:
    // implementation 'androidx.gridlayout:gridlayout:1.0.0'
}

ধাপ ৪: MainActivity.java বাস্তবায়ন

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    GridView gridView;
    String[] numberInWords = {"One","Two","Three","Four","Five","Six","Seven","Eight","Nine","Ten"};
    int[] numberImage = {R.drawable.one,R.drawable.two,R.drawable.three,R.drawable.four,
                         R.drawable.five,R.drawable.six,R.drawable.seven,R.drawable.eight,
                         R.drawable.nine,R.drawable.ten};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        gridView = findViewById(R.id.gridView);
        MainAdapter mainAdapter = new MainAdapter(MainActivity.this, numberInWords, numberImage);
        gridView.setAdapter(mainAdapter);
        
        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView parent, View view, int position, long id) {
                Toast.makeText(getApplicationContext(), "You Clicked " + numberInWords[position], Toast.LENGTH_SHORT).show();
            }
        });
    }
}

ধাপ ৫: Custom Adapter (MainAdapter.java)

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

class MainAdapter extends BaseAdapter {
    private Context context;
    private LayoutInflater layoutInflater;
    private String[] numbersInWords;
    private int[] numberImage;

    public MainAdapter(Context c, String[] numbersInWords, int[] numberImage) {
        context = c;
        this.numberImage = numberImage;
        this.numbersInWords = numbersInWords;
    }

    @Override
    public int getCount() {
        return numbersInWords.length;
    }

    @Override
    public Object getItem(int position) {
        return numbersInWords[position];
    }

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        if (layoutInflater == null) {
            layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        }
        if (convertView == null) {
            convertView = layoutInflater.inflate(R.layout.rowitem, null);
        }
        
        ImageView imageView = convertView.findViewById(R.id.imageView);
        TextView textView = convertView.findViewById(R.id.textView);
        
        imageView.setImageResource(numberImage[position]);
        textView.setText(numbersInWords[position]);
        
        return convertView;
    }
}

ধাপ ৬: Row Layout (rowitem.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="24dp"
    android:gravity="center">
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:scaleType="centerCrop"/>
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Numbers"
        android:textSize="18sp"
        android:layout_marginTop="8dp"
        android:textStyle="bold"/>
</LinearLayout>

গুরুত্বপূর্ণ টিপস

• numColumns: "auto_fit" ব্যবহার করলে স্ক্রিন প্রস্থ অনুযায়ী কলাম সংখ্যা অটোমেটিক সেট হয়
• stretchMode: "columnWidth" কলামগুলো সমান প্রস্থে ফেলে
• ViewHolder Pattern: বড় লিস্টের জন্য getView-এ ViewHolder ব্যবহার করুন পারফরম্যান্স বাড়াতে
RecyclerView + GridLayoutManager: আধুনিক অ্যাপে GridView-এর বদলে RecyclerView ব্যবহার করা ভালো

ধাপ ৭: AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="app.com.sample">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

অ্যাপ্লিকেশন চালান

প্রজেক্টে res/drawable ফোল্ডারে one.png থেকে ten.png ছবিগুলো রাখুন। তারপর অ্যাপ রান করুন। ২ কলামের গ্রিডে সংখ্যা এবং ছবি প্রদর্শিত হবে। আইটেমে ক্লিক করলে টোস্ট মেসেজ দেখাবে।