In the 1st part of this article we have learned how to create the required REST API for this app. In this part we are going to see how to build the android app that interact with the API to receive the SMS and get it verified. As this project uses volley to make http calls, I suggest you go through my Volley tutorial to know the usage of volley. Also you need to have basic knowledge on android services and broadcast receivers.
We are going to use SMS broadcast receiver to read the sms whenever device receives it and an Intent Service to make the http calls which sends the OTP to server to get it verified.
DOWNLOAD CODE
VIDEO DEMO
Below is the screenshot of the app we are going to build now.
6. Creating the Android App
This app contains two activities. One with a ViewPager with two pages. One page is to enter the mobile number and other page is to enter the OTP. The second activity is to display the logged in user profile information.
1. In Android Studio, create a new project by navigating to File ⇒ New Project and fill all the required details. When it prompts to select a default activity, select Blank Activity and proceed.
2. Open build.gradle located under app folder and add volley library dependency by adding com.mcxiaoke.volley:library-aar:1.0.0.
6.1 Making the App Material
This step is optional but I recommend you go through it as it improves your knowledge on material design. Follow my Material Design tutorial to get to know how to make your android app material design ready.
3. Open strings.xml located under res ⇒ values and add below string values.
4. Open colors.xml located under res ⇒ values and add below color values.
4. Now open styles.xml located under res ⇒ values and add below styles.
5. Under res directory, create a folder named values-v21. In this folder create another styles.xml and add below code.
7. Finally open the AndroidManifest.xml and add the MyMaterialTheme to <application> tag.
Now if you run the app, you can see the top notification bar color changed which means the material design theme is applied.
3. Now create five packages named activity, app, helper, receiver and service. These packages helps in keeping the project organized.
Below is screenshot of the final project of this tutorial.
4. Under app package, create a class named Config.java. This class contains very important app configuration information.
> URL_REQUEST_SMS and URL_VERIFY_OTP should be correct. The ip address should match with your localhost PC.
> SMS_ORIGIN should match the value in your PHP project’s Config.php.
> OTP_DELIMITER should also match the value in your PHP project’s Config.php.
5. Under app package, create a class named MyApplication.java. This class initiates the volley core objects. This class extends from Application class which should be added in your AndroidManifest.xml <application> tag.
6. Open your AndroidManifest.xml and add the MyApplication to <application> tag.
7. Under helper package, create a class named MyViewPager.java. This is a custom ViewPager class where we disable the swipe functionality of it.
8. Create a class named PrefManager.java under helper package. This class contains methods to store user information in Shared Preferences.
6.1 Creating SMS Receiver
Now we’ll see how to add a receiver which will be triggered whenever the device receives an SMS. Also we’ll add an Intent Service to make the http calls when the app is not running.
9. Under service package, create a class named HttpService.java and extend this class from IntentService. This service is useful to make the HTTP calls when the app is in background or killed. We’ll use this Intent Service to send the OTP to our server if the app is killed before receiving the SMS.
9. Now under receiver package, create a class named SmsReceiver.java and extend the class from BroadcastReceiver. This is a broadcast receiver class which will be triggered whenever user device receives the SMS.
10. To make the service and receiver working, open the AndroidManifest.xml and do the below changes.
> Add INTERNET, RECEIVE_SMS and READ_SMS permissions.
> Add MyApplication to <application> tag.
> Make SmsActivity as launcher activity. (We’ll create this activity shortly)
> Add SmsReceiver class using <receiver> tag.
> Add HttpService using <service> tag.
This is how your manifest file should look like.
6.2 Creating Mobile Login Screen
Now we have all the core logic ready. Let’s add the first activity to enter the mobile number and OTP.
12. Under res ⇒ layout, create an xml layout named activity_sms.xml and add below code. This layout contains a ViewPager with two pages. In one page we ask the user to enter his mobile number. In the second page we prompt the user to enter the OTP if the automatic sms verification fails.
13. Create an activity class named SmsActivity.java under activity package. In the below code
> requestForSMS() method make a call to server by passing name, email and mobile requesting for sms.
> verifyOtp() methods passes the otp received in the SMS to server to verify it.
Now run the app and test it once. Make sure that you have correct ip address of your localhost in Config.java
6.2 Displaying logged in User Profile
Displaying the logged in user information is pretty straight forward. Previously the user information is store in Shared Preferences in HttpService.class. In this activity we have to read the information from shared preferences and display it on the screen.
14. Create an xml layout named toolbar.xml under res ⇒ layout.
15. Open the layout file your main activity (activity_main.xml) and do the below changes. This layout contains few TextViews to display the logged in user information.
17. Open menu_main.xml located under res ⇒ menu and add an action item to provide the logout option.
16. Open MainActivity.java and do the below changes. In this activity we just read the user information stored in shared preferences and display it on the screen.
7. Testing the App
To test the app, carefully follow the below steps.
> Make sure that your device and the PC running the php project are under the same wifi network.
> Keep correct username, password and database name in Config.php
> Give the correct MSG91_AUTH_KEY Key in Config.php
> Make sure that MSG91_SENDER_ID in Config.java and SMS_ORIGIN in Config.java are equal.
> Keep the correct ip address of your localhost in Config.java. On windows run ipconfig in command prompt to get the ip address.
I know running this app is little tricky for a beginner. But the following the above steps correctly will help you a lot. If you are still facing the problem in running this app, please do comment below.