Every text field in android studio expects a certain type of text input, such as an email address, phone number, or just plain text. So it's important that you specify the input type of the text field and include an entry in the main.xml for each EditText that you require customised, input as can be seen in a sample code below.

<EditText
         …….
         android:inputType="textCapWords"
         …….
</EditText

Options for Input Type

Customising Appearance

customising appearance of the widgets can be done by first adding borders to the widgets. This can be achieved by adding XML code to create a border around a TextView object. The best approach to this is to define the border in an XML file and then “refer” to this in an “attribute” of the component. The sample code below shows xml code snippet on how to add a border around a TextView object in an xml file.

<TextView  
    	android:layout_width="fill_parent" 
    	android:layout_height="wrap_content" 
    	android:text="@string/hello"
    	android:background="@drawable/theborder"
 />

The background attribute in the above code is “specified” by the xml file theborder

The border.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
    <stroke android:width="1dp" 					
    android:color="#55771B" /> 
   <padding android:left="17dp" 					
android:top="13dp" 
         	android:right="17dp" 					
android:bottom="17dp" /> 
    <corners android:radius="14dp" /> 
</shape>

Frame Layout is intended to display a single item at a time. You can display multiple items in your display using Frame layout but they may overlap depending where you position them. This may be ok for some applications but not for others. This approach may be useful for a splash screen at the start of a game.

Linear

Linear Layout organises the components horizontally or vertically in terms of rows and columns. The android:orientation entry controls this aspect.

Linear Example

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical"
	android:layout_width="fill_parent"
    	android:layout_height="fill_parent">
     	<Button 
    		android:id="@+id/navigateBack"
    		android:text="Back"
    		android:layout_width="wrap_content"
    		android:layout_height="wrap_content" 
    	/>
    	<TextView
    		android:text="Home Telephone"
    		android:layout_width="wrap_content"
    		android:layout_height="wrap_content"
	/>
	...................

</Linearlayout>

Relative

With Relative layout the position of a graphical component can be specified in relation to another component.

Relative Layout Example

<RelativeLayout 
	android:layout_width="fill_parent" 
	android:layout_height="fill_parent" 
	xmlns:android="http://schemas.android.com/apk/res/android">
	<Button 
 		android:id="@+id/navigateBack"
 		android:text="Back"
 		android:textSize="20dip"
 		android:layout_width="wrap_content"
 		android:layout_height="wrap_content" 
	/>
	<TextView
   		android:id="@+id/homeTelephoneLabel"
   		android:text="Home Telephone"
   		android:textSize="20dip"
   		android:layout_width="wrap_content"
   		android:layout_height="wrap_content"
   		android:layout_below="@id/navigateBack" 
	/>
 …….
</RelativeLayout>

For a full list of Relative Layout Parameters see the link below.

🔗 RelativeLayout.LayoutParams

Table is another type of layout as the name suggests provides a way to lay graphical components out as rows and columns in a grid arrangement. The interface to some applications lends itself to this type of arrangement. The classic example here is the Dialer app in Android in which the keypad and the text pad is laid out in a grid format.

Example Table Layout

<TableLayout 
android:layout_width="fill_parent" 
android:layout_height="fill_parent" 
xmlns:android="http://schemas.android.com/apk/res/android">
	<TableRow>
		……….
	</TableRow>
	<TableRow>
		<TextView 
     			android:text="Home Telephone"
     			android:layout_width="wrap_content"
    			android:layout_height="wrap_content"
     			android:layout_column="1" 
   		 />
    		 <EditText
    			 android:id="@+id/editHomeTelephone"
     			android:width="100px"
     			android:layout_width="wrap_content"
     			android:layout_height="wrap_content" 
   		 />
		……………….

	</TableRow>

</Tablelayout>

ScrollView

This is a Layout container for a view hierarchy that can be scrolled by the user. This means that it can be larger than the physical display.

A ScrollView is a FrameLayout, meaning you should place one child in it containing the entire contents to scroll.

This child may itself be a layout manager with a complex hierarchy of objects. A child that is often used is a LinearLayout in a vertical orientation, presenting a vertical array of top-level items that the user can scroll through.

XML for ScrollView

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    tools:context=".ScrollTestActivity" >
    
    <LinearLayout
      	android:id="@+id/linearLayout2"
      	android:layout_width="fill_parent"
      	android:layout_height="wrap_content"
      	android:orientation="vertical" >
    	<TextView
       	 	android:layout_width="wrap_content"
        	android:layout_height="wrap_content"
        	android:text="@string/label1" 
       		android:textSize="40sp"
    	/>

	<!– etc. ->
    </LinearLayout>

</ScollView>

Portrait and landscape layouts need to be handled separately by your application

Include a Portrait layout and a Landscape layout

Handling Portrait and Landscape modes

Create 2 activity_main.xml files one for landscape mode and one for portrait mode and put these 2 activity_main.xml files into the res folder as shown below

/res/layout-land/activity_main.xml
/res/layout-port/activity_main.xml

Android Studio

Creating Separate Layouts for Landscape and Portrait

Make sure you are in “Project Files” view and not “Android” view

Directory name layout-land or layout-port

Resource Type layout

Detecting Orientation in code

public void onConfigurationChanges(Configuration newConfig)
{
		Configuration c = 
			getResources().getConfiguration();
		if (c.configuration == 
			Configuration.ORIENTATION_PORTRAIT)
		{
			// portrait
		}
		else if (c.configuration ==  
			 Configuration.ORIENTATION_LANDSCAPE)
		{
			// landscape
		}
}

Changing Orientation

The following screenshots outline how to switch modes when you are running the Android Emulator.

You can make use of the 2 rotate options shown on the right hand side of the emulator.

📷 Portrait view

📷 Landscape view

🔗 Layout Test Projects

Handling Events

“On Android, there's more than one way to intercept the events from a user's interaction with your application. When considering events within your user interface, the approach is to capture the events from the specific View object that the user interacts with. The View class provides the means to do so.”

On Android studio, there’s different ways to intercept with events when user interact with your application. The approach is to capture the events from a specific View object that the user interacts with within your user interface. This can be achieved by using the View class method.

There are several public callback methods within the view classes that are called by Android framework when an e/object is triggered within the user interfaces. For example, when a View method (such as a Button) is clicked, the onClick() is called on that object. And for this to work, you will need to extend the class and override the method and use the View class which contains a collection of nested interfaces called event listeners that are used to capture user inputs during interactions within the user interfaces.

Event Listener

“An event listener is an interface in the View class that contains a single callback method. These methods will be called by the Android framework when the View to which the listener has been registered is triggered by user interaction with the item in the UI.”1

onClick/onClickListener

onClick()From View.OnClickListener is called when the user either touches (when in touch mode), click the item or focuses upon the item with the navigation-keys or trackball and presses the suitable "enter" key or presses down on the trackball.

Click Events

Activity class implements OnClickListener interface

Implements the onClick method

SetOnClickListener for each interested object

onClick

public void onClick (View v)
{
	if (v == button3)
	{
		// do domething
	}	
}

Long Click

onLongClick()From View.OnLongClickListener. This is called when the user either touches and holds the item (when in touch mode), or focuses upon the item with the navigation-keys or trackball and presses and holds the suitable "enter" key or presses and holds down on the trackball (for one second).

OnLongClickListener/onLongClick

Activity class implements OnLongClickListener interface

Implements the onLongClick method

SetOnLongClickListener for each interested object

onLongClick

public boolean onLongClick (View v)
{
boolean status = false;
	if (v == button4)
	{
		// do domething
		status = true;
	}
	return status;
}

onTouch/OnTouchListener

Activity class implements OnTouchListener interface

Implements the onTouch method and returns true if event “consumed”

SetOnTouchListener for each interested object

onTouch

public boolean onTouch (View v)
{
boolean status = false;
	if (v == button3)
	{
		// do domething
		status = true;
	}
	return status;
}

1. http://developer.android.com/guide/topics/ui/ui-events.html

Parsing is when you analyse text by looking for sequences of tokens. The analysis is being carried out to determine the grammatical structure of the text. In our case we will be analysing XML text to “pick” out useful data.

XML Data

See XML Data for Assignment.

PullParser

Android supports the XML Pull Parser interface. The Pull Parser approach requires the developer to “look for” events such as:

Start of Document

End of Document

Start Tag

Etc.

PullParser Setup

XmlPullParserFactory factory = XmlPullParserFactory.newInstance();
factory.setNamespaceAware(true);
XmlPullParser xpp = factory.newPullParser();
xpp.setInput( new StringReader ( dataToParse ) );

Where dataToParse is a String object.

PullParser

Android supports the XML Pull Parser interface. There are a number of useful methods

getEventType()

getName()

next()

nextText()

PullParser

The XML Pull Parser approach generates events. It is these events that are of interest to the programmer who requires to extract information from the various tags in an XML document.

next() provides access to high level parsing events

nextText() provides the text if the current event is START_TAG

Note how next() is used in the examples

The current event state of the parser can be determined by calling the getEventType() method.

Initially, the parser is in the START_DOCUMENT state.

The method next() advances the parser to the next event. The int value returned from next determines the current parser state and is identical to the value returned from following calls to getEventType ().

The following event types are seen by next()

START_TAG An XML start tag was read.

TEXT Text content was read; the text content can be retrieved using the getText() method. (when in validating mode next() will not report ignorable whitespace, use nextToken() instead)

END_TAG An end tag was read

END_DOCUMENT No more events are available

Sample Code

XmlPullParserFactory factory = XmlPullParserFactory.newInstance();

         factory.setNamespaceAware(true);
         XmlPullParser xpp = factory.newPullParser();
         xpp.setInput( new StringReader ( "<foo>Hello World!</foo>" ) );
         int eventType = xpp.getEventType();
         while (eventType != XmlPullParser.END_DOCUMENT) {
          if(eventType == XmlPullParser.START_DOCUMENT) {
              System.out.println("Start document");
          } else if(eventType == XmlPullParser.START_TAG) {
              System.out.println("Start tag "+xpp.getName());
          } else if(eventType == XmlPullParser.END_TAG) {
              System.out.println("End tag "+xpp.getName());
          } else if(eventType == XmlPullParser.TEXT) {
              System.out.println("Text "+xpp.getText());
          }
          eventType = xpp.next();
         }
         System.out.println("End document")

Full Sample Code can be viewed here

Example

Let’s have a look at more complex example

XML String

Let’s assume that we need to “parse” the following XML string

<WidgetCollection>
     <Widget>
         <Bolt>M8 x 100</Bolt>
         <Nut>M8 Hex</Nut>
         <Washer>M8 Penny Washers</Washer>
     </Widget>
</WidgetCollection>

Information Required

The information that we want to extract from the code above is:

M8 x 100

M8 Hex

M8 Penny Washers

So we probably need a Widget class to store these data and a collection to store the widgets.

Widget Class

public class Widget 
{
private String bolt;
private String nut;
private String washer;
	
// Constructors plus get and set methods
}

Collection Class

import java.util.LinkedList;
private LinkedList<Widget> alist;
alist = new LinkedList<Widget> ();
  alist.add(aWidget); 

Retrieving the Data

public LinkedList<Widget> retrieveWidget() 
{
    return alist;
}

Class and Collection

You need to decide where to put:

the creation of the Widget class

the creation of the Collection

See lab exercise.

🔗 XmlPullParser