Developing the Login UI

Once the project is created, create a new package named ui in the com.example.messenger application source package. This package will hold all the user-interface-related classes and logic of the Android application. Create a login package within ui.  As you may have guessed, this package will hold classes and logic pertaining to the user-login process. Go ahead and move LoginActivity to the login package. Having moved LoginActivity, our first order of business is to create a suitable layout for the login activity.

Locate the activity_login.xml layout resource file and change the following content:

<?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"
tools:context=".ui.login.LoginActivity"
android:orientation="vertical"
android:paddingTop="32dp"
android:paddingBottom="@dimen/default_margin"
android:paddingStart="@dimen/default_padding"
android:paddingEnd="@dimen/default_padding"
android:gravity="center_horizontal">
<EditText
android:id="@+id/et_username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"
android:hint="@string/username"/>
<EditText
android:id="@+id/et_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/default_margin"
android:inputType="textPassword"
android:hint="@string/password"/>
<Button
android:id="@+id/btn_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/default_margin"
android:text="@string/login"/>
<Button
android:id="@+id/btn_sign_up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/default_margin"
android:background="@android:color/transparent"
android:text="@string/sign_up_solicitation"/>
<ProgressBar
android:id="@+id/progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"/>
</LinearLayout>

There are string and dimension resources that we have made use of here that we have not yet created in the appropriate .xml resource files. We must add these resources at this juncture. While we are at it, we will also include resources that we will require later on in the application development phase so as to eliminate the need to jump back and forth between program files and resource files. Open the project's string resource file (strings.xml) and ensure the following resources are added to it:

<resources>
<string name="app_name">Messenger</string>
<string name="username">Username</string>
<string name="password">Password</string>
<string name="login">Login</string>
<string name="sign_up_solicitation">
Don't have an account? Sign up!
</string>
<string name="sign_up">Sign up</string>
<string name="phone_number">Phone number</string>
<string name="action_settings">settings</string>
<string name="hint_enter_a_message">Type a messageā€¦</string>

<!-- Account settings -->
<string name="title_activity_settings">Settings</string>
<string name="pref_header_account">Account</string>
<string name="action_logout">logout</string>
</resources>

Now create a dimensions resource file (dimens.xml) and add the following dimension resources to it:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="default_margin">16dp</dimen>
<dimen name="default_padding">16dp</dimen>
</resources>

Now that the necessary project resources have been added, navigate back to activity_login.xml and toggle the design preview screen to view the layout that has been created:

The layout is simple but functional, which is perfect for this simple messenger application we are building.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.144.17.137