Creating a simple Login UI in Android
In this tutorial, you will learn how to create a simple Login UI in Android. This is my first blog post on Android development and hence suggestions and feedback are always welcomed.
Step: 1
In order to user the new material design by Google, we need to add the material dependency to the app level build.gradle file.
implementation ‘com.google.android.material:material:1.0.0’
Step: 2
Create a new file name LoginActivity as shown below.
Now, open the activity_main.xml file from res => layout => activity_main.xml
Now, we will need two EditTexts and one Button to create the Login UI. Click on the Text tab and add the below code:
<com.google.android.material.button.MaterialButton
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:text=”Login” />There will be an error in the MaterialButton as we haven’t added the constraints to it. Update your material button as shown below to add constraints to the button.
<com.google.android.material.button.MaterialButton
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_marginStart=”8dp”
android:layout_marginEnd=”8dp”
android:layout_marginBottom=”8dp”
android:text=”Login”
app:layout_constraintBottom_toBottomOf=”parent”
app:layout_constraintEnd_toEndOf=”parent”
app:layout_constraintStart_toStartOf=”parent” />layout_width : layout_width sets the width of view and match_parent sets the width of the view to cover the entire width of the screen.
layout_height : layout_height sets the height of view and wrap_content covers the exact area of text what we give the name to Button.
layout_marginStart : marginStart means it starts from left of the view and we have given value of 8dp so it will put space of 8dp to the left of the view.
layout_marginEnd : This will add margin at the end or right side of the view.
layout_marginBottom : It adds margin to the bottom of the view.
Now, lets make the LoginActivity as our launcher activity as shown below so that it will be the first screen when we launch our app.
<activity android:name=”.LoginActivity”>
<intent-filter>
<action android:name=”android.intent.action.MAIN” />
<category android:name=”android.intent.category.LAUNCHER” />
</intent-filter>
</activity> <activity android:name=”.MainActivity”/>
</application>
After this change if you build the app and you get the below error
Error :inflating class com.google.android.material.button.MaterialButton To solve this problem, go and open values folder and then open styles.xml and then change the value of parent as shown below.
parent=”Theme.MaterialComponents.Light.DarkActionBar”
Run the project and you can see that button is at the bottom of the screen
Now, lets add EditText and set its constraints as shown below.
<com.google.android.material.textfield.TextInputLayout android:id=”@+id/textInputLayout”
style=”@style/Widget.MaterialComponents.TextInputLayout.OutlinedBo”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_marginStart=”8dp”
android:layout_marginTop=”16dp”
android:layout_marginEnd=”8dp”
android:hint=”Full Name” app:layout_constraintEnd_toEndOf=”parent”
app:layout_constraintStart_toStartOf=”parent”
app:layout_constraintTop_toTopOf=”parent”><com.google.android.material.textfield.TextInputEditText
android:layout_width=”match_parent”
android:id=”@+id/editTextFullName”
android:layout_height=”wrap_content” />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
style=”@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_marginStart=”8dp”
android:layout_marginTop=”8dp”
android:layout_marginEnd=”8dp”
android:hint=”User Name” app:layout_constraintEnd_toEndOf=”parent”
app:layout_constraintStart_toStartOf=”parent”
app:layout_constraintTop_toBottomOf=”@+id/textInputLayout”><com.google.android.material.textfield.TextInputEditText
android:id=”@+id/editTextUserName”
android:layout_width=”match_parent”
android:layout_height=”wrap_content” />
</com.google.android.material.textfield.TextInputLayout>
style : In the above code I have used style which is provided by Google’s material theme and its gives the EditTexts outlined rectangle look.
Build and run the app and you will see the EditText added to the screen.
That’s it for this tutorial. In the next tutorial, we will learn about Intent and how to use it to pass data between activities.
Thank You
Follow me on Youtube https://www.youtube.com/@BhavyaVarmoraVlogs
📝 Read this story later in Journal.
👩💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.
