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

How to Create a Calculator (GUI) for Android using XML

We will see in this article what role xml plays on a calculator application for a Android Mobile. Build a calculator is the best way to come up with a Graphical User Interface in any programming language.

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.

Building the project

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.

Representing the folder structure

Figure 1: Representing the folder structure

Classifying a layout

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:

  • drawable
  • drawable-hdpi
  • drawable-ldpi
  • drawable-mdpi
  • layout
  • values

The below image represents the parameters for different screen resolutions such as idpi, mdpi, hdpi and xhdpi:

Representing the parameters for various screen resolutions provided by Google

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.

Directing to access the main.xml file

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:

Representing the stacked and horizontal objects

Figure 4: Representing the stacked and horizontal objects

The Desired layout:

Representing the desired look of the calculator

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>
  • android:orientation="horizontal"
  • Our LinearLayout’s orientation

  • android:layout_height="100dp"
  • The height of the item, dp refers to density pixels.

  • android:background="@drawable/custombuttonred"
  • Within the draw able folder, we have defined some more XML’s for theming the button

  • android:text="@string/clear"
  • This refers to looking into the string.xml file contained in the values folder and look for the id “clear”

  • android:textSize="40sp"
  • For textsize we always use sp.

  • android:scaleType="centerInside"
  • This is how we will scale our image-button, it will scale the image uniformly.

  • android:background="@drawable/cloud101
  • The image to use as background, I made an image called cloud101.png and put it in the drawable folder

  • style="@style/ButtonText"
  • Style for the button, check below

  • android:background="@drawable/custombuttonred"
  • 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"

Conclusion

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.



I am a software developer from India with hands on experience on java, html for over 5 years.

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