Change Icon when button Click Thunkable Makeroid AppInventor

Icons are more important to develop your app and make the app more beautiful. Users like Icons rather than text. So In-app making you must and should pay attention to Icons to turn your app into more dynamic and attract users to your app.
So only adding icons is not enough and also to add icons you need space, But what about if you don't have space to add some more Icons. It will be Difficult right.?
So we are going to show you a simple tip which reduces space consumption for Icons and also you can add more Icons in Single place.

So as you see the Title "Change Icon When Button Click".

Before we are going to start the Tutorial, let's know what is the use of this Tutorial and where use this method.

This Tutorial reduces the space consumption of Icons in the app and makes your app looks more professional to make it look likes its made in android studio.

This method is used when the two icons describe the same thing as one is for Option enabled and another one is Option Disabled.

Examples:


You may be already got an idea of what we are trying to say.

So for example, If you are making a Password box for login, and you want to make the password Visible and Non-Visible Option with a button component then Using a button is not just enough to attract the User you also need to add an Icon to attract the user and as well as to make him more visually more understand.

Like when user Clicks on the this symbol

Then password Will Visible, as well as the Current(Above) Icon, will be changed to this Icon.

So when the user again wants to hide the password then he/she will again click the above as it Makes him a sense that he needs to do to hide the password is just clicking that Icon again as The Icon Explains what will happen which it Clicked.
And once the User clicks the Icon Again then the password will be Non-Visible and The Icon also will change to the First Icon. As this is the First Icon.



It will make your app more beautiful and users will definitely like the interface.
So let's get started how you could actually do this.

Step1
Add a Button Component where the Icon should appear in the App.

Step2
Now upload material Icon Font file to the button. If you don't know how to change components into Icons then You can have a tutorial here.
๐Ÿ‘‰Click Here๐Ÿ‘ˆ

Step3
Now Enter the Icon name in the Button Text which should appear as a Default Icon means this Icon will appear at first when the user opens the app every time.


Step4
Now arrange the following locks as shown below.

Step5
Now you need to enter the Icon names In Text String Blocks.
As an Example, we are making the same Icons as we described above.
So the Icons names we are described above are visibility and visibility_off

By the above arrangement, When Clicked on visibility Icon then visibility Icon will be changed to visibility_off Icon and the Icon will change wise-versa on random clicks.


The above blocks arrangement is good to change the Icon then what about the Different Command that should be taken when Icon Clicked?

For that, you can give whatever the command you want in the Then Block of the If block.
Given below an example.

In this Arrangement, we were given a command that when the user clicked on Visibility Icon then the password will be visible. And when he clicked visibility_off Icon then the password will be hidden. And Icons also will change.


Happy tHunking๐Ÿ˜Ž๐Ÿ˜Ž

Post a Comment

0 Comments