Phone Verification with Step View UI/UX design with Auto SMS verification Android Studio Tutorial


Hey whats up guys welcome back. This post is about Phone Authentication I already posted about Sign in and login UI which you guys like a lot but now its time for changing So nowadays phone authentication is most important and we need to make this look awesome...


So we make this UI this project is connected with firebase in this post I will give you the tutorial about UI and also tell you how this phone authentication work... This post is fully completed you can get the full project source code from GitHub... So let's start

Here How its Look Like after Finish



1. Create a new project. 

1. Create a new project in Android Studio from File ⇒ New Project and select Empty Activity from templates.or you can choose your existing project.



2. Because this project uses Firebase, you need to add firebase to your project for that follow this simple steps.

2.1. First Click on Tools>and click Firebase like that Image.


2.2. Now click on authentication and click Email & password and click on Connect.


2.3. Now Create a new project or chose your old project from the list and click on connect to firebase...


2.4. Now Click on Add Firebase Authentication to your app and from pop up click on Accept Changes.


2.5. Ok, now we successfully add firebase to our application now the project takes some time to build the gradle.



3. Add this dependency to your app/build.gradle. And Sync the project. If any of the dependency is already added to your project then skip those dependencies.


4. Now we need to add some user permissions to menifest so go to app/src/main/AndroidManifest.xml and add this permission. Note add this outside of application tag.

5. Now create two new activity one is for authentication and another one is for profile activity for that right click on app folder and click on new>activity>empty activity.


6. Now as you know this project has so many drawable files so download them from GitHub link.

7. Now open your layout folder app/src/main/res/layout/  and create two more layouts we will talk later for that layout just name that two layouts as processing_dialog.xml and profile_create_dialog.xml.



8. Now open your activity_main.xml file and paste this code.

9. Now open your activity_profile.xml file and paste this code.

10. Now the big code open your activity_authentication.xml file and past this code.



11. Now open that two extra XML files processing_dialog.xml and profile_create_dialog.xml. and past this codes are for making the dialog boxes...



12. Now, this is the time for doing some code. Open your MainActivity.java file and paste this code.


13. Now open ProfileActivity.java file and paste this code.



14. Now the last Code open Authentication.java file and paste this code...


That's it now you can run your project and see how its look...

Thanks for your time you can see the original code from GitHub -> Download Full Source Code

Comments

  1. it's great, wonderfullll but please help me to get country code into String using Firebase phone authentication. ! pleaasse

    ReplyDelete
  2. where is method to pickup the otp directly to pinview

    ReplyDelete
    Replies
    1. That's automatic. It's done by Google play services in backend.

      Delete
    2. I can not get the message in mobile why?

      Delete
    3. Firebase take some time to send OTP so you may wait for it

      Delete
    4. the app crash after click on click button

      Delete

Post a Comment