IT2010 – Mobile Application Development
BSc (Hons) in Information Technology
2nd Year
Faculty of Computing
SLIIT
2023 - Tutorial
Android App Development
In this tutorial we will create a simple calculator using android studio.
Tasks
1. Design activity_main.xml
2. Implement calculator functions
3. Design activity_display.xml to display the output of the calculation with back navigation
4. Implement the Navigation
Design activity_main.xml
Design the following User interface
Label text size = 24dp
Input text size = 34dp
Button text size = 34dp
Button Height = 180dp
Button Width = 180dp
• String resources
<string name="app_name">Tutorial 03 Sample</string>
<string name="label_Number1">Number 01</string>
<string name="label_Number2">Number 02</string>
<string name="edt_Number1">23</string>
<string name="edt_Number2">12</string>
<string name="btn_Plus">+</string>
<string name="btn_Minus">-</string>
<string name="btn_Multiply">x</string>
<string name="btn_Divide">/</string>
• Color resources
<color name="btnPlus">#e7b3b3</color>
<color name="btnMinus">#575151</color>
<color name="btnMultiply">#575151</color>
<color name="btnDivide">#feb062</color>
<color name="background">#fafaf6</color>
Implement calculator functions
1. Create a new package called “models”.
2. Create a Kotlin class named ‘Calculator’ inside the ‘models’ package
class Calculator (private val number1:Double, private val number2:Double){
fun add() = number1 + number2
fun subtract() = number1 - number2
fun divide() = number1 * number2
fun multiply() = number1 / number2
}
3. Initialize the views in the MainActivity. Note that in this tutorial we are not using data binding
technics like in the LAB 03.
lateinit var edtNumber1:EditText
lateinit var edtNumber2:EditText
override fun onCreate(savedInstanceState: Bundle?) {
[Link](savedInstanceState)
setContentView([Link].activity_main)
edtNumber1 = findViewById([Link].edtNumber1)
edtNumber2 = findViewById([Link].edtNumber2)
}
4. Implement a function passing the view as a parameter to implement the calculation.
fun buttonClick(v:View){
var ans = 0.0
val calculator = Calculator(
[Link]().toDouble(),
[Link]().toDouble())
when([Link]){
[Link] -> ans = [Link]()
[Link] -> ans = [Link]()
[Link] -> ans = [Link]()
[Link] -> ans = [Link]()
}
println(ans)//this will print the output on the terminal
}
Design activity_display.xml
Label text size = 48dp
Label text size = 60dp
• Strings
<string name="answer">Answer</string>
<string name="btn_back">Back</string>
• Colors
<color name="second_background">#28c7fa</color>
<color name="answer_text">#002651</color>
<color name="back_button">#ff304f</color>
Implement the Navigation
1. Implement the navigation in MainActivity, buttonClick function
val intent = Intent(this, DisplayActivity::[Link])
[Link]("answer", ans)
startActivity(intent)
finish()
2. Implement the following code to display the text on the DisplayActivity, in the [Link]
var txtAnswer = findViewById<TextView>([Link])
[Link]([Link]("answer",0.0).toString())
var btnBack = findViewById<Button>([Link])
[Link] {
var intent = Intent(this,MainActivity::[Link])
startActivity(intent)
finish()
}