Android में हॉरिजॉन्टल ListView (RecyclerView) कैसे बनाएं?

Android में हॉरिजॉन्टल स्क्रॉलिंग लिस्ट बनाने का आधुनिक तरीका

पुराने HorizontalListView के बजाय अब RecyclerView के साथ LinearLayoutManager.HORIZONTAL उपयोग करना मानक है। यह बेहतर परफॉर्मेंस और लचीलापन देता है।

चरण 1: नया प्रोजेक्ट बनाएं और डिपेंडेंसी जोड़ें

build.gradle (Module: app) में निम्न डिपेंडेंसी जोड़ें (नए AndroidX वर्जन के लिए):

dependencies {
    implementation "androidx.recyclerview:recyclerview:1.3.2"
    implementation "androidx.cardview:cardview:1.0.0"
}

चरण 2: लेआउट फ़ाइल (res/layout/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"
    android:padding="6dp"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" />

</RelativeLayout>

चरण 3: आइटम लेआउट (res/layout/gridlayout.xml)

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

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="0dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="9dp"
        card_view:cardCornerRadius="3dp"
        card_view:cardElevation="0.01dp">

        <RelativeLayout
            android:id="@+id/topLayout"
            android:layout_width="match_parent"
            android:layout_height="160dp">

            <ImageView
                android:id="@+id/imgThumbnail"
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:layout_above="@+id/textView"
                android:layout_centerHorizontal="true"
                android:scaleType="fitXY" />

            <TextView
                android:id="@+id/textView"
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:layout_alignParentBottom="true"
                android:background="#FF444444"
                android:gravity="center_vertical"
                android:paddingStart="5dp"
                android:paddingEnd="2dp"
                android:text="Test"
                android:textColor="#FFFFFF"
                android:textSize="20sp" />

        </RelativeLayout>
    </androidx.cardview.widget.CardView>
</LinearLayout>

चरण 4: MainActivity.java

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import android.os.Bundle;
import java.util.ArrayList;
import java.util.Arrays;

public class MainActivity extends AppCompatActivity {
    RecyclerView recyclerView;
    RecyclerView.LayoutManager layoutManager;
    RecyclerView.Adapter adapter;
    ArrayList numberName;
    ArrayList numberImage;

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

        numberName = new ArrayList<>(Arrays.asList("Four...", "Nine...", "Seven...", "Six...", "Ten...", "Three...", "Two..."));
        numberImage = new ArrayList<>(Arrays.asList(R.drawable.four, R.drawable.nine, R.drawable.seven, R.drawable.six, R.drawable.ten, R.drawable.three, R.drawable.two));

        recyclerView = findViewById(R.id.recyclerView);
        recyclerView.setHasFixedSize(true);

        layoutManager = new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false);
        recyclerView.setLayoutManager(layoutManager);

        adapter = new MyAdapter(this, numberName, numberImage);
        recyclerView.setAdapter(adapter);
    }
}

चरण 5: MyAdapter.java

import android.content.Context;
import android.content.Intent;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import androidx.recyclerview.widget.RecyclerView;
import java.util.ArrayList;

class MyAdapter extends RecyclerView.Adapter {
    private ArrayList numberName;
    private ArrayList numberImage;
    private Context context;

    MyAdapter(Context context, ArrayList numberName, ArrayList numberImage) {
        this.context = context;
        this.numberName = numberName;
        this.numberImage = numberImage;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.gridlayout, parent, false);
        return new ViewHolder(v);
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        holder.textView.setText(numberName.get(position));
        holder.imgThumbnail.setImageResource(numberImage.get(position));
        holder.setClickListener((view, pos, isLongClick) -> {
            if (isLongClick) {
                Toast.makeText(context, "#" + pos + " - " + numberName.get(pos) + " (Long click)", Toast.LENGTH_SHORT).show();
            } else {
                Toast.makeText(context, "#" + pos + " - " + numberName.get(pos), Toast.LENGTH_SHORT).show();
            }
        });
    }

    @Override
    public int getItemCount() {
        return numberName.size();
    }

    public static class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener, View.OnLongClickListener {
        ImageView imgThumbnail;
        TextView textView;
        private ItemClickListener clickListener;

        ViewHolder(View itemView) {
            super(itemView);
            imgThumbnail = itemView.findViewById(R.id.imgThumbnail);
            textView = itemView.findViewById(R.id.textView);
            itemView.setOnClickListener(this);
            itemView.setOnLongClickListener(this);
        }

        void setClickListener(ItemClickListener itemClickListener) {
            this.clickListener = itemClickListener;
        }

        @Override
        public void onClick(View view) {
            clickListener.onClick(view, getAdapterPosition(), false);
        }

        @Override
        public boolean onLongClick(View view) {
            clickListener.onClick(view, getAdapterPosition(), true);
            return true;
        }
    }
}

चरण 6: ItemClickListener.java इंटरफेस

import android.view.View;

interface ItemClickListener {
    void onClick(View view, int position, boolean isLongClick);
}

चरण 7: 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 में four, nine, seven, six, ten, three, two नाम की इमेजेस मौजूद हैं।