advance ui development and design

Advance UI : Development and Design

Rakesh Kumar JhaM. Tech, MBA

Delivery Manager

Android Windowing System

What is Android windowing systemOverviewArchitectureComponentsDevelopmentCodeQ & 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.

System Architecture

System Architecture

System Architecture

Building Blocks

There are more, but we focus on

SurfaceManagerWindowManagerActivityManager

SurfaceManager

frameworks/base/libs/surfaceflinger/a.k.a SurfaceFlingerAllocate 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 clientsTransition animationWindowManagerPolicy

WindowManager

The interface that apps use to talk to the window manager.

Use Context.getSystemService(Context.WINDOW_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.WINDOW_SERVICE) to get the WindowManager.

ActivityManager

frameworks/base/services/java/com/android/server/am/

Manage lifecycles of activitiesManage stacking of activitiesDispatch intentsSpawn 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

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 gestureDetecting common gestureManaging touch eventAnimating a scroll gestureTracking movementDragging & 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());

Handling Pinch Gesture 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; }}

Handling Pinch Gesture

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.

Handling Pinch Gesture

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

Animation

Animation in Android

• Animation in android is possible from many ways.

• making animation called tweened animation.

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 & Description1 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 AnimationImageView 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 defines 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.

Custom UI Views Architecture

• 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.

View Hierarchy Design

• The Hierarchy Viewer application allows you to debug and optimize your user interface

• It provides a visual representation of the layout's View hierarchy

View Hierarchy Design

• 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.

Using Hierarchy Viewer

• 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

Using Hierarchy Viewer

• 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:

Working with an individual View in 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 objects3. Red : slowest one in the tree

Working with an individual View in 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.

Using lint to Optimize Your UI

• 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.

Using lint to Optimize Your UI

• 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 APKEdit 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 projectsPer projectPer filePer 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> <!-- Disable the given check in this project --> <issue id="IconMissingDensityFolder" severity="ignore" />

<!-- Ignore the ObsoleteLayoutParam issue in the specified files --> <issue id="ObsoleteLayoutParam"> <ignore path="res/layout/activation.xml" /> <ignore path="res/layout-xlarge/activation.xml" /> </issue>

<!-- Ignore the UselessLeaf issue in the specified file --> <issue id="UselessLeaf"> <ignore path="res/layout/main.xml" /> </issue>

<!-- Change the severity of hardcoded strings to "error" --> <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.

Event Propagation and Event Handling 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(...):

Event Propagation and Event Handling in Views

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

Event Propagation and Event Handling 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.

Event Propagation and Event Handling 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 }

Event Propagation and Event Handling in Views

Included in the event listener interfaces are the following callback methods:-

onClick()onLongClick()onFocusChange()onKey()onTouch()onCreateContextMenu()

Event Propagation and Event Handling 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

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

<;?xml version="1.0" encoding="utf-8"?><resources>

<string name="hello_world">Hola Mundo!</string></resources>

Localizing Strings

• FRENCH, RES/VALUES-FR/STRINGS.XML

<;?xml version="1.0" encoding="utf-8"?><resources>

<string name="hello_world">Bonjour le monde !</string></resources>