• Save
Mobile Application Development: Lecture 04
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
856
On Slideshare
547
From Embeds
309
Number of Embeds
21

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 309

http://vkedco.blogspot.com 142
http://www.vkedco.blogspot.com 122
http://vkedco.blogspot.in 7
http://vkedco.blogspot.co.uk 4
http://vkedco.blogspot.com.br 4
http://www.vkedco.blogspot.in 4
http://www.blogger.com 3
http://www.vkedco.blogspot.nl 3
http://vkedco.blogspot.fr 3
http://vkedco.blogspot.com.ar 2
http://vkedco.blogspot.se 2
http://vkedco.blogspot.fi 2
http://www.vkedco.blogspot.co.uk 2
http://www.vkedco.blogspot.kr 2
http://vkedco.blogspot.nl 1
http://www.vkedco.blogspot.com.au 1
http://vkedco.blogspot.pt 1
http://www.vkedco.blogspot.co.il 1
http://vkedco.blogspot.it 1
http://vkedco.blogspot.hu 1
http://vkedco.blogspot.de 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Mobile Application Development Lecture 04 Vladimir Kulyukin Department of Computer Science Utah State Universityhttp://www.youtube.com/vkedco www.vkedco.blogspot.com
  • 2. Outline ● International Date Display Application – Vertical & Horizontal LinearLayout – EditText and Button – UI Construction & Logic ● ScrollView: What to do when a View does not fit the screen? ● Scrolling Jalal ad-Din Rumis Quoteshttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  • 3. International Date Display Applicationhttp://www.youtube.com/vkedco www.vkedco.blogspot.com
  • 4. 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 backgroundshttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  • 5. Sample Screenshots 1 2 3 4http://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  • 6. Development Steps ● UI XML Specification – Vertical LinearLayout – EditText – Horizontal LinearLayout – Buttons ● UI Construction & Logic – Date Formatting – Button Click Consumptionhttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  • 7. UI XML Specificationhttp://www.youtube.com/vkedco www.vkedco.blogspot.com
  • 8. Activity UI Structurehttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  • 9. 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>http://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  • 10. 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 project 2) Place background_002.jpg in /res/drawable 3) Press F5 to refresh the projecthttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  • 11. 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 project 2) Place background_001.jpg in /res/drawable 3) Press F5 to refresh the projecthttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  • 12. 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>http://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  • 13. 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.xmlhttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  • 14. 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" />http://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  • 15. UI Construction & Logichttp://www.youtube.com/vkedco www.vkedco.blogspot.com
  • 16. UI Construction // Member Declaration protected Button mBtnUS = null; protected Button mBtnIT = null; protected Button mBtnFR = null; protected EditText mEdTxtDateDisplay = null; // Member Construction via XML Inflation mEdTxtDateDisplay = (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);http://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  • 17. 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 regionshttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  • 18. 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())http://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  • 19. Button Click Consumption import 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; }}}http://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  • 20. ScrollView ● ScrollView is used when a View is too or may be too big to fit the screen ● ScrollView can contain only one View but that View can be a layout with other Views ● ScrollView can contain vertical and/or horizontal scrollbarshttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  • 21. Scrolling Jalal ad-Din Rumis Quoteshttp://www.youtube.com/vkedco www.vkedco.blogspot.com
  • 22. App Specs ● Develop an application that displays random quotes by Jalal ad-Din Rumi ● The app should have a ScrollView with a vertical LinearLayout ● The vertical LinearLayout should have two EditTexts and three Buttons ● Buttons should be arranged in a horizontal LinearLayout ● EditTexts should be scrollablehttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  • 23. Activity UI Structurehttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  • 24. Sample Screenshotshttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  • 25. Activity UI Structure <ScrollView> <LinearLayout> <EditText android:id="@+id/edTxtRumiQuoteArea_01" /> <EditText android:id="@+id/edTxtRumiQuoteArea_02"/> <LinearLayout> <Button android:id="@+id/btnQuote" /> <Button android:id="@+id/btnClear01" /> <Button android:id="@+id/btnClear02" /> </LinearLayout> </LinearLayout> </ScrollView>http://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  • 26. UI: Quotes in /res/values/strings.xml <resources> <string name="rumi_quote_01">Start a huge, foolish project, like Noah;&#8230;n it makes no difference what people think of you.</string> <string name="rumi_quote_02">Why do you stay in prison when the door is so wide open?</string> <string name="rumi_quote_03">Dont grieve. Anything you lose comes round in another form.</string> <string name="rumi_quote_04">As you start to walk on the way, the way appears.</string> <string name="rumi_quote_05">The wound is the place where the Light enters you.</string> <string name="rumi_quote_06">Wear gratitude like a cloak and it will feed every corner of you life.</string> <string name="rumi_quote_07">If you are irritated by every rub, how will you be polished?</string> </resources>http://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  • 27. UI Logic: Getting Strings from String Constants private String getRumiQuote() { int quote_num = 1 + mRand.nextInt(7); String quote = ""; switch ( quote_num ) { case 1: quote = this.getResources().getString(R.string.rumi_quote_01); break; case 2: quote = this.getResources().getString(R.string.rumi_quote_02); break; case 3: quote = this.getResources().getString(R.string.rumi_quote_03); break; case 4: quote = this.getResources().getString(R.string.rumi_quote_04); break; case 5: quote = this.getResources().getString(R.string.rumi_quote_05); break; case 6: quote = this.getResources().getString(R.string.rumi_quote_06); break; case 7: quote = this.getResources().getString(R.string.rumi_quote_07); break; } return quote; }http://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  • 28. UI Logic: Getting Strings from String Constants // Member variable declaration EditText mEdTxtRumiQuoteArea_01 = null; EditText mEdTxtRumiQuoteArea_02 = null; // Member variable construction via XML inflation mEdTxtRumiQuoteArea_01 = (EditText) findViewById(R.id.edTxtRumiQuoteArea_01); mEdTxtRumiQuoteArea_02 = (EditText) findViewById(R.id.edTxtRumiQuoteArea_02); // Setting texts of EditTexts private void fillInQuoteArea_01() { for(int i = 0; i < 15; i++) mEdTxtRumiQuoteArea_01.append("n" + getRumiQuote() + "n"); } private void fillInQuoteArea_02() { for(int i = 0; i < 15; i++) mEdTxtRumiQuoteArea_02.append("n" + getRumiQuote() + "n"); }http://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  • 29. UI Logic: Getting Strings from String Constants private String getRumiQuote() { int quote_num = 1 + mRand.nextInt(7); String quote = ""; switch ( quote_num ) { case 1: quote = this.getResources().getString(R.string.rumi_quote_01); break; case 2: quote = this.getResources().getString(R.string.rumi_quote_02); break; case 3: quote = this.getResources().getString(R.string.rumi_quote_03); break; case 4: quote = this.getResources().getString(R.string.rumi_quote_04); break; case 5: quote = this.getResources().getString(R.string.rumi_quote_05); break; case 6: quote = this.getResources().getString(R.string.rumi_quote_06); break; case 7: quote = this.getResources().getString(R.string.rumi_quote_07); break; } return quote; }http://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  • 30. References ● http://developer.android.com/guide/practices/ui_guidelines/index.html ● http://www.w3schools.com/xml/ ● en.wikipedia.org/wiki/Rumi ● http://www.youtube.com/vkedco ● Source code for International Display App is available here.http://www.youtube.com/vkedco www.vkedco.blogspot.com
  • 31. Feedback Bugs, errors to vladimir dot kulyukin at gmail dot comhttp://www.youtube.com/vkedco www.vkedco.blogspot.com