4.1)App Screen 1 “Personal Info” for Calorie Counter
Welcome back friends! In this week, we are planning to complete the first core screen of the app. In the Hasura internship, we are supposed to make a 3 screen app , excluding the Login and Signup page. Here we will talk about the slider which we have used to make it attractive, the login and signup page and also the first core screen i.e the ‘Personal Info’ screen. Lets get started with that!!
So, our mobile app is based on Android. For the development of our app we are using Android Studio. For the beginners, it will be easy to understand the Android with the help of Getting Started tutorial. We have also inserted a Slider which gives an overview of the entire app. The Slider helps the new users to understand what the app is all about and what all features it will be providing to the users. In the login and signup screens of our app, we validated the input fields like email-id format, password,etc. For validation, one can refer the site Android: Input Validation.
The screenshots of the Slider ,Login and Signup screen of our app are as follows:
- Slider
2. Signup page:
3. Login page:
When the user visits the app for the first time, he /she needs to register using Signup page. Firstly, Login screen will appear but since he/she will be a new user, there is a option for new users wherein they can create there account. After clicking on that button ,you will be redirected to the Signup page and once you register yourself then again you need to Login so that you can access the app. Once you have successfully logged in you will be redirected to the Personal Info screen for filling the details.
- Personal Info screen(Empty)
2. Personal Info screen(Completed)
The main objective of the ‘Personal Info’ screen is to calculate the total calorie intake for the user based on his daily routine and his personal details. It will take user specific data such as, User’s Height in cms, Weight in kgs and Age in years. Also, the user needs to select options from the drop down menu for Category i.e. about the lifestyle of the user such as Sedentary, Lightly Active,etc and the same for Criteria i.e. whether user wants to maintain his/her weight or gain or reduce weight.
We have validated the Personal Info screen for input like empty fields and for invalid values(such as Age is 150,etc). For the User Interface we used the EditText, TextView, background, images,etc and even two Spinners. For the SignUp and the Login part , we used the basic utilities that are offered by the Android Studio and also inserted images to make it look better.
Link to the latest app is here : My Calorie Counter
This is it for this blog, stay tuned for the next blog about App Screen 2 i.e the Add Intake Screen. Till then,Ciao!!