Firebase Authentication - 2 - Layout

Index

Welcome to the second part of the Firebase Authentication series. In the previous part we initialized firebase to our app. In this part we will design the apps look, so we have something to work with in the following parts. I showed you a sneak peek of what the final app will look like in the previous part, that's pretty much what we will build here. I'm not going to go too much into depth here since this tutorial is about firebase, not xml. You probably have a good understanding of what's going on here anyway if you're ready to implement firebase in your applications.

Let's begin with activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".MainActivity">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/toolbar"
        android:padding="10dp">

        <LinearLayout
            android:id="@+id/information_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:layout_marginTop="5dp"
            android:background="#ffffff"
            android:elevation="2dp"
            android:orientation="vertical"
            android:padding="10dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Account information"
                android:textStyle="bold"
                android:textSize="20sp" />

            <ImageView
                android:id="@+id/image"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:layout_marginTop="20dp"
                android:layout_marginBottom="15dp"
                android:background="#cccccc" />

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="15dp"
                android:layout_marginBottom="5dp"
                android:orientation="horizontal">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Userid: "
                    android:textSize="16sp" />

                <TextView
                    android:id="@+id/uid_txt"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="abc"
                    android:textSize="16sp" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="5dp"
                android:orientation="horizontal">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Display Name: "
                    android:textSize="16sp" />

                <TextView
                    android:id="@+id/edittext"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="John Doe"
                    android:textSize="16sp" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="5dp"
                android:orientation="horizontal">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Email: "
                    android:textSize="16sp" />

                <TextView
                    android:id="@+id/email_txt"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="[email protected]"
                    android:textSize="16sp" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="5dp"
                android:orientation="horizontal">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Verified: "
                    android:textSize="16sp" />

                <TextView
                    android:id="@+id/verified_txt"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="No"
                    android:textSize="16sp" />
            </LinearLayout>

            <TextView
                android:id="@+id/send_verification_txt"
                android:layout_marginTop="20dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:clickable="true"
                android:focusable="true"
                android:textColor="#2c8bff"
                android:text="Click here to resend verification email"
                android:textSize="16sp" />
        </LinearLayout>
    </RelativeLayout>
</RelativeLayout>

Here we got an ImageView with the id image that will display the logged in users profile picture. The users id is shown just under the profile picture, followed by the users display name, email and verification status. At a bottom, a link is shown where the user will be able to click to resend a verification email. The toolbar at the top will have a drop down menu with options to change all of the information shown in this activity, except for the user id.

To create the layout for the drop down menu, right click on the res folder in the directory tree, and click on new -> Android Resource Directory. Choose Resource type: menu, and hit OK. Right click on the menu folder that popped up in the directory tree under res and create a new Menu resource file, name it main. and fill it with this code:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/change_profile_picture"
        android:title="Change Profile Picture" />

    <item
        android:id="@+id/change_display_name"
        android:title="Change Display Name" />

    <item
        android:id="@+id/change_email"
        android:title="Change Email" />

    <item
        android:id="@+id/change_password"
        android:title="Change Password" />

    <item
        android:id="@+id/delete_account"
        android:title="Delete Account" />

    <item
        android:id="@+id/sign_out"
        android:title="Sign out" />
</menu>

Those are the items that will show up when the menu button is clicked in the toolbar.

The login, register and welcome screen will be handled as fragments. Those fragments will need a base activity with a container, let's call it activity_auth.xml.

activity_auth.xml:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

The login and register fragment are pretty similar, here's the code for them.

fragment_login.xml:

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

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp"
        android:text="Authenticated Goose"
        android:textSize="28sp" />

    <ImageView
        android:id="@+id/image"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_below="@id/title"
        android:layout_centerHorizontal="true"
        android:layout_margin="20dp"
        android:src="@drawable/goose" />

    <EditText
        android:id="@+id/email_txt"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/image"
        android:inputType="textEmailAddress"
        android:layout_marginStart="20dp"
        android:layout_marginEnd="20dp"
        android:hint="Email.." />

    <EditText
        android:id="@+id/password_txt"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/email_txt"
        android:layout_marginStart="20dp"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="20dp"
        android:inputType="textPassword"
        android:hint="Password.." />

    <Button
        android:id="@+id/login_btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/password_txt"
        android:layout_marginStart="20dp"
        android:layout_marginTop="10dp"
        android:text="login"
        android:textColor="#ffffff"
        android:background="#2c8bff"
        android:layout_marginEnd="20dp" />

    <TextView
        android:id="@+id/forgot_password_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/login_btn"
        android:layout_marginTop="10dp"
        android:text="Forgot your password? Click here to reset it"
        android:clickable="true"
        android:focusable="true"
        android:layout_centerHorizontal="true"/>

    <TextView
        android:id="@+id/not_registered_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/forgot_password_txt"
        android:layout_marginTop="10dp"
        android:text="Not registered? Click here to register"
        android:clickable="true"
        android:focusable="true"
        android:layout_centerHorizontal="true"/>

</RelativeLayout>

fragment_register.xml:

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

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp"
        android:text="Authenticated Goose"
        android:textSize="28sp" />

    <ImageView
        android:id="@+id/image"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_below="@id/title"
        android:layout_centerHorizontal="true"
        android:layout_margin="20dp"
        android:src="@drawable/goose" />

    <EditText
        android:id="@+id/display_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/image"
        android:inputType="textCapWords"
        android:layout_marginStart="20dp"
        android:layout_marginEnd="20dp"
        android:hint="Display name.." />

    <EditText
        android:id="@+id/email"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/display_name"
        android:inputType="textEmailAddress"
        android:layout_marginStart="20dp"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="20dp"
        android:hint="Email.." />

    <EditText
        android:id="@+id/password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/email"
        android:layout_marginStart="20dp"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="20dp"
        android:inputType="textPassword"
        android:hint="Password.." />

    <Button
        android:id="@+id/register_btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/password"
        android:layout_marginStart="20dp"
        android:layout_marginTop="10dp"
        android:text="register"
        android:textColor="#ffffff"
        android:background="#2c8bff"
        android:layout_marginEnd="20dp" />

    <TextView
        android:id="@+id/already_registered_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/register_btn"
        android:layout_marginTop="10dp"
        android:text="Already registered? Click here to login"
        android:clickable="true"
        android:focusable="true"
        android:layout_centerHorizontal="true"/>

</RelativeLayout>

Make sure you insert an image in named goose in the drawable folder if you're using the code above, otherwise you will get an error.

Lastly, the welcome fragment. This fragment will only be showed to new users the first time they log in.

fragment_welcome.xml:

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

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/image"
        android:layout_centerInParent="true"
        android:layout_centerVertical="true"
        android:layout_marginBottom="45dp"
        android:orientation="vertical">

        <TextView
            android:id="@+id/welcome_txt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:text="Welcome"
            android:textSize="36sp" />

        <TextView
            android:id="@+id/display_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="10dp"
            android:text="John Doe"
            android:textSize="26sp" />
    </LinearLayout>

    <ImageView
        android:id="@+id/image"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerInParent="true"
        android:layout_margin="20dp"
        android:clickable="true"
        android:focusable="true"
        android:src="@drawable/goose" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/image"
        android:layout_centerHorizontal="true"
        android:text="Click on the image to choose a profile picture"
        android:layout_marginStart="60dp"
        android:layout_marginEnd="60dp"
        android:gravity="center_horizontal"
        android:textSize="18sp"/>

    <Button
        android:id="@+id/skip_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ff2c2c"
        android:textColor="#ffffff"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_margin="20dp"
        android:text="skip"/>

</RelativeLayout>

Also, if you want the same color theme, open up res/values/colors.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#eeeeee</color>
    <color name="colorPrimaryDark">#888888</color>
    <color name="colorAccent">#FFAF48</color>
</resources>

And that's it for this part. We still have some xml files to write for the popup dialogs to come, but we will create them when they become relevant. There's not much more to say about the layout, but it's fundamental to create it. In the next part I will show you how to register people and let them log in with email. See you there!

Firebase Authentication - 2 - Layout

Index

Articles with similar tags