Graphical User Interfaces (GUI)

As discussed on week 2 presentation, the graphical user interfaces should have user interface (UI) components created specifically for users in order to allow them interact with the apps. Android studio has a range of built in UI modules such as menus, dialogs and UI components such as layout objects and UI controls. The aim of these built in UI features is to enable developers to easily create the state of the art graphical user interface (GUI).

Additionally, a range of standard platform resources can be used for designing and programming user interfaces. For instance, classes in the Java language can be used in android applications to shape apps behaviour by implementing various functionality of graphical components. Other than Java class files, XML data can also be used to declare screen layouts.

Graphical components

Mobile developers can create interactive graphical components such radio buttons, checkboxes, toggle buttons, sinner and custom graphics using internal images in formats such as PNG and JPEG that can be placed inside the “drawable” folder in the resources directory. Android developers can also tailor user interfaces when accessing apps in different screen sizes of their devices by providing an alternative versions of the application graphics e.g. low, medium and high resolution.
Selection controls

Selection controls allow users to select options. There are different types of selection controls but most commonly used ones are such as Radio buttons, checkboxes, toggle buttons and sinner.

Dialogs – Adding Interactions

The Android developers uses standard set of interaction classes either in Java or XML code for handling user input. Options menu can also be used in each activity in an application, which appears when users select the menu button on their devices. Developers can implement listener and handler functions for user interaction with specific application elements, for example, to implement an “onClick” listener for detecting and managing user interaction.

The Android developers uses standard set of interaction classes either in Java or XML code for handling user input. Options menu can also be used in each activity in an application, which appears when users select the menu button on their devices. Developers can implement listener and handler functions for user interaction with specific application elements, for example, to implement an “onClick” listener for detecting and managing user interaction.

Screens activities

Each screen in an Android app is normally represented within the application programming code as an Activity. This involves extending the Activity class within the class files for an application, instructing the user's device to treat the launch of the Activity as a new screen in the user interface. Activities can hold various visual and interactive elements and can implement standard methods for handling users pressing buttons and menu items. Developers can also pass data into Activities when they launch them, using methods of the Intent class.

Implementing Graphical Components in XML and Java Programming

: Radio Buttons; Check Boxes; Toggle Buttons; Spinner

Radio Button

Radio buttons are generally used in groups, usually have a 2 state button that are mutually exclusive.

An example of coding radio button using XML is as below:

XML

<RadioGroup 
    	android:id="@+id/colourRadioGroup"
    	android:layout_width="fill_parent"
    	android:layout_height="fill_parent"
    	android:layout_gravity="center">
    	<RadioButton
    		android:text="Red"
    		android:id="@+id/redRadio"
    	/>
    	<RadioButton
    		android:text="Green"
    		android:id="@+id/greenRadio"
    	/>
    	<RadioButton
    		android:text="Blue"
    		android:id="@+id/blueRadio"
    	/>
</RadioGroup>

Java

The same could be achieve using Java programming as shown in a code snippet below. So, first you will declare and initiate the selected radio button and set colour.

colourGroup = (RadioGroup)findViewById(R.id.colourRadioGroup);
redButton = (RadioButton)findViewById(R.id.redRadio);
greenButton = (RadioButton)findViewById(R.id.greenRadio);
blueButton = (RadioButton)findViewById(R.id.blueRadio);

// Set the initially selected radio button and 
// set the background accordingly
redButton.toggle(); mainView.setBackgroundColor(Color.RED);
redButton.setOnClickListener(this);
greenButton.setOnClickListener(this);
blueButton.setOnClickListener(this);            
colourGroup.setEnabled(true);

Testing in Java
There are many different ways where users can interact with apps e.g. clicking a radio button, toggle button, checkbox, spinner etc. When implementing these graphical interactive features such add and/or change your app’s functionality, the developers should create and run unit tests against them of it to make sure they behave as expected. One way of doing this is by using TODO auto-generated method which is a method generated automatically by android studio IDE as for developers to fill in the blank example is shown on a code snippet below, the java code was added to test the functionality of each button by setting different colour codes of each button. In this example, if the redButton clicked then set background colour to red else to set green if the greenButton is clicked.
```
public void onClick(View arg0) 
{
	// TODO Auto-generated method stub
	if (redButton.isChecked())
	{
	  mainView.setBackgroundColor(Color.RED);
	}
	else
		if (greenButton.isChecked())
		{
                  mainView.setBackgroundColor(Color.parseColor("#96ff96"));
		}

	//etc.
}
```
CheckBox

Check Boxes allow a user to make multiple selections rather than a single selection.

Sample code for implementing checkbox

XML
```
<CheckBox 
    	android:id="@+id/cb1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bread" 
	/>
<CheckBox 
    	android:id="@+id/cb2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Milk" 
	/>
```
Java Code
```
public void onClick(View arg0) 
{
   // Clear List
   shoppingList.setText("");
   // Update list for each box checked
   if (cb1.isChecked())
   {
     shoppingList.append(cb1.getText() + "\n");
   }
   if (cb2.isChecked())
   {
     shoppingList.append(cb2.getText() + "\n");
   }
   // etc.
}
```

Toggle Button

The ToggleButton Class provides:: a graphical component which displays checked/unchecked state; A “light” indicator; Default text of “ON” or “OFF”

XML Code for Toggle Button

<ToggleButton 
    android:id="@+id/colourToggleButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textOff="Colour Off"
    android:textOn="Colour On"
    android:layout_gravity="center"
/>

Handle in onClick

if (v == colourToggleButton)
{
  if (colourToggleButton.isChecked())
  {
     mainView.setBackgroundColor(Color.RED);
     toggleLabel.setTextColor(Color.BLACK);
     toggleLabel.setText("Colour On");
  }
  else
  {
     mainView.setBackgroundColor(Color.BLACK);
     toggleLabel.setTextColor(Color.WHITE);
     toggleLabel.setText("Colour Off");
  }
}

3.4 Spinner

Spinners provide the means to select one value from a set. In the Default state the Spinner displays the currently selected value. When the spinner is clicked a drop down list appears showing all the available values

Spinner

XML Code for implementing Spinner

<Spinner
    android:id="@+id/cSpinner"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:prompt="@string/cPrompt"
 />

arrays.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="colours">
        <item>RED</item>
        <item>GREEN</item>
        <item>BLUE</item>
    </string-array>   
</resources>

Java Code

ArrayAdapter adapter = ArrayAdapter.createFromResource(this, R.array.colours, android.R.layout.simple_spinner_item);
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
spinner1.setAdapter(adapter);        
spinner1.setOnItemSelectedListener(this);

Handling Selection

public void onItemSelected
(AdapterView<?> arg0, View arg1, int arg2,long arg3) 
{
  if (arg0 == spinner1)
  {
      String text = (String)spinner1.getSelectedItem();
      if (text.equals("RED"))
      {
	mainView.setBackgroundColor(Color.RED);
      }
     else
     // etc.

Adding Interaction
Dialogs

A dialog is usually a small window that appears in front of the current Activity. The underlying Activity loses focus and the dialog accepts all user interaction. Dialogs are normally used for notifications that should interrupt the user and to perform short tasks that directly relate to the application in progress (such as a progress bar or a login prompt).

Dialog Class

The Dialog class is the base class for creating dialogs. However, you typically should not instantiate a Dialog directly. Instead, you should use a subclasses.

Subclasses of Dialog

AlertDialog

ProgressDialog

DatePickerDialog

TimePickerDialog

You can also create a Custom Dialog of your own design.

Revist HelloAndroidWorld

Add an AlertDialog to this Application

Call the AlertDialog as a result of clicking the Exit Button

Dialog will ask user to confirm the intention was to quit the application

AlertDialog

An AlertDialog is an extension of the Dialog class. It is capable of constructing most dialog user interfaces and is the suggested dialog type. You should use it for dialogs that use any of the following features:

A title

A text message

One, two, or three buttons

A list of selectable items (with optional checkboxes or radio buttons)

Code for the OnClick method
```
AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setMessage("Are you sure you want to exit?")
       .setCancelable(false)
       .setPositiveButton("Yes", new DialogInterface.OnClickListener() {
           public void onClick(DialogInterface dialog, int id) {
                MyActivity.this.finish();
           }
       })
       .setNegativeButton("No", new DialogInterface.OnClickListener() {
           public void onClick(DialogInterface dialog, int id) {
                dialog.cancel();
           }
       });
AlertDialog alert = builder.create();
	alert.show();
```
XML and Java Code

See Android Studio Examples for XML and Java Code

Custom Dialogs

Sometimes “standard” Dialog layouts are not sufficient or appropriate for your application. In this case you may need to define your own layout for a Dialog using specific components.

Custom Dialog

You could create a new xml file to describe the layout of your dialog in the layout folder and associate an event with the activation of the dialog. As you can see from the following sample code.

Dialog xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" 
    android:id="@+id/dialogInfo">
    
<TextView 
    android:id="@+id/infoView"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text=""
    android:gravity="center"
    android:layout_gravity="center"
    />
    
<Button
    android:id="@+id/dialogButtonOK"
    android:layout_width="100px"
    android:layout_height="wrap_content"
    android:text=" Ok "
    android:layout_marginTop="5dp"
    android:layout_marginRight="5dp"
    android:layout_gravity="center"        
    />
</LinearLayout>

Dialog code

// Custom dialog setup
final Dialog dialog = new Dialog(this);
dialog.setContentView(R.layout.dialog_info);
dialog.setTitle("Custom Dialog Example");
 
// Set the custom dialog components as a TextView and Button component
TextView text = (TextView) dialog.findViewById(R.id.infoView);
text.setText(info);
Button dialogButton = (Button) dialog.findViewById(R.id.dialogButtonOK);
dialogButton.setOnClickListener(new OnClickListener() 
	{
		@Override
		public void onClick(View v) 
		{
			dialog.dismiss();
		}
}	);
 
dialog.show();

Changing Screens

Screen Navigation

On some occasions you will need to split the interface that you are developing across more than one screen, within the same Activity object. There are a number of ways to do this. A neat solution is to make use of the ViewSwitcher class as a container for your views.

ViewSwitcher

The idea then is to have 2 Ui’s within the same Activity. This means that you do not have to worry about passing contexts and intents between activities and the associated tasks of returning results.

Screen Navigation

The downside of using ViewSwitcher is that you can only use 2 screens. However, if you combine this with appropriate use of Dialogs and menus you will be able to provide a good level of interaction with your application. One approach could be having a splash screen which is a “main” screen for the application and then a dialog to display results etc.

The changes required to use the ViewSwitcher are actually straightforward. The main change is to make use of a ViewSwitcher for the top level view, investigate the code below to see what this means.

ViewSwitcher
```
<ViewSwitcher
          android:layout_width ="fill parent"
          etc.
>
</ViewSwitcher>
```
XML and Java Code

See project code in Eclipse
ViewFlipper

A View Flipper class is a more general approach that inherits from a Frame layout. This means that it can display a single item at a time.

However, that single item can be another View with its own layout arrangement, analyse the code below and discuss this with your peers.

ViewFlipper code
```
<ViewFlipper
       android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:id="@+id/flipview"
          
          Other "views" that can be flipped
          >
</ViewFlipper>
```
“Views” within a ViewFlipper have an inherant order 1,2, 3 etc. so you can move from View to View using:

showNext()

showPrevious()

from within the Java code. You can also “flip” to a specific View using:

flip.setDisplayedChild(indexOfView)

Where indexOfView is an int representing a valid view. You can find the index of a View if you do not know it by using:

int index = flip.indexOfChild(R.id.idofView) flip.setDisplayedChild(index);

Automatic Flipping

You can flip views automatically at a set time interval using:

flip.setFlipInterval(1000) // Every second

flip.setAutoStart(true);

Graphical User Interfaces (GUI)

Selection controls

Implementing Graphical Components in XML and Java Programming

Testing in Java

Toggle Button

3.4 Spinner

Adding Interaction

Custom Dialogs

Changing Screens

ViewFlipper