Android super nice dynamic login interface (with detailed code)

Mobile 2023-06-24 19:11:46 views: null

First, demonstrate the dynamic effect

QQ video 20220819164103

From the video effect, it is quite nice to see this dynamic login interface. Let’s start to introduce how to make this dynamic login interface.

1. First write the static page

activity_mian.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout
    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"
    app:layoutDescription="@xml/motion_scene_splash"
    tools:context=".MainActivity"
    tools:ignore="MissingConstraints">

    <ImageView
        android:id="@+id/imgView_logo"
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:layout_marginTop="80dp"
        android:scaleType="centerInside"
        android:src="@drawable/icon"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/imgView_logo_rays"
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:layout_marginTop="80dp"
        android:rotation="0"
        android:scaleType="centerInside"
        android:src="@drawable/icon2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/imgView_cloudLeft"
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:layout_marginTop="16dp"
        android:scaleType="centerInside"
        android:src="@drawable/cloud"
        app:layout_constraintTop_toTopOf="parent"
        app:tint="@color/lightGrey" />

    <ImageView
        android:id="@+id/imgView_cloudRight"
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:layout_marginTop="100dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:scaleType="centerInside"
        android:src="@drawable/cloud"
        app:tint="@color/lightGrey"
         />

    <LinearLayout

        android:id="@+id/linlay_inputs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="30dp"
        android:layout_marginLeft="30dp"
        android:layout_marginEnd="30dp"
        android:layout_marginRight="30dp"
        android:gravity="center"
        android:layout_marginTop="10dp"
        android:orientation="vertical"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imgView_cloudRight">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="sans-serif-medium"
            android:text="Welcome Back"
            android:textColor="@color/textHeadline"
            android:textSize="20sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="sans-serif"
            android:text="Sign in to continue"
            android:textColor="@color/textDescription"
            android:textSize="14sp" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp"
            android:background="@drawable/edittext_bg"
            android:drawableStart="@drawable/custom_email_icon"
            android:drawablePadding="16dp"
            android:hint="Email"
            android:inputType="textEmailAddress"
            android:padding="16dp"
            android:textSize="14sp" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:background="@drawable/edittext_bg"
            android:drawableStart="@drawable/custom_lock_icon"
            android:drawableEnd="@drawable/ic_baseline_visibility_24"
            android:drawableRight="@drawable/ic_baseline_visibility_24"
            android:drawablePadding="16dp"
            android:hint="Password"
            android:inputType="textPassword"
            android:padding="16dp"
            android:textSize="14sp" />

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp"
            android:background="@drawable/button_bg"
            android:text="Login"
            android:textColor="@color/white" />

    </LinearLayout>

    <TextView
        android:id="@+id/tv_forgotPassword"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="30dp"
        android:layout_marginRight="30dp"
        android:text="Forgot Password?"
        android:textColor="@color/textDescription"
        android:textSize="13sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/linlay_inputs" />


    <TextView
        android:id="@+id/tv_register"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Don't have an account?Register Here"
        android:textColor="@color/textHeadline"
        android:textSize="13sp"
        android:gravity="center"
        android:layout_marginBottom="30dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />

</androidx.constraintlayout.motion.widget.MotionLayout>

Here is a point worth mentioning. We use the MotionLayout layout to achieve animation effects. This layout is not very common. It is actually a subclass of ConstraintLayout, so it is a layout type, but it can add animation effects to layout properties. , is another new option for developers to achieve animation effects.

The static effects currently implemented are as follows:

 Next, dynamic effects will be realized through resource files

2. Realize dynamic effects

1. Create a new xml file resource directory under the res directory

 2. Create a new xml resource file (motion_scene_splash.xml) in the xml directory

<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto">

    <Transition
        motion:autoTransition="animateToEnd"
        motion:constraintSetEnd="@layout/activity_login"
        motion:constraintSetStart="@layout/activity_splash"
        motion:duration="5000">

        <KeyFrameSet>

            <KeyPosition
                motion:framePosition="65"
                motion:keyPositionType="deltaRelative"
                motion:motionTarget="@+id/imgView_logo"
                motion:percentX="0"
                motion:percentY="0" />

            <KeyPosition
                motion:framePosition="65"
                motion:keyPositionType="deltaRelative"
                motion:motionTarget="@+id/imgView_logo_rays"
                motion:percentX="0"
                motion:percentY="0" />

            <KeyPosition
                motion:framePosition="75"
                motion:keyPositionType="deltaRelative"
                motion:motionTarget="@+id/imgView_logo"
                motion:percentX="1"
                motion:percentY="1" />

            <KeyPosition
                motion:framePosition="75"
                motion:keyPositionType="deltaRelative"
                motion:motionTarget="@+id/imgView_logo_rays"
                motion:percentX="1"
                motion:percentY="1" />

            <KeyAttribute
                android:rotation="0"
                motion:framePosition="0"
                motion:motionTarget="@+id/imgView_logo_rays" />

            <KeyAttribute
                android:rotation="180"
                motion:framePosition="85"
                motion:motionTarget="@+id/imgView_logo_rays" />

            <KeyPosition
                motion:framePosition="75"
                motion:keyPositionType="deltaRelative"
                motion:motionTarget="@+id/imgView_cloudLeft"
                motion:percentX="0"
                motion:percentY="0" />

            <KeyPosition
                motion:framePosition="75"
                motion:keyPositionType="deltaRelative"
                motion:motionTarget="@+id/imgView_cloudRight"
                motion:percentX="0"
                motion:percentY="0" />

            <KeyPosition
                motion:framePosition="85"
                motion:keyPositionType="deltaRelative"
                motion:motionTarget="@+id/imgView_cloudLeft"
                motion:percentX="1"
                motion:percentY="1" />

            <KeyPosition
                motion:framePosition="85"
                motion:keyPositionType="deltaRelative"
                motion:motionTarget="@+id/imgView_cloudRight"
                motion:percentX="1"
                motion:percentY="1" />

            <KeyAttribute
                motion:motionTarget="@+id/linlay_inputs"
                android:alpha="0"
                motion:framePosition="75"/>

            <KeyAttribute
                motion:motionTarget="@+id/linlay_inputs"
                android:alpha="1"
                motion:framePosition="85"/>

            <KeyAttribute
                motion:motionTarget="@+id/tv_forgotPassword"
                android:alpha="0"
                motion:framePosition="75"/>

            <KeyAttribute
                motion:motionTarget="@+id/tv_forgotPassword"
                android:alpha="1"
                motion:framePosition="85"/>

            <KeyPosition
                motion:framePosition="75"
                motion:percentY="0"
                motion:percentX="0"
                motion:motionTarget="@+id/tv_register"/>

            <KeyPosition
                motion:framePosition="85"
                motion:percentY="1"
                motion:percentX="1"
                motion:motionTarget="@+id/tv_register"/>
        </KeyFrameSet>

    </Transition>

</MotionScene>

3. All resource files that need to be used

activity_login.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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"
    tools:context=".MainActivity"
    tools:ignore="MissingConstraints">

    <ImageView
        android:id="@+id/imgView_logo"
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:layout_marginTop="80dp"
        android:scaleType="centerInside"
        android:src="@drawable/icon"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/imgView_logo_rays"
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:layout_marginTop="80dp"
        android:rotation="0"
        android:scaleType="centerInside"
        android:src="@drawable/icon2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/imgView_cloudLeft"
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:layout_marginTop="16dp"
        android:scaleType="centerInside"
        android:src="@drawable/cloud"
        app:layout_constraintTop_toTopOf="parent"
        app:tint="@color/lightGrey" />

    <ImageView
        android:id="@+id/imgView_cloudRight"
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:layout_marginTop="100dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:scaleType="centerInside"
        android:src="@drawable/cloud"
        app:tint="@color/lightGrey"
        />

    <LinearLayout

        android:id="@+id/linlay_inputs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="30dp"
        android:layout_marginLeft="30dp"
        android:layout_marginEnd="30dp"
        android:layout_marginRight="30dp"
        android:gravity="center"
        android:layout_marginTop="10dp"
        android:orientation="vertical"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imgView_cloudRight">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="sans-serif-medium"
            android:text="Welcome Back"
            android:textColor="@color/textHeadline"
            android:textSize="20sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="sans-serif"
            android:text="Sign in to continue"
            android:textColor="@color/textDescription"
            android:textSize="14sp" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp"
            android:background="@drawable/edittext_bg"
            android:drawableStart="@drawable/ic_baseline_email_24"
            android:drawableLeft="@drawable/ic_baseline_email_24"
            android:drawablePadding="16dp"
            android:hint="Email"
            android:inputType="textEmailAddress"
            android:padding="16dp"
            android:textSize="14sp" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:background="@drawable/edittext_bg"
            android:drawableStart="@drawable/ic_baseline_lock_24"
            android:drawableLeft="@drawable/ic_baseline_lock_24"
            android:drawableEnd="@drawable/ic_baseline_visibility_24"
            android:drawableRight="@drawable/ic_baseline_visibility_24"
            android:drawablePadding="16dp"
            android:hint="Password"
            android:inputType="textPassword"
            android:padding="16dp"
            android:textSize="14sp" />

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp"
            android:background="@drawable/button_bg"
            android:text="Login"
            android:textColor="@color/white" />

    </LinearLayout>

    <TextView
        android:id="@+id/tv_forgotPassword"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="30dp"
        android:layout_marginRight="30dp"
        android:text="Forgot Password?"
        android:textColor="@color/textDescription"
        android:textSize="13sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/linlay_inputs" />


    <TextView
        android:id="@+id/tv_register"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Don't have an account?Register Here"
        android:textColor="@color/textHeadline"
        android:textSize="13sp"
        android:gravity="center"
        android:layout_marginBottom="30dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />
</androidx.constraintlayout.widget.ConstraintLayout>

activity_splash.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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"
    tools:context=".MainActivity"
    tools:ignore="MissingConstraints">

    <ImageView
        android:id="@+id/imgView_logo"
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:layout_marginTop="80dp"
        android:scaleType="centerInside"
        android:src="@drawable/icon"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/imgView_logo_rays"
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:layout_marginTop="80dp"
        android:rotation="0"
        android:scaleType="centerInside"
        android:src="@drawable/icon2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/imgView_cloudLeft"
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:layout_marginTop="16dp"
        android:scaleType="centerInside"
        android:src="@drawable/cloud"
        app:layout_constraintTop_toTopOf="parent"
        app:tint="@color/lightGrey" />

    <ImageView
        android:id="@+id/imgView_cloudRight"
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:layout_marginTop="100dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:scaleType="centerInside"
        android:src="@drawable/cloud"
        app:tint="@color/lightGrey"
        />

    <LinearLayout

        android:id="@+id/linlay_inputs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="30dp"
        android:layout_marginLeft="30dp"
        android:layout_marginEnd="30dp"
        android:layout_marginRight="30dp"
        android:gravity="center"
        android:layout_marginTop="10dp"
        android:orientation="vertical"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imgView_cloudRight">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="sans-serif-medium"
            android:text="Welcome Back"
            android:textColor="@color/textHeadline"
            android:textSize="20sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="sans-serif"
            android:text="Sign in to continue"
            android:textColor="@color/textDescription"
            android:textSize="14sp" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp"
            android:background="@drawable/edittext_bg"
            android:drawableStart="@drawable/ic_baseline_email_24"
            android:drawableLeft="@drawable/ic_baseline_email_24"
            android:drawablePadding="16dp"
            android:hint="Email"
            android:inputType="textEmailAddress"
            android:padding="16dp"
            android:textSize="14sp" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:background="@drawable/edittext_bg"
            android:drawableStart="@drawable/ic_baseline_lock_24"
            android:drawableLeft="@drawable/ic_baseline_lock_24"
            android:drawableEnd="@drawable/ic_baseline_visibility_24"
            android:drawableRight="@drawable/ic_baseline_visibility_24"
            android:drawablePadding="16dp"
            android:hint="Password"
            android:inputType="textPassword"
            android:padding="16dp"
            android:textSize="14sp" />

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp"
            android:background="@drawable/button_bg"
            android:text="Login"
            android:textColor="@color/white" />

    </LinearLayout>

    <TextView
        android:id="@+id/tv_forgotPassword"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="30dp"
        android:layout_marginRight="30dp"
        android:text="Forgot Password?"
        android:textColor="@color/textDescription"
        android:textSize="13sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/linlay_inputs" />


    <TextView
        android:id="@+id/tv_register"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Don't have an account?Register Here"
        android:textColor="@color/textHeadline"
        android:textSize="13sp"
        android:gravity="center"
        android:layout_marginBottom="30dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />
</androidx.constraintlayout.widget.ConstraintLayout>

button_bg.xml (button background)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="@color/colorPrimary" />

    <corners android:radius="10dp" />

</shape>

        Set the color attribute and rounded corner attribute for the button to make the button more beautiful and round.

edittext_bg.xml (input box background)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="@color/lightGrey" />

    <corners android:radius="10dp" />

</shape>

The image resources used are as follows:

 If you want the source code of the project, you can like it, and then private message me! ! ! , Private messages must be answered! ! !

Guess you like

Origin blog.csdn.net/m0_58941767/article/details/126427805
Recommended
The number of MaxKB GitHub Stars, an open source knowledge base question and answer system based on large language models, exceeded 5,000!
Ranking
Getting the basic concepts of ROS + catkin Profile
Spring Learning (2) --- Assembling Beans in the IoC Container
js to get the src attribute of the image regularly
STM32 is based on CubeIDE and HAL library basics entry study notes: Bluetooth WIFI STM32 connects to Alibaba Cloud
Short video learning - 3, pandas simple use of pivot_table
Print directory of project configuration log, output log
Understand the difference between vi and vim in Linux in 3 minutes
1 + x certificate Web front-end development HTML5 special exercises
mangodb save and insert the difference
7-1 Family tree processing (50 points) (binary tree solution)
Daily
More
2024-05-13(8)
2024-05-12(28)
2024-05-11(32)
2024-05-10(34)
2024-05-09(32)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)

Code World

© 2018 codetd.com