Android Ui


Published on

This presentation have-
How to design the User-Interfce.
How to use different layouts............

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Android Ui

  1. 1. Developing Efficient Android UI
  2. 2. Adapters in Android <ul><li>An Adapter object acts as a bridge between an View and the underlying data for that view. </li></ul><ul><li>One side of the adapter is a data structure like a Java object storing data. the other side of the adapter, there is view that the data structure was transformed into. </li></ul><ul><li>The Adapter is also responsible for making a View for each item in the data set . </li></ul>
  3. 4. <ul><li>Considering Adaptor for the List View </li></ul><ul><li>Each List item in the List View would be calling its “ getView() ” method. </li></ul><ul><li>This method would return a view for the List. </li></ul><ul><li>But creating a new View for each list item would be complicated, and the UI would be slow down. </li></ul><ul><li>Instead of creating new View for each item, Recycler save these view and passes it to the Adapter. </li></ul><ul><li>Adapter uses these view sent by the recycler, when it has to produce any new views. </li></ul>
  4. 5. View Holders <ul><li>View Holders hold some data that related to an item to the view. </li></ul><ul><li>View Holders minimizes the amount of work, while writing the same piece of code again and again. </li></ul><ul><li>These are used while creating the views, where we have to use more than one time. </li></ul><ul><li>(TextView)findViewById(R.Id.text); </li></ul><ul><li>(ImageView)findViewById(R.Id.Icon); </li></ul><ul><li>By using the View Holders, the views are saved into a class variable and can be called when needed. </li></ul><ul><li>holder.text = (TextView)findViewById(; </li></ul><ul><li>holder.icon = (ImageView)findViewById(; </li></ul><ul><li>convertView.setTag(holder); </li></ul><ul><li>A tag can hold any kind of object, that can be set on the view. </li></ul>
  5. 7. Backgrounds <ul><li>Backgrounds can be any bitmap images or Colors or any resource from drawable directory. </li></ul><ul><li>The background will completely fills the view. </li></ul><ul><li>Scaling a bitmap at runtime would be difficult as it has to fill the complete view. </li></ul><ul><li>Instead pre-scale the bitmap and then set it as background. </li></ul><ul><li>Else use the solid colors as background to fill the view. </li></ul><ul><li>This would increase the frame rate 50 frames per sec. (In normal we have 25 frames per sec). </li></ul>
  6. 8. Pre-scaling a bitmap Bitmap.createScaledBitmap( originalImage, //bitmap to resize view.getwidth() //new width view.getHeight() //new Height true); //bi-linear filterring
  7. 9. Drawing and Invalidating <ul><li>Invalidate is a method used to redraw </li></ul><ul><li>Using invalidate method the entire screen is redrawn again. </li></ul><ul><li>This may consume some time to return to the normal state. </li></ul><ul><li>While invalidating two areas on the screen (say, top right and bottom left of the screen) the frame work would take the union of the area and redraws. </li></ul><ul><li>Solution for these problems would be: </li></ul><ul><li>invalidate(Rect) </li></ul><ul><li>and </li></ul><ul><li>invalidate(left, top, right, bottom) </li></ul><ul><li>Frames would be increased to 50 per sec. (normally 18 frames) </li></ul>
  8. 10. Views and Layouts <ul><li>View is a basic building block of the user interface component. </li></ul><ul><li>A view occupies a rectangle area on the screen and is responsible for drawing and event handling. </li></ul><ul><li>UI containing many Views would make the application to run slower as it has to load every view accordingly. </li></ul><ul><li>Drawing of objects on many views is a difficult task and requires more time to start an activity. </li></ul><ul><li>This may cause stackOverflow Exception (as the stack size in android is 8kb). </li></ul><ul><li>Deep hierarchies makes the UI very slow. </li></ul>
  9. 11. Compound Drawables <ul><li><Linearlayout android:orientation = “horizantal” </li></ul><ul><li>android:layout_width = “fill_parent” </li></ul><ul><li>android:layout_height = “wrap_content” /> </li></ul><ul><li> <TextView android:layout_width = “wrap_content” </li></ul><ul><li>android:layout_height = “wrap_content </li></ul><ul><li>android:text = “@string/hello” /> </li></ul><ul><li><ImageView android:layout_width = “wrap_content” </li></ul><ul><li>android:layout_height = “wrap_content” </li></ul><ul><li>android:src = “@drawable/icon” /> </li></ul><ul><li></Linearlayout> </li></ul>The above code can be written as: <TextView android:layout_width = “wrap_content” android:layout_height = “wrap_content” android:text = “@string/hello” android:drawableLeft = “@drawable/icon” />
  10. 12. View Stub in android <ul><li>View Stub is a dumb and lightweight view. </li></ul><ul><li>It has no dimensions and does not participate in Layouts. </li></ul><ul><li>View Stud is a feature that allows runtime inflation of views. </li></ul><ul><li><ViewStub </li></ul><ul><li> android:id=“@+id/stub” </li></ul><ul><li> android:inflateId=“@+id/panel_import” </li></ul><ul><li> android:lalyout = “@layout/progress_overlay” </li></ul><ul><li> android:gravity = “bottom” /> </li></ul><ul><li>Inflating a View Stub…. </li></ul><ul><li>findViewById(; </li></ul><ul><li>or </li></ul><ul><li>View importPannel = ((ViewStub)findViewById(; </li></ul>
  11. 13. Merge <ul><li>The <merge /> can only be the root tag in the xml file. </li></ul><ul><li>This tag would reduces the levels of hierarchies in the xml layout file. </li></ul><ul><li><merge xlms:android=“”> </li></ul><ul><li><!– content --> </li></ul><ul><li></merge> </li></ul>
  12. 14. Relative Layout <ul><li>Relative layout are powerful layout in android. </li></ul><ul><li>Relative layout replaces the Linear layout as the widgets are placed in either horizontal or vertical way. </li></ul><ul><li>Each child element is laid out in relation to other child elements. </li></ul><ul><li>Relationships can be established so that children will start themselves where a previous child ends. </li></ul><ul><li>Children can relate only to elements that are listed before them. </li></ul>
  13. 15. Custom Views <ul><li>Custom Views are very simple to use. </li></ul><ul><li>Just need to override only two methods. </li></ul><ul><li>onDraw(Canvas canvas) </li></ul><ul><li>onMeasure(int Width, int height) </li></ul><ul><li>We can define the dimensions of the view. </li></ul>
  14. 16. Custom Layouts <ul><li>Custom Layouts are used to define user defined layouts instead of using the pre-defined layouts. </li></ul><ul><li>Using custom layout, user can define: </li></ul><ul><li>height and width of the layout </li></ul><ul><li>Childs residing on the layout </li></ul><ul><li>Visibility of the children during runtime. </li></ul><ul><li>To define custom layout, </li></ul><ul><li>A class should extend ViewGroup </li></ul><ul><li>override onMeasure and onLayout methods. </li></ul>