MobAppDev

UI Design & Development on

Android

Part 02Vladimir Kulyukin

www.vkedco.blogspot.com

Outline● Android UI Measurement Units● XML UI Design● Case Study: International Data Display Application

XML UI Specification UI Construction & Logic

UI Design & Development

Android UI Measurement Units● PIXEL – dot on screen● IN – inches● MM – millimeters● PT – point – 1/72 of 1 inch● DP – density independent pixel (DP is a unit on a 160 dpi

screen: 1 dp is 1 pixel on a 160 dpi screen)● DIP – synonym for DP● SP – scale-independent pixel, similar to DP but scalable by

users

DP vs SP

● DP has constant ratio to PX: DP = PX * RATIO● RATIO stays constant regardless of the device● SP has scalable ratio to PX: DP = PX * RATIO *

SCALE, where RATIO is constant but SCALE can be set by user

● Usage guideline: use SP for font sizes and DP/DIP for everything else

Declarative and Procedural UI Development

● Declarative development consists of specifying GUI element in some formal language (XML) and then attaching back end code to consume GUI events (clicks, scrolls, taps, etc.)

● Procedural/Programmatic development consists of coding everything in some programming language (e.g., java.swing.* or java.awt.*)

● Mixed development consists of designing all gadgets in XML and attach code to implement UI logic

XML-Based UI Design● The most important step to mastering XML-Based GUI design is to

relate visual GUIs with XML code that defines them● XML specs are used to construct GUI objects they specify via XML

inflation

● Why care about XML-Based GUI Design?● It is not just for Android:

Microsoft's Extensible Application Markup Language (XAML) Adobe's Flex Mozilla's XML User Interface Language (XUL)

XML Inflation<Button

android:id=”@+id/button_one”

style=”@style/my_button_style”android:layout_width=”wrap_content”

android:layout_height=”wrap_content”android:text=”@string/button_one_text”

/>

// XML inflation of the Button View defined aboveprotected Button mButtonOne = null;mButtonOne = (Button) findViewById(R.id.button_one);

XML Inflation<EditText

android:id="@+id/edTxtDate"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_weight="1"

android:background="@drawable/background_002"

android:clickable="false"

android:ems="10"

android:focusable="false"

android:textSize="30sp" >

</EditText>

// XML inflation of the EditText View defined above EditText mEdTxtDateDisplay = null;

mEdTxtDateDisplay = (EditText) this.findViewById(R.id.edTxtDate);

International Date Display Application

Android Ginger Bread sourceAndroid Jelly Bean source

App Specs● Develop an application that consists of one activity that displays three

buttons: one for US locale, one for Italy locale, and one for France locale

● A click on a button displays in the screen the current date according to the rules of the specific locale

● The app should use a vertical LinearLayout to arrange its components

● Dates should be displayed in an EditText● Buttons should be arranged in a horizontal LinearLayout● EditText and LinearLayout with buttons should have image

backgrounds

Sample Screenshots

Front Screen Click on US Click on IT Click on FR

Development Steps● UI XML Specification

Vertical LinearLayout EditText Horizontal LinearLayout Buttons

● UI Construction & Logic Date Formatting Button Click Consumption

UI XML Design

Activity UI Structure

UI: Vertical Linear Layout<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent” android:orientation="vertical" >

<EditText> … </EditText> <LinearLayout> <Button> … </Button> <Button> … </Button> <Button> … </Button> </lLinearLayout></LinearLayout>

UI: EditText<EditText

android:id="@+id/edTxtDate"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_weight="1"

android:background="@drawable/background_002"

android:ems="10"

android:inputType="none"

android:textSize="30sp" >

<requestFocus />

</EditText>

1) Create /res/drawable directory in your project2) Place background_002.jpg in /res/drawable

3) Press F5 to refresh the project

UI: Horizontal LinearLayout<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_weight="0.5"

android:background="@drawable/background_001" >

<Button />

<Button />

<Button />

</LinearLayout>

1) Create /res/drawable directory in your project2) Place background_001.jpg in /res/drawable

3) Press F5 to refresh the project

UI: Button Style in /res/values/styles.xml<resources xmlns:android="http://schemas.android.com/apk/res/android">

<style name="AppTheme" parent="android:Theme.Light" /> <!-- This the added button style definition --> <style name="my_button_style"> <item name="android:textSize">20sp</item> <item name="android:layout_width">wrap_content</item> <item name="android:layout_height">wrap_content</item> </style>

</resources>

UI: Button Texts in /res/values/strings.xml

<resources> <string name="app_name">International Date Display</string> <string name="hello_world">Hello world!</string> <string name="menu_settings">Settings</string> <string name="title_activity_inter_date_display">International Date Display Screen</string> <string name="btnUSTxt">US</string> <string name="btnITTxt">IT</string> <string name="btnFRTxt">FR</string></resources>

Define string constants for button texts in /res/values/strings.xml

UI: Buttons

<Button android:id="@+id/btnUS" style="@style/my_button_style" android:layout_gravity="left|center_vertical" android:layout_weight="1" android:text="@string/btnUSTxt" /><Button <!-- same properties as 1st button --> android:text="@string/btnITTxt" /><Button <!-- same properties as 1st button --> android:text="@string/btnFRTxt" />

XML is savedin /res/layout/activity_inter_date_display_act_jelly_bean.xml

UI Construction & Logic

UI Construction// Member Declarationprotected Button mBtnUS = null;protected Button mBtnIT = null;protected Button mBtnFR = null;protected EditText mEdTxtDateDisplay = null;

// Member Construction via XML InflationmEdTxtDateDisplay = (EditText) this.findViewById(R.id.edTxtDate);mBtnUS = (Button) this.findViewById(R.id.btnUS);mBtnIT = (Button) this.findViewById(R.id.btnIT);mBtnFR = (Button) this.findViewById(R.id.btnFR);

This is saved in /src/InterDataDisplayAct_JellyBean.java

Date Formatting: Java Imports● java.text.DateFormat

Abstract class for date/time formatting subclasses● java.text.SimpleDateFormat

Concrete class for formatting and parsing dates in locale-sensitive ways

● java.util.Date specific instant in time, with millisecond precision

● java.util.Locale Locale objects represent specific geographical, political, or

cultural regions

Date Formatting: UI Logic// Member Declaration

protected DateFormat mDateFormatUS = null;

protected DateFormat mDateFormatIT = null;

protected DateFormat mDateFormatFR = null;

// Member Construction

mDateFormatUS = SimpleDateFormat

.getDateInstance(SimpleDateFormat.LONG, Locale.US);

mDateFormatIT = SimpleDateFormat

.getDateInstance(SimpleDateFormat.LONG, Locale.ITALY);

mDateFormatFR = SimpleDateFormat

.getDateInstance(SimpleDateFormat.LONG, Locale.FRANCE);

// Run Time

String us_date = mDateFormatUS.format(new Date())

String it_date = mDateFormatIT.format(new Date())

String fr_date = mDateFormatFR.format(new Date())

This is saved in /src/InterDataDisplayAct_JellyBean.java

Button Click Consumptionimport android.view.View.OnClickListener;

public class InterDateDisplayAct extends Activity implements OnClickListener {

public void onCreate(Bundle savedInstanceState) {

mBtnUS.setOnClickListener(this); // set this object to be OnClickListener

mBtnIT.setOnClickListener(this); // set this object to be OnClickListener

mBtnFR.setOnClickListener(this); // set this object to be OnClickListener

}

public void onClick(View v) { // implementing onClick() of OnClickListener interface

int ID = v.getId();

switch ( ID ) {

case R.id.btnUS:

mEdTxtDateDisplay.setText(this.mDateFormatUS.format(new Date())); break;

case R.id.btnIT:

mEdTxtDateDisplay.setText(this.mDateFormatIT.format(new Date())); break;

case R.id.btnFR:

mEdTxtDateDisplay.setText(this.mDateFormatFR.format(new Date()));; break;

}}}

This is saved in /src/InterDataDisplayAct_JellyBean.java

What Happens if Locale.X is Not Defined?What happens if you want to display a date in some languagefor which your version of java.util.Locale has no binding?Suppose I want to display mydate in Russian.

Add Month Names to STRINGS.XML <string name="jan_ru">января</string>

<string name="feb_ru">февраля</string>

<string name="mar_ru">марта</string>

<string name="apr_ru">апреля</string>

<string name="may_ru">мая</string>

<string name="jun_ru">июня</string>

<string name="jul_ru">июля</string>

<string name="aug_ru">августа</string>

<string name="sept_ru">сентября</string>

<string name="oct_ru">октября</string>

<string name="nov_ru">ноября</string>

<string name="dec_ru">декабря</string>

Add Button Handling Logicvoid displayRUDate() {

Calendar cal = new GregorianCalendar();

int month = cal.get(Calendar.MONTH); int day_of_month =cal.get(Calendar.DAY_OF_MONTH);

int year = cal.get(Calendar.YEAR); String month_name = "";

switch ( month ) {

case 0: month_name = this.mRes.getString(R.string.jan_ru); break;

case 1: month_name = this.mRes.getString(R.string.feb_ru); break;

// other months

case 11: month_name = this.mRes.getString(R.string.dec_ru); break;

default: break;

}

this.mEdTxtDateDisplay.setText(day_of_month + " " + month_name + " " + year);

}

Add Button XML UI

<Button

android:id="@+id/btnRU"

style="@style/my_button_style"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="right|center_vertical"

android:layout_weight="1"

android:text="@string/btnRUTxt" />

Inflate & Attach an OnClickListener

mBtnRU = (Button) this.findViewById(R.id.btnRU);

mBtnRU.setOnClickListener(this);

// Remember to add this case to onClick()

case R.id.btnRU: displayRUDate(); break;