Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Android User Interface: Creating UI programmatically in Android

In this article we will talk about user interface in Android. We will discuss about Android operating system which is much more suitable for user-friendly operations.

Actually, Android is a complete Operating System that fully support mobile technology. We know about the Activity class and also know the life cycle of the activity class. We can say that this activity is a means by which users cooperate with the application. Nevertheless, the activity by itself does not have a presence on the screen. As an alternative, it has to draw the screen by using Views and ViewGroups. In that certain stage, we will study the particulars about creating user interfaces in Android application, and how users interact with them. After that we will learn the procedure that can handle the changes in screen orientation on our Android devices.

Now here we are giving very small illustration about some User Interface after that we will be discuss about some features elaborately. Now some UI is given bellow.

Sl

User Interface

Application of User Interface

1

LinearLayout

These types of User Interface are used for arranging views in a single column or single row as requirement.

2

AbsoluteLayout

This is the Absolute Layout used for enabling us to specify the exact location of its system.

3

Unit of Measure

The uses of dp for the postulating the measurement of views and sp for the font size process.

4

RelativeLayout

The RelativeLayout enables us to specify where the child views are situated relative to each other process.

5

Using different XML files for different orientations

This is also an important UI that uses the layout of folder for sketch User Interface, and the layout-land for landscape User Interface.

6

ScrollView

This ScrollView User Interface is special types of FrameLayout. This can empowers the users to complete a list of views that allows more space than the physical display allows.

7

Three ways to persist activity state

Use onPause() method, also you can use the onRetainNonConfigurationInstance() method, otherwise use the onSaveInstanceState() method to persist the activity state.

8

FrameLayout

FrameLayout is used in a placeholder on the screen that we can use to display a single view process.

9

TableLayout

This is TableLayout used for views into rows and columns.

10

Action items

Action items are demonstrated on the correct of the Action Bar. Basically the systems are created just for the like options of the menus.

11

Application icon

Application Icon is used to return to the home activity of an application. Basically it is suitable for the Intent object.

12

Action Bar

The Action bar is used to Interchange the outdated title bar for the older versions of the Android System.

Table 1: Showing User Interface

Concept of the Components of a Screen

The activity that displays the user interface of our application, which may contain widgets such as buttons, labels, textboxes, and so on. Basically we define our user Interface using an XML file which is actually the main.xml file located in the res/layout folder of our project, and programming segment looks like this.

Listing 1: Sample showing components

  <?xml version=”1.0” encoding=”utf-8”?>
  <LinearLayout xmlns:android=”http://schemas.android.com/apk/resource1/android”
  android:layout_width=”filling_pent”
  android:layout_height=”filling_pent”
  android:orientation=”vertical”>
  <TextView
  android:layout_width=”filling_pent”
  android:layout_height=”wrapping_cent”
  android:text=”@string/BCEI”/>
  </LinearLayout>
  

After writing the code we will try to track this program. At the time when the program is running we have to consignment the Extensible Markup Language User Interface in the onCreate() method of handler in our own Activity class. In that circumstance we will use the setContentView() method of the Activity classes. The following code is written here for manipulating the process.

Listing 2: Sample showing different methods

  @Override
  public void onCreate(Bundle savedInstanceState) //onCreate is method
  {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
  }
  

At the time of the compilation each element in the Extensible Markup Language file is compiled into its correspondent Android Graphical User Interface class purpose, also the attributes to be characterized by methods. After that the Android system creates the User Interface of the activity at the time when the system is loaded in machine.

There are lots of User Interfaces present here. But now we will discuss some of them, which are too much important as well as very reliable for developing android application model.

Procedure to Set Views and View Groups User Interface Programmatically

Here we will discuss the activities, which can hold the views and View Groups. Generally the view is a widget that has a representation on the screen. Common views are buttons, labels, and textboxes etc. A view is originated from the base class android view. In general one or more views can be grouped together into a ViewGroup system. The ViewGroup (we define the view group as special type of view) provides the layout in which we can define the presence and classification of the views.

As per the Illustrations of the ViewGroups we can encompass LinearLayout and FrameLayout. Habitually the ViewGroup derives from the base class android.view.ViewGroup. Now we are discussing ViewGroups which is supported by the Android System.

  • LinearLayout
  • AbsoluteLayout
  • TableLayout
  • RelativeLayout
  • FrameLayout
  • ScrollView

Procedure to Set Views and LinearLayout User Interface Programmatically

Now here we are discussing about the LinearLayout. This LinearLayout arranges views in a single column or a single row manner. Basically the Child views can be structured either vertically or horizontally. The file is also written here.

Listing 3: Sample linear layout

  <?xml version=”1.0” encoding=”utf-8”?>
  <LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
  android:layout_width=”filling_parent”
  android:layout_height=”filling_parent”
  android:orientation=”horizontal” >
  <TextView
  android:layout_width=”filling_parent”
  android:layout_height=”wraping_contents”
  android:text=”@string/welcome”/>
  </LinearLayout>
  

Above program is now illustrated through the main.xml file. In the program segment we perceive that the root (main segment) of the element is <LinearLayout> and it has a <TextView> element present inside it. The <LinearLayout> element controls the order in which the views are restricted.

In that respect we take an illustration, the width of the <TextView> element fills the entire width of its parent. Basically the screen adjusts are using the filling_parent constant. Its height is specified by the wraping_contents constant. After that if we do not think about the <TextView> view to occupy the entire row, for that circumstance we can set its layout_width attribute to wraping_content, this process is like below.

Listing 4: Sample showing layout

  <TextView
  android:layout_width=”wraping_contents”
  android:layout_height=”wraping_contents”
  android:text=”@string/Welcome” />
  

This code is used to set the width of the view to be equal to the width of the text contained within its unambiguous locality. After that we can consider the following layout as per our requirement.

  <?xml version=”1.0” encoding=”utf-8”?>
  <LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
  android:layout_width=”filling_parent”
  android:layout_height=”filling_parent”
  android:orientation=”horizontal” >
  <TextView
  android:layout_width=”100dp”
  android:layout_height=”wraping_contents”
  android:text=”@string/Welcome” />
  <Button
  android:layout_width=”160dp”
  android:layout_height=”wraping_contents”
  android:text=”Button”
  android:onClick=”onClick”/>
  </LinearLayout>
  

Procedure to Set Views and Absolute Layout User Interface Programmatically

Now we will try to resolve AbsoluteLayout concept which empowers us to postulate the particular locality or the position of its children. Also contemplate the following user Interface process that defined in main.xml segment area.

Listing 5: Sample showing absolute layout plan

  <AbsoluteLayout
  android:layout_width=”filling_parent”
  android:layout_height=”filling_parent”
  xmlns:android=”http://schemas.android.com/apk/res/android” >
  <Button
  android:layout_width=”148dp”
  android:layout_height=”wraping_contents”
  android:text=”Button”
  android:layout_x=”116px”
  android:layout_y=”361px”/>
  <Button
  android:layout_width=”113dp”
  android:layout_height=”wraping_contents”
  android:text=”Button”
  android:layout_x=”12px”
  android:layout_y=”361px” />
  </AbsoluteLayout>
  

In the above example we are considering the two Button views. This button view is already checked on a one eighty dpi (stands for dot per inch) Android Virtual Device positioned at their enumerated situations by means of the android_layout_x and android_layout_y elements. But in that situation there is a lot of problem with the AbsoluteLayout. Because at that movement the motion is viewed on a high resolution screen in the high resolution concept, the AbsoluteLayout has been changed since Android 1 as well as it also supports the most recent version of the Android (like jellybean, kitKat). Here we will also avoid using the AbsoluteLayout in our User Interface model, as it is not convinced to be sustained in future versions of the Android.

Procedure to Set Views and Table Layout User Interface Programmatically

TableLayout is another important and very progressive user interface that generally uses the modern UI design. Basically we know that the table is a combination or row and column where vertical part is called column and horizontal part is called row. The TableLayout are groups of views into rows and columns. In that respect we use the <TableRow> element to elect a row in the table scenario. The row is present here can contain one or more views. Each and every view that we place within a row forms a cell (Cell is called intersection of row and column). We also measure the width; the width of each column is single-minded by the principal width of each cell in that specific column. After that we are considering the content of main.xml in this program denoted here.

Listing 6: Sample showing table layout

  <TableLayout
  xmlns:android=”http://schemas.android.com/apk/res/android”
  android:layout_height=”filling_parent”
  android:layout_width=”filling_parent” >
  <TableRow>
  <TextView
  android:text=”Enter the UserName……:”
  android:width =”120dp”/>
  <EditText
  android:id=”@+id/txtUserName”
  android:width=”200dp” />
  </TableRow>
  <TableRow>
  <TextView android:text=”Enter the Password……”/>
  <EditText
  android:id=”@+id/txtPassword”   //setting up the password
  android:password=”true” //password condition default is true.
  />
  </TableRow>
  <TableRow>
  <TextView/>
  <CheckBox android:id=”@+id/chkRememberPassword”
  android:layout_width=”filling_parent”
  android:layout_height=”wraping_contents” 
  android:text=”Remember Password”/>
  </TableRow>
  <TableRow>
  <Button
  android:id=”@+id/buttonSignIn”
  android:text=”Sign In Here ” />
  </TableRow>
  </TableLayout>
  

This code is written as per row column setting process. The Sign In procedure is done by the code.

Procedure to Set Views and Relative Layout User Interface Programmatically

After that we are now discussing a clear and prominent idea about RelativeLayout. The RelativeLayout can easily enable to specify the process that the child views are positioned relative to each other. Now here we are discussing about the RelativeLayout programming model.

Listing 7: Sample showing relative layout

  <?xml version=”1.0” encoding=”utf-8”?>
  <RelativeLayout
  android:id=”@+id/RelativeLayout”
  android:layout_width=”filling_parent”
  android:layout_height=”filling_parent”
  xmlns:android=”http://schemas.android.com/apk/res/android” >
  <TextView
  android:id=”@+id/labelComments”
  android:layout_width=”wrapping_contents”
  android:layout_height=”wrapping_contents”
  android:text=”Welcome to BCEI…”
  android:layout_alignParentTop=”true”
  android:layout_alignParentLeft=”true”/>
  <EditText
              android:id=”@+id/txtComments”
  android:layout_width=”filling_parent”
  android:layout_height=”180px”
  android:textSize=”20sp”
  android:layout_alignLeft=”@+id/labelcomponets”
  android:layout_below=”@+id/labelcomponets”
  android:layout_centerHorizontal=”true” />
  <Button
  android:id=”@+id/buttonSave”
  android:layout_width=”128px” //set pixel
  android:layout_height=”wrapping_content”
  android:text=”Click_on_Save” //Give the Save button text.
  android:layout_below=”@+id/textcomment”
  android:layout_alignRight=”@+id/textcomment”/>
  <Button
  android:id=”@+id/buttonCancel” //This is Cancel button id
  android:layout_width=”126px” //set the width pixel
  android:layout_height=”wrapping_contents”
  android:text=”Click_on_Cancel” //set Cancel text
  android:layout_below=”@+id/textcomments”
  android:layout_alignLeft=”@+id/textcomments” />
  </RelativeLayout>
  

This point to be remembered is that each view which is embedded within the RelativeLayout has an attributes which enable it to align with alternative view.

These alternative views are very important for us. Generally there are different types of attribute present in the RelativeLayout and some of the attributes are as follows.

  • layout_alignParentTop
  • layout_alignParentLeft
  • layout_alignLeft
  • layout_alignRight
  • layout_below
  • layout_centerHorizontal

The above attributes are generally used here and the value for each of these attribute is the unique Identification for the view. Through the ID we can reference as per our requirement.

Procedure to Set Views and Frame Layout User Interface Programmatically

Frame is also another important part of the Android UI. The FrameLayout is generally called a placeholder, because a placeholder on the screen that we can use to display a solitary views (Private View). Views that we add to a FrameLayout are always anchored to the top left of the layout. Let us check one example.

Listing 8: Sample showing frame layout

  <?xml version=”1.0” encoding=”utf-8”?>
  <RelativeLayout
                          android:id=”@+id/RLayout”
  android:layout_width=”filling_parpro”
  android:layout_height=”filling_parpro”
  xmlns:android=”http://schemas.android.com/apk/res/android” >
  <TextView
  android:id=”@+id/labelcomment”
  android:layout_width=”wraping_contents”
  android:layout_height=”wraping_contents”
  android:text=”Welcome , BCEI!”
  android:layout_alignParentTop=”true”
  android:layout_alignParentLeft=”true”/>
  <FrameLayout
  android:layout_width=”wraping_contents”
  android:layout_height=”wraping_contents”
  android:layout_alignLeft=”@+id/labelcomment”
  android:layout_below=”@+id/labelcomment”
  android:layout_centerHorizontal=”true” >
  <ImageView
  android:src = “@drawable/androidsys”
  android:layout_width=”wraping_content”
  android:layout_height=”wraping_content”/>
  </FrameLayout>
  </RelativeLayout>
  

In the above program we are setting up a FrameLayout within a RelativeLayout system. Now within the FrameLayout process, we also embed an ImageView.

Conclusion

It is sure that in mobile software development user interface is very much essential in our modern mobile technology. Now a lot of mobile is totally dependent on the operating system and that operating system must support lot of apps which are very much user friendly and also easily accessible. In this article we have tried to resolve most of the User Interface in programming model. Through this process we have learned the procedure of the user interfaces that are fashioned or developed in the Android Systems. As well as, we have to get very clear knowledge about the different layouts that we can use to position the views in our Android User Interface. This knowledge is very important for developer and also designer because Android devices support more than one screen orientation at a time (though it is not multiuser operating system). Basically we need to make sure that our User Interface can easily interact and acquaint to the changes in screen orientation. However it is clear that development of the User Interface is no-doubt very much important as well as requirement for the user interaction.



Website: www.techalpine.com Have 16 years of experience as a technical architect and software consultant in enterprise application and product development. Have interest in new technology and innovation area along with technical...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login