Login screen android

Overview

Your apps sign-in screen is crucial to the onboarding process. It is the first thing your users will see when they first use your app. In this tutorial we will build an Android app that displays a simple login form for the user.

Step 1

MainActivity.java

package com.csuf.cpsc411.loginscreenxml;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.WindowManager;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        this.getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN);

    }
}

Step 2

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#FAFAFA"
    android:gravity="center"
    tools:context=".MainActivity">

   <TextView
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:textSize="28sp"
       android:gravity="center"

       android:textColor="#F9AC36"
       android:text="Login" />

<EditText
    android:background="@drawable/edittextdesign"
    android:hint="Username"
    android:textColor="#000000"
    android:textColorHint="#9C9C9C"
    android:paddingLeft="15sp"
    android:layout_width="match_parent"
    android:layout_margin="20dp"
    android:layout_height="60dp"/>

    <EditText
        android:background="@drawable/edittextdesign"
        android:textColor="#000000"
        android:textColorHint="#9C9C9C"
        android:hint="Password"
        android:paddingLeft="15sp"
        android:layout_width="match_parent"
        android:layout_margin="20dp"
        android:layout_height="60dp"/>

    <Button
        android:id="@+id/angry_btn"
        android:background="@drawable/buttondesign"
        android:layout_width="match_parent"
        android:layout_margin="20dp"
        android:text="Submit"
        android:textColor="#FFFFFF"
        android:textSize="25sp"
        android:layout_height="60dp"
        android:shadowColor="#FAFAFA"
        android:shadowDx="0"
        android:shadowDy="0"
        android:shadowRadius="14" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:gravity="center"
        android:layout_margin="10dp"
        android:textStyle="bold"
        android:textColor="#F9AC36"
        android:text="Sign Up" />

</LinearLayout> 

Step 3

drawable/buttondesign.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <corners
        android:radius="14dp"
        />
    <solid
        android:color="#F9AC36"
        />
    <padding
        android:left="0dp"
        android:top="0dp"
        android:right="0dp"
        android:bottom="0dp"
        />
    <size
        android:width="0dp"
        android:height="0dp"
        />
    <stroke
        android:width="1dp"
        android:color="#6600"
        />
</shape>

Step 4

drawable/edittextdesign.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="1dp"
        android:color="#D3D1D1" />
</shape> 

Output