ITU- FAO- DOA- TRCSL Training on Innovation & Application Development for E- Agriculture User Interface Development in Android Applications 11 th - 15 th December 2017 Peradeniya, Sri Lanka Shahryar Khan & Imran Tanveer, ITU Experts
User Interface Agenda Introduction Android Layouts I. Absolute Layout II. Frame Layout III. Linear Layout IV. Relative Layout
User Interface The UI can be designed in following two ways 1. Design using XML 2. Design at runtime (in.java file) Which approach is better to use? Among the two approaches mentioned above designing UI using XML is better and most commonly used because of the following reasons. Ø The advantage to declaring your UI in XML is that it enables you to better separate the presentation of your application from the code that controls its behavior. Ø Your UI descriptions are external to your application code, which means that you can modify or adapt it without having to modify your source code and recompile. Ø You can create XML layouts for different screen orientations, different device screen sizes. Ø Declaring the layout in XML makes it easier to visualize the structure of your UI, so it's easier to debug problems Android Layouts Following are the most commonly layouts used in Android Ø Absolute Layout Ø Frame Layout Ø Linear Layout Ø Relative Layout
Absolute Layout Absolute Layout is based on the simple idea of placing each control at an absolute position. You specify the exact x and y coordinates on the screen for each control. This is not recommended for most UI development (in fact Absolute Layout is currently deprecated) since absolutely positioning every element on the screen makes an inflexible UI that is much more difficult to maintain. Here is a sample Layout XML using Absolute Layout. <?xml version="1.0" encoding="utf-8"?> <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent"> android:layout_x="90px" android:layout_y="110px" android:text="absolute Layout Example" android:textstyle="bold" android:gravity="center" android:textsize="26sp" /> <Button android:id="@+id/backbutton" android:text="back" android:layout_x="250px" android:layout_y="490px" /> android:layout_x="110px" android:layout_y="260px" android:text="first Name" /> android:layout_x="320px" android:layout_y="210px" android:width="300px" /> android:layout_x="110px" android:layout_y="320px" android:text="last Name" /> android:layout_x="320px" android:layout_y="290px" android:width="300px"
/> </AbsoluteLayout> FrameLayout FrameLayout is normally used to display a single item at a time. They are designed to block an area on the screen. Frame Layout should be used to hold child view, because it can be difficult to display single views at a specific area on the screen without overlapping each other. We can add multiple children to a FrameLayout and control their position by assigning gravity to each child, using the android:layout_gravity attribute. <?xml version="1.0" encoding="utf-8"?> <FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"> <ImageView android:src="@mipmap/ic_launcher" android:scaletype="fitcenter" android:layout_height="fill_parent" android:layout_width="fill_parent"/> android:text="absolute Layout" android:textsize="24sp" android:textcolor="#000000" android:layout_height="fill_parent" android:layout_width="fill_parent" android:gravity="center"/>
</FrameLayout> Here is the result of this XML. You can see I had both the ImageView and TextView fill the parent in both horizontal and vertical layout. Gravity specifies where the text appears within its container, so I set that to center. If I had not set a gravity then the text would have appeared at the top left of the screen. FrameLayout can become more useful when elements are hidden and displayed programmatically.
LinearLayout LinearLayout organizes elements along a single line. You specify whether that line is verticle or horizontal using android:orientation. Here is a sample Layout XML using LinearLayout. <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout > android:text="linear Layout" android:layout_marginleft="120dp" android:textstyle="bold" android:textsize="26sp" android:layout_margintop="30dp"/> </LinearLayout> <LinearLayout android:layout_width="fill_parent" android:orientation="horizontal" android:layout_marginleft="20dp"> android:text="first Name" android:layout_margintop="150dp"/> android:width="80dp" android:layout_margintop="150dp"/> android:text="last Name" android:layout_margintop="150dp"/> android:width="80dp"
android:layout_margintop="150dp"/> <Button android:id="@+id/backbutton" android:text="back" android:layout_margintop="150dp"/> </LinearLayout> </LinearLayout> Here is a screenshot of the result of the above XML. Now change the orientation in the above code to vertical and come up with something similar to this
RelativeLayout RelativeLayout lays out elements based on their relationships with one another, and with the parent container. This is comparitively complicated layout, and we need several properties to actually get the layout we want. <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingleft="@dimen/activity_horizontal_margin" android:paddingright="@dimen/activity_horizontal_margin" android:paddingtop="@dimen/activity_vertical_margin" android:paddingbottom="@dimen/activity_vertical_margin" tools:context=".mainactivity"> android:text="@string/welcome" android:layout_centerhorizontal="true" android:textsize="30sp" android:textcolor="@android:color/black" android:id="@+id/title_welcome" /> android:text="@string/sign_in_title_text" android:layout_centerhorizontal="true" android:layout_below="@+id/title_welcome" android:textsize="22sp" android:layout_margintop="10dp" android:textcolor="@android:color/black" android:id="@+id/txt_signin" /> android:layout_width="match_parent" android:layout_height="60dp" android:inputtype="textpersonname" android:ems="10" android:id="@+id/edit_name" android:textcolor="@android:color/black" android:layout_below="@+id/txt_signin" android:hint="@string/username" android:textcolorhint="@android:color/black" android:paddingleft="20dp" android:layout_marginleft="20dp" android:layout_margintop="40dp" android:layout_centerhorizontal="true" /> android:layout_width="match_parent" android:layout_height="60dp" android:inputtype="textpassword" android:ems="10" android:id="@+id/edit_password" android:textcolor="@android:color/black" android:layout_below="@+id/edit_name" android:hint="password"
android:textcolorhint="@android:color/black" android:paddingleft="20dp" android:layout_marginleft="20dp" android:layout_margintop="20dp" android:layout_centerhorizontal="true" /> <Button android:layout_height="@dimen/dimen_60dp" android:id="@+id/btn_login" android:layout_centerhorizontal="true" android:layout_alignleft="@+id/edit_name" android:layout_alignright="@+id/edit_name" android:layout_margintop="30dp" android:text="login" android:layout_below="@+id/edit_password" /> </RelativeLayout> Here is the output of the code above Here are strings used in this layout and placed in strings.xml <resources> </resources> <string name="sign_in_title_text">please sign in to get access</string> <string name="welcome">welcome</string> <string name="username">username</string>