In this tutorial, I am going to show how to create material design login form XML UI design. Many android applications have login and registration system. Here I have used only XML to create login screen. You have to create a drawable XML file for profile picture background color to make rounded. And you can use icons according to your wish here I have not provided icons. For EditText field icon should be small (24*24) to make attractive.

I have used TextInputLayout widget which is available in new android library called Design Support Library.

Simple Android Contact Form XML UI Design
Android EditText Example
Android AutoCompleteTextView and MultiAutoCompleteTextView

Android Example: Android Material Design Login Form XML UI Design

Let’s start by creating new android project with the project name Android Material Design Login Form or some else.

Import Design Support Library

In this project I have used TextInputLayout which is available in android design support library, so you have to add design support library in build.gradle file if not have.


XML Layout File

In XML layout file I have used RelativeLayout, LinearLayout, TextInputLayout, EditText, Button, ImageButton and TextView with different xml attribute to make material design login form UI design. Following is the complete content of XML layout file.

res/layout/ material_design_login_form.xml

XML Drawable File

Create a new XML file in res/drawable to make rounded in profile picture background. Following is the complete content of user_profile_image_background.xml file.

res/drawable/ user_profile_image_background.xml

Java Activity File

Default code of java activity file will look like this.

src/ MaterialDesignLogInForm.java

Strings.xml File


Android Example: Android Material Design Login Form XML UI Design

Now, run your Android Material Design Login Form XML UI Design application which will look like above screenshot.

Post a Comment

Powered by Blogger.