How To Build A Christmas Wishlist App For Android - Hive Programmers

Greetings to my favorite science community online, StemSocial.

It's @skyehi and tomorrow's the big day guys, it's Christmas Day and I'm feeling really joyful and all excited.

In yesterday's tutorial continuing my series on Android App Development Tutorials for beginners, we built a Christmas countdown App which the users can press a button to start the countdown clock to Christmas.

For today's blog which would be more like a part two on building Christmas based Apps since it's Christmas season, I wanted to teach my readers and followers how to build a Christmas Wishlist App.

Original Image Source by cottonbro studio from Pexels

We all have things we want to get as gifts for ourselves and for friends or family on Christmas day but sometimes keeping all that in our memory or a book may not be the most reliable or most convenient thing to do.

These days, everything is going digital and so should your Christmas Wishlist. We have actually built a notepad App in this series before and today's App is a bit similar. It's essentially a to do list for Christmas.

In our App design, some of the key components we'll have will include layout design, RecyclerView setup, adding tasks, and marking tasks as completed.

Let's get started with our work today guys

Project Setup

As always guys, you need to ensure that you have Android Studio IDE and Java Development Kit installed properly and correctly on your computer to be able to go through with this tutorial.

If you're having troubles doing that, please let me know in the comments and I'll totally refer you to the episode where I taught on how to install it.

So to begin building our App we'll start by opening Android Studio and creating a new Android project.

You'll be sent through a series of pages to configure the project. As usual, we'll choose Empty activity template for our App project.

Go ahead and click on the next button after choosing your template. Also set the name of your App and the package name as well.

Also guys, we're still using Java as our programming language so please ensure that Java is selected and not Kotlin.

When you're satisfied with the project configuration, please click on "Finish" button and wait for Android Studio to prepare your App project for you.

Christmas Wishlist Layout Design

As we always do, we'll start our work with the frontend design of our App. This will be done inside the activity_main.xml file.

Like I made mention earlier on, we'll add a few elements to our Christmas Wishlist App which would include a RecyclerView to display the to-do list and a button to add new tasks.

When the user clicks on the button, they should be able to get a new editText to input their Christmas ideas, plans or gift names.

You're free to customize it anyhow you see fit but I'll totally recommend a Christmas themed design so people don't confuse your App for any ordinary To-do list or wishlist.

Here's how your design code should look like guys

(html comment removed:  activity_main.xml )
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <EditText
        android:id="@+id/editTextTask"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:hint="Enter task"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Add Task"
        android:onClick="addTask"/>

    <RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
</LinearLayout>

Creating a To-Do Item Class

At this point of our series, I don't think I can emphasize much more on the fact that if we have a RecycleView holding items in an App, it would definitely need a class created to represent each item.

So guys I created a simple Java class and named it ToDoItem to represent a to-do item. The java class file name will look like this ToDoItem.java .

Here's how your ToDoItem.java class should look like

// ToDoItem.java
public class ToDoItem {
    private String task;
    private boolean completed;

    public ToDoItem(String task, boolean completed) {
        this.task = task;
        this.completed = completed;
    }

    public String getTask() {
        return task;
    }

    public boolean isCompleted() {
        return completed;
    }

    public void setCompleted(boolean completed) {
        this.completed = completed;
    }
}

Setting up RecyclerView for To-Do List

It's time for us to go into the MainActivity.java file where the main logic code of our App sits and set up the RecycleView there.

We'll be building the entire logic here and I'll do it step by step. After which I'll probably have to create an adapter class for the RecycleView which would fill the View with data.

Here's how we're going to set up the RecycleView in MainActivity

// MainActivity.java
public class MainActivity extends AppCompatActivity {

    private List<ToDoItem> todoList = new ArrayList<>();
    private RecyclerView recyclerView;
    private ToDoListAdapter adapter;

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

        recyclerView = findViewById(R.id.recyclerView);
        adapter = new ToDoListAdapter(todoList);

        recyclerView.setAdapter(adapter);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
    }
}

Adding To-Do Items

It's time to continue our code inside the same MainActivity.java. I really didn't want it to be a single long code snippet like what I did yesterday so I thought about dividing it.

If you check my code below, I have put // ... (previous code) inside to represent the code above, which is the one we just wrote to set RecycleView

Our objective for the next code is to be able to implement adding tasks to the to-do list in the MainActivity.java .

That way when your user types an item or a plan for Christmas, it's added to the list.

Here's how your code should look like guys

// MainActivity.java
public class MainActivity extends AppCompatActivity {

    // ... (previous code)

    public void addTask(View view) {
        EditText editTextTask = findViewById(R.id.editTextTask);
        String task = editTextTask.getText().toString();

        // Add the task to the to-do list
        ToDoItem newItem = new ToDoItem(task, false);
        todoList.add(newItem);

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

        // Clear the input field
        editTextTask.setText("");
    }

    // ... (remaining code)
}

Marking Tasks as Completed

Now when you have a to-do list or a wishlist, the objective for the user is to be able to keep track of everything they want and be able to do it all without forgetting or skipping any.

This means we'll need a logic to mark the task as completed if the user actually completes it.

So let's say you plan on buying some Christmas lights for your tree, you can add it to the App and mark it as completed when you finally buy the tree.

Of course we're still going to implement this logic inside the MainActivity.java file. So I'll put the // ... (previous code) comment there to represent everything we've already done inside MainActivity.java.

Here's how you code should look like

// MainActivity.java
public class MainActivity extends AppCompatActivity {

    // ... (previous code)

    public void onCheckBoxClicked(View view) {
        CheckBox checkBox = (CheckBox) view;
        int position = recyclerView.getChildLayoutPosition((View) view.getParent());
        ToDoItem clickedItem = todoList.get(position);
        clickedItem.setCompleted(checkBox.isChecked());
    }

    // ... (remaining code)
}

Adapter for RecyclerView

It's time to create an Adapter class for the RecycleView like I said. This is an entirely separate Java class and is not going to be done inside MainActivity.java.

Rather, we'll create a new Java class and name it ToDoListAdapter.java to create an adapter for the RecyclerView.

Now guys inside this Adapter class we'll have to inflate a new layout, the todo_item.xml which is the layout design for each item inside the RecycleView

Here's how your Adapter class should look like

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

    private List<ToDoItem> todoList;

    public ToDoListAdapter(List<ToDoItem> todoList) {
        this.todoList = todoList;
    }

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

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        ToDoItem item = todoList.get(position);
        holder.checkBoxCompleted.setChecked(item.isCompleted());
        holder.textViewTask.setText(item.getTask());
    }

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

    public static class ViewHolder extends RecyclerView.ViewHolder {
        CheckBox checkBoxCompleted;
        TextView textViewTask;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            checkBoxCompleted = itemView.findViewById(R.id.checkBoxCompleted);
            textViewTask = itemView.findViewById(R.id.textViewTask);
        }
    }
}

The Item Layout for RecyclerView

Like I just said, we'll have to create an XML layout file for the to-do item in the RecyclerView and name it todo_item.xml

After writing the code for you Adapter class, if you copied exactly what I shared with you, you'll notice that the todo_item.xml inside your inflation method is red reading an error.

The reason is that you haven't created the layout yet so Android studio does not recognize that layout as part of your App project.

So guys go ahead and create that layout and also design it based on your preference but ideally should include a CheckBoxfor users to make as complete and Textview for task display.

Here's how your code should look like guys

(html comment removed:  todo_item.xml )
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <CheckBox
        android:id="@+id/checkBoxCompleted"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:id="@+id/textViewTask"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:textSize="16sp"/>
</LinearLayout>

Run The App & Merry Christmas 🎄☃️

That's just it guys, we have completed our Christmas Wishlist App. I hope you enjoyed this tutorial. You can totally run your App now either on your physical Android device or an emulator.

When your App launches, press the button to add a task and add your Christmas lists guys. I hope Santa uses some kind of cloud network service to detect what you wrote and surprise you 😂 just kidding.

Thanks so much for the time. I wish you all a Merry Christmas and I would like to say a huge thank you to @stemsocial and the curator that was committed to supporting my series for a while now. I love you all. Stay joyful and happy new year.

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

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