Build Simple Calculator App - Android Studio Tutorial
So lets start. First thing you need to do is take a copy of the existing Android Studio project folder of the app we designed in smallest app project, so that you have a backup of the original. You can also download it from my github repo.
Lets make some changes here. First change the label property of application tag and activity tag to Calculator. Then change the theme property of application to @android:style/Theme.NoTitleBar. So it will not show the ugly title bar on top of the activity.
It should look something like this:
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.myapp"> <application android:label="Calculator" android:theme="@android:style/Theme.NoTitleBar"> <activity android:name=".MainActivity" android:label="Calculator" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER"/> </intent-filter> </activity> </application> </manifest>
Open the layout file. Remove the TextView we used to show Hello World. Then add a WebView component as shown below:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <WebView android:id="@+id/html" android:layout_width="match_parent" android:layout_height="match_parent"></WebView> </LinearLayout>
As you can see the width and height is set to
match_parent so the WebView will be filled in the screen. That means only the HTML contents will be seen on the screen. And the
id of WebView is set to
html so that I can access it in the code.
In our code all we need to do is to initialize the WebView to load our HTML page. Here is the complete code:
Thats all the coding stuff. Now lets design the calculator.
This is an HTML page. It has a specific structure. The entire document is inside an
html tag. The content which is shown in browser is inside
body tag. Here is the complete html page for our calculator:
body tag the first thing you can see is the
style tag. This is where we write the css styles. Here the style is applied to table,buttons and input textbox and it makes the
font-size to 25 pixels.
Next part is the
table. It will not appear as a table because we didn’t set a border here.
tr is the table row and
td is the table column. So there are 6 rows. In last 4 rows there are 4 columns. In first row the heading column spans to 4 columns. This is defined by the
colspan property. In next row 3 columns are occupied by the text box with id set as
display and a button to clear the contents.
We get the text using the function
$(this).html() where this denotes the button. If it is = then calculation has to be done. The value inside the text box is retrieved using
$(‘#display’).val() function where
#display denotes the element with id
eval function calculates the output. Calling value function with an input sets the value. That means
$(‘#display’).val(‘xyz’) will set the text inside the text box with id
xyz. In short if you press the button with = as text then it will calculate the problem written in the text box and print it inside it.
If the button was not equal button then next check is whether it is Clear button. If it is Clear then the value of display is set to blank. In all other cases the button is a digit or symbol. So what we do is append that symbol to the display content.
Thats it. Save this file as index.html somewhere. But in order to do make this work you also need the jquery file. Here is the link. Open it and save it as jquery.js. Now goto the project folder. Inside it goto app » src » main folder. You can see java, res and AndroidManifest.xml in there. Create another folder with name assets and copy our index.html and jquery.js to this assets folder. It should look something like this:
Now come back to Android Studio. The project file structure will have updated like this:
Done. Now build the APK and install it in your phone and run it. Here is how it works in my phone:
Did it work? Cool, isn’t it? Try something else by modifying this app. Let me know about your experiments in the comments.
To be continued..