Upload
vladimir-kulyukin
View
201
Download
3
Tags:
Embed Size (px)
Citation preview
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;