Enhancing Recipe App with Categories Selection

In this article, we will explore how to enhance the existing recipe app by replacing the description with categories, allowing users to select and narrow down recipes based on specific categories.

This feature will make the app more user-friendly and improve the overall user experience.

Step 1: Modify the Recipe Class First, we need to modify the Recipe class to include a new field for categories. We'll also update the constructor and getter method accordingly.

public class Recipe {
    private String title;
    private List<String> categories; // New field for categories
    private int imageResource;

    public Recipe(String title, List<String> categories, int imageResource) {
        this.title = title;
        this.categories = categories;
        this.imageResource = imageResource;
    }

    public int getImageResource() {
        return imageResource;
    }

    // Getter method for title
    public String getTitle() {
        return title;
    }

    // Getter method for categories
    public List<String> getCategories() {
        return categories;
    }

    // You can also add setter methods if needed
}

Step 2: Update Dummy Recipe Data Next, we need to update the populateRecipeList() method in the MainActivity to include the categories for each recipe.

private void populateRecipeList() {
    // Add dummy recipes to the list with correct image resource IDs
    List<String> recipe1Categories = Arrays.asList("Breakfast", "Healthy");
    recipeList.add(new Recipe("Scrambled Eggs", recipe1Categories, R.drawable.recipe_image_1));

    List<String> recipe2Categories = Arrays.asList("Lunch", "Quick & Easy");
    recipeList.add(new Recipe("Chicken Sandwich", recipe2Categories, R.drawable.recipe_image_2));

    List<String> recipe3Categories = Arrays.asList("Dinner", "Vegetarian");
    recipeList.add(new Recipe("Mushroom Risotto", recipe3Categories, R.drawable.recipe_image_3));

    // Notify the adapter that the data set has changed
    recipeAdapter.notifyDataSetChanged();
}

Step 3: Update the RecipeAdapter We also need to update the RecipeAdapter to handle the new categories. We can display the categories in the onBindViewHolder method.

@Override
public void onBindViewHolder(@NonNull RecipeViewHolder holder, int position) {
    Recipe recipe = recipeList.get(position);
    holder.titleTextView.setText(recipe.getTitle());
    holder.categoriesTextView.setText(TextUtils.join(", ", recipe.getCategories())); // Display categories
    Glide.with(holder.itemView.getContext())
         .load(recipe.getImageResource())
         .into(holder.imageView);
}

Step 4: Update the Layout Files Finally, we can update the layout files to display the categories in the recipe item layout. We'll modify recipe_item_layout.xml as follows:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="8dp"
    android:clickable="true"
    android:background="?android:attr/selectableItemBackground">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:scaleType="centerCrop"
        android:src="@drawable/image_url_1" />

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:background="@drawable/recipe_item_background">

        <TextView
            android:id="@+id/titleTextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="18sp"
            android:textStyle="bold"
            android:gravity="center" />

        <TextView
            android:id="@+id/categoriesTextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="4dp"
            android:textColor="#888888" />

    </LinearLayout>

</LinearLayout>

Conclusion: By adding categories to the recipe app, we have made it easier for users to browse and select recipes based on their preferences. The modified app now displays the recipe title and its corresponding categories, providing a more informative and enjoyable user experience. With this improvement, users can easily discover recipes that match their interests and culinary needs.

Final codes look like this :

package com.peterc.kitchenwhiz;

import android.text.TextUtils;
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.recyclerview.widget.RecyclerView;
import com.bumptech.glide.Glide;
import java.util.List;

public class RecipeAdapter extends RecyclerView.Adapter<RecipeAdapter.RecipeViewHolder> {

    private List<Recipe> recipeList;

    public RecipeAdapter(List<Recipe> recipeList) {
        this.recipeList = recipeList;
    }

    @NonNull
    @Override
    public RecipeViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.recipe_item_layout, parent, false);
        return new RecipeViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull RecipeViewHolder holder, int position) {
        Recipe recipe = recipeList.get(position);
        holder.titleTextView.setText(recipe.getTitle());
        holder.categoriesTextView.setText(TextUtils.join(", ", recipe.getCategories())); // Display categories
        Glide.with(holder.itemView.getContext())
                .load(recipe.getImageResource())
                .into(holder.imageView);
    }


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

    static class RecipeViewHolder extends RecyclerView.ViewHolder {
        TextView titleTextView;
        TextView categoriesTextView;
        ImageView imageView;

        RecipeViewHolder(@NonNull View itemView) {
            super(itemView);
            titleTextView = itemView.findViewById(R.id.titleTextView);
            categoriesTextView = itemView.findViewById(R.id.categoriesTextView);
            imageView = itemView.findViewById(R.id.imageView);
        }
    }
}

package com.peterc.kitchenwhiz;

import java.util.List;

public class Recipe {
    private String title;
    private List<String> categories; // New field for categories
    private int imageResource;

    public Recipe(String title, List<String> categories, int imageResource) {
        this.title = title;
        this.categories = categories;
        this.imageResource = imageResource;
    }

    public int getImageResource() {
        return imageResource;
    }

    // Getter method for title
    public String getTitle() {
        return title;
    }

    // Getter method for categories
    public List<String> getCategories() {
        return categories;
    }

    // You can also add setter methods if needed
}




package com.peterc.kitchenwhiz;
import android.os.Bundle;
import android.widget.LinearLayout;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private RecyclerView recyclerView;
    private RecipeAdapter recipeAdapter;
    private List<Recipe> recipeList;

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

        recyclerView = findViewById(R.id.recyclerView);
        recipeList = new ArrayList<>();
        recipeAdapter = new RecipeAdapter(recipeList);

        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(layoutManager);
        recyclerView.setAdapter(recipeAdapter);

        // Populate recipe list with dummy data (replace with your own data retrieval logic)
       populateRecipeList();
    }

    private void populateRecipeList() {
        // Add dummy recipes to the list with correct image resource IDs
        List<String> recipe1Categories = Arrays.asList("Breakfast", "Healthy");
        recipeList.add(new Recipe("Scrambled Eggs", recipe1Categories,  R.drawable.image_url_1));

        List<String> recipe2Categories = Arrays.asList("Lunch", "Quick & Easy");
        recipeList.add(new Recipe("Chicken Sandwich", recipe2Categories,R.drawable.image_url_2));

        List<String> recipe3Categories = Arrays.asList("Dinner", "Vegetarian");
        recipeList.add(new Recipe("Mushroom Risotto", recipe3Categories, R.drawable.image_url_3));

        // Notify the adapter that the data set has changed
        recipeAdapter.notifyDataSetChanged();
    }



}




<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="8dp"
    android:clickable="true"
    android:background="?android:attr/selectableItemBackground">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:scaleType="centerCrop"
        android:src="@drawable/image_url_1" />

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:background="@drawable/recipe_item_background">

        <TextView
            android:id="@+id/titleTextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="18sp"
            android:textStyle="bold"
            android:gravity="center" />

        <TextView
            android:id="@+id/categoriesTextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="4dp"
            android:textColor="#888888" />

    </LinearLayout>

</LinearLayout>


<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background_gradient">

    <!-- Custom app name "Kitchen Wiz" -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Kitchen Wiz"
        android:textSize="24sp"
        android:textStyle="bold"
        android:gravity="center"
        android:layout_marginTop="16dp"
        android:layout_marginBottom="8dp"
        android:elevation="2dp" />

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="80dp"
    android:fillViewport="true"
    android:scrollbars="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <!-- RecyclerView goes here -->
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:nestedScrollingEnabled="false" />

    </LinearLayout>
</androidx.core.widget.NestedScrollView>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>