Memo — Create Your Own Memo App!
What was I supposed to buy..?
I always forget what to buy when I go grocery shopping, and usually return home with a missing item. Most people try to alleviate this problem by writing what they need on a piece of post-it. We, programmers, can solve this problem by creating a simple Memo application to save post-it’s, save tress, and save the Earth! (Creating a Memo application is obviously not an overkill for this scenario.)
This tutorial will be very special, since we will learn how to transition between screens, and save data to local storage!
What you’ll need
- Sketchware Application from Google Play
What you’ll learn
- Concept of File and Activity
- Transitioning between Views
- Saving Data to Local Storage
Step 1: Starting the project
Start the project “Memo” from the example list.
Step 2: Designing the Application
Designing the application for this tutorial is slightly different, since we will have multiple views for this project.
You can change the views by clicking on the left bottom corner that says “main.xml.”
You can add the views in your custom project by clicking on the View Manager located in the top right menu; however, since this is an example project provided by Sketchware, we provide two views by default:
1. main.xml — the initial View when the application starts.
2. memo.xml — the memo View where editing note will take place
Note that there is no View Manager provided inside example projects!
This is how our main.xml should look like:
and this is how our memo.xml should look like:
Let’s move onto Logic!
Step 3: Setting up the logic
Since there are two views, there are two activities as well! Just like changing views, you can change the logic tab by clicking on the left bottom corner.
There are some important blocks we need to preview before we can work on our logic.
Changing Views
1. Intent.setScreen — This is a mandatory block to add if you want to transition between screens. It’s just telling the application, “Hey, I’m going to move to screen X!”
2. Intent.putExtra(key, value)— Used to transfer data between Views. You put put a reference key, and a value to transfer.
3. Intent.getExtra key — From the transitioned View, you can access the value by calling the key you put in putExtra block.
4. Intent.startActivity — Used to start the activity for the new View!
5. Intent.finishActivity — Used to close the current Activity.
Remember! To use these blocks, you need to add an Intent Component.
Here is our overview of the logic for MainActivity.java:
1. User clicks on the Note1 in main.xml
2. We set the screen to MemoActivity and put the key of ‘title’ with the value of the text inside the button.
3. We start the Memo Intent.
Let’s change gears and look at MemoActivity.java!
Here we learn about a new component: “File” or also known as “Shared Preference.” Simple put, this component allows us to read and write data from our local storage. Just like putExtra and getExtra from Intent Component, File uses setData and getData blocks to read/write values with <key, value> format. Let’s look at different blocks provided:
1. setData — saves the value with a key
2. getData — retrieves the value with the key
3. removeData — removes the value with the key
Let’s step back and think what the screen should do when the activity starts:
1. When the activity starts, we receive the value of the title by using getExtra block with the key ‘title’.
2. We set the title variable to the memoTitle. (Then we can simply access the title in other events)
3. We get the memo content with “getData” block, using the title as the key. We set the content with the value with we received.
Save and Delete
Save button allows us to save the memo, and delete button lets us delete the memo!
When save is clicked, we want to overwrite the previous data with the new data. Therefore, we use the setData block to save the value of the text inside content with the title as the key. This will overwrite the previous data inside the same key.
When delete is clicked, we simply remove the data with the key and finish the activity!
Conclusion and Challenges
We completed the “GetTime” application, and learned many concepts including changing Views, and using File or Shared Preference. Here is a challenge for you guys!
Save the time for when the memo was created!
Hope you guys enjoyed this tutorial! Let us know if you have any questions at help@sketchware.io! Happy coding! :-)
