Home » Uncategorized » A Login template for App Inventor

A Login template for App Inventor


  1. When some one searches for his necessary thing, therefore he/she wishes to be available that in detail, thus that thing is maintained
    over here.

  2. ErikV says:

    As awesome as this template is, there are some points I want to make to this.

    Design wise, any default type buttons in AI looks childish, It does not really matter what one does to them. They have to be exchanged with proper buttons made with photoshop or the like. This is paramount to making the app look professional.

    About Multiscreens on one page. This is fine for one program, like the whole login,registration,forgot password, and all that. That I believe should be viewed as one program, within the app. This I think is ok to have one screen doing.

    But when that is only the login for the main app, and this login is already code heavy, and really does not need to send any more info to the next screen but the username, then when one make an even more code heavy app, it becomes exceedingly messy.

    So I would propose to have the 4 menu buttons open 4 new screens, and to be png picture files, and that the arrangements and size can change with the orientation, but not to reshape them.

    Also, first impression is very often alpha omega, being greeted by a login screed every time you open the app, gives a poor user experience. In my opinion, Guest login should be automatic, then a simple notifier could prompt that you have to login or register to use certain features. In this way, login could be a little icon in the top corner of the app.

    Anyway, thank you deeply for making this template, I would have been stranded dead without it! Just have a hell of a challenge making the adjustments I just mentioned.

    • eixerits says:

      Thanks a lot for your comments. Identifying weak points is something that greatly helps to enhance a product, template or whatever, and unluckily it’s not common to receive this kind of feedback.
      I agree with most of your suggestions. Actually I had in mind some other enhancements and I’ll really consider including yours. However it will take me a while to work on them since I’m currently quite busy. Anyway, if you want to share your adjustments I’ll be pleased to reference your solution in this post.
      Some concrete comments about your suggestions:
      – “Childish buttons”: I agree with you. Indeed pictures would be a solution and I’ve seen some good examples on the web, but it will be necessary to take into account author rights or use Photoshop as you suggest
      – “Different screen for each menu action”: This is more arguable. Maybe there are some simple options that can share the same screen and some others that indeed require a specific one. For a template I think it’s not a big problem if we leave it as is and make adjustments to each app (after all, adjustments will be necessary anyway because there will probably be a different number of options)
      – “Not reshape”: You’re probably right because after testing with some devices I’ve realized reshaping may provoke strange effects on texts. I’ll try to adapt the algorythm based on my current experience
      – “Direct guest login”: It also looks like a very good idea

  3. Is this tutorial based on appinventor 2? because when I am trying to load it it asks for .aia file.


    • eixerits says:

      I think the same problem was reported and answered here.
      In sum there was an error in the version uploaded but it should be correct now. Otherwise tell me and I’ll have a look at it.

  4. Your way of describing all in his paragraph is truly nice,
    all be capable of effortlessly understand it, Thanks a lot.

  5. Sara says:

    hi can you please show the blocks needed to create a login. Thank you!

  6. Jules says:

    Hello Eixerits,

    Firstly, I would like to thanks you for your amazing work !

    I was wondering if its normal that’s when you click the logout button, and click enter again, the name and password stay here.
    Same thing if you leave after Logout, when you come back, you will be connected again.
    I think it’s missing an initialisation of variables when you click the logout button.
    But I’m certainly not an expert as you are ! 🙂
    Maybe you can take a look at it ?
    I will be very happy of it !
    Thanks a lot !


    • eixerits says:

      Hi Jules, thanks for the suggestion. When I have the time I’ll review the usability in all cases. However here’s my initial position about it:
      – When you logout and login again without quitting the app, I think it’s not bad to offer the same user as a default. It could arguably be safer to clean the password but I’m not sure about it. Maybe it should be preserved only it the “Remember” check was ticked in the last login (most web applications work like that)
      – When you logout and quit the application, the user should only we preserved if the check “Remember” was ticked in the last login. The discussion about the password is similar as in the previous point
      Anyway, as I say, I’ll review all options and tell you about it. Thanks again!

  7. Terry says:

    Hi I am a student interested in app inventor. I want to make a game application and this login system is essential. And I think your login template is great but there’s a limit as what I can do on my own. So please can you show a block editor for v3 to me? Here’s my email address, taezzang0608@naver.com, I beg your help. thank you!

  8. I am not able to use any file from the DOWLOAD button. The file stays in html format and I am not able to extract the aia or any of the assets individually. Any help please? Tks

  9. Camille Y says:

    Hi, I would like to change the order in which the screen appears. In other words, I would like the “tablearrangementmenu” to appear after the user logs in. Also, I would like to add a new table arrangement that would be the home screen when the app is opened and keep the login menu on top. How can I achieve this?

  10. […] I had previously worked in AppInventor where I faced the same needs and also wrote a tutorial (https://eixerits.wordpress.com/2013/02/03/a-login-template/ ) that has received (and continues to receive) quite a few visits, so I’ve thought providing […]

  11. Judith D Montesinos says:

    I know this is not in this topic, but I wanted to know how you can make an actual calendar on App inventor? Can the calendar connect to the Google Calendar ?

    • eixerits says:

      I’ve not tried it, but it seems to be possible using a technique similar to the one I used to connect with Google login page. Here is a tutorial that appears to do the job:

  12. Ratih Isnaini says:

    can you help me ? coding this template to login with database mysql

    • eixerits says:

      You’ll have to change the server side. If you don’t want to modify the AppInventor application you can adapt the GetValue and StoreAValue classes so that they connect to your nySql table rather than the AppInventor native table
      I’m not too familiar with mySql, but looking at the python connector documentation I assume the code could look like this (please note it’s a sample untested code):

      import mysql.connector
      class GetValue(webapp.RequestHandler):
      def get_value(self, tag):
      cnx = mysql.connector.connect(user='YOUR_USERNAME', database='YOUR_DB_NAME')
      cursor = cnx.cursor()
      query = ("SELECT * FROM YOUR_TABLE_NAME WHERE tag = '%s'")
      cursor.execute(query, tag)
      value = cursor.fetchone()
      #Place here formatting
      WritePhoneOrWeb(self, lambda : json.dump(["VALUE", tag, value], self.response.out))
      class StoreAValue(webapp.RequestHandler):
      def store_a_value(self, tag, value)
      cnx = mysql.connector.connect(user='YOUR_USERNAME', database='YOUR_DB_NAME')
      insert_stmt = ("INSERT INTO YOUR_TABLE_NAME (tag,value) VALUES ('%s', '%s')")
      cursor.execute(insert_stmt, (tag, value))
      result = ["STORED", tag, value]
      WritePhoneOrWeb(self, lambda : json.dump(result, self.response.out))

  13. Is your login template code in the AI2 Gallery?
    (I searched for eixerits.)
    Your AI2 DOWNLOAD button breaks the .aia into its subdirectories on download in Chrome, and returns a .htm page if saved by link address.

    • eixerits says:

      The template is not in the AI2 Gallery. I’ll try to add it when I have the time. Anyway, you should be able to download it from the AI2 DOWNLOAD button as you mention. Indeed Chrome will show you a page with its subdirectories but on the top right zone there is a download button. I’ve just tried to press it and it has downloaded a file with .aia extension which I’ve had no problems to import into AIA.

  14. Jervis says:

    Hello just want to ask if there is a way to link this login function to a qr reader function

    • eixerits says:

      Could you please explain further the kind of link you have in mind? Is the QR reader supposed to obtain a URL and redirect to the login page before navigating to the URL?

  15. Zain says:

    I have converted the FIle( login template .aia V1.0) you provided from AI classic version to AI2.
    I modified it according to my need at certain places.

    Everything works almost fine ,
    until consecutive attempts to sign in (not google sign in), and it throws an error saying,

    Select list item: List index too large

    Attempt to get item number 1 of a list of length 0 :()

    I’m aware of the fact that, this might be a consequence of the limitations that tinywebDB has, where the entries are limited to a user.
    Can you please suggest a workaround or a solution for this.

    thank you!

    • eixerits says:

      Hi Zain, I can’t reproduce the problem with my code, so it’s hard to find out the reason. Most likely the call to getUserInformation returns an empty list but I can’t see the reason. Maybe if you specify a little more the scenario. You say it’s after two consecutive attempts, but do you try the same username in both cases? Is the first atttempt successful? Is the second attempt with an existing user?

  16. Is there some corruption to the downloadable files? because i tried downloading version 3 to my computer and import to ai2, all i get is a screen with log out and helpbutton and two country flags in screen 1 and a few incoherent views.

    • eixerits says:

      I think you’ve got downloaded it correctly. It appears to be incoherent in the design view, but if you check the “Display the hidden components in viewer” you’ll realise all the components are there. When executing, these components are dynamically shown/hidden according to the actions performed by the user

  17. I also realized the the link for
    “How to redirect to the Google login (from Pura Vida Apps)” is no longer, i check the new site and they have developed an extension. How do we use the extension with the code presented here?
    Thank you!

  18. ADEL WALID KAHIL says:

    Hi, can someone please help me with a project please.
    This is the project
    Project 2 – Job Seeker
    Create an android mobile application called Job Seeker. People should be able to add
    their profiles to the application and update their profiles.
    You should have a log in page that checks whether a username exists or not. If it exists,
    the app should check whether the password is correct.
    When a user login and click on Find Job button, the application should return a list of
    jobs that matches his qualifications. You can use the list block “is in list” to search for a
    qualification in a list of jobs or the “while test do” from the built in control blocks.
    Im not a cmps student i just took the course as an elective and i really need help to pass this course.
    Please its very urgent and its due next monday.
    Appreciated very much.
    I want it as simple as possible.
    Thank you so much

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: