Hi Friends, calculator app is very easy to create in the android studio using Kotlin language as a language. In this article, I will write "
How to Create Calculator in Android Studio Using Kotlin".In this calculator app, I will design a beautiful user interface which you can publish in the play store. Generally, people only write about the logic of the app, but here I will write logic with an elegant user interface. So, let jump into the android studio.
Let get started with calculator android app:
Step 1:
- Create a new project in the android studio.
- Now, give the name of the application.
- Make sure you check the box of Kotlin support.
Step 2:
- Select the API Level as per your wish.
- Select the Empty Activity in the project, And click next.
- Then, click finish and your project will be loaded.
Now, for designing a beautiful User Interface. We will use Linear layout in our project. In the layout, there will be seven horizontal linear layouts. And we will use an image, in our project.
Step 3:
- Firstly add some color in the color.xml file. Which you can find in values folder in the res file.
- Add color orange and grey color in color.xml
1
2
| <color name="actionButton">#F57C00</color>
<color name="numberButton">#455A64</color>
|
Step 4:
- Now add some codes in styles.xml.In the styles.xml, we will add box shape and color of the box. Yes, I know that we can add a button, in the layout, which looks like a box. But to improve the interface, I am creating a box in the styles.xml.You want to add the following codes in the styles.xml inside <resource> tag.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <style name="ActionButtonStyle">
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">match_parent</item>
<item name="android:layout_weight">1</item>
<item name="android:background">@color/actionButton</item>
<item name="android:textSize">21sp</item>
<item name="android:textColor">@android:color/white</item>
<item name="android:gravity">center</item>
<item name="android:layout_margin">0.5dp</item>
</style>
<style name="NumberButtonStyle">
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">match_parent</item>
<item name="android:layout_weight">1</item>
<item name="android:background">@color/numberButton</item>
<item name="android:textSize">21sp</item>
<item name="android:textColor">@android:color/white</item>
<item name="android:gravity">center</item>
<item name="android:layout_margin">0.5dp</item>
</style>
|
Step 5:
- Now, open the activity_main.xml, In the main layout file, we will add linear layout and orientation will be vertical in the layout file. For every number, we will use the button style, which we have created in style.xml.In the layout, we will create seven more linear layouts in the horizontal orientation. In every horizontal line, we will describe the box as the text View. So, copy the codes from below and add it to the main layout file in your project.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
| <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/black"
android:orientation="vertical">
<TextView
android:id="@+id/tvExpression"
android:layout_width="match_parent"
android:layout_height="80sp"
android:ellipsize="start"
android:gravity="end"
android:singleLine="true"
android:textColor="@color/numberButton"
android:textSize="40sp" />
<TextView
android:id="@+id/tvResult"
android:layout_width="match_parent"
android:layout_height="100sp"
android:ellipsize="end"
android:gravity="end"
android:singleLine="true"
android:textColor="@color/numberButton"
android:textSize="30sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:id="@+id/tvClear"
style="@style/ActionButtonStyle"
android:text="CE" />
<TextView
android:id="@+id/tvOpen"
style="@style/ActionButtonStyle"
android:text="(" />
<TextView
android:id="@+id/tvClose"
style="@style/ActionButtonStyle"
android:text=")" />
<TextView
android:id="@+id/tvDivide"
style="@style/ActionButtonStyle"
android:text="/" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:id="@+id/tvSeven"
style="@style/NumberButtonStyle"
android:text="7" />
<TextView
android:id="@+id/tvEight"
style="@style/NumberButtonStyle"
android:text="8" />
<TextView
android:id="@+id/tvNine"
style="@style/NumberButtonStyle"
android:text="9" />
<TextView
android:id="@+id/tvMul"
style="@style/ActionButtonStyle"
android:text="*" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:id="@+id/tvFour"
style="@style/NumberButtonStyle"
android:text="4" />
<TextView
android:id="@+id/tvFive"
style="@style/NumberButtonStyle"
android:text="5" />
<TextView
android:id="@+id/tvSix"
style="@style/NumberButtonStyle"
android:text="6" />
<TextView
android:id="@+id/tvMinus"
style="@style/ActionButtonStyle"
android:text="-" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:id="@+id/tvOne"
style="@style/NumberButtonStyle"
android:text="1" />
<TextView
android:id="@+id/tvTwo"
style="@style/NumberButtonStyle"
android:text="2" />
<TextView
android:id="@+id/tvThree"
style="@style/NumberButtonStyle"
android:text="3" />
<TextView
android:id="@+id/tvPlus"
style="@style/ActionButtonStyle"
android:text="+" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:id="@+id/tvDot"
style="@style/NumberButtonStyle"
android:text="." />
<TextView
android:id="@+id/tvZero"
style="@style/NumberButtonStyle"
android:text="0" />
<ImageView
android:id="@+id/tvBack"
style="@style/NumberButtonStyle"
android:scaleType="center"
android:src="@drawable/backspace" />
<TextView
android:id="@+id/tvEquals"
style="@style/ActionButtonStyle"
android:text="=" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
|
Step 6:
- Now add the following library in the build.gradle(Module: app), which you find in the Gradle Scripts. And then sync your project:
1
| implementation 'net.objecthunter:exp4j:0.4.8'
|
- We have complete the layout section of the project. Now, we will add some code to the main activity.kt file. Here we will use onclicklistener and add the function to recognize the string value. The codes are very simple to understand. And the codes are less than Java. So, you can easily understand the logic in the project. Copy and paste the codes below:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
| class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
//Numbers
tvOne.setOnClickListener { appendOnExpresstion("1", true) }
tvTwo.setOnClickListener { appendOnExpresstion("2", true) }
tvThree.setOnClickListener { appendOnExpresstion("3", true) }
tvFour.setOnClickListener { appendOnExpresstion("4", true) }
tvFive.setOnClickListener { appendOnExpresstion("5", true) }
tvSix.setOnClickListener { appendOnExpresstion("6", true) }
tvSeven.setOnClickListener { appendOnExpresstion("7", true) }
tvEight.setOnClickListener { appendOnExpresstion("8", true) }
tvNine.setOnClickListener { appendOnExpresstion("9", true) }
tvZero.setOnClickListener { appendOnExpresstion("0", true) }
tvDot.setOnClickListener { appendOnExpresstion(".", true) }
//Operators
tvPlus.setOnClickListener { appendOnExpresstion("+", false) }
tvMinus.setOnClickListener { appendOnExpresstion("-", false) }
tvMul.setOnClickListener { appendOnExpresstion("*", false) }
tvDivide.setOnClickListener { appendOnExpresstion("/", false) }
tvOpen.setOnClickListener { appendOnExpresstion("(", false) }
tvClose.setOnClickListener { appendOnExpresstion(")", false) }
tvClear.setOnClickListener {
tvExpression.text = ""
tvResult.text = ""
}
tvBack.setOnClickListener {
val string = tvExpression.text.toString()
if(string.isNotEmpty()){
tvExpression.text = string.substring(0,string.length-1)
}
tvResult.text = ""
}
tvEquals.setOnClickListener {
try {
val expression = ExpressionBuilder(tvExpression.text.toString()).build()
val result = expression.evaluate()
val longResult = result.toLong()
if(result == longResult.toDouble())
tvResult.text = longResult.toString()
else
tvResult.text = result.toString()
}catch (e:Exception){
Log.d("Exception"," message : " + e.message )
}
}
}
fun appendOnExpresstion(string: String, canClear: Boolean) {
if(tvResult.text.isNotEmpty()){
tvExpression.text = ""
}
if (canClear) {
tvResult.text = ""
tvExpression.append(string)
} else {
tvExpression.append(tvResult.text)
tvExpression.append(string)
tvResult.text = ""
}
}
}
|
Conclusion
Now, let's run the app in the emulator.
Our app is running perfectly. You can create a calculator, with the beautiful UI, like this. So, If you find this article helpful, Please visit the page again. In the next article, I will share how can you create the scientific calculator in the android studio using kotlin. Till then, thank you for reading the article.
Comments
Post a Comment