Shares

How to Create Android Notepad App – Part 1

Shares

This post is the first of a two-part tutorial series that will focus on how to create an Android Notepad App. These two posts are the completion of my post on Android SQLite and Content Provider. If  you have not read those two posts, you may want to do so especially if you are new to Android development.

Download APK

At the end of this tutorial, here is what the app will look like.

Screenshot of Notepad App

Screenshot of Notepad App

 

Download Source Code

Now to the training.

Project Creation and User Interface

Step 1: Project Creation – the Android Studio project at this point should be  almost  blank except for the DatabaseHelper.java file which was added in the SQLite database tutorial and the NoteContentProvider.java that was added in the Content Provider tutorial.

Your Content Provider should look like this Github gist and your DatabaseHelper.java should look like the code below. It is important that your database looks similar to this because this will be the foundation upon which we will build out the rest of the app. If your file does not look similar then  you may need to get the source code.

Dependencies

Please take note that this tutorial was created with Android Studio 1.3.2 and Build Tools 23.0.0 so you may want to update your development environment if it is different to avoid compatibility issues with some of the libraries we will be using.

Step 2: Project Structure – to complete the project structure,  add the following packages and files if they do not exist yet.

  1. At the root of your project add the following packages
    1.  activities
    2. fragments
    3. adapters
    4. models
    5. data
    6. utilities
  2. Move MainActivity.java to the activities package. You do this by right clicking on MainActivity.java and select refactor and then move and then browse/select the package you want to move it to
  3. Add NoteEditorActivity.java to the activities folder and select the Main Activity as the parent to this Activity
  4. Add the following Fragments to the fragments package
    1. NoteListFragment.java – this Fragment should extend from  android.support.v4.app.Fragment  and not from  android.app.Fragment  expand your import statements after you create the Fragment to make the change
    2. NoteLinedEditorFragment.java – this Fragment should extend from  android.support.v4.app.Fragment  as well
    3. NotePlainEditorFragment.java – this Fragment should extend from  android.support.v4.app.Fragment  too
  5. Add the following Java class file to the models folder
    1. Note.java  and here is the initial content of this file, at  the top of Android Studio toolbar click on Code -> Generate -> Getter and Setter to apply the boiler-plate getter and setter code.
  6. Add the following Java class files to the adapter package
    1. NoteListAdapter.java
  7. In your utility package, add a file named Constants.java (this should already exist if you downloaded the source code), if not add one and the contents of this file should look like this.

Your project structure should look like this as we proceed to build this simple Android Notepad App.Notepad App Project Structure

Step 3: User Interface – this app will have two user interfaces. One will be a list to display the list of the Notes we have created and the other one will be a screen to actually create the Note.  The list screen will be powered by RecyclerView and we will create that in the section for Adapters. For the create/edit Note screen I am going to provide you with two options for the user interface of the screens. One is a plain EditText and the next one is Lined EditText (with lines).

  1. Under the res/drawable folder add the following two files that will be used to give a little nice looking style to our plain editor screens.
    1. apptheme_edit_text_holo_light.xml  and you can get the content of this file here 
    2. apptheme_textfield_disabled_holo_light.9.png and you can get the file here 
  2. Update your res/values/dimens.xml with this code we will use it to specify the dimensions of view objects in the app instead of hard coding the dimensions.
  3. Under your res/layout folder, update the layout file  fragment_note_plain_editor.xml file to look like the code below. Use the quick fix to enter String values for content and title.
  4. Notice the inputType attribute set to “textMultiLine” that is what makes the content EditText expand as you type.
  5. In your model’s package, add a Java file named LinedEditText.java , this class extends from the Framework EditText and draws lines for the visible editor area. You can find the content of  this class here
  6. Update your res/layout/fragment_note_editor.xml with this code
     
  7. Notice that we are using LinedEditText instead EditText as the view type for our content element. You should make sure to update the package name to yours and not mine

Step 4: Fragment Container – the user interfaces of our app are presented in Fragments. This allows you to add support for tablets should you wish to continue working on this app beyond this tutorial. Fragments do not have the screen real estate of their own so each Fragment has to be contained within an Activity and a Fragment has to be specifically started before for it to show. Because of this, we need to add a method that opens the Fragments as needed.

First, we have to add a container in the Activities layout file that the Fragments will occupy. Update both the activity_main.xml and activity_note_editor.xml files, remove the HelloWorld TextView and add this code instead.

Step 5: Open Fragment Method – by default, the Activities displays its own user interface defined in their respective xml layout files. So we have to problematically tell the Activity to replace its own UI with that of the Fragments. The act of starting a Fragment from an activity is part of what is called Fragment transaction. The Fragment Manager handles these transactions and much more. In both your MainActivity.java and NoteEditorActivity.java add this method:

Material Design Toolbar

This is 2015 and even the most basic of apps are expected to look decent and it does not take much to add a little flavor to our app. In this section and the next one, we will add Floating Action Button, Toolbar, and Navigation Drawer to spice up our app.

Step 6: Add Material Design Colors – go to https://www.materialpalette.com/ and choose any color combination of your choice. You will need to choose two colors and then download the XML for that color combination. Add a color.xml file to your res/values folder and copy the contents of the xml you downloaded into the color.xml file that you created and your color.xml file will look like the one below. You need to move the attribution comment under the xml declaration.

Step 7: Add Toolbar –  thanks to Chris Banes of the Android Developer Relations team we have a material design toolbar that is compliant with pre-Lollipop devices. You can read more about this on Chris blog . In your res/layout folder add a file named toolbar.xml and copy and paste this code into it

Step 8: Update Activity Layout Files – update both the MainActivity.java and NoteEditorActivity.java layout files to include the toolbar you just added and then make the container layout to stay below the toolbar like this:

Step 9: Update the style file – we need to tell the Framework that we no longer need the Actionbar since we are providing our own custom toolbar. Update your resvaluesstyles.xml file to look like this

Step 10: Add Toolbar in Java Code – we only added the layout of the toolbar defined in XML. We also need to make a programmatic reference to this xml component from Java code before we can use it. For each of our Activities (MainActivity and NoteEditorActivity) add a class instance variable private Toolbar mToolbar; Now within the onCreate() of both Activities, after the call to setContentView add this code

And with this we should be able to run the app now in an Emulator or physical device

Step 10: Run the App – at this point you should be able to run the app in the Emulator for testing. Add this code in the MainActivity right after setting the Toolbar. That will take you to the plain editor screen, and after you have tested the plain editor then change the fragment below to instantiate the NoteLinedEditorFragment instead of the NotePlainEditorFragment and run again.

You apps will look like these screenshots below, If not look at the source code to see what need to be corrected. If that still does not work, please use the comment box to let me know. It will be helpful for you to get this working before we proceed.

plain_note_editor_framed lined_note_editor_framed

Add Material Design Navigation Drawer

Step 11: Add Dependencies – update dependencies section of your build.gradle file (the one that has “Module: app” in parentheses) with the following code to pull in the dependencies for the libraries we will be using. Re-build your project after you add these dependencies.

Step 12: Add Navigation Drawer – we will add three items to our navigation drawer, you can add as many items as you see fit if you want to improve on this app. In your MainActivity.java add this variable  private com.mikepenz.materialdrawer.Drawer result = null;  And right below where you set the Toolbar add the following code. Visit the project home for documentation of this library.

And with that your app should have a Navigation drawer like this one below when you run it. Give it a try and use the comment box below to let me know if it does not work.

Screenshot of Android Notepad App

Screenshot of Android Notepad App

Floating Action Button

Download this file and add to your res/drawable folder.

Floating action buttons are used for a promoted action. They are distinguished by a circled icon floating above the UI and have motion behaviors that include morphing, launching, and a transferring anchor point.

https://www.google.com/design/spec/components/buttons-floating-action-button.html

We are going to add one to our list of Notes  user interface and we will use the popular Makovkastar Floating Action Button Library that we added under the dependencies to easily add a floating action button to our app. In your res/layout/fragment_note_list.xml file, set the root layout type to RelativeLayout instead of Frame Layout add then add the following xml code. Also add this line to the root element of the file  xmlns:fab="http://schemas.android.com/apk/res-auto"

Now that we have added the xml layout of Foating Action Button we need to go NoteListFragment.java to make a programmatic association of this xml component to a Java object that we can work with. Update your NoteListFragment with the code below:

What we did in the above code is to get the inflated view of the Fragment and hold a reference to it in an instance variable mRootView. This is necessary because Fragments do not have the method findViewById() so we needed a view that we can use to call findViewById() and that is how we are able to find the Floating Action Button which we stored in the variable mFab.

We then attached an onClick listener to the mFab object and when clicked we started the NoteEditorActivity. This provides another way to go to the NoteEditorActivity since we already added it to the Navigation drawer. At this point, you can remove the Editor entry in the Navigation Drawer.

Run the app to make sure that it is working as expected.

RecyclerView & Adapter

Before the introduction of material design, ListView is the main list renderer in Android and it has served so well. The RecyclerView was introduced as an improved version of ListView, it decouples the list from  its container by using layout manager and it provides support for animating common list actions. Follow the steps below to add RecyclerView to the list of Notes.

Step 1: Add RecyclerView Layout – RecyclerView is a type of view and in Android all views are mostly defined in an XML layout file. Then from Java code you can make a programmatic reference to this layout file using findViewById. We need to add RecylerView XML layout to fragment_note_list.xml

Add the following code to fragment_note_list.xml  just above the Floating Action Button layout code. You can remove the hello world textview if it is still there.

Step 2: Add Custom Row – our list of notes will have two TextView one to display the title of the note and the other one to display the date the note was last modified. Add the layout file row_note_list.xml to your res/layout folder and below is the content of that file

Step 4 – Add Human Readable Date Format – the second TextView in the list of notes displays date, update your Note.java class  add this method below that displays the date in a human readable format.

 

Step 5: Add RecyclerView Adapter – adapter is what takes the data from the data source and provides that to the list engine to render. Update your NoteListAdaper.java with the following code.

The above adapter is a basic implementation of RecyclerView adapter. In the constructor we pass in the list of notes that we want to display. In the onBindViewHolder() method we use the position parameter of this method to identify the Note we are working with and then we use the name of that Note and Date to set the TextViews.

Step 6: Add Dummy Data – since we have not added data persistence to our app, let us add some sample data to test the RecyclerView that we are adding. In your utilities folder, add a Java class called SampleData.java and you can get the content of this class here.

Step 7: Add RecyclerView Java Code – now we need to use Java code to bring our RecyclerView layout file and the adapter together. Add a method called setupList() to your NoteListFragment.java and then call this method from the onCreateView() method right before you return the view.

That is it, if you run your app, you should see this screen below. This is showing the dummy data that we added. If you are not see the screen below check the source code for comparison. If you do not have the source code you can get it from here.

Summary

In this tutorial we have created the user interface of an Android Notepad app. We added material design toolbar, navigation drawer, floating action button, RecyclerView and RecyclerView.Adapter. The app is showing sample data to demonstrate that what we added is working.

In the next post we will add data persistence to the app and implement CRUD methods. This tutorial has been an excerpt from my book Create Android Notepad App. If you find this tutorial helpful, please use the social media share buttons to share it with anyone who can benefit from it.

 

 

 

About the Author valokafor

I am a Software Engineer with expertise in Android Development. I am available for Android development projects.

follow me on:
18 comments

Comments are closed