How to Create a Login Activity – Sketchware – Medium

Sketchware Follow Sign in Get started

HOME ABOUT US NEWS TUTORIALS TIPS

Sung Park Follow

Mar 24 · 5 min read

How to Create a Login Activity

Implement an Auth System in Your Next Android App!

Never miss a story from Sketchware, when you sign up for

GET UPDATES
Medium. Learn more

https://medium.com/sketchware/how-to-create-a-login-activity-65e35708f370[12/11/2017 11:53:41 PM]

How to Create a Login Activity – Sketchware – Medium

Most applications today have an authorization system in forms of Facebook login,

Google login, plain old email login, and more. In fact, Sketchware uses Google Login in
the application as well. Having an authorization system is a great way to keep users
organized. Today, we’ll learn how to create a basic username/password login system on
Sketchware.

First, here is a little sneak peek of what we’re going to create:

https://medium.com/sketchware/how-to-create-a-login-activity-65e35708f370[12/11/2017 11:53:41 PM]

How to Create a Login Activity – Sketchware – Medium

Login Page, Signup Page, and Welcome Page respectively

What you’ll need
1. Sketchware — a mobile IDE on your smartphone

2. Passion to learn! :-)

What you’ll learn
1. How to create a simple login system

2. Understand writing and retrieving data from File component

...

The login application we create is going to be multi-paged. These are some of the
activities you will need:

https://medium.com/sketchware/how-to-create-a-login-activity-65e35708f370[12/11/2017 11:53:41 PM]

How to Create a Login Activity – Sketchware – Medium

1. Login Page (Main Activity)

2. Signup Page

3. Logged-in Page

Main Activity
When we start the application, we will want to greet the user with a login page. On this
screen, user will be able to perform two actions: logging in and signing up. This is how I
designed my login page:

https://medium.com/sketchware/how-to-create-a-login-activity-65e35708f370[12/11/2017 11:53:41 PM]

How to Create a Login Activity – Sketchware – Medium

Since the user will have to go through a sign-up process, let’s tackle the sign-up logic
frst. On the Signup button clicked event, we simply navigate the user to the
signupActivity.

https://medium.com/sketchware/how-to-create-a-login-activity-65e35708f370[12/11/2017 11:53:41 PM]

How to Create a Login Activity – Sketchware – Medium

Logic for signup_button onClick event

Sign-up Activity
Clicking on the Sign-up button leads us to the SignupActivity, which looks something
like this. This page has one purpose — signing up the user with the provided
information.

https://medium.com/sketchware/how-to-create-a-login-activity-65e35708f370[12/11/2017 11:53:41 PM]

How to Create a Login Activity – Sketchware – Medium

Many users ask, “How do we save the user information locally so that the information
stays even after the app has been closed?” The answer is File. Using File component, we
can save the data locally, and retrieve it next time the app starts.

Start by adding a new File component in SignupActivity.java:

https://medium.com/sketchware/how-to-create-a-login-activity-65e35708f370[12/11/2017 11:53:41 PM]

How to Create a Login Activity – Sketchware – Medium

Basic fow goes like this:

https://medium.com/sketchware/how-to-create-a-login-activity-65e35708f370[12/11/2017 11:53:41 PM]

How to Create a Login Activity – Sketchware – Medium

1. User inputs username/password and clicks on the signup button

2. Validate the user input. If valid, signup, else show an error message.

3. Alert the user and fnish the activity if the sign-up is complete.

The reason why I am saving the key as a username is because I want to create a 1-to-1
relationship between the username and password. We usually call this relationship
“map”.

Cool! Let’s tackle the login logic now.

Back to Main Activity
Before we do anything, let’s organize the logic.

1. When the user enters the username/password, validate the length.

2. If they’re both greater than 0, we want to retrieve the information from the data we
previously saved.

3. Since the data is saved in <Username, Password> map, we validate if the given

https://medium.com/sketchware/how-to-create-a-login-activity-65e35708f370[12/11/2017 11:53:41 PM]

How to Create a Login Activity – Sketchware – Medium

username matches the password.

4. If valid, log the user in, else show an error message.

Another thing worth noting is that we also need to add a File Component inside the
MainActivity.java. When you do that, MAKE SURE the fle name is the same as the
one you’ve previously declared. I called it “userInformation”, so I am going to enter
“userInformation” again.

Here is the logic for the login_button clicked event:

LoggedinActivity
Last but not least, this is the screen that shows up when the login is complete. Pretty

https://medium.com/sketchware/how-to-create-a-login-activity-65e35708f370[12/11/2017 11:53:41 PM]

How to Create a Login Activity – Sketchware – Medium

simple right? Even though I didn’t apply this concept, you could possibly pass the
username through the Intent if you’d like and welcome the user with the message
“Welcome username!”. Just a thought :-)

https://medium.com/sketchware/how-to-create-a-login-activity-65e35708f370[12/11/2017 11:53:41 PM]

How to Create a Login Activity – Sketchware – Medium

Conclusion
Today, we learned about how we can create a login system in Android Applications
using Sketchware. Basic concept and fow goes like this:

1. User signs up to the application, and we only allow the signup to happen if the user
input are validated. We store the information locally by using File system and keeping
the username-password relationship 1-to-1.

2. User logins to the page with the information. We validate the user input and logs in
the user if the username/password are matching.

Once you complete the login system, here are some possible features I want to challenge
you to add:

1. Secure the password input. This means, when the user inputs the password, the
password will be replaced with interpunct: “·”

2. Create a checkbox with “Remember me” button. If the checkbox is checked,

remember the user and login the user automatically next time the user starts the app.

I shared this Login Example under Sketchware as “Login Example”. Feel free to rip it

https://medium.com/sketchware/how-to-create-a-login-activity-65e35708f370[12/11/2017 11:53:41 PM]

How to Create a Login Activity – Sketchware – Medium

apart and learn from it.

That’s it! If you have any questions, please join our active Sketchware community on
Slack! Happy coding! :-)

...

If you enjoyed this article, please press the �� below so others can fnd this article too!

Tech Startup Entrepreneurship Tutorial Apps

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.

200
200 12
12

Follow Sketchware Follow

Sung Park
Create your own
smartphone apps on
your smartphone.

56
56 240
240 292
292

4 min read 3 min read 3 min read

https://medium.com/sketchware/how-to-create-a-login-activity-65e35708f370[12/11/2017 11:53:41 PM]

How to Create a Login Activity – Sketchware – Medium

Responses

Write a response…

Conversation with Sung Park.

Abdul Qadir
Mar 29 · 1 min read

Amazing. Thanks alot Sir. Keep it up.

I love sketchware android IDE.

Actually I did it before your article.

And one more thing Sir. May I publish my created app on Google play
store.

If yes then how?

Read
Readmore…
more…

33 1 response

Sung Park
Mar 30

Hey Abdul, thank you for the love! You can publish the application as long
as you have a developer account for Play Store. Simply export the project to
Android Studio and re-compile to produce a “Signed” application! If you
have any questions, please join our active Sketchware community at
http://slack.sketchware.io!

55 1 response

https://medium.com/sketchware/how-to-create-a-login-activity-65e35708f370[12/11/2017 11:53:41 PM]

How to Create a Login Activity – Sketchware – Medium

Conversation with Sung Park.

dede iskandar
Jul 27

i wan to study sketchware …

22 1 response

Sung Park
Jul 28

Hey Dede, there are many video tutorials on YouTube, as well as on

Medium. The tutorials are always available at
www.medium.com/sketchware. If you have any questions, please join our
active Sketchware community at http://slack.sketchware.io!

1 response

Conversation with Sung Park.

Sajith Malinda
Aug 20

Hi Can you tell me how to create forgot password and rest password

1 response

Sung Park
Aug 21

Hey Sajith, if you have any questions, please join our active Sketchware
community at http://slack.sketchware.io!

https://medium.com/sketchware/how-to-create-a-login-activity-65e35708f370[12/11/2017 11:53:41 PM]

How to Create a Login Activity – Sketchware – Medium

Show all responses Show all responses

https://medium.com/sketchware/how-to-create-a-login-activity-65e35708f370[12/11/2017 11:53:41 PM]