Android — User Interaction
This is an era of mobile technology where everyone is a smartphone user. To be able to use a smartphone we need to ‘Interact’ with it. A simple touch with a finger to open an app is an example of this ‘interact’ and this phenomenon is called ‘User Interaction’. While this may seem to us as very simple, speaking in terms of a developer there is a whole lot going behind the scenes. This Article is hence all about User Interaction and Android User Interaction in particular. Let us first have a closer look at the terminology ‘User Interaction’. User Interaction is defined as communication between two or more things. This can be a human-human or human-machine communication.
Let us assume a simple scenario where a person comes to a Bar to have a drink, for this he has to communicate with a bartender to get himself a drink. This is an example of an interaction between two persons; the person and the bartender.
Now let us replace person to person communication with person to machine communication.
Interaction with a machine is a simple cycle carrying an INPUT, a PROCESS and an OUTPUT. It goes like this:
INPUT -> PROCESS -> OUTPUT
A User simply uses a mouse or a keyboard or any other input device to generate an input, the machine processes that input and returns an output which can be seen by the User on a Screen, a Speaker or any Output device. This is User interaction with a machine.
For interaction with a machine we need some kind of a ‘User Interface’. A User Interface or UI is described as the means through which a person controls a hardware device or a software application. A good User Interface provides a “user-friendly” experience, enabling the user to be able to conveniently and intuitively interact with a machine.
Command Line Interface
Command Line Interface or CLI is a text-based user interface between a human and a machine. In the early times of computer machines we only had CLI to be able to interact with a computer. Users can run commands and can even do programming using CLI.
With the development of computer machines and modern technology, we now have a variety of ways to hold interaction with a computer, for example; mouse, the QWERTY keyboard, Text-to-speech synthesis, the Graphical User Interface (GUI), Natural language user interfaces like SIRI and Google Assistant, etc.
User Interaction in Android
In Android User Interface, we have different types of screens available to maintain navigation and flow. We can display content on an Android screen in various patterns, as shown in the picture below:
Android has few built-in layouts available called ‘View Groups’. View Groups contain different ‘Views’, where Views can be defined as any image, text, button or any layout on an Android screen. Each layout follows a design principle with which a user can populate their content in a certain way.
In Android, every UI Element on a screen is a View, because “View” class is the parent class of all Views and View Groups. A View class is actually the basic building block for UI components such as TextView, ImageView, Button, etc.
The Chart below shows this hierarchy of Views:
Now we know View Hierarchy, let us have a look at some Android Screens:
You can see in Blueprints that Views are inside a Layout and carry a relation with each other and their Parent Views.
Below is the basic diagram of an Android Application User Interface. An application has multiple activities and each activity can have one or more Views.
Cool!
Now we know quite much about Android User Interface. But.. How can we Interact?
Android User Interaction
The cycle of User Interaction consists of three things.
- An Event Trigger
- An Event Listener
- An Action
Yes, It is that simple! In our first example where two people were having communication in a bar, the ‘Event Trigger’ was just a simple question “Beer?” which the other person heard using his ears as the ‘Event Listener’ to which he performed An Action by bringing him the beer.
Applying this cycle to Android we find that an Event Trigger is when we tap on a screen with our fingers, Android listens to us, thus the Event Listener, and correspondingly the Action is performed.
In Android there is an OnClickListener Interface, which can listen to clicks for the particular view and notify your app that a click has been performed on this view.
You can turn any View, such as an ImageView, into a UI element that can be tapped or clicked.
JUST LIKE THAT!
TIME FOR SOME CODING NOW!
You can follow Android Fundamental Training Unit 2 — Lesson: 4 User Interaction codelabs to learn User Interaction.
https://developer.android.com/courses/fundamentals-training/toc-v2#unit_2_user_experience
This lesson consists of 5 codelabs
I’ve also created a TODO project for you guys.
Clone this Github repository and solve the challenges.
https://github.com/hamzaahmedkhan/UserInteractionDevCamp/
# 4.1: Clickable images
What you’ll learn
- How to use an image as an interactive element to perform an action.
- How to set attributes for ImageView elements in the layout editor.
- How to add an onClick() method to display a Toast message.
What you’ll do
- Create a new Android Studio project for a mock dessert-ordering app that uses images as interactive elements.
- Set onClick() handlers for the images to display different Toast messages.
- Change the floating action button supplied by the template so that it shows a different icon and launches another Activity.
# 4.2: Input controls
What you’ll learn
- How to change the input methods to enable suggestions, auto-capitalization, and password obfuscation.
- How to change the generic on-screen keyboard to a phone keypad or other specialized keyboards.
- How to add radio buttons for the user to select one item from a set of items.
- How to add a spinner to show a drop-down menu with values, from which the user can select one.
What you’ll do
- Show a keyboard for entering an email address.
- Show a numeric keypad for entering phone numbers.
- Allow multiple-line text entry with automatic sentence capitalization.
- Add radio buttons for selecting an option.
- Set an onClick handler for the radio buttons.
- Add a spinner for the phone number field for selecting one value from a set of values.
# 4.3: Menus and pickers
What you’ll learn
- How to add menu items to the options menu.
- How to add icons for items in the options menu.
- How to set menu items to show in the app bar.
- How to add click handlers for menu items.
- How to add a dialog for an alert.
- How to add the date picker.
What you’ll do
- Continue adding features to the Droid Cafe project from the previous practical.
- Add menu items to the options menu.
- Add icons for menu items to appear in the app bar.
- Connect menu-item clicks to event handlers that process the click events.
- Use an alert dialog to request a user’s choice.
- Use a date picker for date input.
# 4.4: User navigation
What you’ll learn
- How to add the Up button to the app bar.
- How to set up an app with tab navigation and swipe views.
What you’ll do
- Continue adding features to the Droid Cafe project from the previous practical.
- Provide the Up button in the app bar to navigate up to the parent Activity.
- Create a new app with tabs for navigating Activity screens that can also be swiped.
# 4.5: RecyclerView
What you’ll learn
- How to use the RecyclerView class to display items in a scrollable list.
- How to dynamically add items to the RecyclerView as they become visible through scrolling.
- How to perform an action when the user taps a specific item.
- How to show a FAB and perform an action when the user taps it.
What you’ll do
- Create a new app that uses a RecyclerView to display a list of items as a scrollable list and associate click behavior with the list items.
- Use a FAB to let the user add items to the RecyclerView.
Please open an issue if you are facing any during this task and here is some basic solution to this task.
