Mobile Application Development                         Lecture 04                    Vladimir Kulyukin             Departm...
Outline   ●       International Date Display Application          –   Vertical & Horizontal LinearLayout          –   Edit...
International Date Display Applicationhttp://www.youtube.com/vkedco   www.vkedco.blogspot.com
App Specs    ●        Develop an application that consists of one activity that        displays three buttons: one for US ...
Sample Screenshots      1                 2               3                 4http://www.youtube.com/vkedco   http://www.vk...
Development Steps    ●        UI XML Specification            – Vertical LinearLayout            –   EditText            –...
UI XML Specificationhttp://www.youtube.com/vkedco   www.vkedco.blogspot.com
Activity UI Structurehttp://www.youtube.com/vkedco   http://www.vkedco.blogspot.com
UI: Vertical Linear Layout                                <LinearLayout                                       android:layo...
UI: EditText                                <EditText                                    android:id="@+id/edTxtDate"      ...
UI: Horizontal LinearLayout                                <LinearLayout                                    android:layout...
UI: Button Style in /res/values/styles.xml      <resources        xmlns:android="http://schemas.android.com/apk/res/androi...
UI: Button Texts in /res/values/strings.xml   <resources>    <string name="app_name">International Date Display</string>  ...
UI: Buttons                                <Button                                       android:id="@+id/btnUS"          ...
UI Construction & Logichttp://www.youtube.com/vkedco   www.vkedco.blogspot.com
UI Construction        // Member Declaration        protected Button mBtnUS = null;        protected Button mBtnIT = null;...
Date Formatting: Java Imports    ●        java.text.DateFormat            – Abstract class for date/time formatting subcla...
Date Formatting: UI Logic     // Member Declaration     protected DateFormat mDateFormatUS = null;     protected DateForma...
Button Click Consumption     import android.view.View.OnClickListener;     public class InterDateDisplayAct extends Activi...
ScrollView    ●        ScrollView is used when a View is too or        may be too big to fit the screen    ●        Scroll...
Scrolling Jalal ad-Din Rumis Quoteshttp://www.youtube.com/vkedco   www.vkedco.blogspot.com
App Specs    ●        Develop an application that displays random quotes by Jalal        ad-Din Rumi    ●        The app s...
Activity UI Structurehttp://www.youtube.com/vkedco   http://www.vkedco.blogspot.com
Sample Screenshotshttp://www.youtube.com/vkedco   http://www.vkedco.blogspot.com
Activity UI Structure                                <ScrollView>                                  <LinearLayout>         ...
UI: Quotes in /res/values/strings.xml   <resources>     <string name="rumi_quote_01">Start a huge, foolish project, like  ...
UI Logic: Getting Strings from String Constants     private String getRumiQuote() {         int quote_num = 1 + mRand.next...
UI Logic: Getting Strings from String Constants   // Member variable declaration   EditText mEdTxtRumiQuoteArea_01 = null;...
UI Logic: Getting Strings from String Constants     private String getRumiQuote() {         int quote_num = 1 + mRand.next...
References   ●       http://developer.android.com/guide/practices/ui_guidelines/index.html   ●       http://www.w3schools....
Feedback      Bugs, errors to vladimir dot kulyukin at gmail dot comhttp://www.youtube.com/vkedco       www.vkedco.blogspo...
Upcoming SlideShare
Loading in...5
×

Mobile Application Development: Lecture 04

570

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
570
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mobile Application Development: Lecture 04

  1. 1. Mobile Application Development Lecture 04 Vladimir Kulyukin Department of Computer Science Utah State Universityhttp://www.youtube.com/vkedco www.vkedco.blogspot.com
  2. 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. 3. International Date Display Applicationhttp://www.youtube.com/vkedco www.vkedco.blogspot.com
  4. 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. 5. Sample Screenshots 1 2 3 4http://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  6. 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. 7. UI XML Specificationhttp://www.youtube.com/vkedco www.vkedco.blogspot.com
  8. 8. Activity UI Structurehttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  9. 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. 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. 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. 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. 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. 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. 15. UI Construction & Logichttp://www.youtube.com/vkedco www.vkedco.blogspot.com
  16. 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. 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. 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. 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. 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. 21. Scrolling Jalal ad-Din Rumis Quoteshttp://www.youtube.com/vkedco www.vkedco.blogspot.com
  22. 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. 23. Activity UI Structurehttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  24. 24. Sample Screenshotshttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  25. 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. 26. UI: Quotes in /res/values/strings.xml <resources> <string name="rumi_quote_01">Start a huge, foolish project, like Noah;…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. 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. 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. 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. 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. 31. Feedback Bugs, errors to vladimir dot kulyukin at gmail dot comhttp://www.youtube.com/vkedco www.vkedco.blogspot.com

×