Simple Android Calculator App XML UI Design

Graphical user interface is one of the important parts in any application as much as programming part. To make a popular android application you need to focus on user interface design and as well as programming part. If your app’s backend is very strong but user interface is not so good at that time you are likely to get low rating in your app.

In this tutorial, you will learn to build a simple android calculator application XML user interface design so we’ll only work with XML. If you want to make signup and login, dashboard page for android, material design profile screen/page Xml UI design we have already posted these tutorial find them and learn to make beautiful XML UI design for android app.

Related:
Android Material Design Profile Screen XML UI Design
Android Material Design Sign Up/Registration Form XML UI Design
Simple Android Contact Form XML UI Design

Android Example: How to Create a Simple Calculator XML UI Design

Following is the step by step guide to create/make android calendar app XML ui design. Lets’ create a new android project and modify your app colors.xml and styles.xml file.

Colors.xml File

Open your app colors.xml file from res/values/colors.xml and define color value like colorPrimary, colorPrimaryDark etc. Following is the complete content of colors.xml file.

res/values/colors.xml

Styles.xml File

Open your app styles.xml file and from res/values/styles.xml and modify it like the below.

res/values/styles.xml


XML Layout File

Now open XML layout file and add a LinearLayout inside root layout (LinearLayout) and set gravity bottom and orientation vertical. And then again add a LinearLayout with orientation horizontal and inside it add four buttons for clear calculation, small bracket, percentage and back button with layout_weight 1, minHeight 80px, textColor, textSize, textStyle and many other attributes.

Like above repeat the same step for other rows. Following is the complete content of XML layout file.

res/layout/activity_main.xml

Again create a new XML layout file with name simple_calculator_result and add two text views inside a LinearLayout and set gravity right, padding 10dp, orientation vertical in root layout. Following is the complete content of simple_calculator_result.xml file.

res/layout/simple_calculator_result.xml

Java Activity File

Following is the default code of java activity file.

src/SmpleAndroidCalculatorAppUI.java

Now, run your Simple Android Calculator App XML UI Design application which will look like above screenshot. In this simple and short tutorial I have shown you how to make an android calculator app UI design using XML.