NOTE: You must use Android Studio Version 4.2 Beta 2 or above.

Before we create the Latest Login and Signup UI Design, first we have to set up a new project for this. So first we create a project in Android Studio Software. All steps are given below with an image for your better understanding purpose.

STEP: 01

You can click on “Create New Project” then jump next page.

STEP: 02

Now, you must choose “Empty Activity” and then click the Next button and then you can jump next screen/page.

STEP: 03

Now, you can write “Application Name“, “Package Name“, “Save Location“, “Language – JAVA“, “Minimum SDKAPI 21“. After customization of all things then you can click the Finish button. And then you can wait a few minutes while your project is Sync successfully.

STEP: 04

Double click on “Gradle Scripts” folder.

STEP: 05

Add material design dependency under “build.gradle(Module: UI_DESIGN.app)” which will help to design our signup and Login activity using material dependency. And you can update dependency as per time period means we know that dependency always being updated to modification for developers.

Material Design Dependency Below.

implementation 'com.google.android.material:material:1.2.1'

After implemented material design dependency sync your project with the internet connection required.

STEP: 06

Now, you can set colors for this application means if you want to different colors in your app then you can customize yourself. We will show for demo only.

Apps color code Below.

<color name="purple_200">#FFBB86FC</color>
<color name="purple_500">#024265</color>
<color name="purple_700">#012F49</color>
<color name="light_purple_700">#435863</color>
<color name="teal_200">#FF03DAC5</color>
<color name="teal_700">#FF018786</color>
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>

STEP: 06

You can modify the app theme without modification you can not create a UI DESIGN so simply you can replace NoActionBar in place of DarkActionBar in the theme.xml layout.

<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.UIDESIGN" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/purple_500</item>
<item name="colorPrimaryVariant">@color/purple_700</item>
<item name="colorOnPrimary">@color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/teal_200</item>
<item name="colorSecondaryVariant">@color/teal_700</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
</resources>

Now, you can also replace NoActionBar in place of DarkActionBar in the theme.xml (night) layout.

<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.UIDESIGN" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/purple_200</item>
<item name="colorPrimaryVariant">@color/purple_700</item>
<item name="colorOnPrimary">@color/black</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/teal_200</item>
<item name="colorSecondaryVariant">@color/teal_200</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
</resources>

Now, open activiy_main.xml layout, and under this layout create your design yourself. So first of all we create a View Layout.

NOTE: All code design under Constraint Layout DO NOT move another Layout.

<View
android:id="@+id/view"
android:layout_width="match_parent"
android:layout_height="300dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintWidth_percent=".27" />

Now we create a Image View.

<ImageView
android:id="@+id/imageView"
android:layout_width="70dp"
android:layout_height="70dp"
android:contentDescription="@string/app_name"
android:src="@mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="@+id/view"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/view"
app:layout_constraintVertical_bias=".3" />

And We create a Text View Layout.

<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="UI DESIGN"
android:textColor="@color/white"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="@+id/view"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/imageView"
app:layout_constraintVertical_bias=".2" />

Now, Next Part will be Available CLICK HERE.


0 Comments

Leave a Reply

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