首先先演示一下动态的效果

从视频效果中，看到这个动态的登陆界面还是比较好看的，下面开始介绍如何制作这个动态的登陆界面。

一、首先书写静态页面

activity_mian.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayoutxmlns: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"><ImageViewandroid: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" /><ImageViewandroid: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" /><ImageViewandroid: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" /><ImageViewandroid: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"/><LinearLayoutandroid: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"><TextViewandroid: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" /><TextViewandroid: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" /><EditTextandroid: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" /><EditTextandroid: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" /><Buttonandroid: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><TextViewandroid: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" /><TextViewandroid: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>

这里有一点值得说一下，我们使用MotionLayout这个布局来实现动画效果，这个布局平时不太常见，它其实是属于ConstraintLayout的子类，所以它是一种布局类型，但是它能够为布局属性添加动画效果，是开发者实现动画效果的另一个新的选择。

目前所实现的静态效果如下：

接下来会通过资源文件来实现动态效果

二、实现动态效果

1、在res目录下新建xml文件资源目录

 2、在xml目录下新建xml资源文件（motion_scene_splash.xml）

<?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"><Transitionmotion:autoTransition="animateToEnd"motion:constraintSetEnd="@layout/activity_login"motion:constraintSetStart="@layout/activity_splash"motion:duration="5000"><KeyFrameSet><KeyPositionmotion:framePosition="65"motion:keyPositionType="deltaRelative"motion:motionTarget="@+id/imgView_logo"motion:percentX="0"motion:percentY="0" /><KeyPositionmotion:framePosition="65"motion:keyPositionType="deltaRelative"motion:motionTarget="@+id/imgView_logo_rays"motion:percentX="0"motion:percentY="0" /><KeyPositionmotion:framePosition="75"motion:keyPositionType="deltaRelative"motion:motionTarget="@+id/imgView_logo"motion:percentX="1"motion:percentY="1" /><KeyPositionmotion:framePosition="75"motion:keyPositionType="deltaRelative"motion:motionTarget="@+id/imgView_logo_rays"motion:percentX="1"motion:percentY="1" /><KeyAttributeandroid:rotation="0"motion:framePosition="0"motion:motionTarget="@+id/imgView_logo_rays" /><KeyAttributeandroid:rotation="180"motion:framePosition="85"motion:motionTarget="@+id/imgView_logo_rays" /><KeyPositionmotion:framePosition="75"motion:keyPositionType="deltaRelative"motion:motionTarget="@+id/imgView_cloudLeft"motion:percentX="0"motion:percentY="0" /><KeyPositionmotion:framePosition="75"motion:keyPositionType="deltaRelative"motion:motionTarget="@+id/imgView_cloudRight"motion:percentX="0"motion:percentY="0" /><KeyPositionmotion:framePosition="85"motion:keyPositionType="deltaRelative"motion:motionTarget="@+id/imgView_cloudLeft"motion:percentX="1"motion:percentY="1" /><KeyPositionmotion:framePosition="85"motion:keyPositionType="deltaRelative"motion:motionTarget="@+id/imgView_cloudRight"motion:percentX="1"motion:percentY="1" /><KeyAttributemotion:motionTarget="@+id/linlay_inputs"android:alpha="0"motion:framePosition="75"/><KeyAttributemotion:motionTarget="@+id/linlay_inputs"android:alpha="1"motion:framePosition="85"/><KeyAttributemotion:motionTarget="@+id/tv_forgotPassword"android:alpha="0"motion:framePosition="75"/><KeyAttributemotion:motionTarget="@+id/tv_forgotPassword"android:alpha="1"motion:framePosition="85"/><KeyPositionmotion:framePosition="75"motion:percentY="0"motion:percentX="0"motion:motionTarget="@+id/tv_register"/><KeyPositionmotion:framePosition="85"motion:percentY="1"motion:percentX="1"motion:motionTarget="@+id/tv_register"/></KeyFrameSet></Transition></MotionScene>

3、需要用到的全部资源文件

activity_login.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayoutxmlns: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"><ImageViewandroid: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" /><ImageViewandroid: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" /><ImageViewandroid: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" /><ImageViewandroid: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"/><LinearLayoutandroid: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"><TextViewandroid: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" /><TextViewandroid: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" /><EditTextandroid: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" /><EditTextandroid: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" /><Buttonandroid: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><TextViewandroid: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" /><TextViewandroid: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.ConstraintLayoutxmlns: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"><ImageViewandroid: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" /><ImageViewandroid: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" /><ImageViewandroid: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" /><ImageViewandroid: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"/><LinearLayoutandroid: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"><TextViewandroid: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" /><TextViewandroid: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" /><EditTextandroid: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" /><EditTextandroid: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" /><Buttonandroid: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><TextViewandroid: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" /><TextViewandroid: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 (按钮背景)

<?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>

给按钮设置了颜色属性和圆角属性，让按钮更加好看圆润。

edittext_bg.xml（输入框背景）

<?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>

用到的图片资源如下：

想要项目源码的可以收藏点赞，然后私信我即可！！！，私信必回！！！

Android超级好看的动态登陆界面（附有详细代码）相关推荐

1. Android 简单的账号密码登陆界面（IO流）

   Android 简单的账号密码登陆界面(IO流) 用到了map<String,String> .IO流等. MainActivity代码如下: package com.xh.tx.file ...

2. vscode——html+css+js+(jQuery)动态登陆界面

   看b站大佬现场演示,菜鸟的我尽量写的,然后那个jQuery文件我用的b站大佬,不用文件实现不了动态 效果图如下: 详细代码:动态登陆界面

3. python最强实训程序(增删改查)机房收费管理系统-基于tkinter的图形化界面(附详细代码)

   python最强实训程序(增删改查)机房收费管理系统-基于tkinter的图形化界面(附详细代码) 最近学校实训,用两天时间做了一个python小程序*机房收费管理系统*,一款基于tkinter使用p ...

4. 超级好看的动态官网源码

   文章目录 前言 使用教程 程序演示与下载 前言 昨天国庆嘛,因为一些事情也回不去家.很烦躁也没事干,还是看看电脑吧.看着自己的主页官网,于是就有了今天分享的内容了,既然我回不去了,就把我的门面打扮一下 ...

5. 超级炫酷的动态登陆界面视频背景

   ** 先上图:(源码在下面) ** 第一个背景是动态的,图片展现不出来!!! 第二个是背景是粒子动态的,随着鼠标例子离子移动 源码:第一个和第二个集合: https://download.csdn.n ...

6. Android 超级萌的猫头鹰登录界面

   最近在网上看到了一个比较不错的登录界面,效果如下图: 是不是很好玩:后来研究了一下,主要是通过自定义的View加上动画实现的,先看代码: 首先是自定义View: public class OwlVie ...

7. 用easyx画超级好看的动态图

   这几天接触了easyx,就想用来画图试试 由于上传不了视频,大家可以跑代码试一试 其实没多难的,主要就是 动态用到Sleep()函数 画各种图案参考easyx官方文档的函数(circle...) 用到 ...

8. 分布式锁详细讲解——（具体业务场景的使用）小白酌情阅读，内容枯燥，附有详细代码讲解实现

   1.知识准备 必须的前置知识包括: Redis的基本命令 ** Spring的Java配置方式 JDK中的线程同步方式,例如synchronize关键字,Lock 等 ** 下列知识如果也会,会更轻松 ...

9. C语言实现的超详细的冒泡排序（附有详细代码）

   1．冒泡排序的基本思想 冒泡排序是交换排序中一种简单的排序方法.   它的基本思想是对所有相邻记录的关键字值进行比效,如果是逆顺(a[j]>a[j+1]),则将其交换,最终达到有 序化;   其 ...

10. c语言实现约瑟夫双向生死游戏(附有详细代码）

    Reborn Terran Emperor 项目简介 约瑟夫双向生死游戏是在约瑟夫生者死者游戏的基础上,正向计数后反向计数,然后再正向计数... 具体描述如下:30个旅客同乘一条船,因为严重超载,加上 ...

最新文章

1. 牛客网 Wannafly挑战赛8 A.小Y和小B睡觉觉
2. 【连载】【FPGA黑金开发板】Verilog HDL那些事儿--12864（ST7565P）液晶驱动（十三）...
3. 在python中可以使用for作为变量名对吗,在Python中使用循环来命名变量
4. 安卓按键精灵_[按键精灵教程]学了这个你也能做出稳定的脚本
5. C++Primer再学习（3）
6. 分页原理+分页代码+分页类制作
7. 震惊！原来现在无所不能的世界主人翁，早已在三千年前就悄然出现！
8. 在matlab中xt( ),编译matlab的s函数(compiling s-functions for matlab)
9. abb机器人写字程序实例_abb机器人程序实例
10. 从DevOps到Cloud Native，应用上云姿势全解锁 1
11. 基于Socket网络编程基本步骤
12. 全网最新Linux全套教程
13. 高效的敏捷测试第七课 自动化部署和BVT
14. Vue -Ts入门 (一)
15. i.MX6ULL驱动开发 | 04-Linux设备树基本语法与实例解析
16. Linux大神进阶二十：Mariadb服务管理
17. Guessing the Greatest (hard version)-（交互+二分+思维）
18. oracle 结果集已耗尽_java.sql.SQLException: 结果集已耗尽,该怎么解决
19. 基于 web 的单视图三维重建可视化系统
20. [第23课] 期望值E(X)

热门文章

1. Tornado介绍及自定义组件
2. 解决键盘老是不消失实现delegate委托实例化过程
3. 深度学习图像分类（三）： VggNet
4. html css底部弧度,CSS实现底部弧度效果
5. QT之布局管理器和QLayout
6. [深度学习]图片的几种读写方式以及相互转换
7. 【Pytorch】scatter函数详解
8. Qt QLabel双击编辑接口
9. Keil5手动添加Device
10. Layui 监听 复选框 提交表单