Our First Sample - Part 3
IntroductionThis blog post will be featuring ways to interact with the user via the User Interface. The ways that we will be discussing today are Notifications from the Notification Bar, Toast messages, and the View Animator. All of these different components will be combined to give the User a unique experience. This post is again part of a multipart series in which we cover various Android lessons. If you haven't taken a look at the first and second parts of this post, I highly recommend you do as these will be extending the previous examples.
Getting StartedIn both of the previous examples, we constructed the User Interface by creating a new Text View and setting the context to be that of the Text View. In this example we are going to be using an XML to define what elements the User will see. This method of using the XML to create the User Interface is the Android way. Later in this blog post, we will create our own XML layout file.
Old way of setting up User Interface
Toast MessagesA Toast message is a simple, unobtrusive popup that hovers above your application. Toast messages are very simple to make. For instance, we already have the notion of a "trigger" but perhaps we want to display a message that alerts the user whenever the "trigger" goes off.
Within onReceive() in CounterUISample.java
In order to make the Toast message, you need a context in which to display it from, the text, and the length of how long it should be displayed. You then go on to tell the Toast to display the method by calling show. At this point, your application should run and display the alert every time the trigger goes off.
NotificationsA Notification is a simple message that will show up in the Notification Bar of Android. In order to use a Notification you must have a Notification Manager which simply tells Android when to display the Notification or when to remove it. In this case, we will display a Notification when the Counter starts running and remove the Notification when the counter is no longer running.
As you can see, this starts the Notification when the counter starts and ends the notification when the counter stops. At this point the application should be runnable and you will notice the notification starting and stopping when the program does.
Constructing the XMLIn previous examples, the User Interface has always been created by Java code in the onCreate method. This however, is not the typical Android way of doing things. Generally in Android the User Interface is setup in a XML file. This XML file will contain the placement and other various attributes to define what the User Interface will look like. Then in Java code you are able to reference the parts and fill them in with actual data. Below is a XML file that will layout our User Interface.
In this we create a Linear Layout that will show our information on the screen in vertical order. We then make a View Animator which will contain the two Text Views that we will be switching back and forth to.
View AnimatorA View Animator is simply a way to transition between views. It can contain some animation so that the transitions between views are smooth and more pleasurable to the eye. In this case, we want to display the a number as a Text View that will transition to the next Text View which will contain the next number. However, we do not have a predefined number of Text Views to transition to or want to create every possible Text View. In order to counter act this problem, we will have only two Text Views. All we have to do is transition to the Text View that is not being displayed at the moment and set the text to the next number coming up.
Within onCreate() of CounterUISample.java
Within onReceive() of CounterUISample.java
The next step is to take a look at the actual animation that will be performed on these Views.
Tween AnimationA Tween Animation is very simple way of defining animations. It contains sets, or groups of animation to be completed at the same time. A set can contain the following types: alpha, scale, translate, and rotate. Each of these has its own variables that need to be filled out.
We need to create a folder under the res folder called anim. This folder will contain our animations. Then create two xml files called push_up_in.xml and push_up_out.xml. The animation files I am listing were distributed by Android, but are a good place to start when learning how to write XML animation files.
In this example, we used translate and alpha. For translate we tell it to go from some point to another point with a set duration. For alpha we tell it to go from transparent to opaque with a set duration. Once, we have these Tween animations we can run the project and see how the User Interface has been greatly improved by using a simple View Animator.
ConclusionIn this blog post, we were able to cover a few different areas:
By MatthewT Williams
Subscribe to our Cius Developer Blog RSS feed to get the latest info and sample code.