Advance ui development and design

Advance UI : Development and
Design
Rakesh Kumar Jha
M. Tech, MBA
Delivery Manager

Android Windowing System
What is Android windowing system
Overview
Architecture
Components
Development
Code
Q & A

What is Android windowing system
 In computing, a windowing
system (or window system) is a type
of graphical user interface (GUI) which
implements the WIMP (windows, icons,
menus, pointer) paradigm for a user
interface.

What is Android windowing system
Most popular windowing systems are X11
and Wayland
Most popular widget toolkits
are GTK+/Clutter and Qt
Most popular desktop environments
are GNOME and the KDE Software
Compilation

X Window
The X Window System (sometimes referred to
as "X" or as "XWindows") is an open, cross-
platform, client/server system for managing a
windowed graphical user interface in a
distributed network.
 is a windowing system for bitmap displays,
common on UNIX-like computer operating
systems.

Building Blocks
There are more, but we focus on
SurfaceManager
WindowManager
ActivityManager

SurfaceManager
frameworks/base/libs/surfaceflinger/
a.k.a SurfaceFlinger
Allocate surfaces. Backed by shmem/pmem/?
Composite surfaces

SurfaceManager
 It is used for compositing window manager
with off-screen buffering.
Off-screen buffering means you cant directly
draw into the screen, but your drawings go to
the off-screen buffer.
There it is combined with other drawings and
form the final screen the user will see.
This off screen buffer is the reason behind the
transparency of windows.

WindowManager
frameworks/base/services/java/com/android/
server/WindowManagerService.java
(Ask SurfaceManager to) create/layout
surfaces on behalf of the clients
Dispatch input events to clients
Transition animation
WindowManagerPolicy

WindowManager
The interface that apps use to talk to the
window manager.
Use Context.getSystemService(Context.WIND
OW_SERVICE) to get one of these.

WindowManager
Each window manager instance is bound to a
particular Display.
To obtain a WindowManager for a different
display, use createDisplayContext(Display) to
obtain a Context for that display, then
use Context.getSystemService(Context.WINDO
W_SERVICE) to get the WindowManager.

ActivityManager
frameworks/base/services/java/com/android/
server/am/
Manage lifecycles of activities
Manage stacking of activities
Dispatch intents
Spawn processes

ActivityManager
Interact with the overall activities running in the
system.
Information you can retrieve about the available
memory
Information you can retrieve about any processes
that are in an error condition.
Information you can retrieve about a running
process.
ActivityManager.MemoryInfo,
ActivityManager.RunningAppProcessInfo

An activity has one or more windows (e.g.
dialogs)
A window has one or more surfaces (e.g.
surface views)
However, in window manager, a window is
called a session
A surface is called a window

How Android Draws Views?
• When an Activity receives focus, it will be
requested to draw its layout.
• The Android framework will handle the
procedure for drawing, but the Activity must
provide the root node of its layout hierarchy.

How Android Draws Views?
• When an Activity receives focus, it will be
requested to draw its layout.
• The Android framework will handle the
procedure for drawing, but the Activity must
provide the root node of its layout hierarchy.
• Drawing the layout is a two pass process: a
measure pass and a layout pass.

Handling Gestures
Some examples of common multi-touch gestures
and actions you might use include:
Pinch to zoom in, spread to zoom out.
Basic dragging in order to move, adjust, scroll,
and position.
Flick to jump to the next screen or scroll extra
fast.
Tap and hold to open an item or context menu.
Multi-finger drag often scrolls faster!

Handling Gestures
Handling multi touch gesture
Detecting common gesture
Managing touch event
Animating a scroll gesture
Tracking movement
Dragging & scalling

Handling Gestures
Android provides special types of touch screen
events such as pinch , double tap, scrolls , long
presses and flinch. These are all known as
gestures.

Handling Gestures
Android provides GestureDetector class to
receive motion events and tell us that these
events correspond to gestures or not.

Handling Gestures
To use it , you need to create an object of
GestureDetector and then extend another
class with
GestureDetector.SimpleOnGestureListener to
act as a listener and override some methods.

Handling Gestures
GestureDetector myG;
myG = new GestureDetector(this,new Gesture());
class Gesture extends GestureDetector.SimpleOnGestureListener{
public boolean onSingleTapUp(MotionEvent ev) {
}
public void onLongPress(MotionEvent ev) {
}
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
float distanceY) {
}
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
float velocityY) {
}
}
}

Handling Pinch Gesture
Android provides ScaleGestureDetector class
to handle gestures like pinch e.t.c. In order to
use it , you need to instantiate an object of
this class. Its syntax is as follow: -
ScaleGestureDetector SGD; SGD = new ScaleGestureDetector(this,new
ScaleListener());

 We have to define the event listener and override a function OnTouchEvent to
make it working.
public boolean onTouchEvent(MotionEvent ev) {
SGD.onTouchEvent(ev);
return true;
}
private class ScaleListener extends
ScaleGestureDetector.SimpleOnScaleGestureListener {
@Override
public boolean onScale(ScaleGestureDetector detector) {
float scale = detector.getScaleFactor();
return true;
}
}

Apart from the pinch gestures , there are other
methods avaialible that notify more about touch
events. They are listed below:
1 getEventTime()
This method get the event time of the current event being processed..
2 getFocusX()
This method get the X coordinate of the current gesture's focal point.
3 getFocusY()
This method get the Y coordinate of the current gesture's focal point.
4 getTimeDelta()
This method return the time difference in milliseconds between the previous accepted scaling event and the
current scaling event.
5 isInProgress()
This method returns true if a scale gesture is in progress..
6 onTouchEvent(MotionEvent event)
This method accepts MotionEvents and dispatches events when appropriate.

Use of ScaleGestureDetector class.
It creates a basic application that allows you to
zoom in and out through pinch.

Animation in Android
• Animation in android is possible from many
ways.
• making animation called tweened animation.

Tween Animation
• Tween Animation takes some parameters such
as start value , end value, size , time duration ,
rotation angle e.t.c and perform the required
animation on that object.

Tween Animation
• In order to perform animation in android , call
a static function loadAnimation() of the class
AnimationUtils.
Animation animation =
AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.myanimation);
second parameter, it is the name of the our animation xml file.

Sr.No Method & Description
1 start()
This method starts the animation.
2 setDuration(long duration)
This method sets the duration of an animation.
3 getDuration()
This method gets the duration which is set by above
method
4 end()
This method ends the animation.
5 cancel()
This method cancels the animation.
Tween Animation

Tween Animation
ImageView image1 = (ImageView)findViewById(R.id.imageView1);
image.startAnimation(animation);

Zoom in animation
• To perform a zoom in animation , create an
XML file under anim folder under res
directory, and put zoom xml code.
<set xmlns:android="http://schemas.android.com/apk/res/android"> <scale
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXScale="0.5" android:toXScale="3.0" android:fromYScale="0.5"
android:toYScale="3.0" android:duration="5000" android:pivotX="50%"
android:pivotY="50%" > </scale> </set>

Zoom in animation
• The
parameter fromXScale and fromYScale define
s the start point and the
parameters toXScale andtoYScale defines the
end point.
• The duration defines the time of animation
and the pivotX, pivotYdefines the center from
where the animation would start.

• Android offers a sophisticated and powerful
componentized model for building your UI, based
on the fundamental layout classes: View
and ViewGroup.
• A partial list of available widgets
includes Button, TextView,
EditText, ListView, CheckBox,
RadioButton, Gallery, Spinner, and the more
special-
purpose AutoCompleteTextView, ImageSwitcher,
and TextSwitcher.
• Among the layouts available
are LinearLayout, FrameLayout, RelativeLayout,
and others

• If none of the prebuilt widgets or layouts
meets your needs, you can create your own
View subclass.

View Hierarchy Design
• Sometimes your application's layout can slow
down your application. To help debug issues in
your layout, the Android SDK provides the
Hierarchy Viewer and lint tools.

• The Hierarchy Viewer application allows you
to debug and optimize your user interface
• It provides a visual representation of the
layout's View hierarchy

• Android lint is a static code scanning tool that
helps you optimize the layouts and layout
hierarchies of your applications, as well as
detect other common coding problems.

Using Hierarchy Viewer
• Connect your device or launch an emulator. To
preserve security, Hierarchy Viewer can only connect to
devices running a developer version of the Android
system.
• If you have not done so already, install the application
you want to work with.
• Run the application, and ensure that its UI is visible.
• From a terminal, launch hierarchyviewer from
the <sdk>/tools/ directory.
• Window will launched with device list
• Select apps name(packagename) and perform
operaion.

Advance ui development and design

• The View Hierarchy window displays the View
objects that form the UI of the Activity that is
running on your device or emulator.
• You should see four panes:-
– Tree View:
– Tree Overview,
– Layout View,
– Properties View

• When the UI of the current Activity changes,
the View Hierarchy window is not
automatically updated.
• To update it, click Load View Hierarchy at the
top of the window.

Working with an individual View in
Tree View
• Each node in Tree View represents a single
View. Some information is always visible.
• Starting at the top of the node, you see the
following:

Tree View
1. View class: The View object's class.
2. View object address: A pointer to View
object.
3. View object ID: The value of
the android:id attribute.
4. Performance indicators:
1. Green: Fastest, 50% faster than view object
2. Yellow : slower 50% of all the View objects
3. Red : slowest one in the tree

Tree View
5. View index: The zero-based index of the View
in its parent View. If it is the only child, this is
0.

Using lint to Optimize Your UI
• The Android lint tool lets you analyze the XML
files that define your application's UI to find
inefficiencies in the view hierarchy.
• Note: The Android layoutopt tool has been
replaced by the lint tool beginning in ADT and
SDK Tools revision 16. The lint tool reports UI
layout performance issues in a similar way
as layoutopt, and detects additional problems.

• Improving Your Code with lint
• The Android SDK provides a code scanning
tool called lint that can help you to easily
identify and correct problems with the
structural quality of your code, without having
to execute the app or write any test cases.

• The lint tool checks your Android project
source files for potential bugs and
optimization improvements for correctness,
security, performance, usability, accessibility,
and internationalization.
• You can run lint from the command-line or
from the Eclipse environment.

Running lint from Eclipse
If the ADT Plugin is installed in your Eclipse
environment, the lint tool runs automatically
when you perform one of these actions:
Export an APK
Edit and save an XML source file in your
Android project (such as a manifest or layout
file)
Use the layout editor in Eclipse to make
changes

Running lint from the Command-Line
• To run lint against a list of files in a project
directory:
int [flags] <project directory>
lint --check MissingPrefix myproject

Configuring lint
You can configure lint checking at different
levels:
Globally, for all projects
Per project
Per file
Per Java class or method (by using
the @SuppressLint annotation), or per XML
element (by using the tools:ignoreattribute.

Configuring lint in Eclipse
You can configure global, project-specific, and
file-specific settings for lint from the Eclipse user
interface.

Global preferences
• Open Window > Preferences > Android > Lint
Error Checking.
• Specify your preferences and click OK.

Project and file-specific preferences
• Run the lint tool on your project by right-
clicking on your project folder in the Package
Explorer and selecting Android Tools > Run
Lint: Check for Common Errors.
• From the Lint Warnings view, use the toolbar
options to configure lint preferences for
individual projects and files in Eclipse.

Project and file-specific preferences
The options you can select include:
• Suppress this error with an annotation/attribute - If the
issue appears in a Java class, the lint tool adds
a@SuppressLint annotation to the method where the issue
was detected. If the issue appears in an .xml file, lintinserts
a tools:ignore attribute to disable checking for the lint issue
in this file.
• Ignore in this file - Disables checking for this lint issue in
this file.
• Ignore in this project - Disables checking for this lint issue
in this project.
• Always ignore - Disables checking for this lint issue globally
for all projects.

Configuring the lint file
You can specify your lint checking preferences
in the lint.xml file.
 If you are creating this file manually, place it
in the root directory of your Android project.
If you are configuring lint preferences in
Eclipse, the lint.xml file is automatically
created and added to your Android project for
you.

Sample lint.xml file
<?xml version="1.0" encoding="UTF-8"?>
<lint>

<issue id="IconMissingDensityFolder" severity="ignore" />

<issue id="ObsoleteLayoutParam">
<ignore path="res/layout/activation.xml" />
<ignore path="res/layout-xlarge/activation.xml" />
</issue>

<issue id="UselessLeaf">
<ignore path="res/layout/main.xml" />
</issue>

<issue id="HardcodedText" severity="error" />
</lint>

Event Propagation and Event Handling
in Views
For each application, a ViewRootImpl object is
created to handle communications with the
remote system WindowManagerService object.
The communication is through a Linux pipe which
is encapsulated in an InputChannel object
(mInputChannel field in class ViewRootImpl).
TheViewRootImpl object also registers an
instance of InputEventReceiver when the
first View object is registered with it.

in Views
public void setView(View view, ...) {
...
mInputEventReceiver = new WindowInputEventReceiver(mInputChannel,
Looper.myLooper());
...
}
The constructor of
class WindowInputEventReceiver (class WindowManagerService extends
from classInputEventReceiver) calls a native methond nativeInit(...):

in Views
58 public InputEventReceiver(InputChannel inputChannel, Looper looper) {
...
66 mInputChannel = inputChannel;
67 mMessageQueue = looper.getQueue();
68 mReceiverPtr = nativeInit(this, inputChannel, mMessageQueue);
...
71 }

in Views
Three parameters are passed to the native function nativeInit:
1) The receiver object itself;
2) TheInputChannel object passed from the ViewRootImpl object.
3) The main message queue (an object of class MessageQueue) of the
application.

in Views
227 static jint nativeInit(JNIEnv* env, jclass clazz, jobject receiverObj,
228 jobject inputChannelObj, jobject messageQueueObj) {
229 sp<InputChannel> inputChannel =
android_view_InputChannel_getInputChannel(env,
230 inputChannelObj);
...
236 sp<MessageQueue> messageQueue =
android_os_MessageQueue_getMessageQueue(env, messageQueueObj);
...
242 sp<NativeInputEventReceiver> receiver = new
NativeInputEventReceiver(env,
243 receiverObj, inputChannel, messageQueue);
244 status_t status = receiver->initialize();
...
254 }

in Views
Included in the event listener interfaces are the
following callback methods:-
onClick()
onLongClick()
onFocusChange()
onKey()
onTouch()
onCreateContextMenu()

Localisation and Accessibility

• An android application can run on many
devices in many different regions.
• In order to make your application more
interactive, your application should handle
text,numbers,files e.t.c in ways appropriate to
the locales where your application will be
used.

Localizing Strings
• In order to localize the strings used in your
application , make a new folder under res with
name ofvalues-local where local would be the
replaced with the region.
• For example, in the case of italy, the values-
it folder would be made under res. It is shown
in the image below:

Localizing Strings
• Once that folder is made, copy
the strings.xmlfrom default folder to the
folder you have created. And change its
contents. For example, i have changed the
value of hello_world string.

Localizing Strings
• ITALY, RES/VALUES-IT/STRINGS.XML
<;?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="hello_world">Ciao mondo!</string>
</resources>

Localizing Strings
• Chinese, RES/VALUES-zh/STRINGS.XML
<resources>
<string name="hello_world">Hola Mundo!</string>
</resources>

Localizing Strings
• FRENCH, RES/VALUES-FR/STRINGS.XML
<resources>
<string name="hello_world">Bonjour le monde !</string>
</resources>

Advance ui development and design

More Related Content

What's hot (20)

Viewers also liked (7)

Similar to Advance ui development and design (20)

More from Rakesh Jha (20)

Advance ui development and design