Login Screen using constraint layout in android studio

ronnystudio_ronny studio_loginwithcon
Hello, all RONNYSTUDIO is now making a new update on his website here is the first post using constraint layout. Saving your ample hours of designing and developing the Android UI is our goal, We now present to you Login Screen using constraint layout in android studio.

Hello, all RONNYSTUDIO is now making a new update on his website here is the first post using constraint layout. Saving your ample hours of designing and developing the Android UI is our goal, We now present to you Login Screen using constraint layout in android studio.

What is Android constraint layout?

The Layout Editor uses constraints to determine the position of a UI element within the layout. A constraint represents a connection or alignment to another view, the parent layout, or an invisible guideline. You can create the constraints manually, as we show later, or automatically using the Autoconnect tool.

Watch this video tutorial for step 1 here.

previous post here

Step 01 :

Create a new project in Android Studio from the File ⇒ New Project. As it prompts you to select the default activity, select Empty Activity and proceed.

Name your project as per your convenience and click finish.

Download this res.zip and add them to your project res folder. This file contains a few drawable images and font folder required for this app.

Step 02 :

Go to the build Gradle and do the needful changes as follows.

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.1'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'

}

Open colors.xml located under res ⇒ values and add the below color values.

<resources>
	
	<!-- Project level resources -->
	<color name="color_click_overlay">#555555</color>
	<color name="color_primary_dark">#000000</color>
    <color name="color_primary">#000000</color>
	<color name="color_accent">#000000</color>

    <!-- Resources for Bank2LogInActivity -->
    <color name="bank2_log_in_activity_button_button_background_color">#EFF2F6</color>
</resources>

Open strings.xml located under res ⇒ values and add the below values.

<resources>
	
	<!-- Project level resources -->
	<string name="app_name">Sketch UX Kit</string>
	
	<!-- Resources for Bank2LogInActivity -->
	<string name="don_t_have_an_account_sign_up">Don't have an account? Sign Up</string>
	<string name="welcom_back_log_in_to_continue_with_ronnystudio_ui_for_android">Welcom back. Log in to continue with ronnystudio UI for android.</string>
</resources>

Open themes.xml located under res ⇒ values and add the below values.

<resources>
	
	<!-- Project level resources -->
	<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
		<item name="colorPrimary">@color/color_primary</item>
		<item name="colorPrimaryDark">@color/color_primary_dark</item>
		<item name="colorAccent">@color/color_accent</item>
		<item name="android:windowNoTitle">true</item>
		<item name="android:windowFullscreen">true</item>

	</style>
	

</resources>

Step 03 :

Now is the time for making the XML file. For this, Open activity_main.xml and paste the following code.

<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"
	android:background="#FFFFFF">

	<androidx.constraintlayout.widget.ConstraintLayout
		android:layout_width="match_parent"
		android:layout_height="match_parent"
		android:background="#FFFFFF">

		<ScrollView
			android:layout_width="0dp"
			android:layout_height="0dp"
			android:layout_marginTop="60dp"
			android:scrollbars="none"
			app:layout_constraintBottom_toBottomOf="parent"
			app:layout_constraintHorizontal_weight="1"
			app:layout_constraintLeft_toLeftOf="parent"
			app:layout_constraintRight_toRightOf="parent"
			app:layout_constraintTop_toBottomOf="@+id/header_constraint_layout"
			app:layout_constraintVertical_weight="0.79"
			tools:layout_editor_absoluteX="0dp"
			tools:layout_editor_absoluteY="170dp">

			<androidx.constraintlayout.widget.ConstraintLayout
				android:layout_width="match_parent"
				android:layout_height="wrap_content">



				<Button
					android:id="@+id/button_two_button"
					android:layout_width="295dp"
					android:layout_height="46dp"
					android:layout_marginTop="40dp"
					android:background="@drawable/bank2_log_in_activity_button_two_button_ripple"
					android:fontFamily="@font/font_opensans_semibold"
					android:gravity="center"
					android:text="Login"
					android:textColor="#FFFFFF"
					android:textSize="13sp"
					app:layout_constraintLeft_toLeftOf="parent"
					app:layout_constraintRight_toRightOf="parent"
					app:layout_constraintTop_toBottomOf="@+id/inputs_constraint_layout"
					tools:layout_editor_absoluteX="40dp"
					tools:layout_editor_absoluteY="336dp"/>

				<Button
					android:id="@+id/don_thave_an_accoun_button"
					android:layout_width="193dp"
					android:layout_height="20dp"
					android:layout_marginTop="58dp"
					android:background="?attr/selectableItemBackground"
					android:gravity="center"
					android:text="@string/don_t_have_an_account_sign_up"
					android:textColor="#454C66"
					android:textSize="13sp"
					app:layout_constraintLeft_toLeftOf="parent"
					app:layout_constraintRight_toRightOf="parent"
					app:layout_constraintTop_toBottomOf="@+id/button_two_button"
					tools:layout_editor_absoluteX="91dp"
					tools:layout_editor_absoluteY="440dp"/>

				<TextView
					android:id="@+id/welcom_back_log_in_text_view"
					android:layout_width="295dp"
					android:layout_height="wrap_content"
					android:layout_marginTop="-4dp"
					android:fontFamily="@font/font_opensans_light"
					android:gravity="start"
					android:lineSpacingMultiplier="1.5"
					android:text="@string/welcom_back_log_in_to_continue_with_ronnystudio_ui_for_android"
					android:textColor="#19224C"
					android:textSize="20sp"
					app:layout_constraintLeft_toLeftOf="parent"
					app:layout_constraintRight_toRightOf="parent"
					app:layout_constraintTop_toTopOf="parent"
					tools:layout_editor_absoluteX="40dp"
					tools:layout_editor_absoluteY="-5dp"/>

				<androidx.constraintlayout.widget.ConstraintLayout
					android:id="@+id/inputs_constraint_layout"
					android:layout_width="295dp"
					android:layout_height="173dp"
					android:layout_marginTop="68dp"
					app:layout_constraintLeft_toLeftOf="parent"
					app:layout_constraintRight_toRightOf="parent"
					app:layout_constraintTop_toBottomOf="@+id/welcom_back_log_in_text_view"
					tools:layout_editor_absoluteX="40dp"
					tools:layout_editor_absoluteY="123dp">

					<androidx.constraintlayout.widget.ConstraintLayout
						android:layout_width="0dp"
						android:layout_height="77dp"
						app:layout_constraintHorizontal_weight="1"
						app:layout_constraintLeft_toLeftOf="parent"
						app:layout_constraintRight_toRightOf="parent"
						app:layout_constraintTop_toTopOf="parent"
						tools:layout_editor_absoluteX="0dp"
						tools:layout_editor_absoluteY="0dp">

						<TextView
							android:id="@+id/email_address_text_view"
							android:layout_width="wrap_content"
							android:layout_height="wrap_content"
							android:layout_marginTop="-1dp"
							android:alpha="0.64"
							android:gravity="start"
							android:lineSpacingMultiplier="1.25"
							android:text="Email Address"
							android:textColor="#454C66"
							android:textSize="13sp"
							app:layout_constraintLeft_toLeftOf="parent"
							app:layout_constraintTop_toTopOf="parent"
							tools:layout_editor_absoluteX="0dp"
							tools:layout_editor_absoluteY="-2dp"/>

						<View
							android:layout_width="0dp"
							android:layout_height="50dp"
							android:layout_marginTop="9dp"
							android:background="#F5F6F6"
							app:layout_constraintHorizontal_weight="1"
							app:layout_constraintLeft_toLeftOf="parent"
							app:layout_constraintRight_toRightOf="parent"
							app:layout_constraintTop_toBottomOf="@+id/email_address_text_view"
							tools:layout_editor_absoluteX="0dp"
							tools:layout_editor_absoluteY="27dp"/>

						<EditText
							android:layout_width="260dp"
							android:layout_height="18dp"
							android:layout_marginStart="20dp"
							android:layout_marginTop="23dp"
							android:background="#00000000"
							android:gravity="start|center_vertical"
							android:hint="lori.johnson@gmail.com"
							android:inputType="textEmailAddress"
							android:maxLines="1"
							android:textColor="#19224C"
							android:textColorHint="#D0D1D5"
							android:textSize="15sp"
							app:layout_constraintLeft_toLeftOf="parent"
							app:layout_constraintTop_toBottomOf="@+id/email_address_text_view"
							tools:layout_editor_absoluteX="20dp"
							tools:layout_editor_absoluteY="41dp"
							android:layout_marginLeft="20dp" />
					</androidx.constraintlayout.widget.ConstraintLayout>

					<androidx.constraintlayout.widget.ConstraintLayout
						android:layout_width="0dp"
						android:layout_height="77dp"
						app:layout_constraintBottom_toBottomOf="parent"
						app:layout_constraintHorizontal_weight="1"
						app:layout_constraintLeft_toLeftOf="parent"
						app:layout_constraintRight_toRightOf="parent"
						tools:layout_editor_absoluteX="0dp"
						tools:layout_editor_absoluteY="96dp">

						<TextView
							android:id="@+id/password_text_view"
							android:layout_width="wrap_content"
							android:layout_height="wrap_content"
							android:layout_marginTop="-1dp"
							android:alpha="0.64"
							android:gravity="start"
							android:lineSpacingMultiplier="1.25"
							android:text="Password"
							android:textColor="#454C66"
							android:textSize="13sp"
							app:layout_constraintLeft_toLeftOf="parent"
							app:layout_constraintTop_toTopOf="parent"
							tools:layout_editor_absoluteX="0dp"
							tools:layout_editor_absoluteY="-2dp"/>

						<View
							android:layout_width="0dp"
							android:layout_height="50dp"
							android:layout_marginTop="9dp"
							android:background="#F5F6F6"
							app:layout_constraintHorizontal_weight="1"
							app:layout_constraintLeft_toLeftOf="parent"
							app:layout_constraintRight_toRightOf="parent"
							app:layout_constraintTop_toBottomOf="@+id/password_text_view"
							tools:layout_editor_absoluteX="0dp"
							tools:layout_editor_absoluteY="27dp"/>

						<EditText
							android:layout_width="246dp"
							android:layout_height="19dp"
							android:layout_marginStart="19dp"
							android:layout_marginTop="23dp"
							android:background="#00000000"
							android:gravity="start|center_vertical"
							android:inputType="text"
							android:maxLines="1"
							android:textColor="#000000"
							android:textSize="12sp"
							app:layout_constraintLeft_toLeftOf="parent"
							app:layout_constraintTop_toBottomOf="@+id/password_text_view"
							tools:layout_editor_absoluteX="19dp"
							tools:layout_editor_absoluteY="48dp"
							android:layout_marginLeft="19dp" />
					</androidx.constraintlayout.widget.ConstraintLayout>
				</androidx.constraintlayout.widget.ConstraintLayout>
			</androidx.constraintlayout.widget.ConstraintLayout>
		</ScrollView>

		<androidx.constraintlayout.widget.ConstraintLayout
			android:id="@+id/header_constraint_layout"
			android:layout_width="0dp"
			android:layout_height="110dp"
			android:background="#19224C"
			app:layout_constraintHorizontal_weight="1"
			app:layout_constraintLeft_toLeftOf="parent"
			app:layout_constraintRight_toRightOf="parent"
			app:layout_constraintTop_toTopOf="parent"
			tools:layout_editor_absoluteX="0dp"
			tools:layout_editor_absoluteY="0dp">

			<TextView
				android:id="@+id/login_text_view"
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:layout_marginStart="40dp"
				android:layout_marginTop="59dp"
				android:gravity="start"
				android:text="Login"
				android:textColor="#FFFFFF"
				android:textSize="20sp"
				app:layout_constraintLeft_toLeftOf="parent"
				app:layout_constraintTop_toTopOf="parent"
				tools:layout_editor_absoluteX="40dp"
				tools:layout_editor_absoluteY="59dp"
				android:layout_marginLeft="40dp" />

			<TextView
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:layout_marginStart="40dp"
				android:layout_marginTop="59dp"
				android:alpha="0.3"
				android:gravity="start"
				android:text="Sign Up"
				android:textColor="#FFFFFF"
				android:textSize="20sp"
				app:layout_constraintLeft_toRightOf="@+id/login_text_view"
				app:layout_constraintTop_toTopOf="parent"
				tools:layout_editor_absoluteX="131dp"
				tools:layout_editor_absoluteY="59dp"
				android:layout_marginLeft="40dp" />

			<View
				android:layout_width="20dp"
				android:layout_height="3dp"
				android:layout_marginStart="40dp"
				android:background="#DFE4EA"
				app:layout_constraintBottom_toBottomOf="parent"
				app:layout_constraintLeft_toLeftOf="parent"
				tools:layout_editor_absoluteX="40dp"
				tools:layout_editor_absoluteY="107dp"
				android:layout_marginLeft="40dp" />
		</androidx.constraintlayout.widget.ConstraintLayout>


	</androidx.constraintlayout.widget.ConstraintLayout>

	<Button
		android:id="@+id/button_button"
		android:layout_width="match_parent"
		android:layout_height="50dp"
		android:layout_alignParentBottom="true"
		android:background="@drawable/bank2_log_in_activity_button_button_ripple"
		android:fontFamily="@font/font_opensans_semibold"
		android:gravity="center"
		android:text="Login with Facebook"
		android:textColor="#454C66"
		android:textSize="13sp"
		app:layout_constraintHorizontal_weight="1"
		app:layout_constraintLeft_toLeftOf="parent"
		app:layout_constraintRight_toRightOf="parent"
		app:layout_constraintTop_toTopOf="parent"
		tools:layout_editor_absoluteX="0dp"
		tools:layout_editor_absoluteY="592dp"/>

</RelativeLayout>

Step 04 :

Now is the time for making the changes in mainactivunty.java file. For this, Open MainActivity.class and paste the following code.

package com.ronnystudio.loginwithcon;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;


public class MainActivity extends AppCompatActivity  {

    private Button buttonButton;
    private Button buttonTwoButton;
    private Button donThaveAnAccounButton;
    private TextView welcomBackLogInTextView;
    private TextView emailAddressTextView;
    private TextView passwordTextView;



    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        init();
    }

    private void init() {

        // Configure Button component
        buttonButton = this.findViewById(R.id.button_button);
        buttonButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                MainActivity.this.onButtonTwoPressed();
            }
        });

        // Configure Button component
        buttonTwoButton = this.findViewById(R.id.button_two_button);
        buttonTwoButton.setOnClickListener((view) -> {
            this.onButtonPressed();
        });

        // Configure Don't have an accoun component
        donThaveAnAccounButton = this.findViewById(R.id.don_thave_an_accoun_button);
        donThaveAnAccounButton.setOnClickListener((view) -> {
            this.onDonTHaveAnAccounPressed();
        });

        // Configure Welcom back. Log in component
        welcomBackLogInTextView = this.findViewById(R.id.welcom_back_log_in_text_view);

        // Configure Email Address component
        emailAddressTextView = this.findViewById(R.id.email_address_text_view);

        // Configure Password component
        passwordTextView = this.findViewById(R.id.password_text_view);
    }

    public void onButtonTwoPressed() {

    }

    public void onButtonPressed() {

    }

    public void onDonTHaveAnAccounPressed() {

    }
}

Now run the app and see the output, you will see the nice Login Screen using constraint layout in android studio for your next android project.

So that’s all for this Login Screen using constraint layout in android studio Tutorial. If you are having any confusion or queries please do comment. Thank You.

Facebook
Twitter
LinkedIn
Reddit
StumbleUpon
Pinterest
WhatsApp

Leave a comment

Your email address will not be published. Required fields are marked *

Related Posts