4-User Interface Basics CSNB544 Mobile Application Development Thanks to Utexas Austin.
-
Upload
elinor-eaton -
Category
Documents
-
view
224 -
download
0
Transcript of 4-User Interface Basics CSNB544 Mobile Application Development Thanks to Utexas Austin.
![Page 1: 4-User Interface Basics CSNB544 Mobile Application Development Thanks to Utexas Austin.](https://reader035.fdocuments.in/reader035/viewer/2022062806/5697bfdb1a28abf838cb099b/html5/thumbnails/1.jpg)
4-User Interface Basics
CSNB544 Mobile Application Development
Thanks to Utexas Austin
![Page 2: 4-User Interface Basics CSNB544 Mobile Application Development Thanks to Utexas Austin.](https://reader035.fdocuments.in/reader035/viewer/2022062806/5697bfdb1a28abf838cb099b/html5/thumbnails/2.jpg)
User Interface Elements• View–Control–ViewGroup• Layout• Widget (Compound Control)
• Many pre built Views–Button, CheckBox, RadioButton– TextView, EditText, ListView–Can be customized by extending and
overriding onDraw()
![Page 3: 4-User Interface Basics CSNB544 Mobile Application Development Thanks to Utexas Austin.](https://reader035.fdocuments.in/reader035/viewer/2022062806/5697bfdb1a28abf838cb099b/html5/thumbnails/3.jpg)
XML UI Configuration• Layouts can specify UI elements
(provided and custom)• res/layout• "Design by Declaration"
![Page 4: 4-User Interface Basics CSNB544 Mobile Application Development Thanks to Utexas Austin.](https://reader035.fdocuments.in/reader035/viewer/2022062806/5697bfdb1a28abf838cb099b/html5/thumbnails/4.jpg)
Layouts• Layouts are subclasses of ViewGroup• FrameLayout– simplest type of layout object–fill with a single object (such as a picture)
that can be switched in and out– child elements pinned to top left corner of
screen and cannot be move– adding a new element / child draws over
the last one
![Page 5: 4-User Interface Basics CSNB544 Mobile Application Development Thanks to Utexas Austin.](https://reader035.fdocuments.in/reader035/viewer/2022062806/5697bfdb1a28abf838cb099b/html5/thumbnails/5.jpg)
LinearLayout• aligns child elements
(such as buttons, edit text boxes, pictures, etc.) in a single direction
• orientation attribute defines direction:– android:orientation="vertical"
![Page 6: 4-User Interface Basics CSNB544 Mobile Application Development Thanks to Utexas Austin.](https://reader035.fdocuments.in/reader035/viewer/2022062806/5697bfdb1a28abf838cb099b/html5/thumbnails/6.jpg)
Gravity• Child element's
gravity attribute–where to position
in the outer container
right
center
![Page 7: 4-User Interface Basics CSNB544 Mobile Application Development Thanks to Utexas Austin.](https://reader035.fdocuments.in/reader035/viewer/2022062806/5697bfdb1a28abf838cb099b/html5/thumbnails/7.jpg)
Weight• layout_weight attribute– "importance" of a view– default = 0– if set > 0 takes up more
of parent space• BTW, scale emulator
Run -> Run Configurations -> target -> command line options "-scale 0.7
![Page 8: 4-User Interface Basics CSNB544 Mobile Application Development Thanks to Utexas Austin.](https://reader035.fdocuments.in/reader035/viewer/2022062806/5697bfdb1a28abf838cb099b/html5/thumbnails/8.jpg)
Another Weight Examplesbutton and bottom edit text weight of 2
button weight 1 and bottom edit text weight of 2
![Page 9: 4-User Interface Basics CSNB544 Mobile Application Development Thanks to Utexas Austin.](https://reader035.fdocuments.in/reader035/viewer/2022062806/5697bfdb1a28abf838cb099b/html5/thumbnails/9.jpg)
LinearLayout - Horizontal Orientation
• padding• background color• margins
![Page 10: 4-User Interface Basics CSNB544 Mobile Application Development Thanks to Utexas Austin.](https://reader035.fdocuments.in/reader035/viewer/2022062806/5697bfdb1a28abf838cb099b/html5/thumbnails/10.jpg)
TableLayout• rows and columns• rows normally
TableRows• TableRows contain
other elements such as buttons, text, etc.
![Page 11: 4-User Interface Basics CSNB544 Mobile Application Development Thanks to Utexas Austin.](https://reader035.fdocuments.in/reader035/viewer/2022062806/5697bfdb1a28abf838cb099b/html5/thumbnails/11.jpg)
RelativeLayout• children specify position relative to
parent or to each other (specified by ID)• First element listed is placed in "center" • other elements placed based on position
to other elements
![Page 12: 4-User Interface Basics CSNB544 Mobile Application Development Thanks to Utexas Austin.](https://reader035.fdocuments.in/reader035/viewer/2022062806/5697bfdb1a28abf838cb099b/html5/thumbnails/12.jpg)
RelativeLayout XML
![Page 13: 4-User Interface Basics CSNB544 Mobile Application Development Thanks to Utexas Austin.](https://reader035.fdocuments.in/reader035/viewer/2022062806/5697bfdb1a28abf838cb099b/html5/thumbnails/13.jpg)
RelativeLayout XML
![Page 14: 4-User Interface Basics CSNB544 Mobile Application Development Thanks to Utexas Austin.](https://reader035.fdocuments.in/reader035/viewer/2022062806/5697bfdb1a28abf838cb099b/html5/thumbnails/14.jpg)
Other Layouts - GridView• Two Dimensional
Scrollable Grid• Items inserted into layout
via a ListAdapter
![Page 15: 4-User Interface Basics CSNB544 Mobile Application Development Thanks to Utexas Austin.](https://reader035.fdocuments.in/reader035/viewer/2022062806/5697bfdb1a28abf838cb099b/html5/thumbnails/15.jpg)
Other Layouts - TabLayout• Uses a TabHost and
TabWidget• Swap between views in
same activity or switch between different activities
![Page 16: 4-User Interface Basics CSNB544 Mobile Application Development Thanks to Utexas Austin.](https://reader035.fdocuments.in/reader035/viewer/2022062806/5697bfdb1a28abf838cb099b/html5/thumbnails/16.jpg)
Other Layouts - ListView• Creates a list of
scrollable items• Items added via a
ListAdapter as in GridView
![Page 17: 4-User Interface Basics CSNB544 Mobile Application Development Thanks to Utexas Austin.](https://reader035.fdocuments.in/reader035/viewer/2022062806/5697bfdb1a28abf838cb099b/html5/thumbnails/17.jpg)
Other Views - Layouts• Gallery– horizontal scrolling display of images from a list
• SurfaceView–provide access to a "drawing" surface.
Intended to draw pixels, not display other views / widgets
![Page 18: 4-User Interface Basics CSNB544 Mobile Application Development Thanks to Utexas Austin.](https://reader035.fdocuments.in/reader035/viewer/2022062806/5697bfdb1a28abf838cb099b/html5/thumbnails/18.jpg)
Concrete Example• Tip Calculator• What kind of layout
to use?• Widgets:– TextView– EditText– SeekBar
![Page 19: 4-User Interface Basics CSNB544 Mobile Application Development Thanks to Utexas Austin.](https://reader035.fdocuments.in/reader035/viewer/2022062806/5697bfdb1a28abf838cb099b/html5/thumbnails/19.jpg)
TextViews
![Page 20: 4-User Interface Basics CSNB544 Mobile Application Development Thanks to Utexas Austin.](https://reader035.fdocuments.in/reader035/viewer/2022062806/5697bfdb1a28abf838cb099b/html5/thumbnails/20.jpg)
EditText
All but top EditText areuneditable
Alternative?TextViews?
![Page 21: 4-User Interface Basics CSNB544 Mobile Application Development Thanks to Utexas Austin.](https://reader035.fdocuments.in/reader035/viewer/2022062806/5697bfdb1a28abf838cb099b/html5/thumbnails/21.jpg)
SeekBar
![Page 22: 4-User Interface Basics CSNB544 Mobile Application Development Thanks to Utexas Austin.](https://reader035.fdocuments.in/reader035/viewer/2022062806/5697bfdb1a28abf838cb099b/html5/thumbnails/22.jpg)
Layout• TableLayout
row 0row 1
row 2
row 3row 4
row 5
![Page 23: 4-User Interface Basics CSNB544 Mobile Application Development Thanks to Utexas Austin.](https://reader035.fdocuments.in/reader035/viewer/2022062806/5697bfdb1a28abf838cb099b/html5/thumbnails/23.jpg)
Layout Attributes
• android:background–#RGB, #ARGB, #RRGGBB, #AARRGGBB– can place colors in res/values/colors.xml
![Page 24: 4-User Interface Basics CSNB544 Mobile Application Development Thanks to Utexas Austin.](https://reader035.fdocuments.in/reader035/viewer/2022062806/5697bfdb1a28abf838cb099b/html5/thumbnails/24.jpg)
Color Resources
• Good Resource / W3C colors–http://tinyurl.com/6py9huk
![Page 25: 4-User Interface Basics CSNB544 Mobile Application Development Thanks to Utexas Austin.](https://reader035.fdocuments.in/reader035/viewer/2022062806/5697bfdb1a28abf838cb099b/html5/thumbnails/25.jpg)
StretchColumns
• columns 0 indexed• columns 1, 2, 3 stretch to fill layout width• column 0 wide as widest element, plus
any padding for that element
![Page 26: 4-User Interface Basics CSNB544 Mobile Application Development Thanks to Utexas Austin.](https://reader035.fdocuments.in/reader035/viewer/2022062806/5697bfdb1a28abf838cb099b/html5/thumbnails/26.jpg)
Initial UI• Done via some Drag
and Drop, Outline view, and editing XML
• Demo outline view–properties
![Page 27: 4-User Interface Basics CSNB544 Mobile Application Development Thanks to Utexas Austin.](https://reader035.fdocuments.in/reader035/viewer/2022062806/5697bfdb1a28abf838cb099b/html5/thumbnails/27.jpg)
Changes to UI• Outline multiple select
properties– all TextViews' textColor set to
black #000000• change column for %DD labels
• use center gravity for components
![Page 28: 4-User Interface Basics CSNB544 Mobile Application Development Thanks to Utexas Austin.](https://reader035.fdocuments.in/reader035/viewer/2022062806/5697bfdb1a28abf838cb099b/html5/thumbnails/28.jpg)
Changes to UI• change bill total and
seekbar to span more columns
• gravity and padding for text in column 0
• align text with seekBar• set seekBar progress to 18• set seekBar focusable to
false - keep keyboard on screen
![Page 29: 4-User Interface Basics CSNB544 Mobile Application Development Thanks to Utexas Austin.](https://reader035.fdocuments.in/reader035/viewer/2022062806/5697bfdb1a28abf838cb099b/html5/thumbnails/29.jpg)
Changes to UI• Prevent Editing in
EditText– focusable, long clickable,
and cursor visible properties to false
• Set text in EditText to 0.00
• Change weights to 1 to spread out
![Page 30: 4-User Interface Basics CSNB544 Mobile Application Development Thanks to Utexas Austin.](https://reader035.fdocuments.in/reader035/viewer/2022062806/5697bfdb1a28abf838cb099b/html5/thumbnails/30.jpg)
Functionality• onCreate instance variables assigned to
components found via ids• update standard percents:
![Page 31: 4-User Interface Basics CSNB544 Mobile Application Development Thanks to Utexas Austin.](https://reader035.fdocuments.in/reader035/viewer/2022062806/5697bfdb1a28abf838cb099b/html5/thumbnails/31.jpg)
Functionality - Saving State• onSaveInstance– save BillTotal and CustomPercent to the
Bundle– check for these in onCreate
![Page 32: 4-User Interface Basics CSNB544 Mobile Application Development Thanks to Utexas Austin.](https://reader035.fdocuments.in/reader035/viewer/2022062806/5697bfdb1a28abf838cb099b/html5/thumbnails/32.jpg)
Functionality Responding to SeekBar
• customSeekBarListener instance variable• Of type OnSeekBarChangeListener
![Page 33: 4-User Interface Basics CSNB544 Mobile Application Development Thanks to Utexas Austin.](https://reader035.fdocuments.in/reader035/viewer/2022062806/5697bfdb1a28abf838cb099b/html5/thumbnails/33.jpg)
Create an Anonymous Inner Class• Class notified when seek bar changed and
program updates custom tip and total amount• must register with the seekBar instance
variable in onCreate!
![Page 34: 4-User Interface Basics CSNB544 Mobile Application Development Thanks to Utexas Austin.](https://reader035.fdocuments.in/reader035/viewer/2022062806/5697bfdb1a28abf838cb099b/html5/thumbnails/34.jpg)
Functionality - Total EditText
• Another anonymous inner class• implement onTextChanged to convert s to
double and call update methods• register with EditText for total in onCreate()!