Android – UI Design

Android UI Design

As we said earlier, we can develop the same User Interface in many ways and in the previous chapter a simple example was also created by the UI through Direct Java Codes. But we should always keep the Visual Part (Layout View) of the Activity separate from the Logic Part (Java Codes) and hence Define the Layout of the Activity as the XML File.

To Develop as XML File to Android App GUI is quite convenient, because Android Studio using us one of your Android App also written Manual XML Code of Line without Interface Layout User ‘s Drag and Drop using technology Visually Design and when we develop Android App based on Model, View, Controller (MVC) pattern using Standard Approach of Android Framework , then Control, Manage and Extend Android App developed in this way It is also very easy to do.

When we want to visually create the user interface of our Android App using Android Studio, then we have to get a little more Familiar with Android Studio and learn about some more tools as shown below:
When we open the XML Layout File related to an activity in our Android App, the Android Studio IDE Display we have is as shown above, where the UI Control Palette section contains all the View Objects or UI Controls . , Which can be placed on the screen that appears in the Preview Section through the Drag n Drop technology, and the interesting thing is that the place we place a control on this screen, we see it exactly the same on the output screen. So while designing App, we know how our app is going to look on an Android Device.

The UI Control we place on this Preview Screen creates a Component Tree based on the sequence in which the Component Tree Section can be viewed, and the feature of this Component Tree Section is that if we Preview When we change the position of a control on the screen, the component tree also changes accordingly and similarly if we UP or DOWN the controls that appear in the Component Tree, then the respective Control, Preview Screen But it moves up or down from its current position.

And as we know that each object has a lot of properties associated with it, which defines that object, in the same way that each UI Control has a lot of properties related to it and any UI Control property is set to So we only have to select that control on the Preview Screen. As a result, the list of Most Important Properties related to that Selected UI Control appears in the Properties section of the Android Studio IDE .

For example in the above picture we have selected the layout control of our Android App , so in the Properties window we see the Most Important Properties related to the Current Layout. While clicking the ” View all properties ” link at the bottom of this properties section, we can see other less used properties related to the currently selected control.

Although we can visually design the user interface of our Android App using Visual Tools in Android Studio even without writing a single XML code for a single line, but even when we are Visually designing, still the XML in the background Codes are already being created and we can see these Automatically Generate XML Codes by selecting the Text Mode that appears on this screen.

For example, if we look at the Automatically Generated XML Codes for our Visually designed User Interface as pictured above, our XML Layout Code will be as follows:

<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout
 xmlns:tools="http://schemas.android.com/tools"
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/activity_main"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 android:paddingBottom="@dimen/activity_vertical_margin"
 android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/activity_vertical_margin"
 tools:context=".MainActivity">

<TextView
 android:text="First Number"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:id="@+id/tvFirstNumber" />

<EditText
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:inputType="numberSigned"
 android:id="@+id/etFirstNumber" />

<TextView
 android:text="Second Number"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:id="@+id/tvSecondNumber" />

<EditText
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:id="@+id/etSecondNumber"
 android:inputType="numberSigned" />

<TextView
 android:text="Result"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:id="@+id/tvOutput" />

<TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:id="@+id/tvResult"
 android:textSize="24sp"
 android:textStyle="normal|bold" />

<Button
 android:text="Add"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:id="@+id/btnAdd" />
 </LinearLayout>

However, when we create a new activity, by default we always create RelativeLayout . But in this Example we have LinearLayout by Manually Change the RelativeLayout because LinearLayout the Default Orientation ” Horizontal ” is, therefore, in this Example we Manually Change “By the Orientation of your LinearLayout the” Horizontal ” Vertical done”, because if If we do not set it vertically, then all the UI controls being Drag n Drop would be Horizontally Placed on the screen. As a result, on the Output Screen we see only one control, which was first dragged and dropped on the screen.

We can do all of these tasks visually through Android Studio as well, but in some Situations Tweak with XML codes is comparatively easier.

For example, if we want to set the LinearLayout by changing the Default RelativeLayout of the activity of our Android App only through Directly Android Studio without disturbing the XML codes, first of all we have to delete the RelativeLayout that we get by default, and then One has to drag the LinearLayout Control from Palette => Layouts section of Android Studio and drop it on the screen.

Whereas if we do the same thing in XML Code Mode, then all we need to do is to change the RelativeLayout Tag to LinearLayout , and just doing this will change the Default RelativeLayout of our Android App to LinearLayout.

Deal with XML codes is not so difficult. In fact those in Android Studio to Design Mode UI Controls is the name of, XML same name in Code Mode XML Element while the Design which UI Controls in Mode Properties are the same XML to XML Element in Code Mode Attributes are Huh. That is, in both Design Mode and XML Code Mode, there is no difference between the names of various Controls, the names of their Attributes or Properties and the Values ​​to be specified in them.

Also , as Component Tree , we can do the same thing by up / down moving the positioning of the controls, up / down move the positioning of the XML codes of the controls. That is, if we have to move a control before the previous control, to do this, all we have to do is cut the XML code of that control from its current position and paste it before the XML code of the control just before it and the current control The position changes. Since Java is such a Programming Language, which catches most Programming Errors in Compile Time itself. That’s why when we develop App in Design Mode and make a mistake in following any convention of Android Development Framework, Android Studio also gives us Warning Message as per the following picture, so that we can rectify our mistake: As we said earlier, the Android Framework recommends that we specify all the strings in our Android App, specifying them in the /res/values/string.xml file , rather than hardcode the strings in your Code File. But because we have hardcoded all the strings in our example, which leads to the Violation of the Android Framework Development Convention, so Android Studio is returning four Warning Message to us as pictured above and telling us that the strings are / res / values ​​/ string Specify in the .xml file and refer to it in your Code File through the @string statement . That is, we should specify the string.xml file of all the strings used in the layout file of our Android App as follows:

<resources>
 <string name="app_name">MyApp</string>
 <string name="tv_first_number">First Number</string>
 <string name="tv_second_number">Second Number</string>
 <string name="tv_result">Result</string>
 <string name="btn_add">Add</string>
 </resources>

And once all String Resource has been specified, in Android Studio we can refer to the same resources by @string statement as given below:

Whereas if we directly specify these in the XML Code File, then the XML Codes of our XML Code File will be as follows:

<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout
 xmlns:tools="http://schemas.android.com/tools"
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/activity_main"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 android:paddingBottom="@dimen/activity_vertical_margin"
 android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/activity_vertical_margin"
 tools:context=".MainActivity">

<TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:id="@+id/tvFirstNumber"
 android:text="@string/tv_first_number" />

<EditText
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:inputType="numberSigned"
 android:id="@+id/etFirstNumber" />

<TextView
 android:text="@string/tv_second_number"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:id="@+id/tvSecondNumber" />

<EditText
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:id="@+id/etSecondNumber"
 android:inputType="numberSigned" />

<TextView
 android:text="@string/tv_result"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:id="@+id/tvOutput" />

<TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:id="@+id/tvResult"
 android:textSize="24sp"
 android:textStyle="normal|bold" />

<Button
 android:text="@string/btn_add"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:id="@+id/btnAdd" />
 </LinearLayout>