[PDF] android ui design with xml tutorial book pdf
[PDF] android ui framework
[PDF] android user interface pdf
[PDF] android workshop ppt
[PDF] android workshop syllabus
[PDF] android xml attributes list pdf
[PDF] android:layout_weight
[PDF] anesthetists non technical skills
[PDF] angamardana poses pdf
[PDF] angel 111 spiritual meaning
[PDF] angel number 007 doreen virtue
[PDF] angel number 1111 doreen virtue
[PDF] angel number 1111 meaning love
[PDF] angel number 333
[PDF] angel number 4 doreen virtue
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
quotesdbs_dbs17.pdfusesText_23
[PDF] Android™ User Interface Design: Implementing Material - InformIT