How to Build A Simple Memo Android App - Hive Programmers

Greetings to my favorite science community online, StemSocial.

I'm back again to continue an exciting series on Android app development for beginners.

In yesterday's blog, I shared with you the step by step procedure or guide to building a Basic calculator app and based on the feedback I got, I believe my readers really enjoyed it.

It has truly inspired me to continue and teach more advanced stuff.

For today's blog I wanted to take you through the basic steps to creating your very own Memo app on android using the Android Studio IDE. After you're done with this brief tutorial, I can assure you that you would be proud of your work.

Original Image Source by Pexels from Pixabay

Like I mostly say in my programming blogs, it's all about simply practicing everyday. Today you build a basic calculator, the next day a memo and before long you would be building more complex apps.

I didn't want to share a more complex programming tutorial yet because this series is designed for newbies in the programming world.

Soon we'll be getting into the big boy stuff guys. You'll be able to make a whole music player app for yourself which you can definitely publish on the Google play store.

Since this blog is for the beginners, I'll keep it simple and short and explain each step as we move on.

Alright without wasting any more time, let's get right into the codes👨‍💻

Step 1: Create a New Project

The first thing you need to obviously do is to open the Android studio Project software on your computer. At this point, I'll assume my readers have successfully installed the Android Studio Project app or IDE.

Again if you're having troubles with that, just comment down below and I'll try to be of help to you.

So open Android Studio, create a new Android Studio Project and set up the project details. When you create a new project, you will be given a set of template options to choose from.

Please select the "Empty Activity" template

---

Step 2: Designing Our User Interface

The next step is to design the layout. This is where we can decide how our memo app or main screen would look like. I wouldn't create too complex a design since it's beginners class. Later on we'll do a much more complex one with different features.

So open res/layout/activity_main.xml and design a simple layout with a RecyclerView and a button

I took the liberty of setting up a code snippet example for you to follow. Just in case you're having troubles with anything, let me know.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android">

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

    <Button
        android:id="@+id/addButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="Add Memo" />
</RelativeLayout>

There's a recycle view for our scrollable list and a plus button to create a new memo.

Step 3: Creating Memo Model

We need to create a new Java class for the Memo model in your project. This java class you're creating will represent a memo item with a title and content.

Here's an example of how the Memo model Java class should look like.

public class Memo {
    private String title;
    private String content;

    public Memo(String title, String content) {
        this.title = title;
        this.content = content;
    }

    public String getTitle() {
        return title;
    }

    public String getContent() {
        return content;
    }
}

Step 4: Creating a MemoAdapter

Now guys in order to bind the Memo objects to the RecyclerView so we can have your memo in a scrollable list you need to create a RecyclerView Adapter which we'll call MemoAdapter.

Here's a simple code of how your MemoAdapter should look like. Remember that it's a java class named MemoAdapter with the following code below;

public class MemoAdapter extends RecyclerView.Adapter<MemoAdapter.ViewHolder> {

    private List<Memo> memos;

    public MemoAdapter(List<Memo> memos) {
        this.memos = memos;
    }

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

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        Memo memo = memos.get(position);
        holder.titleTextView.setText(memo.getTitle());
        holder.contentTextView.setText(memo.getContent());
    }

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

    public class ViewHolder extends RecyclerView.ViewHolder {
        TextView titleTextView;
        TextView contentTextView;

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

Step 5: Creating Our MemoItem Layout

Now guys it's time for us to design how each memo item layout will look like inside our Recycle View. This is where the title and a summary of your memo will be displayed. The user would click on this layout to open the full memo page.

You need to create a new XML file for that. We'll name it "memo_item.xml" in the "res/layout" directory.

Here's a simple code snippet of how that should look like. - you can use your own height and width depending on how you want it to look like.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="8dp">

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

    <TextView
        android:id="@+id/contentTextView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp" />
</LinearLayout>

---

Step 6: Implement MainActivity

Alright, now that we're done with the necessary layout and Adapters, it's time for the full logic of our memo app. This would be done in MainActivity.java class.

Here's the full code snippet to guide you write the code. I would suggest you don't change anything if you're a newbie. After you're done running the app, you can experiment with different codes you've learned in the past.

public class MainActivity extends AppCompatActivity {

    private List<Memo> memos;
    private MemoAdapter memoAdapter;

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

        RecyclerView recyclerView = findViewById(R.id.recyclerView);
        Button addButton = findViewById(R.id.addButton);

        memos = new ArrayList<>();
        memoAdapter = new MemoAdapter(memos);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        recyclerView.setAdapter(memoAdapter);

        addButton.setOnClickListener(view -> showAddMemoDialog());
    }

    private void showAddMemoDialog() {
        // Implement logic to show a dialog for adding a new memo
        // Update the 'memos' list and notify the adapter
    }
}

That's it guys, you just created your very first Memo app. You can now click on the green run button at the top of your Android studio toolbar screen.

You can either use your own android device by connecting it to your computer or laptop using a USB cable and also make sure USB Debugging is on. If you're having trouble turning on USB debugging on your phone please let me know guys.

Thanks for taking the time to read today's blog. I hope it was helpful to those trying to improve their Android Programming skills and become professional App developers.

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

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