Android GUI examples

by Ezu on Thursday, June 3rd 2010 No Comment

in Android, Code, Design Tags: Android, Code, Java, Programming, Smartphones

In previous articles I showed how you can use XML to create UI, and considering that before starting to create the interface you need to know the objects and the position of the objects in the screen, you need to know the characteristics of XML code. In the following I present some examples of how to use the attributes and the objects to build the graphical interface.

How to display a custom dialog in your Android application

In this article you can read how to make a custom dialog/popup window. Sometimes, it’s better to make your own dialog, because this way, you can display whatever you want. First, make your own layout, with the needed elements. In the example it used two buttons, a textview inside a scrollview, and an imageview.

1.<?xml version=”1.0″ encoding=”utf-8″?>

2.<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”

3.android:layout_width=”wrap_content” android:layout_height=”wrap_content”>

5.<ImageView android:id=”@+id/ImageView01″

6.android:layout_width=”wrap_content” android:layout_height=”wrap_content”

7.android:layout_centerHorizontal=”true” />

9.<ScrollView android:id=”@+id/ScrollView01″

10.android:layout_width=”wrap_content” android:layout_below=”@+id/ImageView01″

11.android:layout_height=”200px”>

12.

13.<TextView android:text=”@+id/TextView01″ android:id=”@+id/TextView01″

14.android:layout_width=”wrap_content” android:layout_height=”wrap_content” />

15.

16.</ScrollView>

17.

18.<Button android:id=”@+id/Button01″ android:layout_below=”@id/ScrollView01″

19.android:layout_width=”wrap_content” android:layout_height=”wrap_content”

20.android:layout_centerHorizontal=”true” android:text=”Cancel” />

21. </RelativeLayout>

A simple calculator

A simple calculator which will also be able to Save the results of calculations(SR Button) and users will be able to view what have been stored(Show Saved Data Button).

Android has provided a XML_Based Mechanism for designing GUI, you define your XML file and then bind it to an activity, that activity will interpret XML files into android components.

A part of the code:

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:orientation=”vertical”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”>
<TextView android:id=”@+id/note”
android:maxLines=”1″
android:minLines=”1″
android:layout_marginTop=”2dip”
android:layout_width=”wrap_content”
android:ems=”25″
android:layout_height=”wrap_content”
android:autoText=”true”
android:capitalize=”sentences”
android:singleLine=”true”
android:cursorVisible=”true”
android:layout_gravity=”center_vertical|center_horizontal|center”
android:layout_margin=”10px”
android:padding=”5px”
android:background=”@color/white”
android:textColor=”@color/black”/>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:orientation=”horizontal”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_gravity=”center_vertical|center_horizontal|center”>
<Button android:id=”@+id/one”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”@string/number_One”
android:layout_gravity=”center_horizontal”
android:onClick=”oneClicked”
android:minWidth=”70px”/>
<Button android:id=”@+id/two”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”@string/number_Two”
android:layout_gravity=”center_horizontal”
android:onClick=”twoClicked”
android:minWidth=”70px”/>
<Button android:id=”@+id/three”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”@string/number_Three”
android:layout_gravity=”center_horizontal”
android:onClick=”threeClicked”
android:minWidth=”70px”/>
<Button android:id=”@+id/devide”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”@string/devide_sign”
android:layout_gravity=”center_horizontal”
android:minWidth=”70px”/>
</LinearLayout>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:orientation=”horizontal”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_gravity=”center_vertical|center_horizontal|center”>
<Button android:id=”@+id/four”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”@string/number_Four”
android:layout_gravity=”center_horizontal”
android:onClick=”fourClicked”
android:minWidth=”70px”/>
<Button android:id=”@+id/five”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”@string/number_Five”
android:layout_gravity=”center_horizontal”
android:onClick=”fiveClicked”
android:minWidth=”70px”/>
<Button android:id=”@+id/six”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”@string/number_Six”
android:layout_gravity=”center_horizontal”
android:onClick=”sixClicked”
android:minWidth=”70px”/>
<Button android:id=”@+id/multiply”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”@string/multiply_sign”
android:layout_gravity=”center_horizontal”
android:minWidth=”70px”/>
</LinearLayout>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:orientation=”horizontal”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_gravity=”center_vertical|center_horizontal|center”>
<Button android:id=”@+id/seven”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”@string/number_Seven”
android:layout_gravity=”center_horizontal”
android:onClick=”sevenClicked”
android:minWidth=”70px”/>
<Button android:id=”@+id/eight”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”@string/number_Eight”
android:layout_gravity=”center_horizontal”
android:onClick=”eightClicked”
android:minWidth=”70px”/>
<Button android:id=”@+id/nine”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”@string/number_Nine”
android:layout_gravity=”center_horizontal”
android:onClick=”nineClicked”
android:minWidth=”70px”/>
<Button android:id=”@+id/subtract”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”@string/subtract_sign”
android:layout_gravity=”center_horizontal”
android:minWidth=”70px”/>
</LinearLayout>

Using JSON in Android

JSON is based on a subset of the JavaScript language and like XML, is a format designed to organize data. It is less verbose than XML and has a very simple syntax. We discuss JSON here in this article, but you may also care to have a look at http://json.org.

JSON can store “objects” and ordered lists of objects. An “object” may be a string or a number, or even a list of objects — in other words, you can nest JSON objects within one another to an arbitrary depth.

String staticObject = “{\”firstname\”:\”Steve\”,\”lastname\”:\”Jobs\”,\”cellphones\”:\”0\”}”;
void buildObject()
{
try
{
obj = new JSONObject(staticObject);
String x = obj.get(“firstname”).toString() + ” ” + obj.get(“lastname”).toString() + ” has ” + obj.getInt(“cellphones”) + ” Android phones.”;
setStatus(x);
}
catch (JSONException je)
{
setStatus(“Error occured ” + je.getMessage());
}
}
void setStatus(String x)
{
TextView tv = (TextView) findViewById(R.id.txtStatus);
tv.setText(x);
}

Android GUI examples

This is an overview of Android View controls that you may put in your android app. The easiest and recommended way is to put the controls in the layout xml file. But some components are more advanced and needs extra Java classes like implementation of adapter classes to control the data.

Exploring Android LinearLayout And RelativeLayout

LinearLayout

The LinearLayout is the most simple layout available in Android. A LinearLayout organizes layout components in a linear fashion horizontally or vertically. Create a new Android project TestBasicLayout in Eclipse to develop in.

Setup of Layout XML file

Android stores layouts in XML files located in the res/layouts/ directory of the project. All projects come with a default LinearLayout that displays a simple hello world message.

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:orientation=”vertical”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
>
<TextView
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”@string/hello”
/>
<TextView
android:id=”@+id/black_on_red”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:background=”#ff0000″
android:textColor=”#000000″
android:text=”black on red”
/>
<TextView
android:id=”@+id/update_me”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:background=”#00ff00″
android:textColor=”#000000″
android:text=”@string/update_text”
/>
</LinearLayout>

How to disable a button on an appwidget

We want to have two buttons on the widget, a stop and a start button in order to stop and start some kind of functionality. Once we have started it, we can not start it again, until we stopped it and vice verse, so we want to disable the button which can not be used right now.

1.<Button android:id=”@+id/startbutton” android:text=”Start” android:visibility=”visible”></Button>

2.<Button android:id=”@+id/startbutton_disabled” android:text=”Start” android:clickable=”false” android:textColor=”#999999″ android:visibility=”gone”></Button>

4.<Button android:id=”@+id/stopbutton” android:text=”Stop” android:visibility=”gone”></Button>

5.<Button android:id=”@+id/stopbutton_disabled” android:text=”Stop” android:clickable=”false” android:textColor=”#999999″ android:visibility=”visible”></Button>

Android layout with square buttons

Four square buttons on the screen – each of those using half of the screen with/screen height (whichever is smaller). Independent of screen size/resolution.

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:orientation=”vertical” android:layout_width=”fill_parent”
android:layout_height=”fill_parent”>
<LinearLayout android:layout_width=”fill_parent”
android:layout_height=”wrap_content”>
<Button android:layout_height=”wrap_content” style=”@style/CKMainButton”
android:layout_width=”fill_parent” android:text=”@string/sights”
android:id=”@+id/ApplicationMainSight” android:layout_toLeftOf=”@+id/ApplicationMainEvent”></Button>
<Button android:layout_height=”wrap_content” style=”@style/CKMainButton”
android:layout_width=”fill_parent” android:text=”@string/sights”
android:id=”@+id/ApplicationMainSight” android:layout_toLeftOf=”@+id/ApplicationMainEvent”></Button>
</LinearLayout>
<LinearLayout android:layout_width=”fill_parent”
android:layout_height=”wrap_content”>
<Button android:layout_height=”wrap_content” style=”@style/CKMainButton”
android:layout_weight=”1″ android:layout_width=”fill_parent”
android:text=”@string/usergenerated” android:id=”@+id/ApplicationMainUserGenerated”></Button>
<Button android:layout_height=”wrap_content” style=”@style/CKMainButton”
android:layout_weight=”1″ android:layout_width=”fill_parent”
android:text=”@string/tours” android:id=”@+id/ApplicationMainTour”></Button>
</LinearLayout>
</LinearLayout>

Switching screens in an Activity with animations

In this post I’ll show you how to add animations when trying to switch between screens. Usually when you switch between screens it’s a direct “poof” and the new screen appears in a very un-graceful way. The SDK offers a bunch of easy-to-use animations, and I’ll show you how to use them here.

I tried doing animations on the opening and closing of activities, but I haven’t figured that out yet fully. So instead, I will show you how to use animations when switching on objects/layers inside the same activity. It will still look like you are switching screens, but all the layout data will be in one single XML. If we were to switch between activities, each activity would have had (usually) its own layout XML.

package com.warriorpoint.taxman3;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.AnimationUtils;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.Spinner;
import android.widget.ViewFlipper;
public class Activity1 extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Set main.XML as the layout for this Activity
setContentView(R.layout.main);
// Add a few countries to the spinner
Spinner spinnerCountries = (Spinner) findViewById(R.id.spinner_country);
ArrayAdapter countryArrayAdapter = new ArrayAdapter(this,
android.R.layout.simple_spinner_dropdown_item,
new String[] { “Canada”, “USA” });
spinnerCountries.setAdapter(countryArrayAdapter);
// Set the listener for Button_Next, a quick and dirty way to create a listener
Button buttonNext = (Button) findViewById(R.id.Button_next);
buttonNext.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
// Get the ViewFlipper from the layout
ViewFlipper vf = (ViewFlipper) findViewById(R.id.details);
// Set an animation from res/anim: I pick push left in
vf.setAnimation(AnimationUtils.loadAnimation(view.getContext(), R.anim.push_left_in));
vf.showNext();
}
});
// Set the listener for Button_Previous, a quick and dirty way to create a listener
Button buttonPrevious = (Button) findViewById(R.id.Button_previous);
buttonPrevious.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
// Get the ViewFlipper from the layout
ViewFlipper vf = (ViewFlipper) findViewById(R.id.details);
// Set an animation from res/anim: I pick push left out
vf.setAnimation(AnimationUtils.loadAnimation(view.getContext(), R.anim.push_left_out));
vf.showPrevious();
}
});
}
}

Adding button action and reading Text Box

<?xml version=”1.0″ encoding=”utf-8″?>
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”>
<TextView
android:id=”@+id/label”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”Type your name here:”/>
<EditText
android:id=”@+id/entry”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:background=”@android:drawable/editbox_background”
android:layout_below=”@id/label”/>
<Button
android:id=”@+id/ok”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_below=”@id/entry”
android:layout_alignParentRight=”true”
android:layout_marginLeft=”10dip”
android:text=”OK” />

Simple TableLayout in Android

Coming from Web development background, TableLayout is probably the easiest to understand. TableLayout in Android is the same as table tag on HTML. Here is an example of it: