AndroidStudio设计登录页源码(音悦app)

news2024/11/22 13:33:29

目录

一、代码

二、效果


一、代码

1.在activity_main.xml里的代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">



    <LinearLayout
        android:layout_marginTop="120dp"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView

            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/logo"
         />
        <ImageView
            android:layout_marginTop="15dp"
            android:paddingLeft="2dp"
            android:layout_marginBottom="50dp"
            android:layout_width="match_parent"
            android:layout_height="70dp"
            android:src="@drawable/yinyue"
            />

    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="center">

    <TextView
        android:text="邮箱:"
        android:paddingLeft="15dp"
        android:textSize="30dp"
        android:textColor="@color/zise2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
    <EditText
        android:hint="请输入您的邮箱"
        android:textSize="20dp"
        android:textColorHint="#B2A9C1"
        android:inputType="textEmailAddress"
        android:layout_marginLeft="0dp"
        android:padding="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center"
        android:layout_marginTop="10dp">

        <TextView
            android:text="密码:"
            android:paddingLeft="15dp"
            android:textSize="30dp"
            android:textColor="@color/zise2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />
        <EditText
            android:hint="请输入您的密码"
            android:textSize="20dp"
            android:textColorHint="#B2A9C1"
            android:inputType="textEmailAddress"
            android:padding="10dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            />
    </LinearLayout>
        <Button
            android:layout_marginTop="40dp"
            android:layout_gravity="center"
            android:layout_width="278dp"
            android:text="@string/tv_one"
            android:textSize="26dp"
            android:textColor="@color/white"
            android:background="@drawable/rounded_button"
            android:layout_height="55dp"/>
    </LinearLayout>
</LinearLayout>

2.在..src\main\res\drawable文件夹下新建文件(file),命名为:rounded_button.xml,在里面输入如下代码

2df84d46e91649dca380db8eccdeab0d.png

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item>
                <shape android:shape="rectangle">
                        <gradient android:startColor="@color/zise3"
                            android:endColor="@color/fense1"
                            android:angle="180"/>
                        <!--angle控制渐变的方向-->
                        <!-- 设置按钮的四个角为弧形 -->
                        <!-- android:radius 弧形的半径 -->
                        <corners android:radius="70dp" />
                        <!-- padding:Button里面的文字与Button边界的间隔 -->
                        <padding
                            android:left="10dp"
                            android:top="10dp"
                            android:right="10dp"
                            android:bottom="10dp"
                            />


                </shape>
        </item>
</selector>

3.在..src\main\res\values\themes.xml文件夹下修改成如下图所示

47f1c84dfe52487abf7d8069fce6995d.png

c65074da3b284342a3750ed53028d6e4.png

上图中,

①是指在themes.xml文件下

②是指把原来的actionbar给关闭,为了保险起见,把原来的代码注释,从新复制修改了一下

③把状态栏的图标颜色改为白色,背景色改为偏紫色一点的暗色,更符合我们app的主题

4.在..src\main\res\values\colors.xml文件下看缺少那些代码自行添加(或者直接复制这段,然后覆盖你原有的代码段) 

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
    <color name="zise">#9f88b6</color>
    <color name="zise2">#7355B6</color>
    <color name="zise3">#4a599c</color>
    <color name="fense1">#d6a7c7</color>

</resources>

5.用到的图片在文章顶部的资源那下载(名称为:app的图标和app名称)

然后拖到..src\main\res\drawable\文件夹下,记得把名字也改一下如果下载后名字不一样了,最后成这样:

57b36555c6c54a76818f51446b8f08d2.png

二、效果

然后运行就可以啦~最终效果是这样滴,喜欢的友友留个赞赞吧

35694bbc500d4542a2ca8b282db3ea9f.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1511194.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

elementUi中表格超出一行省略,鼠标放入显示完整提示

一、想要的效果 二、代码&#xff0c;加入show-overflow-tooltip即可 <el-table-column min-width"220" prop"content" show-overflow-tooltip> </el-table-column>

C语言深入理解指针(1)

前言 小陈也是学完了指针&#xff0c;还是有很多不多的地方&#xff0c;接下来会输出5篇博客去帮助自己彻底弄懂指针&#xff0c;以前的知识也需要复盘了呀。 内存和地址 1.1 内存 举个例子&#xff0c;去理解这两个的词&#xff0c;一个外卖员去送外卖&#xff0c;他首先需…

学习vue3使用在线官方开发环境play.vuejs.org进行测试

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 演示地址&#xff1a; http://122.227.135.243:9666 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码&#xff1a; https://gitee.com/nbach…

【maven下载、安装、配置教程】

一、下载 maven 官网&#xff1a;Maven – Download Apache Maven 注意&#xff1a;idea 和 maven 的版本问题&#xff0c;不然 idea 启动项目会发生兼容性错误。如 2020 版本 idea 支持 3.6.3 左右的 maven 版本&#xff0c;用 3.9版本的 maven 会报错。 二、配置maven全局配置…

meta元数据元素

文章目录 元数据Metadatameta标签的四种使用方式meta的属性meta使用示例 HTML <meta> 元素表示那些不能由其他 HTML标签&#xff08; <style>、 <script>等&#xff09;表示的元数据信息。 元数据Metadata Metadata元数据&#xff0c;简单地来说就是描述…

基岩多点位移计分体安装法的应用与技巧

在基岩多点位移计的安装过程中&#xff0c;当测杆过长或工作场地受限时&#xff0c;分体安装法成为了一种高效且实用的选择。这种安装方法能够确保位移计在复杂环境下仍能准确测量&#xff0c;为工程安全提供有力保障。 在分体安装法的实施过程中&#xff0c;需先将最深测点的测…

QPSK_NDATED_DDPED学习

该QPSK系统框图如下所示&#xff1a; 首先产生随机的四位整数&#xff0c;经过QPSK Modulator Baseband 进行星座图映射&#xff0c;然后经过脉冲整形和调制后发送到高斯带通信道中&#xff0c;在接收端首先进行解调&#xff0c;将带通信号转化为基带信号&#xff0c;再经过符号…

mysql中 多表查询介绍

在 MySQL 中&#xff0c;多表查询是 SQL 语句的重要组成部分&#xff0c;用于从两个或多个表中检索数据。多表查询可以帮助我们更灵活地处理复杂的数据关系&#xff0c;并从中获取所需的信息。以下是 MySQL 中常见的多表查询及其特点、区别和应用场景。 常见多表查询 1. **内连…

springboot264基于JAVA的民族婚纱预定系统的设计与实现

民族婚纱预定系统 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本民族婚纱预定系统就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理…

Lesson 6 Convolutional Neural Network(CNN)

听课&#xff08;李宏毅老师的&#xff09;笔记&#xff0c;方便梳理框架&#xff0c;以作复习之用。本节课主要讲了CNN的适用范围&#xff0c;整体架构与工作流程&#xff0c;CNN的应用&#xff0c;CNN的缺点以及解决方法。 1. CNN的输入与输出 CNN是专门为了图像而设计的一…

allegro PCB设计心得笔记(二) -- ERROR(SPMHUT-144): Illegal arc specification

使用Allegro PCB Editor设计PCB&#xff0c;其中使用了中文丝印&#xff0c;设计完成后&#xff0c;进行Tools -> Database Check&#xff0c;提示如下错误&#xff1a; 对PCB文件进行反复检查&#xff0c;也没有找到具体问题&#xff0c;但是删除中文丝印封装后&#xff0c…

算法---滑动窗口练习-1(长度最小的子数组)

长度最小的子数组 1. 题目解析2. 讲解算法原理3. 编写代码 1. 题目解析 题目地址&#xff1a;长度最小的子数组 2. 讲解算法原理 首先&#xff0c;定义变量n为数组nums的长度&#xff0c;sum为当前子数组的和&#xff0c;len为最短子数组的长度&#xff0c;初始值为INT_MAX&am…

Rust入门:C++和Rust动态库(dll)的相互调用

无论是C调用Rust动态库还是Rust调用C动态库&#xff0c;其操作基本都是一样地简单&#xff0c;基本和C调用C的动态库没什么区别&#xff0c;只需要列出所需要导入的函数&#xff0c;并链接到相应的lib文件即可。 这里&#xff0c;在windows中&#xff0c;我们以dll动态库为例说…

初窥机器学习

人工智能 近几年来&#xff0c;人工智能&#xff08;AI&#xff09;已成为家喻户晓的术语&#xff0c;我们在游戏、电影&#xff08;还记得J.A.R.V.I.S吗&#xff1f;&#xff09;和书籍中经常看到它的提及和描绘&#xff0c;但人工智能究竟是什么呢&#xff1f; 人工智能简单…

考察1学生学籍系统winform .net6 sqlserver

考察1学生学籍系统winform .net6 sqlserver 下载地址: 考察1学生学籍系统winform .net6 sqlserver winform(.net6)sqlserver数据库 只有数据库的表结构需要自己建表 启动程序 登录失败 进入主界面 项目获取&#xff1a; 项目获取&#xff1a;typora: typora/img (gitee.com…

【Docker】容器的生态系统

Docker提供了一整套技术支持&#xff0c;包括核心技术、平台技术、支持技术。 核心技术 容器核心技术是指能让Container&#xff08;容器&#xff09;在host&#xff08;集群、主机&#xff09;上运行起来的那些技术。 1&#xff09;容器规范&#xff1a;OCI&#xff08;runt…

Twitter广告投放技巧

明确目标受众&#xff1a; 确定你的目标受众&#xff0c;包括他们的兴趣、地理位置、年龄等。Twitter提供了广告定位选项&#xff0c;确保你的广告被展示给最相关的用户。 使用吸引人的图像和视频&#xff1a; 在Twitter上&#xff0c;图像和视频是引起关注的关键。确保你的广…

数据结构与算法第五套大题

1.图的最小生成树&#xff0c;各边权值之和&#xff1a; E{(1,5),(5,2),(5,3),(3,4)},W10 2.平均查找长度&#xff1a; 方法论&#xff1a; 直接将其变成一颗二叉树&#xff0c;然后计算每个节点的数学期望*比较次数之和/7 比如&#xff1a; 15为1/7&#xff0c;只需要比较一次…

数据库系统概念(第一周)

⚽前言 &#x1f3d0;四个基本概念 一、数据 定义 种类 特点 二、数据库 三、数据库管理系统&#xff08;DBMS&#xff09; 四、 数据库系统&#xff08;DBS&#xff09; &#x1f3c0;数据库系统和文件系统对比 文件系统的弊端 &#x1f94e;数据视图 数据抽象 …

【阿里云系列】-基于云效构建部署NodeJS项目到ACK

准备工作 01、编写Dockerfile文件可以根据不同的环境&#xff0c;新建不同的Dockerfile文件&#xff0c;比如Dockerfile-PROD # Deliver the dist folder with NginxFROM nginx:stable-alpine ENV LANGC.UTF-8 ENV TZAsia/ShanghaiCOPY dist/ /usr/share/nginx/html COPY ngi…