Wednesday, February 17, 2021

Make a Simple Mobile App With Material Design: Create a Login Screen

Make a Simple Mobile App With Material Design: Create a Login Screen

Material Design is a design system that helps teams build high-quality digital experiences. It brings together style, interaction, and motion to create hierarchy, meaning, and continuity throughout the application.

Material Design comes with material components for Android that are necessary to ensure developers come up with beautiful designs. In this tutorial, you'll get an overview of several of these Android components and build a login page using Material Design.

The login page will contain the following components

  • the app logo
  • username and password text fields
  • a login button
  • a reset password link

Prerequisites

  • basic knowledge of Android development
  • Android Studio (learn more here if you don't have it already)
  • an Android emulator or physical device 

Getting Started

To create a new project in Android Studio, select the Empty Activity, and click Next. Enter a name, pick a location, and select an API level. Click Finish to create the project.

Add Project Dependencies

Navigate to the app module's build.gradle file and add the MDC Android support library as shown below and sync the project.

The Main Activity Layout

We edit the main Activity layout main_activity.xml. in The main activity contains a simple Constraint Layout which acts as a container for the TextView component.

Constraint layout provides a drag-and-drop interface that allows you to position a given widget relative to another one. You can constrain a widget on the horizontal and vertical axis.

AppCompat Theme and Colors

The theme for our application is set to Theme.MaterialComponents.DayNight.DarkActionBar by default. Let's change it to Theme.Appcompact.Light.DarkActionBar. The theme.xml file also defines other colors as shown below.

The color system allows us to quickly change the color scheme of the entire application.

  • colorPrimary and colorSecondary are the colors of your brand. colorSecondary provides more ways to accent select parts of your UI.
  • colorPrimaryVariant  and colorSecondaryVariant are lighter or darker shades of colorPrimary and colorSecondary
  • colorOnPrimary is used to tint elements displayed on top of the primary colors, such as text and icons.
  • colorOnSecondary is used to tint elements displayed on top of the secondary colors such as text and icons)
  • colorBackground is the background color of your app

The Material Design color system is meant to create harmony in apps. Google standards describe how to create a color palette that is intended to enhance the user experience. The diagram below shows an example of a color palette that can be used with Material Design.

Material design color palette

How to Use the Material Design Color Palette

When choosing the colors for you app, it is recommended to limit to three primary hues and one secondary color. The primary color is the color that appears most frequently across your app's screens and components. A secondary color is optional and provides a contrast to your application. You can also use a primary color to provide contrast. The secondary color should be used for specific actions such as:

  • text fields and cursors
  • floating buttons
  • text selection
  • progress bars
  • selection controls, buttons and sliders
  • links

The UI below shows a representation of the correct use of color in Material Design.

material design

Material Design Components

As mentioned earlier in the tutorial, Material Design apps use Material Design components. Some of these include:

  • Android menus and tool bar
  • floating action buttons (FABs), snack bar, and coordinator layout
  • floating labels
  • AppBar
  • collapsing toolbar
  • navigation drawer and menus
  • Android animations
  • recycler view and card view

Lets start by adding the logo using the material design ImageView component. Delete the TextView and add the following to main_activity.xml

Next, add the username and password text fields . We'll use the Material Design text field component, which includes built-in functionality that displays a floating label and error messages.

The android:inputType="textPassword" attribute hides the input text when someone is entering the password.

Don't forget to add the string resources for the text fields in the strings.xml file.

Configure a Vector Asset

Vector assets allow you to configure images with a single vector graphic. Let's add vector assets for the username and password text fields. Go to  drawable > New > Vector asset and choose a person clip art image for the username text field.

vector asset

Repeat the same process and select a lock for the password text field.

Two XML files have now been created in the drawable folder, and you can use the drawable file with the attribute android:drawableStart, as shown below. 

 

The app should now look like this.

material login

Next, add the Login button. We'll use the Material Design component Button component, which comes with a built-in ink ripple effect.

Lastly, add the forgot password text view below the login button.

Round Background

Lets create a round background for the elements. Go to Drawable > New drawable resource and add the folllowing.

Add the background to the text fields and button.

 The final app should look like this:

material login

Conclusion

In this tutorial, you've learned about Material Design fundamentals and how to apply colors in material design to fit your brand. The key to a beautiful application in Material Design lies in bringing different elements together while following the Material Design principles.


No comments:

Post a Comment