Are you among the ones who want to learn Android App Development from the beginning? Are you someone who doesn’t have any idea about Android App Development? Or you have just started your journey, but you don’t know whether you are on the right path or not. So, during your initial journey, all you need is proper guidance. If you get your guide, then you are ready to go. Yes, that’s why we have prepared a complete article on this. To help you with this, we have created a practical roadmap for “6 Weeks of Android App Development – Project-Based Learning”. We will learn Android App Development by developing 6 Android Projects. As is said before in this article, Best Way to Become Android Developer – A Complete Roadmap
The best way to learn Android is by developing some basic projects to some advanced projects.
This article is designed in such a way that you are going to learn Android concepts each week by developing a project which is also known as “Project Bases Learning“. This learning will give you the complete guidelines to build strong conceptual knowledge in Android and achieve your Android Developer goal.
Prerequisite
So, the very first prerequisite for entering into the Android Development World is your “Dedication” and “Motivation” towards learning and building awesome Android apps. Yes, that’s true. First, find a strong reason why you are entering this world. For example, you are practicing Data Structure and Algorithms, day and night for the reason that you are going to get a job in a top product-based company. Similarly, ask yourself,” Why Android? Why not Web Development? Why not Data Science and Machine Learning? If you find the answer, then no one can stop you from learning Android App Development.
The second one is Programming Language. In Android, programming is done in two languages: JAVA or Kotlin and XML(Extension Markup Language). The XML file deals with the design, presentation, layouts, blueprint, etc (as a front-end) while the JAVA or KOTLIN deals with the working of buttons, variables, storing, etc (as a back-end). So all you need is to have knowledge of Java or Kotlin and XML.
Note: We have prepared this tutorial in both Java and Kotlin languages. (3 Projects in Java and 3 Projects in Kotlin).
Some useful learning resource links are available at Lazyroar:
Why Native Android? Why Not a Hybrid App?
A native app is a smartphone application developed specifically for mobile operating systems like Java/Kotlin for Android and Swift for iOS. Since the application is developed within the mature ecosystem following, the technical users and the user guidelines experience provided by the OS itself, like the swipe gestures or alignment on the left side of the center, for Android and iOS. Now of course they offer the fastest and the most reliable and most responsive experience to the user. The app will have the look and feel and consistency within most native apps which are built-in into the devices. Native applications have the significant advantage of easily accessing and utilizing the user’s devices’ built-in capabilities. For example, GPS, maybe your address book or your camera, and tons of other things.
Well, on the other hand, if we talk about the Hybrid applications, they are in the core website package wrapped in a native wrapper, sometimes PhoneGap or others. They look and feel like a native app but ultimately outside the basic frame of the application. They are powered by the company’s website itself. For example, sites like Facebook or Netflix do not really make sense to have a native app platform or even recompile their app for just one feature. It’s going to take a lot of time, and it’s too heavy, so it really makes sense for them just to get started with the Hybrid application. Now, hybrid apps can also use native functionality like the Camera and GPS, but via some third-party plugins, a lot of code needs to be enclosed with that, while on the other hand, the native applications are pretty easy to use and utilize those functionalities, like the Camera or your GPS.
In the real industry world, what happens is, if you are starting your career in a startup company that is working on Hybrid Apps, and when the company is funded and the team size increases, then they generally switch to Native app development. Also, keep in mind that the salary point of view of Native app developers is actually a little higher and is on top of the Hybrid app developers.
Who Can Learn Android App Development?
“Degree Doesn’t Matter“, Yes!! If you are doing B.Sc (Computer Science), BCA, or any other degree can also learn Android App Development. All you need is “Coding Skills“. In Android Development there is no need for deep knowledge in Data Structure and Algorithm, you just have to learn Java/Kotlin in advance to be a better Android App Developer.
System Requirements (Windows | Mac | Linux)
For Windows:
- Microsoft Windows 7/8/10 (32-bit or 64-bit)
- 4 GB RAM minimum, 8 GB RAM recommended (plus 1 GB for the Android Emulator)
- 2 GB of available disk space minimum, 4 GB recommended (500 MB for IDE plus 1.5 GB for Android SDK and emulator system image)
- 1280 x 800 minimum screen resolution
For Mac:
- Mac OS X 10.10 (Yosemite) or higher, up to 10.13 (High Sierra)
- 4 GB RAM minimum, 8 GB RAM recommended (plus 1 GB for the Android Emulator)
- 2 GB of available disk space minimum, 4 GB recommended (500 MB for IDE plus 1.5 GB for Android SDK and emulator system image)
- 1280 x 800 minimum screen resolution
For Linux:
- GNOME or KDE desktop. Tested on Ubuntu 14.04 LTS, Trusty Tahr (64-bit distribution capable of running 32-bit applications)
- 64-bit distribution capable of running 32-bit applications
- GNU C Library (glibc) 2.19 or later
- 4 GB RAM minimum, 8 GB RAM recommended (plus 1 GB for the Android Emulator)
- 2 GB of available disk space minimum, 4 GB recommended (500 MB for IDE plus 1.5 GB for Android SDK and emulator system image)
- 1280 x 800 minimum screen resolution
What After Android App Development?
- Implement your unique idea by developing an Android App.
- Build an Android App for your college minor and major projects.
- Take freelance Android projects and earn money during your college days.
- Participate in Hackathon.
- Apply for Internships in different companies, etc.
Let’s Get Started
Very Very Important Point: Please don’t copy-paste the code completely. First, try to understand the logic. And play around with it by putting different logic, values, etc. This will help to increase your development skill.
1st Week
On day 1 of “6 Weeks of Android App Development,” you must research and read some blogs related to Android and keep yourself motivated for Android App Development. Blogs like “Best Way to Become Android Developer – A Complete Roadmap“, “Why Kotlin will replace Java for Android App Development“, “Interesting Facts About Android“, “History of Android“, “How Does Android App Work?“, etc.
Then, in the 1st week of “6 Weeks of Android App Development – Project-Based Learning“, you are going to learn how to set up an Android Studio for Android App Development, How to Create a New Project in Android Studio, How to Run Your Project on a Real Device or Emulator and also you are going to develop two basic Android Apps in 1st week. In this part, you are just going to create the following two very basic android apps
- The very famous “Hello World” Android App
- Android app to add two numbers
So excited!! Let’s begin!
Android Studio Setup
Before setting up Android Studio, let’s install it on your system.
- For Windows/Mac: Install and Set up Android Studio
- For Linux: How to Install Android Studio on Ubuntu?
So assuming that you have successfully installed the Android Studio and you are on the screen below now.
So just click on the “Create New Project” and on the next screen, you can see lots of Activities(mark this word) are there. You can explore each activity, but for a beginner, let’s choose Empty Activity and move further for a beginner
Here you are going to learn the 1st important concept in Android i.e Activity. You may refer to the following articles to get an idea about what an activity is in Android.
Now on the next screen
- Name: Write down your suitable project name.
- Package name: Let’s keep it by default.
- Save location: Choose the location where you want to save this project.
- Language: Choose your language between Java and Kotlin
- Minimum SDK (Mark this word): As you know, Android released its version at regular intervals of time and they provide some new features in the latest version which are not supported by the older versions. So you have to choose which user base you want to hit. Suppose you select “API 21: Android 5.0 (Lollipop)”, then you can see “Your app will run on approximately 94.1% of devices”. Otherwise, you can click on the “Help me choose” button also.
Finally, click on the Finish button.
Here you are going to learn the 2nd important concept in Android i.e SDK. You may refer to the following article to get an idea about what SDK is in Android.
After click on the finish button Congratulations, the first Android Studio project is ready. Initially, it shows the tip of the day, which gives tips to improve work efficiency. Before going to explore the Android Studio, get familiar with the initial screen which is shown below.
For a better understanding of the Android Studio environment, it has been divided into 4 parts:
1. Menu Part: In this section, it provides options to create a new project, open an existing android studio project, a button to run the application, dropdown for selecting the desired device to run and test an application on.
2. Coding Area: This section provides for writing code for files like .xml, .java, .kt. It allows you to open multiple files at a time in different tabs, but it allows you to edit one file at a time.
3. Project Structure: This area allows us to explore every file of the project. There are various views of the structure. Android is a summarised view of the project structure hierarchy and Project is a detailed view of the project hierarchy. Have a look at the following image.
4. Current Execution Part: One of the most important parts of the Android Studio environment. It provides a detailed view of the current execution of the process or activity. It shows what errors, build outputs, logcat results, etc.
Understanding the Designing Part
All the UI layouts of the application can be found under the res/layout directory. These are of the .xml extension, responsible for building the UIs for application. Android Studio provides two types of ways of designing UI for applications. One is Text, where one needs to design the UI by hardcoding and one is the Design section that provides a convenient drag and drop mechanism for building UI. Have a look at the following image which shows how the code is being written, it goes on to show the result in the right pane.
The following image shows the drag and drops environment for widgets to pick and add in the UI of the application. One can switch to the Design layout by clicking on the bottom left button, shown as the following.
Understanding the Coding Part
As we have understood the design part similarly, another main part is the coding part. In the image below you can see a file named MainActivity.kt. Yes, this is the file where you write the backend part. The logic part. For example, you want to add two numbers. So, after entering two numbers in the EditText, when the user clicks on the Button, it will give the output as the sum of two numbers. So to calculate the sum, you have to write the logic in its part.
Note: If you select Language as Java during project creation, then the file name will be MainActivity.java.
Run Android App
To run an application there are two ways to do it. One is using an emulator, another is using a physical device by connecting it through a USB cable. Refer to How to install Android Virtual Device(AVD) how to set up an android virtual device or refer to How to Run the Android App on a Real Device? setting up a real physical android device and running applications on it. Have a look at the following video on how to run your very famous “Hello World Android App” in your Android Emulator.
Yes!! You have successfully built your first Android App. Now let’s built the second one “Android App to add two numbers“
Step By Step Implementation of Project 1: Android App to Add Two Numbers
Step 1: Similarly, create a new project but this time chooses Java as the programming language. Choose the name of the project by yourself.
Step 2: First of all go to the XML file
Now go to the Code section and write the code for adding 3 TextView, 2 EditText, and 1 Button and Assign an ID to each component. Assign margin-top, left, right for the location.
Here you are going to learn other important concepts in Android i.e What’s RelativeLayout? What’s TextView? What’s EditText? and What’s Button? You may refer to the following articles to get an idea about what those are?
So we are going to develop the UI something like that
Below is the code for the activity_main.xml file. Comments are added inside the code to understand the code in more detail. Refer to the code in detail and you can change the value and play with the UI.
XML
<? xml version = "1.0" encoding = "utf-8" ?> android:layout_width = "match_parent" android:layout_height = "match_parent" tools:context = ".MainActivity" tools:layout_editor_absoluteY = "81dp" > <!-- for message input first number --> < TextView android:id = "@+id/textView_first_no" android:layout_width = "150dp" android:layout_height = "25dp" android:layout_marginLeft = "10dp" android:layout_marginTop = "50dp" android:text = "First number" android:textSize = "20dp" /> <!-- take the input first number --> < EditText android:id = "@+id/editText_first_no" android:layout_width = "150dp" android:layout_height = "40dp" android:layout_marginLeft = "200dp" android:layout_marginTop = "40dp" android:inputType = "number" /> <!-- for message input second number --> < TextView android:id = "@+id/textView_second_no" android:layout_width = "150dp" android:layout_height = "25dp" android:layout_marginLeft = "10dp" android:layout_marginTop = "100dp" android:text = "Second number" android:textSize = "20dp" /> <!-- take input for second number --> < EditText android:id = "@+id/editText_second_no" android:layout_width = "150dp" android:layout_height = "40dp" android:layout_marginLeft = "200dp" android:layout_marginTop = "90dp" android:inputType = "number" tools:ignore = "MissingConstraints" /> <!-- button for run add logic and view result --> < Button android:id = "@+id/add_button" android:layout_width = "100dp" android:layout_height = "50dp" android:layout_marginLeft = "110dp" android:layout_marginTop = "200dp" android:text = "ADD" /> <!-- Text view for result view--> < TextView android:id = "@+id/textView_answer" android:layout_width = "100dp" android:layout_height = "25dp" android:layout_marginLeft = "130dp" android:layout_marginTop = "300dp" android:text = "0" android:textSize = "20dp" android:textStyle = "bold" /> </ RelativeLayout > |
Step 3: Working with the MainActivity.java file
In this file, we are going to write the logic for adding two numbers. Let’s have a look at the following code. Don’t worry we are going to explain each line of code in detail.
Java
package com.example.addtwonumbers; // Each new activity has its own layout and Java files, // here we build the logic for adding two number import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.TextView; import androidx.appcompat.app.AppCompatActivity; public class MainActivity extends AppCompatActivity { // define the global variable // variable number1, number2 // for input input number // Add_button, result textView EditText number1; EditText number2; Button Add_button; TextView result; int ans = 0 ; @Override protected void onCreate(Bundle savedInstanceState) { super .onCreate(savedInstanceState); setContentView(R.layout.activity_main); // by ID we can use each component which id is assign in xml file number1 = (EditText) findViewById(R.id.editText_first_no); number2 = (EditText) findViewById(R.id.editText_second_no); Add_button = (Button) findViewById(R.id.add_button); result = (TextView) findViewById(R.id.textView_answer); // Add_button add clicklistener Add_button.setOnClickListener( new View.OnClickListener() { public void onClick(View v) { // num1 or num2 double type // get data which is in edittext, convert it to string // using parse Double convert it to Double type double num1 = Double.parseDouble(number1.getText().toString()); double num2 = Double.parseDouble(number2.getText().toString()); // add both number and store it to sum double sum = num1 + num2; // set it ot result textview result.setText(Double.toString(sum)); } }); } } |
Explanation:
The package name of your Android app.
package com.example.addtwonumbers;
List of libraries used in your app.
import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.TextView; import androidx.appcompat.app.AppCompatActivity;
Variable number1, number2 for input number (EditText). Similarly add_button variable is for our Button used in the XML code and the result variable is for TextView.
EditText number1; EditText number2; Button add_button; TextView result;
Remember you have assigned an ID for each component in the XML file. Yes, they are going to use it here. By ID we can use each component which id is assigned in the XML file like the following.
number1 = (EditText) findViewById(R.id.editText_first_no); number2 = (EditText) findViewById(R.id.editText_second_no); add_button = (Button) findViewById(R.id.add_button); result = (TextView) findViewById(R.id.textView_answer);
And at last, we add a setOnClickListener() to our Button. So when the user clicks on the Button this will give us the Output. And inside that, we have written simple logic to add those numbers. And also setText() for our output TextView. As simple as that. That’s it.
add_button.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { double num1 = Double.parseDouble(number1.getText().toString()); double num2 = Double.parseDouble(number2.getText().toString()); double sum = num1 + num2; result.setText(Double.toString(sum)); } });
Yes, you have successfully developed an Android App which takes two numbers from the users and adds them. Now run the app as before and you can see the output as follows.
Output:
For the complete article please refer to this: Android App to Add Two Numbers
2nd Week
In the 1st week, you have built a very very basic android app that takes only two numbers and adds them. And there are only some lines of code to perform this action. So you have got some basic ideas about android app development now. Let’s move toward the next project, “A Scientific Calculator Android App” which looks like this.
Note that we are going to implement this project using the Kotlin language. Don’t worry Kotlin is similar to Java. Let me share some tips in Android Studio here.
What we are going to learn by building this project?
- Use different colors in your android app.
- Build some complex UI in Android and make the app’s UI awesome.
- RelativeLayout and LinearLayout. And the difference between them.
- CardView
- Writing some simple logic for simple math calculation.
- Toast in Android
Step By Step Implementation of Project 2: Scientific Calculator Android App
Step 1: Create a New Project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language this time.
Step 2: Adding new colors to the colors.xml file
Navigate to the app > res > values > colors.xml file as below screenshot.
And add the below code to it for different colors.
XML
<? xml version = "1.0" encoding = "utf-8" ?> < resources > < color name = "purple_200" >#0F9D58</ color > < color name = "purple_500" >#0F9D58</ color > < color name = "purple_700" >#0F9D58</ color > < color name = "teal_200" >#FF03DAC5</ color > < color name = "teal_700" >#FF018786</ color > < color name = "black" >#FF000000</ color > < color name = "white" >#FFFFFFFF</ color > <!--three different shades of black color--> < color name = "blac_shade_1" >#292D36</ color > < color name = "black_shade_2" >#272B33</ color > < color name = "black_shade_3" >#22252D</ color > < color name = "yellow" >#ffa500</ color > </ resources > |
Step 3: Working with the activity_main.xml file
Navigate to the app > res > layout > activity_main.xml and add the below code to that file. What we have used in this file:
- RelativeLayout
- TextView
- CardView
- LinearLayout
- Button
We have already provided you the necessary referral links for this term. You may read them carefully. Below is the code for the activity_main.xml file. You may play with these values and see how the code works.
XML
<? xml version = "1.0" encoding = "utf-8" ?> < RelativeLayout android:layout_width = "match_parent" android:layout_height = "match_parent" android:background = "@color/black_shade_3" tools:context = ".MainActivity" > < TextView android:id = "@+id/idTVSecondary" android:layout_width = "match_parent" android:layout_height = "70dp" android:background = "@color/black_shade_3" android:gravity = "bottom" android:maxLines = "1" android:padding = "10dp" android:paddingTop = "30dp" android:text = "" android:textAlignment = "viewEnd" android:textColor = "@color/white" android:textSize = "15sp" tools:ignore = "RtlCompat" /> < TextView android:id = "@+id/idTVprimary" android:layout_width = "match_parent" android:layout_height = "100dp" android:layout_below = "@id/idTVSecondary" android:background = "@color/black_shade_3" android:gravity = "bottom" android:maxLines = "1" android:padding = "10dp" android:text = "" android:textAlignment = "viewEnd" android:textColor = "#fff" android:textSize = "50sp" tools:ignore = "RtlCompat" /> < androidx.cardview.widget.CardView android:layout_width = "match_parent" android:layout_height = "match_parent" android:layout_below = "@id/idTVprimary" android:background = "@color/blac_shade_1" app:cardCornerRadius = "4dp" app:cardElevation = "2dp" > < LinearLayout android:layout_width = "match_parent" android:layout_height = "match_parent" android:layout_weight = "7" android:background = "@color/blac_shade_1" android:orientation = "vertical" > < LinearLayout android:layout_width = "match_parent" android:layout_height = "match_parent" android:orientation = "vertical" android:weightSum = "7" > < LinearLayout android:layout_width = "match_parent" android:layout_height = "match_parent" android:layout_weight = "1" android:orientation = "horizontal" > < LinearLayout android:layout_width = "match_parent" android:layout_height = "match_parent" android:orientation = "horizontal" android:weightSum = "4" > < Button android:id = "@+id/bac" android:layout_width = "match_parent" android:layout_height = "match_parent" android:layout_margin = "3dp" android:layout_weight = "1" android:backgroundTint = "@color/black_shade_2" android:padding = "6dp" android:text = "AC" android:textColor = "@color/yellow" android:textSize = "15sp" tools:targetApi = "lollipop" /> < Button android:id = "@+id/bc" android:layout_width = "match_parent" android:layout_height = "match_parent" android:layout_margin = "3dp" android:layout_weight = "1" android:backgroundTint = "@color/black_shade_2" android:padding = "6dp" android:text = "C" android:textColor = "@color/yellow" android:textSize = "15sp" /> < Button android:id = "@+id/bbrac1" android:layout_width = "match_parent" android:layout_height = "match_parent" android:layout_margin = "3dp" android:layout_weight = "1" android:backgroundTint = "@color/black_shade_2" android:padding = "6dp" android:text = "(" android:textColor = "#ffa500" android:textSize = "15sp" /> < Button android:id = "@+id/bbrac2" android:layout_width = "match_parent" android:layout_height = "match_parent" android:layout_margin = "3dp" android:layout_weight = "1" android:backgroundTint = "@color/black_shade_2" android:padding = "6dp" android:text = ")" android:textColor = "#ffa500" android:textSize = "15sp" /> </ LinearLayout > </ LinearLayout > < LinearLayout android:layout_width = "match_parent" android:layout_height = "match_parent" android:layout_weight = "1" android:orientation = "horizontal" > < LinearLayout android:layout_width = "match_parent" android:layout_height = "match_parent" android:orientation = "horizontal" android:weightSum = "5" > < Button android:id = "@+id/bsin" android:layout_width = "match_parent" android:layout_height = "match_parent" android:layout_margin = "3dp" android:layout_weight = "1" android:backgroundTint = "@color/black_shade_2" android:padding = "6dp" android:text = "sin" android:textAllCaps = "false" android:textColor = "#ffa500" android:textSize = "15sp" /> < Button android:id = "@+id/bcos" android:layout_width = "match_parent" android:layout_height = "match_parent" android:layout_margin = "3dp" android:layout_weight = "1" android:backgroundTint = "@color/black_shade_2" android:padding = "6dp" android:text = "cos" android:textAllCaps = "false" android:textColor = "#ffa500" android:textSize = "15sp" /> < Button android:id = "@+id/btan" android:layout_width = "match_parent" android:layout_height = "match_parent" android:layout_margin = "3dp" android:layout_weight = "1" android:backgroundTint = "@color/black_shade_2" android:padding = "6dp" android:text = "tan" android:textAllCaps = "false" android:textColor = "#ffa500" android:textSize = "15sp" /> < Button android:id = "@+id/blog" android:layout_width = "match_parent" android:layout_height = "match_parent" android:layout_margin = "3dp" android:layout_weight = "1" android:backgroundTint = "@color/black_shade_2" android:padding = "6dp" android:text = "log" android:textAllCaps = "false" android:textColor = "#ffa500" android:textSize = "15sp" /> < Button android:id = "@+id/bln" android:layout_width = "match_parent" android:layout_height = "match_parent" android:layout_margin = "3dp" android:layout_weight = "1" android:backgroundTint = "@color/black_shade_2" android:padding = "6dp" android:text = "ln" android:textAllCaps = "false" android:textColor = "#ffa500" android:textSize = "15sp" /> </ LinearLayout > </ LinearLayout > < LinearLayout android:layout_width = "match_parent" android:layout_height = "match_parent" android:layout_weight = "1" android:orientation = "horizontal" > < LinearLayout android:layout_width = "match_parent" android:layout_height = "match_parent" android:orientation = "horizontal" android:weightSum = "5" > < Button android:id = "@+id/bfact" android:layout_width = "match_parent" android:layout_height = "match_parent" android:layout_margin = "3dp" android:layout_weight = "1" android:backgroundTint = "@color/black_shade_2" android:padding = "6dp" android:text = "x!" android:textAllCaps = "false" android:textColor = "#ffa500" android:textSize = "15sp" /> < Button android:id = "@+id/bsquare" android:layout_width = "match_parent" android:layout_height = "match_parent" android:layout_margin = "3dp" android:layout_weight = "1" android:backgroundTint = "@color/black_shade_2" android:padding = "6dp" android:text = "x²" android:textAllCaps = "false" android:textColor = "#ffa500" android:textSize = "15sp" /> < Button android:id = "@+id/bsqrt" android:layout_width = "match_parent" android:layout_height = "match_parent" android:layout_margin = "3dp" android:layout_weight = "1" android:backgroundTint = "@color/black_shade_2" android:padding = "6dp" android:text = "√" android:textColor = "#ffa500" android:textSize = "15sp" /> < Button android:id = "@+id/binv" android:layout_width = "match_parent" android:layout_height = "match_parent" android:layout_margin = "3dp" android:layout_weight = "1" android:backgroundTint = "@color/black_shade_2" android:padding = "6dp" android:text = "1/x" android:textAllCaps = "false" android:textColor = "#ffa500" android:textSize = "15sp" /> < Button android:id = "@+id/bdiv" android:layout_width = "match_parent" android:layout_height = "match_parent" android:layout_margin = "3dp" android:layout_weight = "1" android:backgroundTint = "@color/black_shade_2" android:padding = "6dp" android:text = "÷" android:textColor = "#ffa500" android:textSize = "15sp" /> </ LinearLayout > </ LinearLayout > < LinearLayout android:layout_width = "match_parent" android:layout_height = "match_parent" android:layout_weight = "1" android:orientation = "horizontal" > < LinearLayout android:layout_width = "match_parent" android:layout_height = "match_parent" android:orientation = "horizontal" android:weightSum = "4" > < Button android:id = "@+id/b7" android:layout_width = "match_parent" android:layout_height = "match_parent" android:layout_margin = "3dp" android:layout_weight = "1" android:backgroundTint = "@color/black_shade_2" android:padding = "6dp" android:text = "7" android:textColor = "#fff" android:textSize = "15sp" /> < Button android:id = "@+id/b8" android:layout_width = "match_parent" android:layout_height = "match_parent" android:layout_margin = "3dp" android:layout_weight = "1" android:backgroundTint = "@color/black_shade_2" android:padding = "6dp" android:text = "8" android:textColor = "#fff" android:textSize = "15sp" /> < Button android:id = "@+id/b9" android:layout_width = "match_parent" android:layout_height = "match_parent" android:layout_margin = "3dp" android:layout_weight = "1" android:backgroundTint = "@color/black_shade_2" android:padding = "6dp" android:text = "9" android:textColor = "#fff" android:textSize = "15sp" /> < Button android:id = "@+id/bmul" android:layout_width = "match_parent" android:layout_height = "match_parent" android:layout_margin = "3dp" android:layout_weight = "1" android:backgroundTint = "@color/black_shade_2" android:padding = "6dp" android:text = "×" android:textColor = "#ffa500" android:textSize = "15sp" /> </ LinearLayout > </ LinearLayout > < LinearLayout android:layout_width = "match_parent" android:layout_height = "match_parent" android:layout_weight = "1" android:orientation = "horizontal" > < LinearLayout android:layout_width = "match_parent" android:layout_height = "match_parent" android:orientation = "horizontal" android:weightSum = "4" > < Button android:id = "@+id/b4" android:layout_width = "match_parent" android:layout_height = "match_parent" android:layout_margin = "3dp" android:layout_weight = "1" android:backgroundTint = "@color/black_shade_2" android:padding = "6dp" android:text = "4" android:textColor = "#fff" android:textSize = "15sp" /> < Button android:id = "@+id/b5" android:layout_width = "match_parent" android:layout_height = "match_parent" android:layout_margin = "3dp" android:layout_weight = "1" android:backgroundTint = "@color/black_shade_2" android:padding = "6dp" android:text = "5" android:textColor = "#fff" android:textSize = "15sp" /> < Button android:id = "@+id/b6" android:layout_width = "match_parent" android:layout_height = "match_parent" android:layout_margin = "3dp" android:layout_weight = "1" android:backgroundTint = "@color/black_shade_2" android:padding = "6dp" android:text = "6" android:textColor = "#fff" android:textSize = "15sp" /> < Button android:id = "@+id/bminus" android:layout_width = "match_parent" android:layout_height = "match_parent" android:layout_margin = "3dp" android:layout_weight = "1" android:backgroundTint = "@color/black_shade_2" android:padding = "6dp" android:text = "-" android:textColor = "#ffa500" android:textSize = "15sp" /> </ LinearLayout > </ LinearLayout > < LinearLayout android:layout_width = "match_parent" android:layout_height = "match_parent" android:layout_weight = "1" android:orientation = "horizontal" > < LinearLayout android:layout_width = "match_parent" android:layout_height = "match_parent" android:orientation = "horizontal" android:weightSum = "4" > < Button android:id = "@+id/b1" android:layout_width = "match_parent" android:layout_height = "match_parent" android:layout_margin = "3dp" android:layout_weight = "1" android:backgroundTint = "@color/black_shade_2" android:padding = "6dp" android:text = "1" android:textColor = "#fff" android:textSize = "15sp" /> < Button android:id = "@+id/b2" android:layout_width = "match_parent" android:layout_height = "match_parent" android:layout_margin = "3dp" android:layout_weight = "1" android:backgroundTint = "@color/black_shade_2" android:padding = "6dp" android:text = "2" android:textColor = "#fff" android:textSize = "15sp" /> < Button android:id = "@+id/b3" android:layout_width = "match_parent" android:layout_height = "match_parent" android:layout_margin = "3dp" android:layout_weight = "1" android:backgroundTint = "@color/black_shade_2" android:padding = "6dp" android:text = "3" android:textColor = "#fff" android:textSize = "15sp" /> < Button android:id = "@+id/bplus" android:layout_width = "match_parent" android:layout_height = "match_parent" android:layout_margin = "3dp" android:layout_weight = "1" android:backgroundTint = "@color/black_shade_2" android:padding = "6dp" android:text = "+" android:textColor = "#ffa500" android:textSize = "15sp" /> </ LinearLayout > </ LinearLayout > < LinearLayout android:layout_width = "match_parent" android:layout_height = "match_parent" android:layout_weight = "1" android:orientation = "horizontal" > < LinearLayout android:layout_width = "match_parent" android:layout_height = "match_parent" android:orientation = "horizontal" android:weightSum = "4" > < Button android:id = "@+id/bpi" android:layout_width = "match_parent" android:layout_height = "match_parent" android:layout_margin = "3dp" android:layout_weight = "1" android:backgroundTint = "@color/black_shade_2" android:padding = "6dp" android:text = "π" android:textColor = "#fff" android:textSize = "15sp" /> < Button android:id = "@+id/b0" android:layout_width = "match_parent" android:layout_height = "match_parent" android:layout_margin = "3dp" android:layout_weight = "1" android:backgroundTint = "@color/black_shade_2" android:padding = "6dp" android:text = "0" android:textColor = "#fff" android:textSize = "15sp" /> < Button android:id = "@+id/bdot" android:layout_width = "match_parent" android:layout_height = "match_parent" android:layout_margin = "3dp" android:layout_weight = "1" android:backgroundTint = "@color/black_shade_2" android:padding = "6dp" android:text = "." android:textColor = "#fff" android:textSize = "15sp" /> < Button android:id = "@+id/bequal" android:layout_width = "match_parent" android:layout_height = "match_parent" android:layout_margin = "3dp" android:layout_weight = "1" android:backgroundTint = "@color/black_shade_2" android:padding = "6dp" android:text = "=" android:textColor = "#ffa500" android:textSize = "15sp" /> </ LinearLayout > </ LinearLayout > </ LinearLayout > </ LinearLayout > </ androidx.cardview.widget.CardView > </ RelativeLayout > |
Step 4: Working with the MainActivity.kt file
So as we have discussed earlier the backend part is written in this file. The backend part means the simple logic part. And for this project, we are going to write the code in the Kotlin language.
4.1: Creating variables for our TextView and Button
lateinit var tvsec: TextView lateinit var tvMain: TextView lateinit var bac: Button lateinit var bc: Button lateinit var bbrac1: Button lateinit var bbrac2: Button -------------------------- -------------------------- -------------------------- // similarly create variable for all the TextView // and Button you have declared in the XML file
4.2: Initializing all the variables
tvsec = findViewById(R.id.idTVSecondary) tvMain = findViewById(R.id.idTVprimary) bac = findViewById(R.id.bac) bc = findViewById(R.id.bc) -------------------------- -------------------------- -------------------------- // similarly initialize all the variables
4.3: Adding onClickListener() to all the Buttons
b1.setOnClickListener { // on below line we are appending // the expression to our text view. tvMain.text = (tvMain.text.toString() + "1") } b2.setOnClickListener { // on below line we are appending // the expression to our text view. tvMain.text = (tvMain.text.toString() + "2") -------------------------- -------------------------- // similarly Add onClickListener() to all the Buttons
At last write down the dimple logic for all the calculations (Addition, multiplication, division, etc.). Let we are going to write the code for the factorial of a number. So write down the code as below:
fun factorial(n: Int): Int { // this method is use to find factorial return if (n == 1 || n == 0) 1 else n * factorial(n - 1) }
Below is the complete code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.
Kotlin
import android.os.Bundle import android.widget.Button import android.widget.TextView import android.widget.Toast import androidx.appcompat.app.AppCompatActivity class MainActivity : AppCompatActivity() { // creating variables for our text view and button lateinit var tvsec: TextView lateinit var tvMain: TextView lateinit var bac: Button lateinit var bc: Button lateinit var bbrac1: Button lateinit var bbrac2: Button lateinit var bsin: Button lateinit var bcos: Button lateinit var btan: Button lateinit var blog: Button lateinit var bln: Button lateinit var bfact: Button lateinit var bsquare: Button lateinit var bsqrt: Button lateinit var binv: Button lateinit var b0: Button lateinit var b9: Button lateinit var b8: Button lateinit var b7: Button lateinit var b6: Button lateinit var b5: Button lateinit var b4: Button lateinit var b3: Button lateinit var b2: Button lateinit var b1: Button lateinit var bpi: Button lateinit var bmul: Button lateinit var bminus: Button lateinit var bplus: Button lateinit var bequal: Button lateinit var bdot: Button lateinit var bdiv: Button override fun onCreate(savedInstanceState: Bundle?) { super .onCreate(savedInstanceState) setContentView(R.layout.activity_main) // initializing all our variables. tvsec = findViewById(R.id.idTVSecondary) tvMain = findViewById(R.id.idTVprimary) bac = findViewById(R.id.bac) bc = findViewById(R.id.bc) bbrac1 = findViewById(R.id.bbrac1) bbrac2 = findViewById(R.id.bbrac2) bsin = findViewById(R.id.bsin) bcos = findViewById(R.id.bcos) btan = findViewById(R.id.btan) blog = findViewById(R.id.blog) bln = findViewById(R.id.bln) bfact = findViewById(R.id.bfact) bsquare = findViewById(R.id.bsquare) bsqrt = findViewById(R.id.bsqrt) binv = findViewById(R.id.binv) b0 = findViewById(R.id.b0) b9 = findViewById(R.id.b9) b8 = findViewById(R.id.b8) b7 = findViewById(R.id.b7) b6 = findViewById(R.id.b6) b5 = findViewById(R.id.b5) b4 = findViewById(R.id.b4) b3 = findViewById(R.id.b3) b2 = findViewById(R.id.b2) b1 = findViewById(R.id.b1) bpi = findViewById(R.id.bpi) bmul = findViewById(R.id.bmul) bminus = findViewById(R.id.bminus) bplus = findViewById(R.id.bplus) bequal = findViewById(R.id.bequal) bdot = findViewById(R.id.bdot) bdiv = findViewById(R.id.bdiv) // adding on click listener to our all buttons. b1.setOnClickListener { // on below line we are appending // the expression to our text view. tvMain.text = (tvMain.text.toString() + "1" ) } b2.setOnClickListener { // on below line we are appending // the expression to our text view. tvMain.text = (tvMain.text.toString() + "2" ) } b3.setOnClickListener { // on below line we are appending // the expression to our text view. tvMain.text = (tvMain.text.toString() + "3" ) } b4.setOnClickListener { tvMain.text = (tvMain.text.toString() + "4" ) } b5.setOnClickListener { tvMain.text = (tvMain.text.toString() + "5" ) } b6.setOnClickListener { tvMain.text = (tvMain.text.toString() + "6" ) } b7.setOnClickListener { tvMain.text = (tvMain.text.toString() + "7" ) } b8.setOnClickListener { tvMain.text = (tvMain.text.toString() + "8" ) } b9.setOnClickListener { tvMain.text = (tvMain.text.toString() + "9" ) } b0.setOnClickListener { tvMain.text = (tvMain.text.toString() + "0" ) } bdot.setOnClickListener { tvMain.text = (tvMain.text.toString() + "." ) } bplus.setOnClickListener { tvMain.text = (tvMain.text.toString() + "+" ) } bdiv.setOnClickListener { tvMain.text = (tvMain.text.toString() + "/" ) } bbrac1.setOnClickListener { tvMain.text = (tvMain.text.toString() + "(" ) } bbrac2.setOnClickListener { tvMain.text = (tvMain.text.toString() + ")" ) } bpi.setOnClickListener { // on clicking on pi button we are adding // pi value as 3.142 to our current value. tvMain.text = (tvMain.text.toString() + "3.142" ) tvsec.text = (bpi.text.toString()) } bsin.setOnClickListener { tvMain.text = (tvMain.text.toString() + "sin" ) } bcos.setOnClickListener { tvMain.text = (tvMain.text.toString() + "cos" ) } btan.setOnClickListener { tvMain.text = (tvMain.text.toString() + "tan" ) } binv.setOnClickListener { tvMain.text = (tvMain.text.toString() + "^" + "(-1)" ) } bln.setOnClickListener { tvMain.text = (tvMain.text.toString() + "ln" ) } blog.setOnClickListener { tvMain.text = (tvMain.text.toString() + "log" ) } bminus.setOnClickListener { // on clicking on minus we are checking if // the user has already a minus operation on screen. // if minus operation is already present // then we will not do anything. val str: String = tvMain.text.toString() if (!str.get(index = str.length - 1 ).equals( "-" )) { tvMain.text = (tvMain.text.toString() + "-" ) } } bmul.setOnClickListener { // if mul sign is not present in our // text view then only we are adding // the multiplication operator to it. val str: String = tvMain.text.toString() if (!str.get(index = str.length - 1 ).equals( "*" )) { tvMain.text = (tvMain.text.toString() + "*" ) } } bsqrt.setOnClickListener { if (tvMain.text.toString().isEmpty()) { // if the entered number is empty we are displaying an error message. Toast.makeText( this , "Please enter a valid number.." , Toast.LENGTH_SHORT).show() } else { val str: String = tvMain.text.toString() // on below line we are calculation // square root of the given number. val r = Math.sqrt(str.toDouble()) // on below line we are converting our double // to string and then setting it to text view. val result = r.toString() tvMain.setText(result) } } bequal.setOnClickListener { val str: String = tvMain.text.toString() // on below line we are calling an evaluate // method to calculate the value of expressions. val result: Double = evaluate(str) // on below line we are getting result // and setting it to text view. val r = result.toString() tvMain.setText(r) tvsec.text = str } bac.setOnClickListener { // on clicking on ac button we are clearing // our primary and secondary text view. tvMain.setText( "" ) tvsec.setText( "" ) } bc.setOnClickListener { // on clicking on c button we are clearing // the last character by checking the length. var str: String = tvMain.text.toString() if (!str.equals( "" )) { str = str.substring( 0 , str.length - 1 ) tvMain.text = str } } bsquare.setOnClickListener { if (tvMain.text.toString().isEmpty()) { // if the entered number is empty we are displaying an error message. Toast.makeText( this , "Please enter a valid number.." , Toast.LENGTH_SHORT).show() } else { // on below line we are getting the expression and then calculating the square of the number val d: Double = tvMain.getText().toString().toDouble() // on below line we are calculating the square. val square = d * d // after calculating the square we // are setting it to text view. tvMain.setText(square.toString()) // on below line we are setting // the d to secondary text view. tvsec.text = "$d²" } } bfact.setOnClickListener { if (tvMain.text.toString().isEmpty()) { // if the entered number is empty we are displaying an error message. Toast.makeText( this , "Please enter a valid number.." , Toast.LENGTH_SHORT).show() } else { // on below line we are getting int value // and calculating the factorial value of the entered number. val value: Int = tvMain.text.toString().toInt() val fact: Int = factorial(value) tvMain.setText(fact.toString()) tvsec.text = "$value`!" } } } fun factorial(n: Int): Int { // this method is use to find factorial return if (n == 1 || n == 0 ) 1 else n * factorial(n - 1 ) } fun evaluate(str: String): Double { return object : Any() { // on below line we are creating variable // for tracking the position and char pos. var pos = - 1 var ch = 0 // below method is for moving to next character. fun nextChar() { // on below line we are incrementing our position // and moving it to next position. ch = if (++pos < str.length) str[pos].toInt() else - 1 } // this method is use to check the extra space // present int the expression and removing it. fun eat(charToEat: Int): Boolean { while (ch == ' ' .toInt()) nextChar() // on below line we are checking the char pos // if both is equal then we are returning it to true. if (ch == charToEat) { nextChar() return true } return false } // below method is to parse our // expression and to get the ans // in this we are calling a parse // expression method to calculate the value. fun parse(): Double { nextChar() val x = parseExpression() if (pos < str.length) throw RuntimeException( "Unexpected: " + ch.toChar()) return x } // in this method we will only perform addition and // subtraction operation on the expression. fun parseExpression(): Double { var x = parseTerm() while ( true ) { if (eat( '+' .toInt())) x += parseTerm() // addition else if (eat( '-' .toInt())) x -= parseTerm() // subtraction else return x } } // in below method we will perform // only multiplication and division operation. fun parseTerm(): Double { var x = parseFactor() while ( true ) { if (eat( '*' .toInt())) x *= parseFactor() // multiplication else if (eat( '/' .toInt())) x /= parseFactor() // division else return x } } // below method is use to parse the factor fun parseFactor(): Double { //on below line we are checking for addition // and subtraction and performing unary operations. if (eat( '+' .toInt())) return parseFactor() // unary plus if (eat( '-' .toInt())) return -parseFactor() // unary minus // creating a double variable for ans. var x: Double // on below line we are creating // a variable for position. val startPos = pos // on below line we are checking // for opening and closing parenthesis. if (eat( '(' .toInt())) { // parentheses x = parseExpression() eat( ')' .toInt()) } else if (ch >= '0' .toInt() && ch <= '9' .toInt() || ch == '.' .toInt()) { // numbers while (ch >= '0' .toInt() && ch <= '9' .toInt() || ch == '.' .toInt()) nextChar() // on below line we are getting sub string from our string using start and pos. x = str.substring(startPos, pos).toDouble() } else if (ch >= 'a' .toInt() && ch <= 'z' .toInt()) { // on below function we are checking for the operator in our expression. while (ch >= 'a' .toInt() && ch <= 'z' .toInt()) nextChar() val func = str.substring(startPos, pos) // calling a method to parse our factor. x = parseFactor() // on below line we are checking for square root. x = if (func == "sqrt" ) Math.sqrt(x) // on below line we are checking for sin function // and calculating sin function using Math class. else if (func == "sin" ) Math.sin( Math.toRadians(x) // on below line we are calculating the cos value ) else if (func == "cos" ) Math.cos( Math.toRadians(x) // on below line we are calculating // the tan value of our expression. ) else if (func == "tan" ) Math.tan(Math.toRadians(x)) // on below line we are calculating // log value of the expression. else if (func == "log" ) Math.log10(x) // on below line we are calculating // ln value of expression. else if (func == "ln" ) Math.log(x) // f we get any error then // we simply return the exception. else throw RuntimeException( "Unknown function: $func" ) } else { // if the condition not satisfy then we are returning the exception throw RuntimeException( "Unexpected: " + ch.toChar()) } // on below line we are calculating the power of the expression. if (eat( '^' .toInt())) x = Math.pow(x, parseFactor()) // exponentiation return x } // at last calling a parse for our expression. }.parse() } } |
Output:
For the complete article refer to this: How to Make a Scientific Calculator Android App using Android Studio?
You may also refer to the following video:
3rd Week
In the 3rd week of Android App Development, we will learn the following very important concepts
- What’s REST API
- Volley Library in Android
- What’s a JSON file?
- JSON Parsing in Android using Volley Library
1. What’ REST API
REpresentational State Transfer (REST) is an architectural style that defines a set of constraints to be used for creating web services. REST API is a way of accessing web services simply and flexibly without having any processing.
To read more refer to this article: Introduction to REST API
2. Volley Library in Android
Volley is an HTTP library that makes networking very easy and fast, for Android apps. It was developed by Google and introduced during Google I/O 2013. It was developed because there is an absence in Android SDK, of a networking class capable of working without interfering with the user experience. Although Volley is a part of the Android Open Source Project(AOSP), Google announced in January 2017 that Volley will move to a standalone library. It manages the processing and caching of network requests and it saves developers valuable time from writing the same network call/cache code again and again.
To read more refer to this article: Volley Library in Android
3. What’s a JSON file?
JSON stands for JavaScript Object Notation. It is a text-based data interchange format to maintain the structure of the data. JSON is the replacement of the XML data exchange format in JSON. It is easy to struct the data compare to XML. It supports data structures like arrays and objects and the JSON documents that are rapidly executed on the server. It is also a Language-Independent format that is derived from JavaScript. The official media type for the JSON is application/json and to save those file .json extension.
To read more refer to this article: What’s a JSON file?
4. JSON Parsing in Android using Volley Library
Refer to this article for proper implementation: JSON Parsing in Android using Volley Library
So after learning these important concepts, we will develop an intermediate project this week and the name of the project is “Build COVID-19 Tracker Android App“.
Project 3: How to Build a COVID-19 Tracker Android App
To build this complete project please refer to this article: How to Build a COVID-19 Tracker Android App. In this article, the complete step-by-step process is explained in detail also we have attached a video to understand the project deeper.
4th Week
When developers work on a real mobile application whose nature is dynamic and will expand its features according to the user’s need, then it is not possible to write core logic in activities or fragments. To structure the project’s code and to give it a modular design(separated code parts), architecture patterns are applied to separate the concerns. The most popular android architectures used by developers are the following:
- MVC (Model — View — Controller)
- MVP (Model — View — Presenter)
- MVVM (Model — View — ViewModel)
So in the 4th week are going to learn another very important concept i.e Android Architecture Patterns. Please read out the following articles and try to explore as much as you because these concepts are very very useful to become a successful Android Developer.
- Android Architecture Patterns
- MVC (Model — View — Controller)
- MVP (Model — View — Presenter)
- MVVM (Model — View — ViewModel)
So using these concepts, this week we are going to develop another application “Build a Simple Note App using Android Architecture Pattern”.
Project 4: Build a Simple Note Android App using MVVM and Room Database in Kotlin
To build this complete project please refer to this article: How to Build a Simple Note Android App using MVVM and Room Database. In this article, the complete step-by-step process is explained in detail also we have attached a video to understand the project deeper.
5th Week
Firebase! I think you have heard this word. Firebase is a product of Google which helps developers to build, manage, and grow their apps easily. It helps developers to build their apps faster and in a more secure way. No programming is required on the firebase side which makes it easy to use its features more efficiently. It provides services to android, ios, web, and unity. It provides cloud storage. It uses NoSQL for the database for the storage of data. To read more refer to this article: Introduction to Firebase
Project 5: User Authentication and CRUD Operation with Firebase Realtime Database in Android
So in the 5th week of Android App Development, we are going to explore the Firebase database and how to perform basic authentication and CRUD (Create, Read, Update, Delete) operation with Firebase. To build this complete project please refer to this article: User Authentication and CRUD Operation with Firebase Realtime Database in Android. In this article, the complete step-by-step process is explained in detail also we have attached a video to understand the project deeper.
You may also refer to this section to know more about Firebase + Android stuff.
6th Week
In the last week of Android App Development, we are going to develop an advanced Android App using multiple advanced concepts. We are going to build a Grocery Android App whose output is like the following.
Project 6: How to Build a Grocery Android App using MVVM and Room Database
So in this project, we are going to build a grocery application in android using android studio. Many times we forget to purchase things that we want to buy, after all, we can’t remember all the items, so with the help of this app, you can note down the grocery items that you are going to purchase, by doing this you can’t forget any items that you want to purchase. A sample image is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Kotlin language. In this project, we are using MVVM (Model View ViewModel) for architectural patterns, Room for database, Coroutines and RecyclerView to display the list of items.
To build this complete project please refer to this article: How to Build a Grocery Android App using MVVM and Room Database. In this article, the complete step-by-step process is explained in detail also we have attached a video to understand the project deeper.
Must Refer to the Following Tutorial in Android