Android User Interface with examples

(Last Updated On: April 4, 2021)

Creation of Android user interface:

Graphical interfaces are taking an increasingly important place in the choice of applications by users, both in the implementation of concepts innovative as well as in terms of ergonomics. As on many platforms, the Android application interface is organized in views and templates, with some specificities.

Amazon Purchase Links:

Top Gaming Computers

Best Laptops

Best Graphic Cards

Portable Hard Drives

Best Keyboards

Best High Quality PC Mic

Computer Accessories

*Please Note: These are affiliate links. I may make a commission if you buy the components through these links. I would appreciate your support in this way!

The Android User interface concept:

Android User interface is not a static image but a set of graphic components, which can be buttons, text, but also groups of others graphical components, for which we can define common attributes (size, color, positioning, etc.). Thus, the screen below (figure 1) can be seen by the developer as an assembly (figure 2).

The effective representation by the developer of all graphic components is done in the form of a tree, in a hierarchical structure (figure 3). There maybe have only one component, like thousands, depending on the Android user interface you want to represent. In the following tree (figure 3), for example, the components have been organized in 3 parts (top, middle, and bottom).

android user interface
figure1


 

android user interface
figure2

 

android user interface
figure3

This example gives the general idea of ​​the organization of the Android user interface – because the data graphics are not exactly represented that way. We will see later how this is handled for Android. In Android, you can describe your user Android user interface in two different ways (we will come back to this point in detail later): with a declarative description XML or directly in the code of an activity using the appropriate classes. The simplest way to create an Android user interface is to use the XML declarative method via the creation of an XML file that you will place in the / res / layout folder of your project.

The views:

The basic graphical component of the Android platform is the view: all graphics components (buttons, images, checkboxes, etc.) of Android inherit from the View class. So, in the rest of this book, keep in mind that when we create a view, we actually create a graphical object. Just as we did in the previous example, Android offers you the possibility to group together several views in a tree structure using the class ViewGroup. This structure can in turn bring together other elements of the class ViewGroup and thus be made up of several tree levels. The use and positioning of views in an activity will be done most of the time by using a layout that will be composed of one or more view templates.



Position views with templates:

A template, or layout in the official documentation, or even page layout, is an extension of the ViewGroup class. It is in fact a container that helps to position objects, whether they are views or other templates within your Android user interface. You can nest templates inside each other, which will allow you to create advanced layouts. In the rest of this book, we will talk about parent template and child template (or more generally child elements or even just children), with the child template included in the parent template. As we said above, you can describe your android user interface either by an XML declaration, or directly in the code of an activity using the adequate classes. In both cases, you can use different types of templates. Depending on the type chosen, the views and templates will be arranged differently:

  • LinearLayout: allows you to align elements from left to right or top to bottom which will be incorporated therein. By modifying the orientation property you will be able to signal to the template in which direction to display its children: with the horizontal value, the display will be left to right while the vertical value will display top to bottom;
  • RelativeLayout: its children are positioned relative to each other, the first child serving as a reference for others;
  • FrameLayout: this is the most basic of the templates. Each child is positioned in the top left corner of the screen and displayed above the previous children, hiding them in part or completely. This jig is mainly used to display an element (for example, a frame in which we want load images);
  • TableLayout: allows you to position your views in rows and columns like a board. Here is an example of a declarative definition in XML of an interface containing a linear template (the most common template in the Android user interface).

Each template has specific attributes, and others common to all types of templates. Among the common properties, you will find the properties layout_weight and layout_height. These allow you to specify the behavior filling in width and height of the templates and may contain a size (in pixels or dpi) or the following constant values: fill_parent and wrap_content. The fill_parent value specifies that the template must take up all the available space on width/height. For example, if the template is included in another template – parent (the screen itself being a template) – and if the parent template has a width of 100 pixels, the child skin template will therefore have a width of 100 pixels. If this template is the template base – the highest parent – of our screen, then this last takes the whole width of the screen. If you want to display the template as is, you can specify the value wrap_content. In this case, the template will only take up the space it needs in width height.

android user interface
figure4

 

You can specify a precise size in px (pixel) or dip (dpi). Note however only if you need to specify a size, especially if you need to integrate an image with precise size, prefer the values ​​in the dip to those in px. Indeed, since version 1.6, Android has been able to run on multiple screen sizes. Dip values ​​allow automatic adjustment of your elements whereas the values ​​in px take the same number of pixels whatever the screen size, which can quickly complicate the management of the display on the multitude of screens available.


Create a user Android user interface:

The creation of an Android user interface results in the creation of two elements:

  • a definition of the user interface (templates, etc.) declaratively in an XML file;
  • a definition of user logic (interface behavior) in an activity class. This allows for a strict separation between the presentation and functional logic of your application. In addition, a graphics integrator can modify the Android user interface without interfering with the developer’s code.

Define your Android user interface in XML:

A good practice is to completely define your Android user interface in the declaration XML. Note, however, that it is also possible (and many scenarios do not can do without) dynamically instantiating views from your code. XML interface definition files are saved in the / layout folder of your project. Take care that the name of the file contains only letters lowercase and numbers (no uppercase letters or special characters, like enforcing the Java naming convention).

Each Android user interface definition file, as long as it is in the directory res / layout of your project, has a unique identifier generated automatically by the development environment. This way you can make it their reference directly in your code. For example, if the file is named myLayout, you can refer to it in your code with the constant R.layout.monLayout. As you will see, the use of identifiers is very current: they will be used to retrieve elements, specify properties, and use the many methods of activities (findViewById, setContentView, etc.). In your Android project, create a main.xml file in the / layout folder and put the following content there.

This android user interface defines a LinearLayout type template and a graphic component TextView type text input. You will notice that we have defined a android: id attribute with the value @ + id / myText. This value will allow us to refer to this element in code with the constant R.id.montext. For the for the moment we will not go into details of the elements and attributes.

The ADT add-in automatically generates an identifier for this definition interface. Named main.xml and placed in the res / layout directory, this identifier will be R.layout.main.

Associate your Android user interface with activity and define user logic:

In an application, an android user interface is displayed through an activity. You must therefore first of all create an activity by adding a new class to your project deriving from the Activity class. The android user interface content is loaded upon the instantiation of the activity. Redefine the onCreate method of the activity to specify the definition of the interface to display via the setContentView method. This method takes as a parameter an identifier that specifies which interface-type resource must be loaded and displayed as graphic content. We use the automatically generated identifier to specify the Android user interface we previously created.


The Android user interface defined an empty TextView graphical component. For access from the code and be able to manipulate it, you must first retrieve an instance of the object with the findViewById method of the activity. Once the object has been collected, you can handle it in the same way as any other object, for example, to modify its text. The display will reflect the change. The following code retrieves the TextView graphical component that we named myText in the Android user interface, then use the setText method to change the content of its text.

android user interface
figure5



Create an Android user interface without XML definition:

You could have achieved the same result from the source code of the application, without use XML interface definition. This technique has some drawbacks, like the fact of not separating the definition of its presentation from the logic of the latter, or to make the code more difficult to maintain by profiles different trades like a developer and a graphic designer.

In this example, we haven’t applied a LinearLayout template via setContentView. We only instantiated a TextView graphical component then used the setContentView method providing it with this same TextView. This gives us an identical result to the previous example with XML file.

android user interface
figure6

Recommended For You

About the Author: Engr Fahad

My name is Shahzada Fahad and I am an Electrical Engineer. I have been doing Job in UAE as a site engineer in an Electrical Construction Company. Currently, I am running my own YouTube channel "Electronic Clinic", and managing this Website. My Hobbies are * Watching Movies * Music * Martial Arts * Photography * Travelling * Make Sketches and so on...

Leave a Reply

%d bloggers like this: