1
0
The simplest and easiest way in order to come up with a Graphical User Interface in any programming language is via the means of a calculator. The article will focus on the on the GUI part instead of the logic involved in a calculator.
The very first step is to open a new Android project in Eclipse. Depending on the choice, any SDK can be used but in case you pick the higher version, the application would required to be rebuild in case to support the lower ones.
Figure 1: Representing the folder structure
The issue with the Android is that one requires supporting different types and resolutions of screens. XML file is used to classify the layout of buttons and text-fields. The below folders can be seen on accessing the folder called “res” present in the above folder structure:
The below image represents the parameters for different screen resolutions such as idpi, mdpi, hdpi and xhdpi:
Figure 2: Representing the parameters for various screen resolutions provided by Google
Different resolutions should be known particularly when you need to create a game or an application. The layout and layout-land are two possibilities of a different screen types. The former one represents the device holding up where as the latter one point to the device being held on its side.
Open main.xml, the outcome will be the visual editor. Accessing the main.xml on the bottom will open the xml file in the editor.
Figure 3: Directing to access the main.xml file
The resolution needs to be defined at the time of layout creation. Stacked objects and horizontal items next to each other are obtained by a vertical orientation. The below image reflects the difference:
Figure 4: Representing the stacked and horizontal objects
The Desired layout:
Figure 5: Representing the desired look of the calculator
The desired image can be achieved as below:
We would need to define a LinearLayout with a vertical orientation:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >fill_parent defines the entire screen to be filled in.
The next step is to stack rows with buttons and text-fields. Let us begin at the top that has two text-fields. We will now define one more LinearLayout within the earlier LinearLayout that comprises of two text-fields:
<LinearLayout
android:id="@+id/linearLayoutH1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:orientation="vertical"
android:weightSum="1" >
<EditText
android:id="@+id/result"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:editable="false"
android:layout_weight=".50"
/>
<EditText
android:id="@+id/entry"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:editable="false"
android:layout_weight=".50"
/>
</LinearLayout>Now we will classify 3 buttons in another LinearLayout that is there in our first container. There is an image in one of the button whereas the other two just contain text:
<LinearLayout
android:id="@+id/linearLayoutH3"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:orientation="horizontal"
android:weightSum="1.0" >
<Button
android:id="@+id/buttonClear"
style="@style/ButtonText"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:background="@drawable/custombuttonred"
android:text="@string/clear"
android:layout_weight=".43"
android:textSize="40sp" />
<ImageButton
style="@style/ButtonText"
android:id="@+id/c101_image"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:scaleType="centerInside"
android:background="@drawable/cloud101"
android:layout_weight=".14" />
<Button
android:id="@+id/buttonBackspace"
style="@style/ButtonText"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:background="@drawable/custombuttonred"
android:text="@string/backspace"
android:layout_weight=".43"
android:textSize="30sp" />
</LinearLayout>Our LinearLayout’s orientation
The height of the item, dp refers to density pixels.
Within the draw able folder, we have defined some more XML’s for theming the button
This refers to looking into the string.xml file contained in the values folder and look for the id “clear”
For textsize we always use sp.
This is how we will scale our image-button, it will scale the image uniformly.
The image to use as background, I made an image called cloud101.png and put it in the drawable folder
Style for the button, check below
A theme defined in drawable/custombuttonred is used instead of an image.
<LinearLayout
android:id="@+id/linearLayoutH3"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:orientation="horizontal"
android:weightSum="1.0" >
<Button
android:id="@+id/buttonClear"
style="@style/ButtonText"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:background="@drawable/custombuttonred"
android:text="@string/clear"
android:layout_weight=".43"
android:textSize="40sp" />
<ImageButton
style="@style/ButtonText"
android:id="@+id/c101_image"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:scaleType="centerInside"
android:background="@drawable/cloud101"
android:layout_weight=".14" />
<Button
android:id="@+id/buttonBackspace"
style="@style/ButtonText"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:background="@drawable/custombuttonred"
android:text="@string/backspace"
android:layout_weight=".43"
android:textSize="30sp" />
</LinearLayout>The other buttons are also defined in a similar way.
<LinearLayout
android:id="@+id/linearLayoutH2"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_weight=".25"
android:orientation="horizontal"
android:weightSum="1.0" >
<Button
android:id="@+id/button1"
style="@style/ButtonText"
android:layout_width="50dp"
android:layout_height="fill_parent"
android:layout_weight=".25"
android:background="@drawable/custombutton"
android:text="@string/b1"
android:textSize="40sp" />
<Button
android:id="@+id/button2"
style="@style/ButtonText"
android:layout_width="50dp"
android:layout_height="fill_parent"
android:layout_weight=".25"
android:background="@drawable/custombutton"
android:text="2"
android:textSize="40sp" />
<Button
android:id="@+id/button3"
style="@style/ButtonText"
android:layout_width="50dp"
android:layout_height="fill_parent"
android:layout_weight=".25"
android:background="@drawable/custombutton"
android:text="3"
android:textSize="40sp" />
<Button
android:id="@+id/buttonDevide"
style="@style/ButtonText"
android:layout_width="50dp"
android:layout_height="fill_parent"
android:layout_weight=".25"
android:background="@drawable/custombuttonblue"
android:text="/"
android:textSize="40sp" />
</LinearLayout>
This can be repeated for every row and is very simple. The string can be hardcoded instead of always referring to a string in string.xml. android:text="3"
The article aim was to define the role of xml in coming up with a calculator application for Android device. Hope you liked the article.
.jpg)
See the prices for this post in Mr.Bool Credits System below: