Home
Android

Exploro - Beautiful Sign In Screen Android

In this post, we are going to actually code the Exploro sign-in screen which I had designed some days ago. You can see it on the ideas page of the website from the navigation panel. The design will look something like in the images below.

Demo

Table of Contents

What you need

Before starting to code you will need some drawable resources for the UI. Drawables contain the necessary images, extra layouts, custom background, and styles needed by our design so just download it from below.

drawables.zip 165kb

This drawable folder contains some images and XML files so just copy them to your project's drawable folder.

Extra resources

The code which I am going to provide here will lack the background of the app, So if you want to have the same background with the illustrations just like in the images above, download the SVG below.

background.svg 2mb

Just replace the following code in activity_main.xml.

<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:layout_height="match_parent"
    tools:context=".MainActivity"
    android:background="@drawable/gradient">
    
    <!-- Replace above code with-->

<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:layout_height="match_parent"
    tools:context=".MainActivity"
    android:background="@drawable/background">
Now your background will look like the one in the above images.

Now Let's start coding the UI.

Read also :

The Code

This is a very simple UI and I already provided all the necessary XML files above to download so you don't have to copy the full code here just you have to get code for the activity_main.xml file. So copy the code below and put it into the activity's layout in which you want the UI to be added.

activity_main.xml

<?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:layout_height="match_parent"
    tools:context=".MainActivity"
    android:background="@drawable/gradient">
    

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/logo"
        android:layout_centerHorizontal="true"
        android:layout_above="@id/rlayout"
        android:layout_marginBottom="20dp"/>

    <RelativeLayout
        android:layout_width="359dp"
        android:layout_height="451dp"
        android:elevation="24dp"
        android:id="@+id/rlayout"
        android:layout_centerInParent="true">

        <View
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/rect"
            android:alpha="0.4980392"/>


        <TextView
            android:id="@+id/go"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:layout_marginStart="110dp"
            android:layout_marginTop="10dp"
            android:fontFamily="@font/showg"
            android:text="Go"
            android:textColor="@color/black"
            android:textSize="48sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="..."
            android:layout_centerHorizontal="true"
            android:layout_toEndOf="@id/go"
            android:layout_alignBaseline="@id/go"
            android:textSize="18sp"
            android:fontFamily="@font/showg"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/explore"
            android:layout_below="@+id/go"
            android:fontFamily="@font/showg"
            android:layout_centerHorizontal="true"
            android:text="Explore..."
            android:textColor="@color/black"
            android:textSize="18sp"/>

        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/user"
            android:layout_marginTop="20dp"
            android:background="@drawable/user"
            android:layout_below="@id/explore"
            android:hint="Username"
            android:drawablePadding="5dp"
            android:layout_centerHorizontal="true"
            android:gravity="center"/>

        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/pass"
            android:background="@drawable/pass"
            android:layout_below="@id/user"
            android:layout_marginTop="15dp"
            android:hint="Password"
            android:layout_centerHorizontal="true"
            android:gravity="center"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/takeoff"
            android:layout_below="@id/pass"
            android:layout_marginTop="15dp"
            android:layout_centerHorizontal="true"
            android:text="Take off!"
            android:fontFamily="@font/showg"
            android:textSize="18sp"
            android:background="@drawable/takeoff"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/opttext"
            android:layout_below="@id/takeoff"
            android:layout_centerHorizontal="true"
            android:text="or Sign in with"
            android:layout_marginTop="5dp"
            android:textSize="18sp"
            android:textColor="@color/black"
            android:fontFamily="@font/harlowsoliditalic"/>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:id="@+id/signopt"
            android:layout_below="@+id/opttext"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp">

            <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:src="@drawable/google"
                android:background="@android:color/transparent"/>

            <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:src="@drawable/fb"
                android:background="@android:color/transparent"/>

            <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:src="@drawable/apple"
                android:background="@android:color/transparent"
                app:tint="@color/black" />

            <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:src="@drawable/ms"
                android:background="@android:color/transparent"/>

        </LinearLayout>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/newacc"
            android:layout_below="@id/signopt"
            android:layout_centerHorizontal="true"
            android:text="or Create New Account"
            android:layout_marginTop="10dp"
            android:textSize="18sp"
            android:textColor="@color/black"
            android:fontFamily="@font/harlowsoliditalic"/>

    </RelativeLayout>

</RelativeLayout>

Now if you want to get the UI screen in fullscreen view just go to your styles.xml or themes.xml file and change your app theme to Theme.AppCompat.Light.NoActionBar

Now your beautiful UI is ready. You can use it anywhere freely and modify it as per your choice.

Thanks for visiting. Read my previous UI designing post Elegant login UI for Android.

If you want to support me just click on the coffee icon at the bottom-right corner and buy me a coffee.

Tips

  • You can use this layout for any activity you want.
  • The provided drawable resources can be used for other UI's.
  • You can define an onclick method for Takeoff! (Sign in), Create a new account and the sign-in options with your own choice.

Download full code


Exploro.zip 382kb
Hello! Myself Tejas Mahajan. I am an Android developer, Programmer, UI/UX designer, Student and Navodayan.