Android Unit 2 : Designing User Interfaces with Layouts Dialogs and animation for B.C.A, B.Sc(IT), M.C.A. and All IT Students.

--------------------------------------------------------------------------------------------------------------------------
Prepared By : Uday Shah (HOD -IT)
E-Mail : udayshah80@gmail.com
Contact No : 7600044051

Designing User Interfaces with Layouts

Android developers use the term layout to mean one of two things that are:

• A type of resource that defines what is drawn on the screen. Layout resources are stored as XML files in the /res/layout resource directory for the application. A layout resource is simply a template for a user interface screen, or portion of a screen, and contain.
• A type of View class whose primary purpose is to organize other controls. These layout classes LinearLayout, RelativeLayout, TableLayout, etc.  are used to display child controls, such as text controls or buttons or images on the screen.

     ·  Following is list of Layout supported by Android

1   Liner Layout :

·        Android linear layout is one of the fundamental layouts in an android application.

·        Which is available for developer to implement their user interface name as a linear layout?

·        It put its children in a linear fashion.

·        Linear layout is a view group that aligns all its children in a single direction.

·        That may be in a vertical or in a horizontal so there are two types of linear layout is available.

·        Following is an XML file for linear layout.

<linearlayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_padding right="16 dp"

android:layout_padding left="16dp"

android:layout_orientation="vertical">

·        In linear layout element name start from android and the android are name spaces which have number of attribute like layout_width, layout_height etc.

·        Android attribute must be specified for the root element in every android XML file.

2      Relative layout :

·        Relative layout view of groups which enable user to specify the location of child object relative to each other child.

·        It is also help to display child view in a relative position.

·        The position of each view can be specified as relative to its element in a left top and center position.

·        It is also align parent control in their relative manner.

          ·    Following is diagram of relative layout.

·        It is very powerful utilizes for designer a user interface because it can help to design a developer in a user friendly environment.

·        It is also help to user to element a nested view and groups because it keeps the layout in a hierarchical manner and with the help of this functionality we can improve the performance.

·        There are several linear layouts instead of a single relative layout.

·        In a relative layout view child can specified their position in a relative to parent view or to each other.

          ·   So we can assign two element with border, screen, alignment, left, right and                   center.

·        Following is an example of relative layout.

<RelativeLayout

     android:layout_width="match_parent"

     android:layout_height="match_parent"

     ..........

</RalativeLayout>

·        According to above example relative layout define as a root element in their activity screen.

·        It has number of attributes to set user interface in their activity.

       List view

·        List view is a view group that displays the list of scrollable items.

·        The list items are automatically inserted at to the list when the content of your layout is dynamic or not predictable.

·        The list of items is automatically inserted at to the list using adapter and array from the database.

·   Following is a diagram of list view.

·   List view is also known as an adapter because it actually works as a bridge between user interface component and data source.

·    That fills the data into user interface component and display like spinner list view etc.

·  Android provide several sub classis of adapter that are usefull for retrieve a different kinds of data.

    Grid view

·        Grid view is a view group that display item in a two dimensional and also provide scroll facility.

·        The grid items are automatically inserted to the layout using adapter view.

·        The grid items are not necessary to pre determine because it is inserted into the layout using list adapter.

·        List view and the grid view are sub class of adapter view

·        They can be populated by building them to and adapter.

·        It retrieves data from external sources and creates a view that represents each data items.

·   Following is a diagram of grid view

·      According to above diagram grid view represent data in a tabular format where they arrange data in row or and column.

   Array Adapter

·       Array adapter is generally used in every view or view group object.

·       Array adapter bind each object in and array to a text view.

·      The list activity class used adapter as a content data in a list view.

·      By default the class provides resources for a single text view but when it is used in a complex layout to content a large data from the database array adapter class and array is used.

·        In a list view fill the data require array adapter.

·  Array adapter create a view for each array item by calling to string method for each item and place context in a text view.

 Drawing 

·      The android framework API provide a set of 2D and 3D drawing which allow developer to design a custom graphics on to a canvas and also modify the existing view in a look an fill.

·     Draw your graphics into a view object from your layout in this manner the drawing of your graphic is handle by system in a normal view.

·        It is hierarchical process of drawing using the graphic inside the view.

·       Developer can draw graphics directory on a canvas and in this way user can personally call the appropriate class is on drawing method.

·        In this method we can draw a picture and also control the animation.

·        User can typically use drawing and graphics in different ways that is.

-         Draw your graphics and animation into a view object.

-         Draw your graphics directly to a canvas.

· Draw a graphics is handling but the system normally in a view hierarchical mode.

Draw using a canvas

·  When you would like to perform a specialize drawing control of animation and graphics then you have to select a drawing through the canvas.

·       Canvases work as an interface to raw a graphics and hold your drawing   on a canvas.

·        User can draw the actual performance with the help of bitmap.

·        Canvas class has its onset of drawing methods.

·    That you can use at the time of drawing.

Drawing on a view

·     If the application require some amount of process or frame rate speed for game design or animation can control either in a slowly animated or in a fast animated.

·    It is depend upon custom view component and drawing with canvas  using view ondraw () method.

·        To start extended view you have to define onDrawCallback () method.

·  This method with the call by the android frame work to request you draw view its self.

Drawing with on surface view

·        Surface view is a special sub class of view that offers a drawing surface with in a view hierarchical mode.

·        It is secondary thread so that application is not require waiting until the system is not ready to draw in a view hierarchical.

·        It provides dedicated drawing surface view.

·        Instead of secondary thread to a surface view can draw its own canvas at its own position.

·  The surface view sub class is an interface that will notify you about the underline surface for created change or destroy.

Draw able

·        A draw able resource is general concept for a graphics that can be draw on the screen and also help to retrieve API such ass get drawable() method.

·        Android offer to be graphics library for drawing shape and image.

·        The draw able is general concept for something that can be draw.

·      There is verity of specific kind of draw able graphics like bitmap 

     drawable, shape draw able, picture draw able, layer draw able etc.

·        There are three different ways to define instance of draw able that is.

·        Using an image saved in your project resources.

·        Using and XML file that define the draw able property.

·    Using the normal class constructor.

Draw able from resource XML

·  The basic principle of android for developing and application using interface.

·        XML provide a powerful and flexible inherit to define object in XML.

·  Once you have define your drawable in XML save the file in resource/drawable directory and you can retrieve the object by calling resource.get.drawable () method.

·    Android XML resource provide a draw able sub class that support the inFlat () method.

·        Which can be define and XML or by the application manager.

·  Each draw able support XML and XML attribute to define the object property.

Working with animation in android

·    Android provide verity of powerful API for adding animation to your application.

·  It provides application interface will give high quality feel to your application.

·       Android can be perform throw either XML or android code.

·    Following is some list of API for applying animation to user interface element that is 

-         Animation

-         Property animation

-         View animation

-         Draw animation

Animation

·     The android frame work provide two different animation system that is property animation, view animation

·        Both animations are viable in system but property animation system is a general and also it is a preferable because it provide more flexible and also offer more feature.

·        Property animation

·   This system provides robust frame work that allow user to animate almost anything.

·        You can define n animation to change any object, property any time.

·        It is introduced in android 3.0 in API level 11.

·   You can define the animation for the object regardless of whether it draws to the screen or not.

·      Property animation changes its property value over specific length of a time.

·    To animate anything you have to specify the object property that you want to animation on the screen like position on the screen, how long you want to animate and what values you want to animate.

·        Property animation have following characteristics

-         Duration

-         Time interpolation

-         Repeat count and behavior

-         Animator set

-         Frame refreshes delay etc.

·        Duration can specify duration of an animation.

·        The default length or duration is 300 MR.

·    Time interpolation can specify how long the value for the property is   calculating as a function of the animation.

·     In repeat count and behavior specify whether or not have and animation repeat when it reach the end of the duration and how many to repeat the animation.

·       Animator set is a group of animation into a logical set that play together or sequentially or after specified delay.

·     In a frame refresh delay can specify how many times and how often to refresh a frame of your animation.

·   The default frame refreshes delay after every 10 mille seconds.

View animation

·    You can use view animation system to perform twined animation on a view.

·    Twined animation calculates the animation with information such as start point, end point, size, rotation and other common aspects of an animation.

·  View animation system provide the capability to only animate view object so if you want to animate non view object you have to implement your own code.

·     View animation system also considers that fact is that it only exposes a few aspects of a view object like sharing, scaling, rotation but not the background color.

·   One another disadvantage of view animation system is that it only modify where the view was draw.

·   The view animation accomplished everything you want then it is a right choice for animation system.

Drawable animation

·      This animation load a series of draw able resource one after another to  create an animation.

·     This is a traditional animation in the scene that it is with the sequence of different images play in order like roll of film.

·     The animation draw able class is basic for draw able class is basic class for draw able animation.

·     When you define a frame of animation in your application code using the animation draw able class API.

·    It is simpler accomplished with a single XML file that it’s the frame compose.

·        The XML life is a kind of animation then it is store under res/draw able  directory in your android project.

·      XML file consist animation list element as the root node a series of     child element as a <item> that each define as a frame work.

Tween Animation

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

·     It can be applied to any type of object. So in order to use this, android has provided us a class called Animation.

·     In order to perform animation in android, we are going to call a static  function loadAnimation () of the class AnimationUtils.

·        We are going to receive the result in an instance of Animation Object.

·        Following is  syntax of Animation :

Animation animation = AnimationUtils.loadAnimation

                                       (getApplicationContext (), R.anim.myanimation);

·        Note the second parameter. It is the name of the animation xml file.

·    You have to create a new folder called anim under res directory and make an xml file under anim folder.

      start()   : This method starts the animation

 setDuration(long duration) : This method sets the duration of an                                                                  animation

      getDuration() : This method gets the duration which is set  by above method

      end()   : This method ends the animation

      cancel() : This method cancels the animation

Frame Animation

·      In Android Frame Animation, you will be swapping frames repeatedly, so that it appears continuous to the human eye and we feel that it is animated.

·        Frame is referred to an image.

·     So to implement frame by frame animation in android, one needs to     have set of images, which describes a motion.

·    The idea behind a frame animation is simple, that We’ll be cycling     through a series of images very quickly, just like an old movie reel.

·        The “frame” refers to a single image.

·      Thus, the first step in creating a custom frame animation is to create a    sequence of images.

·      We have two options here that is

      ·        We can use XML drawable.

      ·    Or Actual image files.

Please Share and Comment it... Thank You..

Dialog

dialog is a small window that prompts the user to make a decision or enter

additional information. A dialog does not fill the screen and is normally used

for events that require users to take an action before they can proceed.

In android, you can create following types of Dialogs:

•     Alert Dialog
•     DatePicker Dialog
•     TimePicker Dialog
•     Custom Dialog

Alert Dialog

This Dialog is used to show a title, buttons(maximum 3 buttons allowed), a  list of select able items, or a custom layout.

There are three regions in an alert dialog. These are:

1.   Title

This is optional and it should be generally used when the content area is

occupied by a detailed message, a list, or a custom layout. If you need to

state a simple message or question, you don't need a title.

2.   Content Area

This area is used to display any message, a list, or other custom layout.

3.   Action Buttons

Alert Dialog allows maximum three action buttons in a dialog. For eg.

DatePicker Dialog

•      This dialog provides us with a pre-defined UI that allows the user to select a date.

TimePicker Dialog

·        This dialog provides us with a pre-defined UI that allows the user to select suitable time.

Custom Dialog

·    You can create your own custom dialog with custom characteristics. it is also look like alert dialog box.

To use custom dialog just create one another activity and set layout which 

you want to display when user click on button.

Following is simple Example of Alert Dialog Box

AlertDialog.Builder builder = new AlertDialog.Builder(this);

builder.setMessage("Android Alert Dialog ");

builder.setTitle("Learning Dialog");

AlertDialog dialog = builder.create();

dialog.show();

:: Best Of Luck ::

https://myshopprime.com/uday.shah3/shop