Splash Screen and Login Screen with android UI layout with Source code.

ronnystudio-android app ui screen - register
Splash Screen and Login Screen with android UI layout with Source code.spending 1000+ hours on building XML layout for your project? , well now, you can relax as you can use our free android kit which is a click away.

Saving your ample hours of designing and developing the Android UI is our goal, We now present to you the Free Android UI templates for Fullscreen feed activity with an android XML ready code with the detailed process.

What you’ll get

  • Clean coded and easy to understand for customization.
  • Change text, colors, and images as per your need.
  • Customize every element as much, or as little as you want.
  • Easy to edit.
  • high-quality design
  • Build Dynamic Android Apps From Scratch
  • Learn Android User Interface Design

Are there any requirements or prerequisites?

  • Basic android XML layout experience, in general, is helpful but not required. The tutorial covers everything you’ll need to build an Android App Screen
  • Be Willing to Work and Learn

Who this tutorial for:

  • Beginner Android Developers
  • Freelancer or mobile app development company that deals in android development.
  • Curious students who Want to Build their own Android Apps
  • Project Managers who Want to Learn How Android Apps Screen Built

You can download my code from the download now button and also download the APK to understand the activity or output. If you yet need a step by step tutorial to follow the below step.

Step 01 :

Create a new project in Android Studio from the File ⇒ New Project. As it prompts you to select the default activity, select Empty Activity and proceed.

Name your project as per your convenience and click finish.

Download the code and you will get resources file and custom font. you can refer the video for this step here

Step 02 :

Go to the build Gradle and do the needful changes as follows.

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:runner:1.2.0'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
    implementation 'de.hdodenhof:circleimageview:3.0.1'
}

Open colors.xml located under res ⇒ values and add the below color values.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>
    <color name="view_gray">#8d95989a</color>
</resources>

Open styles.xml located under res ⇒ values and add the below values.

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="windowNoTitle">true</item>
        <item name="android:windowFullscreen">true</item>
    </style>

</resources>

Open strings.xml located under res ⇒ values and add the below values.

<resources>
    <string name="app_name">Ecomm Login</string>
    <string name="kendrick">Kendrick</string>
    <string name="already_have_an_account">Already have an account?</string>
</resources>

Step 03 :

Now is the time for making the XML file. For this, Open activity_main.xml and paste the following code.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:background="@drawable/bg"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="200dp"
        android:src="@drawable/applogo"/>

    <customfonts.MyTextView_Roboto_Medium
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="15sp"
        android:gravity="center"
        android:fontFamily="sans-serif-medium"
        android:textStyle="normal"
        android:textColor="#474559"
        android:lineSpacingExtra="31sp"
        android:layout_marginBottom="175dp"
        android:layout_alignParentBottom="true"
        android:text="Please wait..."
        />



</RelativeLayout>

Step 04 :

Now Open MainActivity.java and write the following code.

package com.example.ecommlogin;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;

public class MainActivity extends AppCompatActivity {

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

        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {

                startActivity(new Intent(MainActivity.this,Login.class));
                finish();
            }
        },3000);
    }
}

Step 05 :

Create a new activity from the Jave⇒ New Activity Empty Activity. Name it’s as Login and open its XML file which is activity_login.xml and write the below code.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg">

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">



            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="25sp"
                android:fontFamily="sans-serif-medium"
                android:textStyle="normal"
                android:textColor="#23203f"
                android:layout_marginTop="47dp"
                android:layout_gravity="center"
                android:letterSpacing="-0.01"
                android:lineSpacingExtra="20sp"
                android:text="Sign In"
                />

            <customfonts.MyTextView_Roboto_Regular
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:letterSpacing="0.0265"
                android:textColor="#6e6e73"
                android:layout_gravity="center"
                android:text="Login to continue your account"
                android:textSize="17sp"/>


            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="73dp"
                android:layout_marginRight="29dp"
                android:layout_marginLeft="29dp"
                android:orientation="vertical">

                <de.hdodenhof.circleimageview.CircleImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/login_img"
                    android:layout_gravity="center"/>

                <customfonts.EditText_Roboto_Regular
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#00000000"
                    android:layout_marginTop="28dp"
                    android:textSize="25sp"
                    android:fontFamily="sans-serif"
                    android:textStyle="normal"
                    android:textColor="#23203f"
                    android:text="@string/kendrick"
                    android:hint="First name"
                    />

                <View
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:background="@color/view_gray"
                    android:layout_marginTop="18dp"
                    />

                <customfonts.EditText_Roboto_Regular
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#00000000"
                    android:layout_marginTop="13.3dp"
                    android:hint="Password"
                    android:paddingRight="20dp"
                    android:drawableRight="@drawable/view_password"
                    android:inputType="textPassword"
                    android:textSize="25sp"
                    android:fontFamily="sans-serif-light"
                    android:textStyle="normal"
                    android:textColor="#9391a4"

                    />

                <View
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:background="@color/view_gray"
                    android:layout_marginTop="18dp"
                    />


                <customfonts.MyTextView_Roboto_Regular
                    android:layout_width="match_parent"
                    android:layout_height="53dp"
                    android:layout_marginLeft="33dp"
                    android:layout_marginRight="33dp"
                    android:layout_marginTop="38dp"
                    android:background="@drawable/button_gradient"
                    android:text="Login"
                    android:gravity="center"
                    android:lineSpacingExtra="34sp"
                    android:textColor="#ffffff"
                    android:textSize="22sp"
                    android:paddingTop="10.5dp"
                    android:paddingBottom="10.5dp"/>

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_gravity="center"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

                    <customfonts.MyTextView_Roboto_Regular
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:gravity="center"
                        android:layout_marginBottom="30.5dp"
                        android:layout_marginTop="20.8dp"
                        android:textSize="18sp"
                        android:fontFamily="sans-serif-light"
                        android:textStyle="normal"
                        android:textColor="#9391a4"
                        android:lineSpacingExtra="26sp"
                        android:text="@string/already_have_an_account"/>

                    <customfonts.MyTextView_Roboto_Bold
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:gravity="center"
                        android:layout_marginBottom="30.5dp"
                        android:layout_marginTop="20.8dp"
                        android:textSize="18sp"
                        android:layout_marginLeft="5dp"
                        android:fontFamily="sans-serif-light"
                        android:textStyle="normal"
                        android:textColor="#000000"
                        android:lineSpacingExtra="26sp"
                        android:text="Register"/>

                </LinearLayout>


            </LinearLayout>



        </LinearLayout>

    </androidx.core.widget.NestedScrollView>











</RelativeLayout>

Now run the app and see the output, you will see the nice Splash and Login Screen activity for your next Android Application with Android Source code.

So that’s all for this Tutorial. If you are having any confusion or queries please do comment. Thank You.

Facebook
Twitter
LinkedIn
Reddit
StumbleUpon
Pinterest
WhatsApp

Leave a comment

Your email address will not be published. Required fields are marked *

Related Posts