Creating a User Interface

Transcription

1 Creating a User Interface Developing for Android devices is a complicated process that requires precision to work with. Android runs on numerous devices from smart-phones to tablets. Instead of using a specialized language, Android uses a compilation of XML and Java to define its syntax and formatting. The use of XML and Java are sometimes interchangeable, meaning that you can define variables and/or elements in both XML and Java. XML is primarily used for formatting while Java is used for programming and logic functions. XML is a markup language, meaning that it can be specialized to represent different values and attributes. If you are already familiar with XML or other markup languages, feel free to skip the following portion. Android development is based in both Java and XML. XML is a markup language, so if you're familiar with HTML or markup languages in general you will understand the format required when working with Android. For those who have not worked with a markup language, here is a quick refresher: XML is a markup language, meaning that data is broken up into tags in said format: <tag> data </tag> <endtag/> <endtag2 attribute= value /> The entire tag i.e <tag> data </tag> is called an element. An element must have a starting tag and an ending tag; the ending tag must start with a /. Shorthand if there is no ending tag is the starting tag with a / at the end <endtag/>. You can nest tags like so: <tag> </tag> <taginsideatag/>

2 Elements can also have attributes, which have two properties; the attribute name and the attribute value. An attribute is declared within the < > characters i.e <tag attributename= attributevalue >. The attributevalue must have quotes (single ' ' or double ) enclosing them. Like most specialized markup languages, the XML format used for Android has its own unique names and constants, like a pre-made classes in Java. This module will go over all unique tags, attribute names and values for Android where relevant. Implementing a User Interface Even on a touchscreen the best way for any user to interact with your program is with a graphical user interface (GUI). We could go through the effort of declaring and creating each GUI object with Java, but a rather time intensive process. Alternately, we could modifying the main XML file of any Android program under the name Main Activity. Finally, we could use a custom editor built for Android development to perform our GUI editing needs, like the one provided in the Eclipse Android Environment. In this section, we will primarily focus on the XML method, as using Java cannot single-handedly implement specific features for Android GUIs. Android uses a hierarchy of View objects, which are contained within ViewGroup objects. ViewGroup objects is a subclass of View objects, but View objects are typically the low-level UI like EditText and Button objects, while ViewGroup are the containers in which View objects exist in and their layout. The following section will focus on different aspects of user interfaces, with the direction of building a simple GUI to test these objectives. The Main Activity is essentially the main class (or method) of every Android program, it is the core and the starting point for Android applications. Main Activity essentially exists as an XML (main_activity.xml under res layout) file and a Java (MainActivity.java under src) class file. Every View object such as EditText (used to receive text input from the user) and TextView (used to display text) objects are declared as elements within this XML as well as their properties such as the object name, object size, etc. The ViewGroup here is the layout of Screen, while the order of the objects is dictated by how the elements are declared. For example, in a Linear Layout which is orientated vertically- the first element listed in the XML will be on the top, the following second, etc. In order to change the Layout of the Main Activity, we will go to the XML file (mainactivity.xml)

3 and change the tag-name of the first element to the class name of a ViewGroup class, which will change the layout style. Some common layouts are LinearLayout, RelativeLayout and WebView. LinearLayout lines up all objects placed in it either horizontally (left to right) or vertically (up to down). RelativeLayout is very flexible as it allows you to define elements relative to other elements (e.g element A is to the left of element B, etc) or relative to the parent (element A is at the top, etc). WebView simply displays a webpage in HTML formatting. Here's an example of LinearLayout and some of its main attributes, as it would look in the mainactivity.xml file. <LinearLayout android:layout_width= match_parent android:layout_height= match_parent android:orientation = horizontal /> - android:layout_width We will set these to the string match_parent. These means that the & android:layout_height total size of the window will match the screen of the Android device. - android:orientation This will be set to horizontal, meaning that all View objects will be displayed horizontally. vertical is another option for LinearLayout. Each View object has a similar structure to LinearLayout in XML format, however with different attributes. In the example below, (excluding attributes under the LinearLayout) is an EditText object; an object that the user can interact and type into. <LinearLayout > <EditText android:layout_width= wrap_content android:layout_height= wrap_content />

4 </LinearLayout> - android:id Id is the name/identifier for the object in question. Id is how to identify, manipulate and retrieve information from that object within your Java code. Note: Any time you declare or get a resource element from the Android XML, you must start the attributevalue with followed by the resource type. In this example, we declare id with and the string hint In the case of Id, it is required to add the plus '+' symbol when the first instance you declare an id. We will explore this later when we bring using variables. - android:layout_width Instead of setting this to a specific pixel width/height, you can set this android:layout_height to wrap_content. This means that the object (in this case a text box) will dynamically adjust to enclose just the content it contains. Note: If we set the above values to match_parent, it will be the same width/height as its parent, which is the LinearLayout. - android:hint This is simply the text that will be displayed before the user types into the text box. Its helpful when giving the text box a label or what format the user should be using i.e MM/DD/YY. Adding a String Resource. We can easily declare and use a Java string when necessary, but in some cases it is more convenient to have a universal string resource we can retrieve from different parts of our program. We can declare a String resource which is centralized in one location- and then reference it from our Java code. For our example, we will make two strings, which in your Android Project (for Eclipse) is under res values string. <?xml version= 1.0 encoding= utf-8?> <resources>

5 </resources> <string name= app_name >AndroidProjectName </string> <string name= default_message > Enter a message here: </string> Equivalent to String app_name = AndroidProjectName ; String default_message = Enter a message here: ; The tag name string is required. The attribute name called name declares the variable name of this string. The data in the element (in this case Enter a message here: ) is the value of the string. The value of the string cannot be in quotes- or those quotes will appear in a string. Adding a Button. Now lets go back to the LinearLayout in activity_main.xml in res layout and add a Button to our layout. Because our LinearLayout is horizontal, if we type a Button element under our EditText element, we will have a Button object to the right of our EditText object. Type this under the <EditText> element: <Button android:layout_width= wrap_content android:layout_height= wrap_content /> Like our EditText field, we'll set the layout_width and layout_height to wrap_content. - android:text This is the text that will be displayed on the Button.

6 Now go back to the string resource and add: <string name= button_send > Send </string> Weighting View Objects. Most View objects (Not sure what class this XML element comes from?) have an XML property called android:layout_weight which by default is 0. Weight changes the width of a group of View objects to match the total width. The weight system works like a ratio; each element takes up the total width * its weight / the sum of weights of the elements. If an element is has a weight 1 while the other elements have a weight 0; the other elements will take up their usual space while the element with weight 1 will take up all the remaining space. Event Handling We now have a Button but unfortunately it doesn't do anything yet. We have to handle the event that the Button sends when it is clicked. Add the following element under Button in activity_main.xml: <Button android:onclick= sendmessage /> sendmessage represents the method that will handle the event when the Button is clicked. The method is public and void and with only a View object as a parameter, and will be located in the MainActivity class.

7 (Here I'll deviate from the Android's Getting Started and so to skip Intent and Creating new Activity's Activity) After the user clicks the Button, lets use an AlertDialog to tell the user what they entered. Enter this into the MainActivity.java import android.app.alertdialog; import android.view.view; public void sendmessage (View view) { AlertDialog.Builder alert = new AlertDialog.Builder( this ); //Create a new Dialog EditText userinput = (EditText) findviewbyid (R.id.edit_message); //Get a reference to the EditText field field String message = userinput.gettext().tostring(); //Get the text from the EditText alert.settitle( User input is: ); //Name of the Dialog alert.setmessage( message ); //Name of the message alert.setpositivebutton( Ok, null); //Give the Dialog an Ok button, not necessary though alert.show(); //show the dialog } Now when the user presses the Send Button, a dialog will pop up telling them what they typed in. Congratulates! You have just written your first UI Android program.