DEV Community

Samuel Appiah Kojo
Samuel Appiah Kojo

Posted on

Create a nice UI and a working Calculator in Android Studio in Java.

#tutorial #android #beginners #java

`

Do this in the activity_main.xml You can also copy and your project in the activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<TextView
    android:id="@+id/solution_tv"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@id/result_tv"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:layout_marginEnd="16dp"
    android:layout_marginBottom="16dp"
    android:textAlignment="textEnd"
    android:textColor="@color/black"
    android:textSize="32dp" />

<TextView
    android:id="@+id/result_tv"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_above="@id/buttons_layout"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:layout_marginEnd="16dp"
    android:layout_marginBottom="16dp"
    android:text="0"
    android:textAlignment="textEnd"
    android:textColor="@color/black"
    android:textSize="64dp" />


<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:layout_alignParentBottom="true"
    android:background="#F1F1F1"
    android:paddingVertical="16dp"
    android:id="@+id/buttons_layout">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal">

        <com.google.android.material.button.MaterialButton
            android:layout_width="72dp"
            android:layout_height="72dp"
            app:cornerRadius="36dp"
            style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
            android:textSize="32dp"
            android:textColor="@color/white"
            android:layout_margin="12dp"
            android:id="@+id/button_c"
            android:backgroundTint="#F44336"
            android:text="C" />
        <com.google.android.material.button.MaterialButton
            android:layout_width="72dp"
            android:layout_height="72dp"
            app:cornerRadius="36dp"
            style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
            android:textSize="32dp"
            android:textColor="@color/white"
            android:layout_margin="12dp"
            android:id="@+id/button_open_bracket"
            android:backgroundTint="#A1A1A1"
            android:text="(" />
        <com.google.android.material.button.MaterialButton
            android:layout_width="72dp"
            android:layout_height="72dp"
            app:cornerRadius="36dp"
            style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
            android:textSize="32dp"
            android:textColor="@color/white"
            android:layout_margin="12dp"
            android:backgroundTint="#A1A1A1"
            android:id="@+id/button_close_bracket"
            android:text=")" />
        <com.google.android.material.button.MaterialButton
            android:layout_width="72dp"
            android:layout_height="72dp"
            app:cornerRadius="36dp"
            style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
            android:textSize="32dp"
            android:textColor="@color/white"
            android:layout_margin="12dp"
            android:id="@+id/button_divide"
            android:backgroundTint="#FF9800"
            android:text="/" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal">

        <com.google.android.material.button.MaterialButton
            android:layout_width="72dp"
            android:layout_height="72dp"
            app:cornerRadius="36dp"
            style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
            android:textSize="32dp"
            android:textColor="@color/white"
            android:layout_margin="12dp"
            android:id="@+id/button_7"
            android:text="7" />
        <com.google.android.material.button.MaterialButton
            android:layout_width="72dp"
            android:layout_height="72dp"
            app:cornerRadius="36dp"
            style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
            android:textSize="32dp"
            android:textColor="@color/white"
            android:layout_margin="12dp"
            android:id="@+id/button_8"
            android:text="8" />
        <com.google.android.material.button.MaterialButton
            android:layout_width="72dp"
            android:layout_height="72dp"
            app:cornerRadius="36dp"
            style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
            android:textSize="32dp"
            android:textColor="@color/white"
            android:layout_margin="12dp"
            android:id="@+id/button_9"
            android:text="9" />
        <com.google.android.material.button.MaterialButton
            android:layout_width="72dp"
            android:layout_height="72dp"
            app:cornerRadius="36dp"
            style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
            android:textSize="32dp"
            android:textColor="@color/white"
            android:layout_margin="12dp"
            android:id="@+id/button_multiply"
            android:backgroundTint="#FF9800"
            android:text="*" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal">

        <com.google.android.material.button.MaterialButton
            android:layout_width="72dp"
            android:layout_height="72dp"
            app:cornerRadius="36dp"
            style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
            android:textSize="32dp"
            android:textColor="@color/white"
            android:layout_margin="12dp"
            android:id="@+id/button_4"
            android:text="4" />
        <com.google.android.material.button.MaterialButton
            android:layout_width="72dp"
            android:layout_height="72dp"
            app:cornerRadius="36dp"
            style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
            android:textSize="32dp"
            android:textColor="@color/white"
            android:layout_margin="12dp"
            android:id="@+id/button_5"
            android:text="5" />
        <com.google.android.material.button.MaterialButton
            android:layout_width="72dp"
            android:layout_height="72dp"
            app:cornerRadius="36dp"
            style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
            android:textSize="32dp"
            android:textColor="@color/white"
            android:layout_margin="12dp"
            android:id="@+id/button_6"
            android:text="6" />
        <com.google.android.material.button.MaterialButton
            android:layout_width="72dp"
            android:layout_height="72dp"
            app:cornerRadius="36dp"
            style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
            android:textSize="32dp"
            android:textColor="@color/white"
            android:layout_margin="12dp"
            android:id="@+id/button_plus"
            android:backgroundTint="#FF9800"
            android:text="+" />

    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal">

        <com.google.android.material.button.MaterialButton
            android:layout_width="72dp"
            android:layout_height="72dp"
            app:cornerRadius="36dp"
            style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
            android:textSize="32dp"
            android:textColor="@color/white"
            android:layout_margin="12dp"
            android:id="@+id/button_1"
            android:text="1" />
        <com.google.android.material.button.MaterialButton
            android:layout_width="72dp"
            android:layout_height="72dp"
            app:cornerRadius="36dp"
            style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
            android:textSize="32dp"
            android:textColor="@color/white"
            android:layout_margin="12dp"
            android:id="@+id/button_2"
            android:text="2" />
        <com.google.android.material.button.MaterialButton
            android:layout_width="72dp"
            android:layout_height="72dp"
            app:cornerRadius="36dp"
            style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
            android:textSize="32dp"
            android:textColor="@color/white"
            android:layout_margin="12dp"
            android:id="@+id/button_3"
            android:text="3" />
        <com.google.android.material.button.MaterialButton
            android:layout_width="72dp"
            android:layout_height="72dp"
            app:cornerRadius="36dp"
            style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
            android:textSize="32dp"
            android:textColor="@color/white"
            android:layout_margin="12dp"
            android:id="@+id/button_minus"
            android:backgroundTint="#FF9800"
            android:text="-" />

    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal">

        <com.google.android.material.button.MaterialButton
            android:layout_width="72dp"
            android:layout_height="72dp"
            app:cornerRadius="36dp"
            style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
            android:textSize="20dp"
            android:textColor="@color/white"
            android:layout_margin="12dp"
            android:id="@+id/button_ac"
            android:backgroundTint="#F44336"
            android:text="AC" />
        <com.google.android.material.button.MaterialButton
            android:layout_width="72dp"
            android:layout_height="72dp"
            app:cornerRadius="36dp"
            style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
            android:textSize="32dp"
            android:textColor="@color/white"
            android:layout_margin="12dp"
            android:id="@+id/button_0"
            android:text="0" />
        <com.google.android.material.button.MaterialButton
            android:layout_width="72dp"
            android:layout_height="72dp"
            app:cornerRadius="36dp"
            style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
            android:textSize="32dp"
            android:textColor="@color/white"
            android:layout_margin="12dp"
            android:id="@+id/button_dot"
            android:text="." />
        <com.google.android.material.button.MaterialButton
            android:layout_width="72dp"
            android:layout_height="72dp"
            app:cornerRadius="36dp"
            style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
            android:textSize="32dp"
            android:textColor="@color/white"
            android:layout_margin="12dp"
            android:id="@+id/button_equals"
            android:backgroundTint="#FF9800"
            android:text="=" />

    </LinearLayout>


</LinearLayout>
Enter fullscreen mode Exit fullscreen mode

Do this in the MainActivity.java (the functionality/logic/backend of the Calculator)

// this side is been generated automatically when you create project/package. it take your package's name. mine is io.teammark.teammarkcal.
package io.teammark.teammarkcal;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
import com.google.android.material.button.MaterialButton;
import org.mozilla.javascript.Context;
import org.mozilla.javascript.Scriptable;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

TextView resultTv,solutionTv;
MaterialButton buttonC,buttonBrackOpen,buttonBrackClose;
MaterialButton buttonDivide,buttonMultiply,buttonPlus,buttonMinus,buttonEquals;
MaterialButton button0,button1,button2,button3,button4,button5,button6,button7,button8,button9;
MaterialButton buttonAC,buttonDot;



@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    resultTv = findViewById(R.id.result_tv);
    solutionTv = findViewById(R.id.solution_tv);

    assignId(buttonC,R.id.button_c);
    assignId(buttonBrackOpen,R.id.button_open_bracket);
    assignId(buttonBrackClose,R.id.button_close_bracket);
    assignId(buttonDivide,R.id.button_divide);
    assignId(buttonMultiply,R.id.button_multiply);
    assignId(buttonPlus,R.id.button_plus);
    assignId(buttonMinus,R.id.button_minus);
    assignId(buttonEquals,R.id.button_equals);
    assignId(button0,R.id.button_0);
    assignId(button1,R.id.button_1);
    assignId(button2,R.id.button_2);
    assignId(button3,R.id.button_3);
    assignId(button4,R.id.button_4);
    assignId(button5,R.id.button_5);
    assignId(button6,R.id.button_6);
    assignId(button7,R.id.button_7);
    assignId(button8,R.id.button_8);
    assignId(button9,R.id.button_9);
    assignId(buttonAC,R.id.button_ac);
    assignId(buttonDot,R.id.button_dot);


}

void assignId(MaterialButton btn,int id){
    btn = findViewById(id);
    btn.setOnClickListener(this);
}


@Override
public void onClick(View view) {
    MaterialButton button =(MaterialButton) view;
    String buttonText = button.getText().toString();
    String dataToCalculate = solutionTv.getText().toString();

    if(buttonText.equals("AC")){
        solutionTv.setText("");
        resultTv.setText("0");
        return;
    }
    if(buttonText.equals("=")){
        solutionTv.setText(resultTv.getText());
        return;
    }
    if(buttonText.equals("C")){
        dataToCalculate = dataToCalculate.substring(0,dataToCalculate.length()-1);
    }else{
        dataToCalculate = dataToCalculate+buttonText;
    }
    solutionTv.setText(dataToCalculate);

    String finalResult = getResult(dataToCalculate);

    if(!finalResult.equals("Err")){
        resultTv.setText(finalResult);
    }

}

String getResult(String data){
    try{
        Context context  = Context.enter();
        context.setOptimizationLevel(-1);
        Scriptable scriptable = context.initStandardObjects();
        String finalResult =  context.evaluateString(scriptable,data,"Javascript",1,null).toString();
        if(finalResult.endsWith(".0")){
            finalResult = finalResult.replace(".0","");
        }
        return finalResult;
    }catch (Exception e){
        return "Err";
    }
}
Enter fullscreen mode Exit fullscreen mode

}

This is been generated automatic whenever you create project in Android Studio

<?xml version="1.0" encoding="utf-8"?>
xmlns:tools="http://schemas.android.com/tools"
xmlns:anndroid="http://schemas.android.com/apk/res-auto"
package="io.teammark.teammarkcal">

<application
    android:allowBackup="true"
    android:dataExtractionRules="@xml/data_extraction_rules"
    android:fullBackupContent="@xml/backup_rules"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:theme="@style/Theme.TeamMarkCal"
    tools:targetApi="31">
    <activity
        android:name=".MainActivity"
        android:exported="true">
        <intent-filter>
            <action android:name="android.intent.action.MAIN"/>

            <category android:name="android.intent.category.LAUNCHER"/>
        </intent-filter>
    </activity>

</application>
Enter fullscreen mode Exit fullscreen mode

Add these dependency in your build.gradle(:app) for the app

dependencies {

implementation 'androidx.appcompat:appcompat:1.4.2'
implementation 'com.google.android.material:material:1.6.1'
implementation 'com.google.android.material:material:1.7.0-alpha03'
testImplementation 'junit:junit:4.13.2'
androidTestImplementation 'androidx.test.ext:junit:1.1.3'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
implementation 'com.faendir.rhino:rhino-android:1.5.2'
testImplementation 'junit:junit:4.13.2'
androidTestImplementation 'androidx.test.ext:junit:1.1.3'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
Enter fullscreen mode Exit fullscreen mode

}

GREAT WORK! AND NOW RUN YOUR APP

`

Top comments (2)

Collapse
 
sammyoun profile image
Samuel Appiah Kojo •

If you have any challenges please let me know.
Thanks.

Collapse
 
sammyoun profile image
Samuel Appiah Kojo •

Great

Read next

prince_beec5ccde00b7c6c73 profile image

Notice Board Realistic illusion using html css and javascript https://www.instagram.com/webstreet_code/

Prince -

leandroveiga profile image

Master Advanced LINQ in C#: Writing Ultra-Efficient Queries for Massive Datasets

Leandro Veiga -

salehmubashar profile image

Create a Dynamic Code Playground with SandPack + React!

Saleh Mubashar -

arindam_1729 profile image

9 Open Source Libraries to Supercharge Your Next Project 🔋⚡️

Arindam Majumder -