Creating Android App Login Screen Animation Kodular/App Inventor

Hi, today i will share a tutorial creating android app login screen animation with Kodular, you can use this tutorial with another services like AppInventor/Appybuilder with some adjustment. So in the previous post, we are created a simple application with Label text and Button component. For now, let’s try to create a Login Screen and we will use the animation component to make it more interesting. So this is a list of components that you will use :

  • Vertical Scroll Arrangment
  • Space
  • Image
  • Label
  • Text Box
  • Button
  • Animation Utilities

Before continue into the tutorial, don’t forget to prepare

  • PC or Laptop
  • Web Browser
  • Coffee / Tea
  • Enjoy

Preparing the screen

First open Kodular.io, sign in or register if you are a new user. Then create the new project and type the name, after that follow this step

  • Write your application name
  • After that write your package name
  • Find a good background image here is the example : undefined
  • Upload the image by clicking the assets menu and upload image. We will use this image for a background of our login screen.
Assets Menu
  • Click the Screen1 find the background image, choose the image
  • Find the app name, change the app name into “Login Screen”

Layout

Now we are moving into layout, what we gonna do is to make the screen have a background Image, a Logo, and a container of form for login. First remove the title bar and status bar from screen, uncheck the show options menu, show status bar and title visible. This make a full screen application,

Next, choose layout palette from the left side and choose the vertical scroll arrangement component drag into the application and rename the component into “logoContainer“. This component is a container with vertical alignment and if the content height exceeds the screen, we can scroll the content to the bottom.

Drag the image component to the logoContainer, and use this image undefined and upload to the assets, choose the image component from hierarchy components find the picture properties change into the Logo image, we are using this image Logo as placeholder. Drag space component and put inside the logoContainer, put above of the logo image component.

Drag a new vertical Scroll Arrangement, and put below the logoContainer, rename the component into loginButtonContainer, drag the Label component put inside into loginButtonContainer.

UI Login Screen

Try to make the UI look like a picture above. Feel free to change the width, height of the container or the component

Properties

  • Space -> height = 10%, width = automatic
  • image component -> height = 30%, width = fill parent
  • logoContainer -> height = fill parent, width = fill parent, Align Horizontal = center
  • loginButtonContainer -> Align Horizontal = center, Background color = #0398F3FE, Clickable = true (Checklist), Height = 8%, Width = fill parent
  • Label -> font size = 18, Text = “Login”

Now, drag new Vertical Space Arrangement, put below loginButtonContainer and rename into loginFormContainer.

Make the loginFormContainer look like the picture above, put the text box component, button component, label component and use space component to provide spacing between components. Then uncheck the checkbox visible property loginFormContainer, you will see the screen like this

UI Login Screen

Drag the animation utilities component into application. Now we will move to blocks section to make some cool animation.

Block

This the animation block, this block will make animation when loginButtonContainer has been clicked.

How it works.

  1. Click Login Container
  2. Hide LoginButtonContainer
  3. Show loginFormContainer
  4. Animate loginFormContainer from bottom to middle with bounce animation

How about login function?

Let’s make it more interesting, how about to add a simple login function. Drag notifier component into application, we will use this to show a message if we successfully login.

Block When Button Login Clicked

drag if-then block from control , change the block into if-then-else block, click the gear, and drag else block into inside if block.

How it works

  1. Login Button Click
  2. it will compare the username and password value, if txtUsername value equal with “amoeba and txtPassword value equal “developer”
  3. then show message with notifier component, show congratulation message
  4. else show the wrong message

Live test

Live Test Login Screen Animation

It’s time to test to device, click test menu from browser -> connect companion. Open companion app kodular from your device and scan the qr code or insert the code number. Click the Login and you will see the animation showing form login, from bottom to top with bouncing. Try to insert the username and password to see the message notification.

You can download and import the project from here and here is the Demo.apk

Congratulation, you just made android application.

See you in the next post!

One thought on “Creating Android App Login Screen Animation Kodular/App Inventor

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 )

Twitter picture

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

Facebook photo

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

Connecting to %s