How to Show or Hide Password in Thunkable Makeroid AppInventor

If your Making an app with password then we need to make sure that we are providing a dynamic view to the user as we know that maximum apps with password have ability to show or hide password when we touch the Lock Icon they prepared left to the Password Box.But in Thunkable Makeroid AppInventor there is no such option in properties as of this reason every one thinks that there is no such option in these platforms as well as other platforms.
But the Truth is that these platforms actually have this option in default but only in blocks section of the password Text Box.


Now let's know where this option Exists and how to arrange blocks with adding Button icons also.

Let's Do this Steps.

Step1
Make the Password Design As You wish.Here we are only showing about Password Text Box so we are making a Design for Password Box.
Do give Better Design follow of Steps

Drag and drop Vertical Arrangement to app preview screen and also drag and drop the Horizontal Arrangement inside the Vertical Arrangement.
And set Vertical Arrangement Heigh and Width to Fill Parent.
For Horizontal arrangement Set Width Fill Parent only.
Step2
Now Add A button Component To Horizontal Layout and also a Password Text Box as shown below.

Step3
Upload the Materialicons-Regular file to media Layout and select this file in Button font in properties layout as shown below.
If you Don't know how to upload the File You can have the Tutorial Here.
Link:-πŸ‘‰Click HereπŸ‘ˆ
You can Download the Materialicons-Regulafile here
Link:πŸ‘‰Click HereπŸ‘ˆ

Step4
Now Text the Icon name in button Text in button properties Layout. Here we wanted use Eye Icon which looks Like this.
The name of this Icon is visibility as you see in the picture. So we need to type this icon name in the Text of button in properties as shown below.

Now we are all set to Add icon to the Button so let's go to blocks section.

Step5
Go to blocks Page and Drag the When Button .Click Block to arrangement screen as shown below.

Step6
Now attach a If then Block To button Block as shown Below.

Step7
Now attach Password_TextBox.PasswordVisible Block to If block as shown below.

Step8
Now attach a Set Password_TextBox.PasswordVisible to Block to Then Block as shown below.

Step9
Now attach the False Bock to Set Password block from Logic as shown below.


This arrangement means That it will hide password when user clicked button during the password is visible.
So now let's give another arrangement so that password will be shown when user clicked the button when password is hidden.

Step10
Now click the Setting icon in If Then block and Add the else block as shown below.


Step11
Now add another  Set Password_TextBox.PasswordVisible to Block to Else block as shown below.

Step12
Now attach the True Block from Logic to Password Block as shown below.

That's it the password will be shown and hidden when user Random clicks on the Button which will be appeared as Eye Icon.

Aia File:- ( will be uploaded soon)

We can also change the Icons when clicked like when user clicked the button then Visible Eye Icon will be changed in to Non-Visible Eye Icon like the following shows below.

Icon1 User see this Icon default

When user Clicks on the Icon1 or Does a certain thing the Icon will change into Icon2 like this.


We are Gonna say about this in Next Post.


Happy tHunking😎😎

Post a Comment

0 Comments