Android - UI Design Tutorial

2021-12-07 14:02 Android开发

In this chapter we will look at the different UI components of android screen. This chapter also covers the tips to make a better UI design and also explains how to design a UI. <h2 >UI screen components</h2> A typical user interface of an android application consists of action bar and the application content area. <ol class="list" > <li > Main Action Bar </li> <li > View Control </li> <li > Content Area </li> <li > Split Action Bar </li> </ol> These components have also been shown in the image below − <img alt="Anroid UI Tutorial" src="http://www.tutorialspoint.com/android/images/ui1.jpg" /> <h2 >Understanding Screen Components</h2> The basic unit of android application is the activity. A UI is defined in an xml file. During compilation, each element in the XML is compiled into equivalent Android GUI class with attributes represented by methods. <h3 >View and ViewGroups</h3> An activity is consist of views. A view is just a widget that appears on the screen. It could be button e.t.c. One or more views can be grouped together into one GroupView. Example of ViewGroup includes layouts. <h3 >Types of layout</h3> There are many types of layout. Some of which are listed below: <ul class="list" > <li > Linear Layout </li> <li > Absolute Layout </li> <li > Table Layout </li> <li > Frame Layout </li> <li > Relative Layout </li> </ul> <h3 >Linear Layout</h3> Linear layout is further divided into horizontal and vertical layout. It means it can arrange views in a single column or in a single row. Here is the code of linear layout(vertical) that includes a text view. <pre class="prettyprint notranslate prettyprinted" > <?xml version=”1.0” encoding=”utf-8”?> <LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android” android:layout_width=”fill_parent” android:layout_height=”fill_parent” android:orientation=”vertical” > <TextView android:layout_width=”fill_parent” android:layout_height=”wrap_content” android:text=”@string/hello” /> </LinearLayout></pre> <h3 >AbsoluteLayout</h3> The AbsoluteLayout enables you to specify the exact location of its children. It can be declared like this. <pre class="prettyprint notranslate prettyprinted" > <AbsoluteLayout android:layout_width=”fill_parent” android:layout_height=”fill_parent” xmlns:android=”http://schemas.android.com/apk/res/android” > <Button android:layout_width=”188dp” android:layout_height=”wrap_content” android:text=”Button” android:layout_x=”126px” android:layout_y=”361px” /> </AbsoluteLayout></pre> <h3 >TableLayout</h3> The TableLayout groups views into rows and columns. It can be declared like this. <pre class="prettyprint notranslate prettyprinted" > <TableLayout xmlns:android=”http://schemas.android.com/apk/res/android” android:layout_height=”fill_parent” android:layout_width=”fill_parent” > <TableRow> <TextView android:text=”User Name:” android:width =”120dp” /> <EditText android:id=”@+id/txtUserName” android:width=”200dp” /> </TableRow> </TableLayout></pre> <h3 >RelativeLayout</h3> The RelativeLayout enables you to specify how child views are positioned relative to each other.It can be declared like this. <pre class="prettyprint notranslate prettyprinted" > <RelativeLayout android:id=”@+id/RLayout” android:layout_width=”fill_parent” android:layout_height=”fill_parent” xmlns:android=”http://schemas.android.com/apk/res/android” > </RelativeLayout></pre> <h3 >FrameLayout</h3> The FrameLayout is a placeholder on screen that you can use to display a single view. It can be declared like this. <pre class="prettyprint notranslate prettyprinted" > <?xml version=”1.0” encoding=”utf-8”?> <FrameLayout android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_alignLeft=”@+id/lblComments” android:layout_below=”@+id/lblComments” android:layout_centerHorizontal=”true” > <ImageView android:src = “@drawable/droid” android:layout_width=”wrap_content” android:layout_height=”wrap_content” /> </FrameLayout></pre> Apart form these attributes, there are other attributes that are common in all views and ViewGroups. They are listed below − <table class="table table-bordered" > <tbody > <tr > <th >Sr.No</th> <th >View & description</th> </tr> <tr > <td >1</td> <td >layout_width Specifies the width of the View or ViewGroup </td> </tr> <tr > <td >2</td> <td >layout_height Specifies the height of the View or ViewGroup </td> </tr> <tr > <td >3</td> <td >layout_marginTop Specifies extra space on the top side of the View or ViewGroup </td> </tr> <tr > <td >4</td> <td >layout_marginBottom Specifies extra space on the bottom side of the View or ViewGroup </td> </tr> <tr > <td >5</td> <td >layout_marginLeft Specifies extra space on the left side of the View or ViewGroup </td> </tr> <tr > <td >6</td> <td >layout_marginRight Specifies extra space on the right side of the View or ViewGroup </td> </tr> <tr > <td >7</td> <td >layout_gravity Specifies how child Views are positioned </td> </tr> <tr > <td >8</td> <td >layout_weight Specifies how much of the extra space in the layout should be allocated to the View </td> </tr> </tbody> </table> <h2 >Units of Measurement</h2> When you are specifying the size of an element on an Android UI, you should remember the following units of measurement. <table class="table table-bordered" > <tbody > <tr > <th >Sr.No</th> <th >Unit & description</th> </tr> <tr > <td >1</td> <td >dp Density-independent pixel. 1 dp is equivalent to one pixel on a 160 dpi screen. </td> </tr> <tr > <td >2</td> <td >sp Scale-independent pixel. This is similar to dp and is recommended for specifying font sizes </td> </tr> <tr > <td >3</td> <td >pt Point. A point is defined to be 1/72 of an inch, based on the physical screen size. </td> </tr> <tr > <td >4</td> <td >px Pixel. Corresponds to actual pixels on the screen </td> </tr> </tbody> </table> <h2 >Screen Densities</h2> <table class="table table-bordered" > <tbody > <tr > <th >Sr.No</th> <th >Density & DPI</th> </tr> <tr > <td >1</td> <td >Low density (ldpi) 120 dpi </td> </tr> <tr > <td >2</td> <td >Medium density (mdpi) 160 dpi </td> </tr> <tr > <td >3</td> <td >High density (hdpi) 240 dpi </td> </tr> <tr > <td >4</td> <td >Extra High density (xhdpi) 320 dpi </td> </tr> </tbody> </table> <h2 >Optimizing layouts</h2> Here are some of the guidelines for creating efficient layouts. <ul class="list" > <li > Avoid unnecessary nesting </li> <li > Avoid using too many Views </li> <li > Avoid deep nesting </li> </ul>