[PDF] android layout types
[PDF] android layoutinflater
[PDF] android layout_gravity
[PDF] android layout_gravity vs gravity
[PDF] android layout_weight
[PDF] android mobile app automation testing tools
[PDF] android mobile app security testing checklist
[PDF] android mobile application architecture diagram
[PDF] android mobile application security testing tools
[PDF] android pc client server example
[PDF] android pdf editor apk
[PDF] android pdf editor github
[PDF] android pdf editor library
[PDF] android pdf editor open source
[PDF] android pdf editor pen
CS 4518 Mobile and Ubiquitous
Computing
Lecture 3: Android UI Design in XML
+ Examples
Emmanuel Agu
Android UI Design in XML
Recall:Files Hello World Android Project
Y3 Files:
YActivity_main.xml: XML file specifying screen layout
YMainActivity.Java:Java code to define behavior,
actions taken when button clicked (intelligence)
YAndroidManifest.xml:
YLists all app components and screens
YLike a table of contents for a book
YE.g. Hello world program has 1 screen, so
AndroidManifest.xml has 1 item listed
YApp starts running here (a bit like main( ) in C), launching actiǀity with a tag ͞LAUNCHER"
XML file used to design Android UI
Widgets
YAndroid UI design involves arranging widgets on a screen
YWidgets? Rectangles containing texts, image, etc
YScreen design: Pick widgets, specify attributes (dimensions, margins, etc)
Widgets
Recall: Design Option 1: Drag and Drop Widgets
YDrag and drop widgets in Android Studio Design View YEdit widget properties (e.g. height, width, color, etc)
Drag and drop
button or any other widget or view
Edit widget
properties
Recall: Design Option 2: Edit XML Directly
YText view:Directly edit XML file defining screen
(activity_main.xml) YNote: dragging and dropping widgets in design view auto-generates corresponding XML in Text view
Edit XMLDrag and drop widget
Android Widgets
Example: Some Common Widgets
YTextView: Text in a rectangle
YEditText: Text box for user to type in text
YButton: Button for user to click on
TextView Widget
YText in a rectangle
YJust displays text, no interaction
YCommon attributes:
Ytypeface (android:typeface e.g monospace), bold, italic, (android:textStyle ), text size, text color (android:textColor e.g. #FF0000 for red), width, height, padding, background color YCan also include links to email address, url, phone number,
Yweb, email, phone, map, etc
XML codeTextView Widgets
TextView
YTextViewwidget is available in widgets palette in
Android Studio Layout editor
YPlain TextView,Large text, Medium text andSmall text YAfter dragging Textviewwidget in, edit properties
Widget ID
YEvery widget has ID, stored in android:idattribute YUsing Widget ID declared in XML, widget can be referenced, modified in java code (More later)
Button Widget
YClickable Text or icon on a Widget (Button)
YE.g. ͞Click Here"
YAppearance can be customized
YDeclared as subclass of TextView so similar
attributes (e.g. width, height, etc)
Button in Android Studio
YButton widget available in palette of
Android Studio graphical layout editor
YDrag and drop button, edit its attributes
Responding to Button Clicks
YMay want Button press to trigger some action
YHow?
1.In XML file (e.g. Activity_my.xml), set android:onClick
attribute to specify method to be invoked
2. In Java file (e.g. MainActivity.java) declare
method/handler to take desired action
Embedding Images:
ImageView and ImageButton
YImageView: display image (not clickable)
YImageButton: Clickable image
YUse android:src to specify image source in
drawable folder (e.g. @drawable/icon)
File molecule.png in drawable/ folder
ImageView in Widgets Palette
YCan drag and drop ImageView from
Widgets Palette
YUse pop-up menus (right-click) to specify:
Ysrc: choose image to be displayed
YscaleType: choose how image should
be scaled
Options for Scaling Images (scaleType)
centers image but does not scale it centers image, scales it so that shortest dimension fills available space, and crops longer dimension scales/distorts image to fit ImageView, ignoring aspect ratio
EditText Widget
YWidget with box for user input
YExample:
YText fields can have different input types
Ye.g. number, date, password, or email address
Yandroid:inputTypeattribute sets input type, affects
YWhat type of keyboard pops up for user
YE.g. if inputType is a number, numeric keyboard pops up
EditText Widget in Android
Studio Palette
YA section of Android Studio palette
has EditText widgets (or text fields)
Text Fields
Section of Widget
paletteEditText inputType menu
Some Other Available Widgets
20
Pickers
YTimePicker: Select a time
YDatePicker: Select a date
YTypically displayed in pop-up dialogs (TimePickerDialogor
DatePickerDialog)
Spinner Controls
Yuser mustselect on of a set of choices
Checkbox
YCheckbox has 2 states: checked and unchecked
YXML code to create Checkbox
Other Indicators
YProgressBar
YRatingBar
YChronometer
YDigitalClock
YAnalogClock
Android Layouts in XML
Android UI using XML Layouts
YLayout? Pattern in which multiple widgets are arranged
YLayouts contain widgets
YLayouts (XML files) stored in res/layout
Some Layouts
YFrameLayout,
YLinearLayout,
YTableLayout,
YGridLayout,
YRelativeLayout,
YListView,
YGridView,
YScrollView,
YDrawerLayout,
YViewPager
LinearLayout
Yaligns child elements (e.g. buttons, text
boxes, pictures, etc.) in one direction
YExample:
Yorientation attribute defines direction
(vertical or horizontal):
YE.g. android:orientation="vertical"
Layout
properties
Layout Width and Height Attributes
Ywrap_content: widget as wide/high as its content (e.g. text) Ymatch_parent: widget as wide/high as its parent layout box
Yfill_parent: older form of match_parent
Text widget width
should be as wide as
Its parent (the layout)
Text widget height
should Be as wide as the content (text)
TextView
Linear Layout
Screen (Hardware)
LinearLayout in Android Studio
YLinearLayout in Android Studio Graphical Layout Editor YAfter selecting LinearLayout, toolbars buttons to set parameters
Toggle width, height between
match_parent and wrap_content
Change gravity of
LinearLayout
LinearLayout Attributes
Ref: https://developer.android.com/reference/android/widget/LinearLayout.html in layout xml file
Can also design UI, set attributes in Java
program (e.g. ActivityMain.java) (More later)
Setting Attributes
Adding Padding
YPaddings sets space between layout sides and its parent
Setting Margins
YCan increase gap (margin) between adjacent widgets YE.g. To add margin between two buttons, in declaration of bottom button
YOther options
Gravity Attribute
YBy default, linearlayout left-
and top-aligned
YGravity attribute changes
alignment :
Ye.g. android͗graǀity с ͞right"
right center
Linear Layout Weight Attribute
YSpecifies Ηimportance͞, larger weights takes up more space
YCan set width, height = 0 then
Yweight = percent of height/width you want element to cover
Scrolling
YPhone screens are small, scrolling content helps
YExamples: Scroll through
Ylarge image
YLinear Layout with lots of elements
YViews for Scrolling:
YScrollViewfor vertical scrolling
YHorizontalScrollView
YRules:
YOnly one direct child View
YChild could have many children of its own
RelativeLayout
YFirst element listed is placed in "center"
YPositions of children specified relative to parent or to each other.
RelativeLayout available
In Android Studio palette
Positioning Views Relative to Parent Layout
YPosition a view (e.g. button, TextView) relative to its parent YExample: Button aligned to top, right in a Relative Layout See Head First Android Development page 169 for more examples
Table Layout
YSpecify number of rows and columns of views.
YAvailable in Android Studio palette
TableRows
GridLayout
YIn TableLayout, Rows can span multiple columns only YIn GridLayout, child views/controls can span multiple rows ANDcolumns YSee section ͞GridLayoutDisplays Views in a Grid" in
Head First Android Development (pg189)
Absolute Layout
YAllows specification of exact x,y
coordinates of layout's children.
FrameLayout
Ychild elements pinned to top left
corner of layout
Yadding a new element / child draws
over the last one
Other Layouts: Tabbed Layouts
Android Example: My First App
(Ref: Head First Android)
My First App
YHello World program in Head First Android Development (Chapter 1) YCreates app, types ͞Sup doge" in a TedžtView
Android UI Youtube Tutorials
YouTube Tutorial 11 & 12 from thenewBoston
YTutorial 11: Designing the User Interface [6:19 mins]
YDesigning the UI
YAdding activity (screen)
YDragging in widgets
YChanging the text in widgets
YTutorial 12: More on User Interface [10:24 mins]
YChanging text in widgets
YChanging strings from hardcoded to resources (variables)
Tutorial 17: GridLayout
YTutorial 17: GridLayout[9:40 mins]
YCreating GridLayout: Layout that places its children in a grid
YAdd widgets (buttons) to GridLayout
YFormat width, height, position of widgets
Android Themes
Styles
YAndroid widgets have properties
YE.g. Foreground color = red
YStyles in Android: specifies properties for multiple attributes of 1 widget YE.g. height, padding, font color, font size, background color
YSimilar to Cascaded Style Sheets (CSS) in HTML
YThemes apply styles to all widgets in an Activity (screen) YE.g. all widgets on a screen can adopt the same font YExample Android themes: Theme, Theme.holo and Theme.material)
Examples of Themes in Use
GMAIL in Holo LightSettings screen in Holo Dark
Default Themes
YMany stock themes to choose from
YAndroid chooses a default theme if you specify none
Theme.Material: default theme
in Android 5.0Theme.Holo: default theme in Android 3.0
Adding Pictures in Android
Phone Dimensions Used in Android UI
YPhysical dimensions (inches) diagonally
YE.g. Nexus 4 is 4.7 inches diagonally
YResolution in pixels
YE.g. Nexus 4 resolution 768 x 1280 pixels
YPixels diagonally: Sqrt[(768 x 768) + (1280 x 1280) ]
YPixels per inch (PPI) =
YSqrt[(768 x 768) + (1280 x 1280) ] / 4.7= 318
Adding Pictures
YAndroid supports images in PNG, JPEG and GIF formats YPut different resolutions of same image into different directories Yres/drawable-ldpi: low dpi images (~ 120 dpi of dots per inch)
Yres/drawable-mdpi: medium dpi images (~ 160 dpi)
Yres/drawable-hdpi: high dpi images (~ 240 dpi)
Yres/drawable-xhdpi: extra high dpi images (~ 320 dpi) Yres/drawable-xxhdpi: extra extra high dpi images (~ 480 dpi) Yres/drawable-xxxhdpi: high dpi images (~ 640 dpi)
Adding Pictures
YUse generic picture name in code (no .png, .jpg, etc)
YE.g. to reference an image ic_launcher.png
YAt run-time, Android chooses which resolution/directory (e.g. -mdpi) based on phone resolution YImage Asset Studio: generates icons in various densities from original image Ref: https://developer.android.com/studio/write/image-asset-studio.html
References
YAndroid App Development for Beginners videos by Bucky
Roberts (thenewboston)
YAsk A Dev, Android Wear: What Developers Need to Know, YAsk A Dev, Mobile Minute: What to (Android) Wear,
YBusy Coder's guide to Android ǀersion 4.4
YCS 65/165 slides, Dartmouth College, Spring 2014
YCS 371M slides, U of Texas Austin, Spring 2014
quotesdbs_dbs17.pdfusesText_23
[PDF] Android-UI-Designpdf