Recycler View: MarketApp
Recycler View: MarketApp
📋 Steps to Create a RecyclerView:
-
Item Layout:
First, design the layout for a single item in XML. This layout defines how each row/item in the RecyclerView will look. -
RecyclerView Widget:
Add the RecyclerView in your activity's layout and initialize it in the activity or fragment using Java/Kotlin code. -
Model Class:
Create a data class that holds the information for each item (like title, image, etc.) you want to show in the RecyclerView. -
Adapter Class:
This is where the real action happens. The adapter connects the data (from the model) to the views (item layout). It handles creating item views and binding data to them. -
ViewHolder:
ViewHolder holds references to the views inside each item, making scrolling smooth and fast by avoiding repeatedfindViewByIdcalls
Item Layout
android:layout_height="wrap_content">
<ImageView
android:id="@+id/imageview"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
android:src="@drawable/ic_launcher_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:textColor="@color/white"
android:id="@+id/title_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="16dp"
android:text="title"
android:textSize="32sp"
app:layout_constraintStart_toEndOf="@+id/imageview"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:textColor="@color/white"
android:id="@+id/description_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="Your description here"
android:textSize="16sp"
app:layout_constraintStart_toStartOf="@+id/title_txt"
app:layout_constraintTop_toBottomOf="@+id/title_txt" />
Recycler View in Activity main XML
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#283339"
tools:context=".MainActivity">
<ImageView
android:id="@+id/image_header"
android:layout_width="0dp"
android:layout_height="230dp"
android:src="@drawable/header"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="24dp"
android:background="#283339"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/image_header" />
Model Class - Item.class
public class Item {
int itemImg;
String itemName, itemDesc;
public Item(int itemImg, String itemName, String itemDesc) {
this.itemImg = itemImg;
this.itemName = itemName;
this.itemDesc = itemDesc;
}
public int getItemImg() {
return itemImg;
}
public void setItemImg(int itemImg) {
this.itemImg = itemImg;
}
public String getItemName() {
return itemName;
}
public void setItemName(String itemName) {
this.itemName = itemName;
}
public String getItemDesc() {
return itemDesc;
}
public void setItemDesc(String itemDesc) {
this.itemDesc = itemDesc;
}
}
MyAdpter Class
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder>{
private List<Item> itemList;
public ItemClickListener clickListener;
public void setClickListener(ItemClickListener myListener){
this.clickListener = myListener;
}
public MyAdapter(List<Item> itemList) {
this.itemList = itemList;
}
@NonNull
@Override
public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
// responsible for creating new view holders for your items
View itemView = LayoutInflater
.from(parent.getContext())
.inflate(R.layout.item_layout,parent, false);
return new MyViewHolder(itemView);
}
@Override
public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
// Binds the data from your dataset to the views within the view holder
Item item = itemList.get(position);
holder.title.setText(item.getItemName());
holder.description.setText(item.getItemDesc());
holder.imageView.setImageResource(item.getItemImg());
}
@Override
public int getItemCount() {
// Returns the total number of items in your dataset
return itemList.size();
}
public class MyViewHolder extends
RecyclerView.ViewHolder implements View.OnClickListener {
// Holds references to the views within the item layout
ImageView imageView;
TextView title;
TextView description;
public MyViewHolder(@NonNull View itemView) {
super(itemView);
imageView = itemView.findViewById(R.id.imageview);
title = itemView.findViewById(R.id.title_txt);
description = itemView.findViewById(R.id.description_text);
itemView.setOnClickListener(this);
}
@Override
public void onClick(View v) {
if (clickListener != null){
clickListener.onCLick(v,getAdapterPosition());
}
}
}
}
MainActivity
public class MainActivity extends AppCompatActivity implements ItemClickListener {
// 1- AdapterView
RecyclerView recyclerView;
// 2- Data Source
List<Item> itemList;
// 3- Adapter
MyAdapter myAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
recyclerView = findViewById(R.id.recyclerView);
itemList = new ArrayList<>();
Item item1 = new Item(R.drawable.fruit, "Fruits","Fresh Fruits from the Garden");
Item item2 = new Item(R.drawable.vegitables, "Vegetables","Delicious Vegetables ");
Item item3 = new Item(R.drawable.bread,"Bakery","Bread, Wheat and Beans");
Item item4 = new Item(R.drawable.beverage, "Beverage","Juice, Tea, Coffee and Soda");
Item item5 = new Item(R.drawable.milk, "Milk", "Milk, Shakes and Yogurt");
Item item6 = new Item(R.drawable.popcorn,"Snacks","Pop Corn, Donut and Drinks");
itemList.add(item1);
itemList.add(item2);
itemList.add(item3);
itemList.add(item4);
itemList.add(item5);
itemList.add(item6);
LinearLayoutManager layoutManager = new LinearLayoutManager(this);
recyclerView.setLayoutManager(layoutManager);
myAdapter = new MyAdapter(itemList);
recyclerView.setAdapter(myAdapter);
myAdapter.setClickListener(this);
}
@Override
public void onCLick(View v, int pos) {
Toast.makeText(this,
"You Choose: "+ itemList.get(pos).getItemName(),
Toast.LENGTH_SHORT).show();
}
}
Interface -- ItemClickListener
public interface ItemClickListener {
void onCLick(View v, int pos);
}
OUTPUT
Comments
Post a Comment