DESIGN ANDROID APPS

(1)

DESIGN ANDROID APPS

(2)

Android - User Interface

The basic building block for user interface is a View object which is created from the View class and occupies a rectangular area on the screen and is responsible for drawing and event handling.

View is the base class for widgets, which are used to create

interactive UI components like buttons, text fields, etc.

(3)

Android - User Interface

The ViewGroup is a subclass of View and provides invisible container that hold other Views or other ViewGroups and define their layout properties.

At third level we have different layouts which are subclasses of ViewGroup class and a

typical layout defines the visual structure for an Android user interface and can be

created either at run time using View/ViewGroupobjects or you can declare your

layout using simple XML filemain_layout.xml which is located in the res/layout folder

of your project.

(4)

(5)

Designing a user interface

XML: a language for

describing hierarchical text data. *

– Uses tags that consist of elements and attributes.

Tags can be nested.

– Some tags are opened and closed; others self-close.

– Used to define some of the resources-Layouts (UI), Strings, Manifest file etc Example: * XML is case- sensitive!

<!-- this is a comment → <course name="CS

193A">

</course>

(6)

A layout may contain any type of widgets such as buttons, labels, textboxes, and so on.

Following is a simple example of XML file having LinearLayout:

(7)

Once your layout has created, you can load the layout resource from your application

code, in your Activity.onCreate() callback implementation as shown below −

(8)

Layout

How does the programmer specify where each component appears, how big each component should be, etc.?

A layout defines the visual structure for a user interface, such as the UI for an activity or app widget. You can declare a layout in two ways:

● Declare UI elements in XML. Android provides a straightforward XML vocabulary that corresponds to the View classes and subclasses, such as those for widgets and layouts.

● Instantiate layout elements at runtime. Your application can create View and ViewGroup objects (and manipulate their properties) programmatically.

Layout managers (Java, Android):

– Objects that decide where to position each component based on some general rules or criteria.

– More flexible and general; works better with a variety of devices.

● Layout can be nested - a layout could be declared inside another layout.

(9)

ViewGroup as layout

● ViewGroup superclass represents containers of widgets/views – layouts are described in XML and mirrored in Java code

– Android provides several pre-existing layout managers; you can define your own custom layouts if needed

– layouts can be nested to achieve combinations of features – Every view needs to specify android:layout_height, android:layout_width

● in the Java code and XML:

– an Activity is a ViewGroup

– various Layout classes are also ViewGroups

– widgets can be added to a ViewGroup, which will then manage that widget's position/size behavior

● Some predefined layout: Linear, Relative, Frame, Table etc.

(10)

Layout types

1 Linear Layout

LinearLayout is a view group that aligns all children in a single direction, vertically or horizontally.

2 Relative Layout

RelativeLayout is a view group that displays child views in relative positions.

3 Table Layout

TableLayout is a view that groups views into rows and columns.

(11)

Layout types

4 Absolute Layout

AbsoluteLayout enables you to specify the exact location of its children.

5 Frame Layout

The FrameLayout is a placeholder on screen that you can use to display a single view.

6 List View

ListView is a view group that displays a list of scrollable items.

7 Grid View

GridView is a ViewGroup that displays items in a two-dimensional, scrollable grid.

(12)

LinearLayout

● Dispose views on a single row or column, depending on

android:layout_orientation

● orientation is one of HORIZONTAL (default) or VERTICAL

● items do not wrap if they reach edge of screen!

● Has two other attributes:

- gravity

- alignment direction that widgets are pulled

- set gravity on the layout to adjust all widgets; set layout_gravity on an individual widget

● weight - gives elements relative sizes by integers

Horizonta l

Vertica l

(13)

LinearLayout example

<LinearLayout …

android:orientation="vertical"

android:gravity="center|right">

<Button ... android:text="Button 5"

android:layout_gravity="left" />

</LinearLayout>

(14)

RelativeLayout

● Disposes views according to the container or according to other views

○ relative to "parent" (the activity itself)

- layout_alignParentTop, Bottom, Left, Right (set these to the ID of another widget in the format "@id/theID")

○ relative to other widgets/views

- layout_below, above, toLeftOf, toRightOf (et these flags to a boolean value of "true" to enable them)

- layout_centerHorizontal, Vertical, InParent

● Useful to align views

● intended to reduce the need for nested layouts

(15)

RelativeLayout example

(16)

FrameLayout

(17)

Layout attribute

Attribute Description

android:id This is the ID which uniquely identifies the

view.

android:layout_width This is the width of the layout.

android:layout_height This is the height of the layout

android:layout_marginTop This is the extra space on the top side of the layout.

(18)

Layout attribute

android:layout_marginBottom This is the extra space on the bottom side of the layout.

android:layout_marginLef This is the extra space on the lef side of the layout.

android:layout_marginRight This is the extra space on the right side of the layout.

(19)

Layout attribute

android:layout_gravity This specifies how child Views are positioned.

android:layout_weight This specifies how much of the extra space in the layout should be allocated

to the View.

android:layout_x This specifies the x-coordinate of the layout.

android:layout_y This specifies the y-coordinate of the layout.

(20)

Layout attribute

android:paddingLef This is the lef padding filled for the layout.

android:paddingRight This is the right padding filled for the layout.

android:paddingTop This is the top padding filled for the layout.

android:paddingBottom This is the bottom padding filled for the layout.

(21)

Displaying Toasts

● A "Toast" is a pop-up message that appears for a short tim

● Useful for displaying short updates in response to events.

● Should not be relied upon extensively for important info.

Toast.makeText(this,"This is the Toast message", duration).show();

– where duration is Toast.LENGTH_SHORT or LENGTH_LONG

(22)

Nested layout

● to produce more complicated appearance, use a nested layout

– (layouts inside layouts)

● what layout(s) are used to create the appearance at right?

– overall activity: __________

– internal layouts: _________

(23)

Widget box model

(24)

Android widgets

(25)

View objects & Events

● Each widget has an associated Java object you can access

● They are subclasses of parent class View

– examples: Button, TextView, EditText, …

● View objects have many get and set methods that correspond to the properties in the Design view:

– background, bottom, ID, lef, margin, padding, right, text, textAlignment, textSize, typeface, visibility, … , etc.

– example: for a Button's text property, there will be methods:

public String getText()

public void setText(String text)

– Find list of properties in Design view, or typing ".get" on a button in Java code, or at: https://developer.android.com/reference/

event: An external stimulus your

program can respond to. Common kinds of events include: tapping, Keys pressed, Timers expiring, Network data available etc.

(26)

View objects & Events

(27)

String resources

found In res/values/strings.xml file Application wide available strings Promotes good software engineering

● Declare constant strings and arrays in res/values/strings.xml:

<string name="name">value</string>

<string-array name="arrayname">

<item>value</item>

<item>value</item><!-- must escape ' as \' in values → . . .

<item>value</item>

</string-array>

</resources>

● Refer to them in Java code:

– as a resource: R.string.name, R.array.name

– as a string or array: getResources().getString(R.string.name), getResources().getStringArray(R.array.name)

(28)

Style and Themes

A style resource defines the format and look for a UI. A style can be applied to an

individual View (from within a layout file) or to an entire Activity or application (from

within the manifest file).

(29)

Interacting with widgets

● accessing a widget in the Java code:

1. in Design view, give that view a unique ID property value 2. in Java code, call findViewById() to access its View object

- pass it a parameter of R.id.your_unique_ID

- cast the returned value to the appropriate type (Button, TextView, etc.) public void button1_onclick(View view)

{

TextView tv = (TextView) findViewById(R.id.mytextview);

tv.setText("You clicked it!");

}

(30)

Image Button / Button (link)

A clickable widget with a Image (Image Button) /text label (Button)

● key attributes:

● represented by Button class in Java code

Button b = (Button) findViewById(R.id.theID);

(31)

Image View (link)

A clickable widget with a Image (Image Button) /text label (Button)

● key attributes:

● to set up an image resource:

– put image file in project folder app/src/main/res/drawable – use @drawable/foo to refer to foo.png

● to change the visible image, in Java code:

– get the ImageView using findViewById

– call its setImageResource method and pass R.drawable.filename

(32)

EditText (link)

An editable text input box

● key attributes:

- others: capitalize, digits, fontFamily, letterSpacing, lineSpacingExtra, minLines, numeric, password, phoneNumber, singleLine, textAllCaps, textColor, typeface

(33)

Switch/CheckBox (link)

An individual toggleable on/off switch

● key attributes:

● In Java code:

CheckBox cb = (CheckBox) findViewById(R.id.theID);

cb.toggle();

cb.setChecked(true);

cb.performClick();

(34)

AdapterView

● A ViewGroup subclass

● Its subchilds are determined by an Adapter

○ Used to visualize data

○ Make a ViewGroup to interact with data

○ Some methods: isEmpty(), getItem(int position), getCount(), getView()

● Some subclasses:

○ Spinner

○ ListView, ExpandableListView

○ GridView

○ Gallery

(35)

Spinner (link)

A drop-down menu of selectable choices

● key attributes:

● also need to handle events in Java code (see later) – must get the Spinner object using findViewById

– then call its setOnItemSelectedListener method (see example)

(36)

Spinner example

(37)

Spinner event example

(38)

ScrollView

ListView, GridView, Layout and many more Items will discuss later …