Creating Android Notepad App: 1. User Interface

In this series of tutorial I am going to show you how we can create a simple utility application for Android and that utility application is Notepad app. So Let’s start….


Topics Covered

i. Creating Android Project


Warning: Cannot modify header information - headers already sent by (output started at /home/bajayk/public_html/wp-content/plugins/all-in-one-seo-pack/aioseop_class.php:3962) in /home/bajayk/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_wp.class.php on line 220

Open eclipse and start with creating new project named “NotePad”. See the below image for setting.
Creating Notepad in Android
If you notice, here I have selected API 16 as minimum sdk and targetd sdk and API 19 to compile the app. The reason behind I am not targeting users below API 16. If you visit the link Dashboards | Android Developer . You will find all the Users below API 16 are just less than 20% and I don’t think so to target this users.

ii. Collecting Assets for Project


Warning: Cannot modify header information - headers already sent by (output started at /home/bajayk/public_html/wp-content/plugins/all-in-one-seo-pack/aioseop_class.php:3962) in /home/bajayk/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_wp.class.php on line 220

before start creating User Interface(UI) we need some assets/icons to set at appropriate place. i.e. Application icon, File icon, etc.
Whenever I need icons for my app or web development, I always refer on place. IconArchive where I can find almost all graphics/icons stuff which I need and its free too. Below icons I am going to use in NotePad app. You can download Icons from IconArchive If you want different or you can use from here. Download Icons
Creating Notepad in Android

Creating Notepad in Android
Once download the required Icons. Put all the icons in resources folder of the Project you created. See the Image Below.
Creating Notepad in Android

iii. Preparing Home Layout


Warning: Cannot modify header information - headers already sent by (output started at /home/bajayk/public_html/wp-content/plugins/all-in-one-seo-pack/aioseop_class.php:3962) in /home/bajayk/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_wp.class.php on line 220

Open main.xml from res>layout folder. If main.xml is not created while creating new project, then create new main.xml under res>layout folder.
Add new ListView component in main.xml layout. see the xml below.


See the preview below. The main screen will look like this.
Creating Notepad in Android

iv. Creating Custom Item Layout for ListView on Home Screen


Warning: Cannot modify header information - headers already sent by (output started at /home/bajayk/public_html/wp-content/plugins/all-in-one-seo-pack/aioseop_class.php:3962) in /home/bajayk/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_wp.class.php on line 220

Once home screen is ready, we need to start creating custom row item for ListView. In which we will show all the files name from note folder created by app on external SD, which we will create in next part of this tutorial series.
Go to res>layout folder and create new xml named “listview_item.xml” and add the following code snippet.

The ListView Item should look like shown in below image.
Creating Notepad in Android

v. Preparing Note Layout


Warning: Cannot modify header information - headers already sent by (output started at /home/bajayk/public_html/wp-content/plugins/all-in-one-seo-pack/aioseop_class.php:3962) in /home/bajayk/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_wp.class.php on line 220

Now its time to make a layout for New Note and Edit Note. Here we will make common/one layout for Add a new note and Edit note. We don’t need to make separate layout for each. We will manage it programmatically. To manage it programmatically, we will see it in later part. For now let’s start creating Note layout.
Create a “note.xml” under res>layout folder.


And the preview will look like this.
Creating Notepad in Android
If you notice, I haven’t create any Save/Update button to save/update the current note. It is because we will manage Save button on Action Bar.

vi. Preparing Menus


Warning: Cannot modify header information - headers already sent by (output started at /home/bajayk/public_html/wp-content/plugins/all-in-one-seo-pack/aioseop_class.php:3962) in /home/bajayk/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_wp.class.php on line 220

Let’s create Action Bar menus for different screens under res>menu.
Main menu Action Bar items


Creating Notepad in Android


Main menu Action Bar item to delete selected notes

Creating Notepad in Android


Note menu Action Bar Item to save note

Creating Notepad in Android

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *