[PDF] CS 4518 Mobile and Ubiquitous Computing Lecture 3: Android UI

View - Download CS 4518 Mobile and Ubiquitous Computing Lecture 3: Android UI

Previous PDF

Next PDF

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

quotesdbs_dbs17.pdfusesText_23

[PDF] android ui design guidelines

[PDF] android ui design patterns

[PDF] android ui design ppt

[PDF] android ui design principles

[PDF] android ui design templates

[PDF] android ui design tool xml

[PDF] android ui design tutorial android studio

[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