How to build an Android Recipe Book App - Hive Programmers

Greetings to my favourite science community online, StemSocial.

It's @skyehi and as always, I'm super excited to be back to continue my series on Android App Development Tutorial for beginners.

Today's episode as the title suggests is a really interesting one about food. Like I said previously, your ability as a developer or programmer to build very useful Apps increases your chance of success and demand from customers wanting to build great Apps.

Original Image Source by Stanislav Kondratiev from Pexels

Recipe books are really important books to chefs and basically anyone who wants to cook some delicious and awesome dishes.

Carrying an actual book around in the kitchen is not as convenient as having an App with the same information and sometimes with even more graphics and features.

Recipe Book Apps are becoming increasingly popular and since everything is going digital, the future of recipes is definitely going to go digital.

This is why I saw it very necessary to add it to my series and teach programmers how to develop this kind of App.

Now guys the recipe App we're going to build in this tutorial is not exactly a complex one with images and videos because we're still at the beginner's level of App development.

In future more advanced tutorials, we'll use Kotlin, images, videos and links to other recipes sites.

This is a much basic model of how a recipe Appnfor Android devices would be developed.

Let's get started with today's work shall we

Setting up Android Studio

Please ensure that before you begin following my tutorials, you have the latest version of Android Studio installed on your machine and also Java Development kit installed as well.

If you're having any troubles downloading the software or installing it on your PC, please let me know in the comments.

Creating a New Android Project

The next thing we want to do after getting all the prerequisites handled is to create a new Android Studio project for our recipe app.

So guys go ahead and open Android Studio, click on "Start a new Android Studio project," and as we usually do, let's choose an empty activity as the template of our Project.

Click on the "next" button and you'll be sent to a page to set the app name and package name of your App. So I'm just going to call my app "RecipeBookApp."

Also guys please do not forget to select Java as the programming language of our project and not Kotlin.

When you're satisfied with the project setup please click on finish and wait for Android Studio to prepare your new project.

Designing the Simple User Interface

Once your project space is ready, the first thing we would be working on is the user interface design. Well just like yesterday's Ebook Reader App, the main element to use for our Recipe Book App is a RecyclerView which would display different recipes for different dishes.

The design layout code will be written inside the res/layout/activity_main.xml file. It's going to be a very straightforward layout with just the RecyclerView element.

Here's how your design code should look like

(html comment removed:  res/layout/activity_main.xml )
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

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

</RelativeLayout>

Create a Recipe Model

Now guys I believe if you followed some of the tutorials I made that required a Recycleview to display elements, you noticed that we also had to create a new Java class that becomes a model to represent each element inside the RecycleView.

We would have to do the same for this App. Each recipe would definitely have a title and a description so we need to create string variables inside the class model to represent the title and description. Pretty easy right guys.

So I went ahead and created a new Java class and named it Recipe.java to represent a recipe.

Here's how your Recipe model code should look like

// Recipe.java
public class Recipe {
    private String title;
    private String description;

    public Recipe(String title, String description) {
        this.title = title;
        this.description = description;
    }

    // Getters and setters
    public String getTitle() {
        return title;
    }

    public String getDescription() {
        return description;
    }
}

Implement RecyclerView Adapter

We go to the next stage where we create an Adapter that does two main jobs. It would help us bind the recipe data to the RecyclerView and it will also help us inflate the recipe item layout.

To do this guys, just create another java class and name it RecipeAdapter to bind the data to the RecyclerView.

Here's how your Adapter class code should look like

// RecipeAdapter.java
public class RecipeAdapter extends RecyclerView.Adapter<RecipeAdapter.ViewHolder> {

    private List<Recipe> recipes;

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

    public class ViewHolder extends RecyclerView.ViewHolder {
        // Define views in the item layout
        public TextView titleTextView;
        public TextView descriptionTextView;

        public ViewHolder(View itemView) {
            super(itemView);
            titleTextView = itemView.findViewById(R.id.titleTextView);
            descriptionTextView = itemView.findViewById(R.id.descriptionTextView);
        }
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        // Inflate the item layout
        View itemView = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.recipe_item, parent, false);
        return new ViewHolder(itemView);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        // Bind data to the ViewHolder
        Recipe recipe = recipes.get(position);
        holder.titleTextView.setText(recipe.getTitle());
        holder.descriptionTextView.setText(recipe.getDescription());
    }

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

Now guys I'll assume you will be creating the recipe_item layout yourself. In this layout you will design how each recipe item in the RecycleView would look like.

This is the layout in which in more advanced tutorials, we'll be creating the thumbnail for our recipes based on the kind of food recipe it is. So for example if it's a recipe for burgers, there will be a burger image.

Our next step is to work on the main logic of our Recipe Book App

Creating The Logic of Recipe Book App

This is the part where we work on the main activity of our App. It's about displaying the recipe list itself.

Implement the main activity MainActivity to display the recipe list. Like I said earlier on, this is more like a model of how the Recipe Book App is built so we won't go too much into the depths but we'll only write the code to display the recipe lists.

Here's how your main activity code should look like

// MainActivity.java
public class MainActivity extends AppCompatActivity {

    private RecyclerView recyclerView;
    private RecipeAdapter adapter;

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

        recyclerView = findViewById(R.id.recyclerView);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));

        List<Recipe> recipes = generateSampleRecipes();
        adapter = new RecipeAdapter(recipes);
        recyclerView.setAdapter(adapter);
    }

    private List<Recipe> generateSampleRecipes() {
        // Create and return a list of sample recipes
        List<Recipe> recipes = new ArrayList<>();
        recipes.add(new Recipe("Spaghetti Bolognese", "Classic Italian dish with a rich meat sauce."));
        recipes.add(new Recipe("Chicken Curry", "A flavorful and spicy Indian dish."));
        // Add more recipes as needed
        return recipes;
    }
}

So in the above code, I added a recipe of Spaghetti Bolognese a very interesting Italian dish with meat sauce. You're free to add any dish recipe. Just add the title, the description and then inside the new Recipe method that's in brackets, add the dish to it and it should display guys.

Running the App

Congratulations guys, you've managed to build your first Recipe Book App. I'm hopeful that you're proud of the work done.

So it's time to run your App. Just click on the green triangle button that looks like a play button to run the App.

As usual you've got two options, you can either
run your app on an emulator or a physical Android device to see the Recipe Book App in action.

Thanks so much for taking the time to read today's blog. I hope you enjoyed it guys. We're making good progress everyday and soon we'll be entering into Intermediary level of our Series. Have fun out there.

Have a lovely day and catch you next time on StemSocial. Goodbye 👨‍💻

You Can Follow Me @skyehi For More Like This And Others