2019 Mobile app login best practices UI Design idea with simple codes


Nowadays it's really important to add a signup activity in the application for security but you know it's not a so much difficult to design a good looking signup UI just simple codes can help you to create awesomeness. As this design has just followed the codes. only XML nothing else...


Watch the Video Tutorial




1st create a new project as you know how to create that.

Then open the activity XML file here I am adding the codes in my activity_main.xml...

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimary"
    tools:context=".MainActivity">


    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:theme="?attr/actionBarTheme"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" >
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Sign Up"
            android:textAlignment="center"
            android:textStyle="bold"
            android:textSize="25sp"
            android:textColor="@android:color/white"/>
    </android.support.v7.widget.Toolbar>


    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="40dp"
        android:layout_marginEnd="8dp"
        android:fontFamily="@font/devonshire"
        android:text="Monster Techno"
        android:textAlignment="center"
        android:textColor="@android:color/white"
        android:textSize="35sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.497"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toolbar" />

    <EditText
        android:id="@+id/username_box"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="35dp"
        android:layout_marginTop="80dp"
        android:hint="Username"
        android:drawableLeft="@drawable/ic_person_outline_black_24dp"
        android:drawablePadding="25dp"
        android:drawableTint="#B8B8B8"
        android:textColor="#E9E9E9"
        android:background="@drawable/edittext_background"
        android:padding="12dp"
        android:textColorHint="#B8B8B8"
        android:inputType="textPersonName"
        android:layout_marginEnd="35dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <EditText
        android:id="@+id/email_box"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="35dp"
        android:layout_marginTop="15dp"
        android:layout_marginEnd="35dp"
        android:background="@drawable/edittext_background"
        android:drawableLeft="@drawable/ic_mail_outline_black_24dp"
        android:drawablePadding="25dp"
        android:drawableTint="#B8B8B8"
        android:hint="E-Mail"
        android:inputType="textEmailAddress"
        android:padding="12dp"
        android:textColor="#E9E9E9"
        android:textColorHint="#B8B8B8"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/username_box" />

    <EditText
        android:id="@+id/password_box"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="35dp"
        android:layout_marginTop="15dp"
        android:layout_marginEnd="35dp"
        android:background="@drawable/edittext_background"
        android:drawableLeft="@drawable/ic_lock_outline_black_24dp"
        android:drawablePadding="25dp"
        android:drawableTint="#B8B8B8"
        android:hint="Password"
        android:inputType="textPassword"
        android:padding="12dp"
        android:textColor="#E9E9E9"
        android:textColorHint="#B8B8B8"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/email_box" />

    <EditText
        android:id="@+id/check_password_box"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="35dp"
        android:layout_marginTop="15dp"
        android:layout_marginEnd="35dp"
        android:background="@drawable/edittext_background"
        android:drawableLeft="@drawable/ic_lock_outline_black_24dp"
        android:drawablePadding="25dp"
        android:drawableTint="#B8B8B8"
        android:hint="Password Check"
        android:inputType="textPassword"
        android:padding="12dp"
        android:textColor="#E9E9E9"
        android:textColorHint="#B8B8B8"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/password_box" />

    <Button
        android:id="@+id/complete_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="45dp"
        android:layout_marginTop="84dp"
        android:layout_marginEnd="45dp"
        android:layout_marginBottom="8dp"
        android:background="@drawable/button_style"
        android:text="SIGNUP"
        android:textColor="@android:color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/check_password_box" />

    <TextView
        android:id="@+id/login_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:text="Already have an account Login Here"
        android:textColor="@android:color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="@+id/complete_button"
        app:layout_constraintStart_toStartOf="@+id/complete_button"
        app:layout_constraintTop_toBottomOf="@+id/complete_button" />
    
</android.support.constraint.ConstraintLayout>


You will get two errors one is for font and another one is for background design.

First, create two XML files under the drawable folder and add these codes...

button_style.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="20dp"/>
    <gradient
        android:startColor="#F44434"
        android:endColor="#FE9303"/>
</shape>

edittext_background.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:color="#B8B8B8" android:width="1dp"/>
    <corners android:radius="20dp"/>
</shape>
for the font, you can choose the font you want from the font section...

Its simple code to done a good looking UI now you can do whatever you want in the java file its depend on you...



Watch the Video Tutorial



Source code available on GitHub- https://github.com/MonsterTechnoGit/2019-Signup-page-SImple-UI-design-/

Comments