CPSC 441 Mobile Application Development

Lecture #5

Custom Button States:

Change button appearance depending on the state.
Three button states: default, pressed, focused.
The selector tag with state takes care of this.
Default normal view
Pressed when the button is pressed
Focused when the button is selected
Steps:
Add three images to the drawable folder.

In the drawable folder, create the xml with the

selection tag to occur.

CPSC 441 Mobile Application Development

Lecture #5

Add three buttons to the view and change the

background tag of each button to the new xml

Now run the program and see the results

CPSC 441 Mobile Application Development

Lecture #5

Third image is focused

Second image is now

focused, third image is back
to default

CPSC 441 Mobile Application Development

Lecture #5

Third image is clicked

Shape:
The shape and colors of buttons can also be
customized. Create a new xml and pick the shape
tag. The shape default is rectangle.
"rectangle"

A rectangle that fills the containing View. This is the default shape.

"oval"

An oval shape that fits the dimensions of the containing View.

"line"

A horizontal line that spans the width of the containing View. This shape
requires the <stroke> element to define the width of the line.

"ring"

A ring shape.

CPSC 441 Mobile Application Development

Lecture #5

To create a shape, create a xml in the drawable

folder and select the shape tag.

<gradient>

Specifies a gradient color for the shape.

android:angle = Integer. The angle for the gradient, in degrees. 0 is left to right, 90 is

bottom to top. It must be a multiple of 45. Default is 0.

<corners>

Creates rounded corners for the shape. Applies only when the shape is a rectangle.
<stroke>

A stroke line for the shape.

android:width = The thickness of the line,
<padding>

Padding to apply to the containing View element (this pads the position of the View content,
not the shape).

Save it then use it on the drawable tag in the

buttons of the layout. After you run it you should
see this

CPSC 441 Mobile Application Development

Lecture #5

There are more!! For more info visit

http://developer.android.com/guide/topics/resourc
es/drawable-resource.html
ring shape needs the following:
android:Radius - the radius of the middle
thickness - thickness of the ring
uselevel ( set it to false)

Dialogs:
Dialogs are windows that pop-up on top of the
screen that can show a message to the user or ask
the user to make a decision or enter information.
Default dialog not recommended as a standard.
There are different types:
AlertDialog
DatePickerDialog
TimePickerDialog
Prior to 3.1 dialogs were very easy to implement
but after 3.1, there are a few changes that need to

CPSC 441 Mobile Application Development

Lecture #5

be made to make a dialog function correctly. There

is however one big advantage. You can retrieve it
and customize it very easily.
In order to use a dialog, the DialogFragment class
needs to be used. This can be done in three
different ways. A class can be created separate from
the activity and that class can extend the
DialogFragment class. The current activity can
extend the DialogFragment or an inner class can be
created inside the activity that extends the
DialogFragment. Lets do the third one, innerclass.
Create a class and add the following.

CPSC 441 Mobile Application Development

Lecture #5
`

This class is inside the main activity class. First the

AlertDialog object is allocated. We then set the title,
the positive, negative and neutral button titles and
listeners. Then the dialog is created, the setCancelable
is set to false and the setCancelOnTouchOutside is also
set to false. The setCancelable is set to false so that

CPSC 441 Mobile Application Development

Lecture #5

the back button wont close the dialog. The

setCancelOnTouchOutside is also set to false so that
pressing anywhere on the screen will not cancel the
dialog. On the activity add this:

First, the DialogFragment object id created (line 26) then it is shown

using the show function. The getFragmentManager is responsible to
show it and the dialog is just the tag used, to be invoked later if
needed.

Remember: Chaining is allowed.

(for older versions (3.0 and below) check this link
http://developer.android.com/reference/android/app/DialogFr
agment.html#setCancelable(boolean)

CPSC 441 Mobile Application Development

Lecture #5

Basic Animation:
With xmls, simple animation can be created. These animations
are called tweens which means in between, in that they are
simple transitions that when they work together, they create an
animation. To see a simple animation create a folder called
animator inside the res folder. In this animator folder, create a
xml and select the set tag.

Property Animation elements

<set>
A container that holds other animation elements, such as
translate, scale, alpha and rotate
<translate>
A vertical and/or horizontal motion. Supports the following attributes in
any of the following three formats: values from -100 to 100 ending with
"%", indicating a percentage relative to itself; values from -100 to 100

CPSC 441 Mobile Application Development

Lecture #5
ending in "%p", indicating a percentage relative to its parent; a float value
with no suffix, indicating an absolute value.
fromXdelta = starting position in the x coordinate.
toXdelta = ending position in the xcoordinate.
Duration = Amount of time (in milliseconds) for the animation to run.
startOffset Delay in milliseconds before the animation runs, once start time is
reached.
Remember:
%p suffix translates element "in percentage relative to the parent size".

In the activity add the following:

CPSC 441 Mobile Application Development

Lecture #5

In line 19 the animation is loaded from the xml when the

application starts. The animation then starts when the menu
button is pressed (line 41).
Things to remember:

If you want the element to stay after the animation is done so it wont reset back to the initial position
use android:fillAfter = true inside the set tag.
Interpolators can also be used to affect the rate of change in an animation. They can be used using the
android :interpolator = add interpolator here inside the set tag.

<objectAnimator>
Animates a specific property of the element, defined by the android:propertyName.
Can be x, y, alpha etc.
valueTo this the the value where the property will end.
Duration the total duration of the animation
Repeatcount defines how many times will the animation occur. A -1 means infinite. 1 means one
time. 0 means no repetition.
Repeatmode - How it will behave at the end of the animation. Restart to start from the beginning. A
reverse will mean that when it ends it will do the animation backwards.