Create Your First Android App – Part 2

Shares


This post is part 2 of my three part tutorial series on how to create your first Android app. In today post we will cover the basics of Android User Interface and then create the User Interfaces for the demo app.

The User Story for this app is 

I need an Android app that will help me record the attendance for my up coming event

There are three post in this series

Post 1

Covers project creation and Material Design Navigation Drawer

Post 2

Covers User Interface, adding/managing of Attendants and Events

Post 3

Covers adding business logic, functionalities and Data Persistence

Introduction to Android User Interface

Here are the basics of Android user interface

  1. The things you see on an Android device screen are displayed or laid out with xml.
  2. What you see on the screen is made possible by at least two distinctive files, “how it looks” is defined in an xml layout file while “how it works” is defined in a mostly Java code file.
  3. The Java code files that define “how it works” are normally placed in or called from an Activity and each activity has a corresponding xml layout file. These layout files are normally placed in the res/layout directory
  4. Most object you see on the screen like button, checkbox, textbox, etc are types of View defined in a layout file. To get programmatic reference to the View in an xml layout from from a Java code you use findViewById.
  5. Some View object can contain other View objects and can also be contained in other Views, these types of Views are called “Layouts” and include FrameLayout, RelativeLayout, LinearLayout, GridLayout, etc

Applying the basics of Android User Interface to our demo app – we have identified four screens for our AttendanceApp as follows:

[table id=3 /]

Attendant Registration Screen

We have seen that the purpose of this screen is to provide a user interface for the Organizer of the event to create/register an Attendant. In the minimum this user interface should have a field for a name. That field where the Attendant’s name should be entered is called the EditText field. We can place a label near the EditText field to provide a visual clue to the person doing data entry that this field is a “Name” field, that label is called the TextView. This is what the xml layout for a screen with a TextView and an EditText look like:

UI with EditTex & TextView

Example EditText with TextView

XML Layout

For each field we will have a TextView (label) and an EditText (input field), and if we have ten fields such as: name, phone number, email, etc then we will end up with twenty Widgets which is the Android name for the UI elements on the  screen. Alternatively, instead of having a TextView to serve a label for each EditText we can use a “hint” to serve as a visual clue for what kind of data should be entered into each field. And this is how the Create Attendant screen will look with a hint

Create Attendant UI
Create Attendant Screen

Create Attendant XML Layout

Notice that the root Layout has been changed from FrameLayout to RelativeLayout. How did we know that to create an Attendant we need a Name, email, phone, Street Address, etc – the answer is model or more accurately the model class.

Model Classes

In Object Oriented Programming a  class is a template that defines the properties and methods that are available in an object. And Object is derived from a class, in our demo App, the attendant John Doe is an object derived from the Attendant class.  Now we need to begin to flesh out the model classes in this app. We already used the properties of the Attendant class, go ahead and add the following classes to the models package we created in part 1.

Next is the Attendance.java class, just have properties for tracking checkout and check in for each event and Attendant. Here is the content of that class

And next is the Event

Notice the serialized attendants list, we will come back to that  when we talk about database.  For each of the class, within the class file, click on Code on the Android Studio toolbar, then Generate -> Getter & Setters to generate the getters and setters.

Complete The Android User Interface

Create an Event: Here is the xml layout code for Create an event and the resulting UI that it creates.

Create Event UI

Create an Event UI

Create Event XML

At the moment, the layout file for the  Attendance List UI and the Events List UI looks very simple because we have not added the custom xml row file that defines how each row in the list should look like. Here are the layout file and the UI for the event and attendance list.

Attendance List UIBlank Attendance List

Attendance List  Layout

The same thing applies to the Event list, it is blank at the moment because we have not added the custom xml layout that defines the rows in that list .

Events List UI

Blank Events List

Events List Layout

 

Working with RecyclerView & RecyclerView Adapter

In this section we are going to add the layout and code that will transform our blank Attendant List and Event list to look more like these:

Attendance List with Custom Row Layout


Attendant List Custom Row

Event List with Custom Row Layout

 

event_list_image_framed

From the work we did on the navigation drawer, I am hoping that it is obvious to you that the above screens are powered by RecyclerView since we want to adhere to modern Android development paradigm as was laid out in the material design guideline. And I also hope that you should know that each list needs an adapter. Therefore the Android component we will work with in this section are:

  1. Custom layout to layout the rows
  2. An Adapter that passes the dataset to the list
  3. Recyclerview
  4. LayoutManager and these are represent in the image below retrieved from Android developer site

RecyclerView

 

 

 

 

 

Follow along in these Steps

    1. Step 1 – Create Attendance custom row – in your res/layout folder add a file called attendants_list_row.xml and here is the content of that file
    2. Step 2 – Create Event custom row – in your res/layout folder add a file called events_list_row.xml and here is the content of that file
    3. Step 3 – Update color  -Update your res/values/color.xml to this
    4. Step 4 – Update Style – Update your res/values/styles.xml to this
    5. Step 4 – Update Dimension – update your res/dimen.xml to this
    6. Step 5 – Add Attendance Adapter – add AttendantsAdapter.java file to the adapters package and populate that file with this code
    7. Step 6 – Add Events Adapter – add EventsAdapter.java file to the adapters package and populate that file with this code
    8. Step 7 – Update Java code – now we need to update EventsFragment.java to this and AttendantsFragment.java to this
    9. Step 8 – Add external library – in the dependencies section of your build.gradle file add  compile 'com.squareup.picasso:picasso:2.5.2
    10. Step 10 – Testing – To test this, you need to add some dummy attendants. First you need to get any temporary images and add them to your drawables folder and you can name them any thing. I named minde headshot_1.jpg, headshot_2.jpg, etc up to 10 and with that I now create a temp method like the one below and once you do it you can now uncomment the line addTestGuestList() in the EventsFragment.java
    11. Step 11 – Permission – Add the Internet permission for Picasso to work and be able to grab images from the internet
Summary

We touched on quite a few concepts here that it will take much longer post to try to explain them one by one. If you have questions use the comments box to ask.

If you like this tutorial please share it with someone who can benefit from it or through your social media, If you want to be notified when I release the next tutorial in the series please use the opt-in form below to join my mailing list. If you need clarifications, use the comment button below to ask questions. If you have feedback for me on how I can improve my tutorials or what topic you want to learn more about, use the contact form to reach out to me.

There are some problems with the configuration of the opt-in shortcode

Follow Me

Source Code

You can find the Source Code for this Tutorial @ Github

About the Author valokafor

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

follow me on:

Leave a Comment: