{"id":19,"date":"2017-02-01T10:44:43","date_gmt":"2017-02-01T10:44:43","guid":{"rendered":"http:\/\/abhiandroid.com\/createandroidapp\/?page_id=19"},"modified":"2018-06-06T05:49:38","modified_gmt":"2018-06-06T05:49:38","slug":"create-calculator-app","status":"publish","type":"page","link":"https:\/\/abhiandroid.com\/createandroidapp\/create-calculator-app","title":{"rendered":"How To Create Calculator App In Android Studio: Step By Step Guide"},"content":{"rendered":"

Do you use calculator? Of Course you do in your regular life…<\/p>\n

So why not create your own basic Calculator Android App in Android Studio and use it for doing those operations.<\/p>\n

If you don’t know how to built then you are for treat as we are going to share how the App is created in Android. This is the one of simplest App\u00a0you can create to understand\u00a0Android basics.<\/p>\n

\"Calculator<\/p>\n

In this Calculator App tutorial\u00a0we are going use of multiple Android UI components to design and step by step developing a Basic Calculator application in Android Studio.<\/p>\n

Topics Used\u00a0For Creating Calculator App –\u00a0<\/strong>Before following the below steps it is recommended you check out EditText, TextView, Button &\u00a0Linear Layout topics. Also go through JAVA OOPS<\/a> concept once.<\/p>\n

\n

How To Create Calculator App In Android Studio:<\/strong><\/h4>\n

Below you can download code, see final output and step by step explanation of Calculator App in Android Studio.<\/p>\n

[cp_modal id=”cp_id_e494e”]\"Download-Code\" [\/cp_modal]<\/p>\n

\"Calculator<\/p>\n

Step 1:<\/strong><\/span> Firstly get the android studio downloaded in your system, then open it.<\/p>\n

Step 2:<\/strong><\/span> Create a new project and name it Calculator.<\/p>\n

Step 3:<\/strong><\/span> Open res -> layout -> activity_main.xml (or) main.xml. Here we are going to create the application interface like add layouts, Button , TextView and EditText.<\/p>\n

i of Step 3\u00a0–<\/strong><\/span>\u00a0Create a Linearlayout vertical, add a textview followed by two textfields Number(decimal) for writing numbers in it. Starting\u00a0code of\u00a0activity_main.xml<\/p>\n

<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    android:id=\"@+id\/activity_main\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:paddingBottom=\"@dimen\/activity_vertical_margin\"\r\n    android:paddingLeft=\"@dimen\/activity_horizontal_margin\"\r\n    android:paddingRight=\"@dimen\/activity_horizontal_margin\"\r\n    android:paddingTop=\"@dimen\/activity_vertical_margin\"\r\n    tools:context=\"abhiandroid.com.calculater.MainActivity\"\r\n    android:orientation=\"vertical\"\r\n    android:gravity=\"top\"\r\n    android:textAlignment=\"center\"\r\n    android:background=\"@android:color\/holo_blue_bright\"\r\n    android:weightSum=\"1\">\r\n\r\n    <TextView\r\n        android:text=\"@string\/enter_two_numbers\"\r\n        android:layout_width=\"match_parent\"\r\n        android:id=\"@+id\/textView\"\r\n        android:layout_height=\"30dp\"\r\n        android:gravity=\"center_horizontal\"\r\n        android:textColorLink=\"?android:attr\/editTextColor\"\r\n        tools:textStyle=\"bold|italic\"\r\n        android:textStyle=\"bold|italic\"\r\n        android:fontFamily=\"serif\"\r\n        android:visibility=\"visible\"\r\n        android:textSize=\"24sp\"\r\n        android:layout_weight=\"0.07\" \/>\r\n\r\n    <EditText\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:inputType=\"number\"\r\n        android:ems=\"10\"\r\n        android:id=\"@+id\/editOp1\"\r\n        android:textSize=\"18sp\"\r\n        android:gravity=\"center_horizontal\"\r\n        android:layout_marginBottom=\"5dp\"\r\n        android:visibility=\"visible\" \/>\r\n    \r\n   <EditText\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:inputType=\"number\"\r\n        android:ems=\"10\"\r\n        android:id=\"@+id\/editOp2\"\r\n        android:textSize=\"18sp\"\r\n        android:gravity=\"center_horizontal\"\r\n        android:elevation=\"1dp\" \/>\r\n<\/LinearLayout>\r\n<\/pre>\n
The UI will currently look like this:<\/p>\n
\"Calculator
\nii of Step 3 –<\/strong><\/span>\u00a0Then before closing the above layout define another layout as Linearlayout horizontal, add five button ( +, -, *, \/ and Clear) define their properties like id , width, height etc. in it and close the linearlayout.
\n\"Linear<\/p>\n
Following code of activity_main.xml . This code will be inserted in main layout:<\/p>\n
   <LinearLayout\r\n        android:orientation=\"horizontal\"\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"wrap_content\">\r\n\r\n        <Button\r\n            android:text=\"+\"\r\n            android:layout_width=\"78dp\"\r\n            android:layout_height=\"wrap_content\"\r\n            android:id=\"@+id\/btnadd\"\r\n            android:layout_weight=\"0.03\" \/>\r\n\r\n        <Button\r\n            android:text=\"-\"\r\n            android:layout_width=\"78dp\"\r\n            android:layout_height=\"wrap_content\"\r\n            android:id=\"@+id\/btnsub\"\r\n            android:layout_weight=\"0.03\" \/>\r\n\r\n        <Button\r\n            android:text=\"*\"\r\n            android:layout_width=\"78dp\"\r\n            android:layout_height=\"wrap_content\"\r\n            android:id=\"@+id\/btnmul\"\r\n            android:layout_weight=\"0.03\"\/>\r\n\r\n        <Button\r\n            android:text=\"\/\"\r\n            android:layout_height=\"wrap_content\"\r\n            android:id=\"@+id\/btndiv\"\r\n            android:layout_width=\"78dp\"\r\n            android:layout_weight=\"0.03\" \/>\r\n\r\n        <Button\r\n            android:text=\"Clear\"\r\n            android:layout_width=\"80dp\"\r\n            android:layout_height=\"wrap_content\"\r\n            android:id=\"@+id\/btnclr\"\r\n            android:layout_weight=\"0.03\" \/>\r\n<\/LinearLayout>\r\n<\/pre>\n
The UI will now look like this:<\/p>\n
\"Calculator
\niii of Step 3 –<\/strong><\/span>\u00a0Further in continuation with previous linearlayout add a textview, textfield(Number) for displaying result which makes the interface complete.<\/p>\n
The complete interface code of activity_main.xml:<\/strong><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    android:id=\"@+id\/activity_main\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:paddingBottom=\"@dimen\/activity_vertical_margin\"\r\n    android:paddingLeft=\"@dimen\/activity_horizontal_margin\"\r\n    android:paddingRight=\"@dimen\/activity_horizontal_margin\"\r\n    android:paddingTop=\"@dimen\/activity_vertical_margin\"\r\n    tools:context=\"abhiandroid.com.calculater.MainActivity\"\r\n    android:orientation=\"vertical\"\r\n    android:gravity=\"top\"\r\n    android:textAlignment=\"center\"\r\n    android:background=\"@android:color\/holo_blue_bright\"\r\n    android:weightSum=\"1\">\r\n\r\n    <TextView\r\n        android:text=\"@string\/enter_two_numbers\"\r\n        android:layout_width=\"match_parent\"\r\n        android:id=\"@+id\/textView\"\r\n        android:layout_height=\"30dp\"\r\n        android:gravity=\"center_horizontal\"\r\n        android:textColorLink=\"?android:attr\/editTextColor\"\r\n        tools:textStyle=\"bold|italic\"\r\n        android:textStyle=\"bold|italic\"\r\n        android:fontFamily=\"serif\"\r\n        android:visibility=\"visible\"\r\n        android:textSize=\"24sp\"\r\n        android:layout_weight=\"0.07\" \/>\r\n\r\n    <EditText\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:inputType=\"number\"\r\n        android:ems=\"10\"\r\n        android:id=\"@+id\/editOp1\"\r\n        android:textSize=\"18sp\"\r\n        android:gravity=\"center_horizontal\"\r\n        android:layout_marginBottom=\"5dp\"\r\n        android:visibility=\"visible\" \/>\r\n  \r\n   <EditText\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:inputType=\"number\"\r\n        android:ems=\"10\"\r\n        android:id=\"@+id\/editOp2\"\r\n        android:textSize=\"18sp\"\r\n        android:gravity=\"center_horizontal\"\r\n        android:elevation=\"1dp\" \/>\r\n\r\n    <LinearLayout\r\n        android:orientation=\"horizontal\"\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"wrap_content\">\r\n\r\n        <Button\r\n            android:text=\"+\"\r\n            android:layout_width=\"78dp\"\r\n            android:layout_height=\"wrap_content\"\r\n            android:id=\"@+id\/btnadd\"\r\n            android:layout_weight=\"0.03\" \/>\r\n\r\n        <Button\r\n            android:text=\"-\"\r\n            android:layout_width=\"78dp\"\r\n            android:layout_height=\"wrap_content\"\r\n            android:id=\"@+id\/btnsub\"\r\n            android:layout_weight=\"0.03\" \/>\r\n\r\n        <Button\r\n            android:text=\"*\"\r\n            android:layout_width=\"78dp\"\r\n            android:layout_height=\"wrap_content\"\r\n            android:id=\"@+id\/btnmul\"\r\n            android:layout_weight=\"0.03\"\/>\r\n\r\n        <Button\r\n            android:text=\"\/\"\r\n            android:layout_height=\"wrap_content\"\r\n            android:id=\"@+id\/btndiv\"\r\n            android:layout_width=\"78dp\"\r\n            android:layout_weight=\"0.03\" \/>\r\n\r\n        <Button\r\n            android:text=\"Clear\"\r\n            android:layout_width=\"80dp\"\r\n            android:layout_height=\"wrap_content\"\r\n            android:id=\"@+id\/btnclr\"\r\n            android:layout_weight=\"0.03\" \/>\r\n    <\/LinearLayout>\r\n\r\n    <TextView\r\n        android:text=\"@string\/result\"\r\n        android:layout_width=\"332dp\"\r\n        android:id=\"@+id\/textView1\"\r\n        android:layout_marginTop=\"10dp\"\r\n        android:layout_height=\"50dp\"\r\n        android:gravity=\"center_horizontal\"\r\n        android:textColorLink=\"?android:attr\/editTextColor\"\r\n        tools:textStyle=\"bold|italic\"\r\n        android:textStyle=\"bold|italic\"\r\n        android:fontFamily=\"serif\"\r\n        android:visibility=\"visible\"\r\n        android:textSize=\"30sp\" \/>\r\n\r\n    <EditText\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:inputType=\"number\"\r\n        android:ems=\"10\"\r\n        android:id=\"@+id\/result\"\r\n        android:textSize=\"18sp\"\r\n        android:text=\"0.00\"\r\n        android:gravity=\"center_horizontal\" \/>\r\n<\/LinearLayout>\r\n<\/pre>\n
So now we have designed the complete UI of the Calculator App.<\/p>\n
\"Calculator
\nStep 4:<\/strong> <\/span> Open src -> package -> MainActivity.java<\/strong>. The interface part of the application is over, let’s focus on adding functionality to the application. This calculator app basically perform five operations i.e addition, subtraction, multiplication, division and reset. So for that we need to define these operation over button click. For that we use\u00a0setOnClickListener() function.<\/p>\n
parseDouble() is used to convert String value to double. By default the value is String and we need to convert it into Double to perform operation over it.<\/p>\n
If person doesn’t enter the value and directly click on the any button then a Toast message will appear on the screen telling user to enter the required numbers.<\/p>\n
package abhiandroid.com.calculater;\r\n\r\nimport android.support.v7.app.AppCompatActivity;\r\nimport android.os.Bundle;\r\nimport android.view.View;\r\nimport android.widget.Button;\r\nimport android.widget.EditText;\r\nimport android.widget.TextView;\r\nimport android.widget.Toast;\r\n\r\npublic class MainActivity extends AppCompatActivity {\r\n    private EditText opr1;\r\n    private EditText opr2;\r\n    private Button btnadd;\r\n    private  Button btnsub;\r\n    private  Button btnmul;\r\n    private Button btndiv;\r\n    private Button btnclr;\r\n    private TextView txtresult;\r\n\r\n    @Override\r\n    protected void onCreate(Bundle savedInstanceState) {\r\n        super.onCreate(savedInstanceState);\r\n        setContentView(R.layout.activity_main);\r\n        opr1 = (EditText) findViewById(R.id.editOp1);\r\n        opr2 = (EditText) findViewById(R.id.editOp2);\r\n        btnadd = (Button) findViewById(R.id.btnadd);\r\n        btnsub = (Button) findViewById(R.id.btnsub);\r\n        btnmul = (Button) findViewById(R.id.btnmul);\r\n        btndiv = (Button) findViewById(R.id.btndiv);\r\n        btnclr = (Button) findViewById(R.id.btnclr);\r\n        txtresult= (TextView) findViewById(R.id.result);\r\n \/\/ Addition<\/strong> \r\n        btnadd.setOnClickListener(new View.OnClickListener() {\r\n            @Override\r\n            public void onClick(View v) {\r\n                if((opr1.getText().length()>0) && (opr2.getText().length()>0))\r\n                {\r\n                    double oper1 = Double.parseDouble(opr1.getText().toString());\r\n                    double oper2 = Double.parseDouble(opr2.getText().toString());\r\n                    double result = oper1 + oper2;\r\n                    txtresult.setText(Double.toString(result));\r\n                }\r\n                else{\r\n                    Toast toast= Toast.makeText(MainActivity.this,\"Enter The Required Numbers\",Toast.LENGTH_LONG);\r\n                    toast.show();\r\n                }\r\n            }\r\n        });\r\n  \/\/Subtraction<\/strong>\r\n        btnsub.setOnClickListener(new View.OnClickListener() {\r\n            @Override\r\n            public void onClick(View v) {\r\n                if((opr1.getText().length()>0) && (opr2.getText().length()>0))\r\n                {\r\n                    double oper1 = Double.parseDouble(opr1.getText().toString());\r\n                    double oper2 = Double.parseDouble(opr2.getText().toString());\r\n                    double result = oper1 - oper2;\r\n                    txtresult.setText(Double.toString(result));\r\n                }\r\n                else{\r\n                    Toast toast= Toast.makeText(MainActivity.this,\"Enter The Required Numbers\",Toast.LENGTH_LONG);\r\n                    toast.show();\r\n                }\r\n\r\n            }\r\n        });\r\n \/\/ Multiplication<\/strong>\r\n        btnmul.setOnClickListener(new View.OnClickListener() {\r\n            @Override\r\n            public void onClick(View v) {\r\n                if((opr1.getText().length()>0) && (opr2.getText().length()>0))\r\n                {\r\n                    double oper1 = Double.parseDouble(opr1.getText().toString());\r\n                    double oper2 = Double.parseDouble(opr2.getText().toString());\r\n                    double result = oper1 * oper2;\r\n                    txtresult.setText(Double.toString(result));\r\n                }\r\n                else{\r\n                    Toast toast= Toast.makeText(MainActivity.this,\"Enter The Required Numbers\",Toast.LENGTH_LONG);\r\n                    toast.show();\r\n                }\r\n            }\r\n        });\r\n \/\/ Division\r\n<\/strong>        btndiv.setOnClickListener(new View.OnClickListener() {\r\n            @Override\r\n            public void onClick(View v) {\r\n                if((opr1.getText().length()>0) && (opr2.getText().length()>0))\r\n                {\r\n                    double oper1 = Double.parseDouble(opr1.getText().toString());\r\n                    double oper2 = Double.parseDouble(opr2.getText().toString());\r\n                    double result = oper1 \/ oper2;\r\n                    txtresult.setText(Double.toString(result));\r\n                }\r\n                else{\r\n                    Toast toast= Toast.makeText(MainActivity.this,\"Enter The Required Numbers\",Toast.LENGTH_LONG);\r\n                    toast.show();\r\n                }\r\n            }\r\n        });\r\n\/\/ Reset Feilds<\/strong>\r\n        btnclr.setOnClickListener(new View.OnClickListener() {\r\n            @Override\r\n            public void onClick(View v) {\r\n                opr1.setText(\"\");\r\n                opr2.setText(\"\");\r\n                txtresult.setText(\"0.00\");\r\n                opr1.requestFocus();\r\n            }\r\n        });\r\n\r\n    }\r\n}\r\n<\/pre>\n
OUTPUT:<\/strong><\/span>
\nNow run the App and you will see\u00a0the basic calculator App. Enter any number and do the operations.<\/p>\n","protected":false},"excerpt":{"rendered":"
Do you use calculator? Of Course you do in your regular life… So why not create your own basic Calculator Android App in Android Studio and use it for doing those operations. If you don’t know how to built then you are for treat as we are going to share how the App is created … Continue reading How To Create Calculator App In Android Studio: Step By Step Guide<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"home.php","meta":{"footnotes":""},"class_list":["post-19","page","type-page","status-publish","hentry"],"psp_head":"How To Create Calculator App In Android Studio: Step By Step Guide \u2013 Create Android App<\/title>\r\n<meta name=\"description\" content=\"In this Calculator App tutorial we are going use of multiple Android UI components to design and step by step developing a Basic Calculator application in Android Studio.\" \/>\r\n<meta name=\"robots\" content=\"index,follow\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/abhiandroid.com\/createandroidapp\/create-calculator-app\" \/>\r\n","_links":{"self":[{"href":"https:\/\/abhiandroid.com\/createandroidapp\/wp-json\/wp\/v2\/pages\/19","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abhiandroid.com\/createandroidapp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/abhiandroid.com\/createandroidapp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/createandroidapp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/createandroidapp\/wp-json\/wp\/v2\/comments?post=19"}],"version-history":[{"count":1,"href":"https:\/\/abhiandroid.com\/createandroidapp\/wp-json\/wp\/v2\/pages\/19\/revisions"}],"predecessor-version":[{"id":290,"href":"https:\/\/abhiandroid.com\/createandroidapp\/wp-json\/wp\/v2\/pages\/19\/revisions\/290"}],"wp:attachment":[{"href":"https:\/\/abhiandroid.com\/createandroidapp\/wp-json\/wp\/v2\/media?parent=19"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}