Android Studio 中实现Material Design的部分组件、布局、色彩主题。

已于 2025-01-02 14:00:06 修改
阅读量1.1k 收藏 9
点赞数 29
文章标签： android studio android ide
于 2024-12-23 22:21:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fjnu_se/article/details/144679010
版权

Material Design介绍

‌Material Design‌是由Google推出的一种设计语言，旨在为不同平台提供更一致、更广泛的外观和感觉。它首次在2014年的Google I/O开发者大会上发布，并成为Android应用程序设计的核心原则‌
在这里插入图片描述

特点:

材质特性：将界面元素视为具有深度和阴影的物理材质，模拟现实世界的材质特性。如通过阴影和高光效果来区分不同层级的元素，赋予界面深度和层次感。

统一性：提供了一套统一的设计语言和视觉风格，确保不同界面和产品之间的一致性。

自然交互：强调自然流畅的动效设计，让用户的操作体验更加直观和顺畅。动画应当自然流畅，帮助用户理解界面元素的变化和操作反馈。

响应式设计：支持跨设备的响应式设计，确保界面在不同尺寸屏幕上都能保持良好的展现效果。界面能够自动适应不同设备、屏幕尺寸和方向，无论是在手机、平板还是不同尺寸的屏幕上，应用都能保持良好的布局和可用性。

在这里插入图片描述

组件

Material Design的组件非常丰富，涵盖了从基础元素到复杂交互的各个方面。以下我将介绍一个组件并加以实现。

Toolbar

是Android 5.0（Lollipop）引入的一个Material Design风格的导航控件，旨在提供比传统的ActionBar更灵活和强大的功能。

添加依赖

dependencies {
    val activity_version = "1.9.2"

    // Java language implementation
    implementation("androidx.activity:activity:$activity_version")
    // Kotlin
    implementation("androidx.activity:activity-ktx:$activity_version")
}

添加到 Layout.xml文件中

<com.google.android.material.appbar.MaterialToolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize" />

实现效果如下：
在这里插入图片描述

按钮：

MaterialButton:

是一个功能强大且易于使用的UI组件，它提供了多样化的样式和大小、丰富的自定义选项、交互状态的支持、一致的用户体验以及高度的可定制性等特点，可以满足开发者在应用程序开发中对于按钮的各种需求。

添加到 Layout.xml文件中

<com.google.android.material.button.MaterialButton
    android:id="@+id/button_first"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/Material_Button" />

实现效果如下：
在这里插入图片描述

悬浮响应按钮（Floating Action Button, FAB）：

圆形的漂浮按钮，有一系列特殊动作，通常用于促进用户操作。

添加到 Layout.xml文件中

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_marginBottom="16dp"
    app:srcCompat="@android:drawable/ic_dialog_email" />

实现效果如下:

在这里插入图片描述

Snackbar：

Android开发中一个用于显示简短消息反馈给用户的UI组件。一般可与触发按钮后同时触发。

在MainActivity添加

binding.fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Snackbar snackbar = Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                .setAction("撤销", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {

                        Toast.makeText(getApplicationContext(), "撤销操作已执行", Toast.LENGTH_SHORT).show();
                    }
                });
        // 显示Snackbar
        snackbar.show();
    }
});

效果如下：
在这里插入图片描述
在这里插入图片描述

NavigationView：

是Android开发中的一个重要UI组件，它主要用于创建侧边导航菜单。

先创建一个drawer_view.xml作为侧栏的下部分

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_home"
            android:icon="@drawable/ic_home"
            android:title="Home" />
        <item
            android:id="@+id/nav_settings"
            android:icon="@drawable/ic_settings"
            android:title="Settings" />
        <!-- 添加更多菜单项 -->
    </group>
</menu>

创建一个nav_header.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="240dp"
    android:orientation="vertical"
    android:padding="16dp">

<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginBottom="16dp"
android:layout_marginTop="36dp"
android:src="@mipmap/ic_launcher" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="XBewweqwewqewqewqzxcas" />

    </LinearLayout>

最后在Layout文件中添加：

<com.google.android.material.navigation.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:headerLayout="@layout/nav_header"
    app:menu="@menu/drawer_view" />

实现效果如下：

在这里插入图片描述

布局:

CoordinatorLayout

这是一个功能强大且灵活的布局容器，特别适用于需要多个视图之间复杂交互的场景。

上述的布局便是写在CoordinatorLayout中的，其代码为：

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android">
<!-->中间添加组件<-->
</androidx.coordinatorlayout.widget.CoordinatorLayout>

DrawerLayout：

Android开发中一种常用的布局控件，它实现了侧滑菜单的效果，使得用户可以通过从屏幕边缘滑动来打开或关闭一个侧边菜单。
通常和组件NavigationView搭配使用
代码如下：

<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <!-- 主界面内容 -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:id="@+id/tv_content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="Hello World"
            android:textSize="30sp" />
    </RelativeLayout>
    <!-- 左侧滑动菜单 -->
    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/drawer_view" />


</androidx.drawerlayout.widget.DrawerLayout>

色彩主题:

色彩主题是Material Design 3设计系统中的一个重要组成部分，它提供了一套丰富的色彩工具，帮助开发者创建出既美观又符合品牌调性的用户界面。

比如可以自定义下图中标出的区域的颜色:
在这里插入图片描述

在res中添加

colors.xml

<resources>
    <!-- 背景颜色 -->
    <color name="background_color">#F0F8FF</color> <!-- AliceBlue -->

    <!-- Toolbar颜色 -->
    <color name="toolbar_background_color">#FFA07A</color> <!-- LightSalmon -->

    <!-- Toolbar标题颜色 -->
    <color name="toolbar_title_color">#0000FF</color> <!-- Blue -->

    <!-- 其他可能的颜色 -->
    <color name="primary_color">#4CAF50</color> <!-- Green -->
    <color name="secondary_color">#FF5733</color> <!-- Tomato -->
    <color name="text_color">#000000</color> <!-- Black -->
    
</resources>

themes.xml

<resources xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 定义应用的主题 -->
    <style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
        <!-- 设置窗口背景颜色 -->
        <item name="android:windowBackground">@color/background_color</item>

        <!-- 设置Toolbar的背景颜色 -->
        <item name="colorPrimary">@color/toolbar_background_color</item>
        <item name="android:textColorPrimary">@color/toolbar_title_color</item>

        <!-- 其他可能的主题属性 -->
        <item name="colorPrimaryDark">@color/primary_color</item>
        <item name="colorAccent">@color/secondary_color</item>
        <item name="android:textColor">@color/text_color</item>
    </style>

</resources>

最后在AndroidManifest.xml添加theme

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

    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">  <!-- >左侧即为添加的theme  <-->
        <activity
            android:name=".MainActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

实现效果：
在这里插入图片描述
原文链接：https://blog.csdn.net/asdfggesxr/article/details/144569767?spm=1001.2014.3001.5502
作者：陈晓彬

fjnu_se
关注
Android Material Design：入门指南
konoaquada的博客
12-19 1687
Material Design 是 Google 推出的设计语言，旨在通过统一的视觉、交互和运动设计准则，为用户提供一致、美观和直观的体验。使用新版本的Android studio 创建的项目现在是默认支持AndroidX库&Material Design的。Material Design 中的卡片 (Card) 是一个常见的布局元素，用于展示内容块。Snackbar 是一种轻量级通知组件，用于展示短暂的消息，同时提供可操作的按钮。应用的背景颜色，确保文本与背景的对比度足够高。其他的Theme有如下。
ANDROID L——Material Design详解（主题和布局）
热门推荐
大苞米的专栏
10-15 3万+
Android L特性介绍——Material Design。详解Material Design中主题的使用和布局的简介
Android学习之Material Components
最新发布
m0_69682018的博客
04-03 864
以下是 Material Design 提供的核心控件列表（基于最新 库），按功能分类整理：依赖版本： 核心特性：注意事项： 特点对比 控件 特点 普通 Switch 原生基础控件，样式简单（直角滑块/无主题适配），无 Material 特性（如动态颜色/涟漪效果）。 SwitchMaterial 支持 Material Design 规范（圆角滑块/动态主题），提供图标支持、触摸涟漪反馈、无障碍优化。 使用场景对比 控件 适用场景 普通 Switch
Android Material Design
12-05
本人花钱购买，适合安卓移动端设计，部件很全，有交互动作，省去不少设计时间。
Android之Material Design
Cristiano_san的博客
10-05 502
12.1 Toolbar： 顶部标题控件 1、ActionBar表示的是每个活动最顶部的标题栏 2、Toolbar不仅继承了ActionBar的所有功能，而且灵活性很高，可以配合其他空间来完成一些Material Design的效果 3、ActionBar来源： 4、活动界面中AppTheme每个位置的属性表示 5、可以利用Toolbar上修改标题栏上显示的内容（添加菜单为例） 12.2 滑动菜单 滑动菜单：将一些菜单选项隐藏起来，而不是放置在主屏幕上，然后可以通过滑动的方式将菜单显示出来 12.2.
Material Design
810364804
06-28 160
Material Design是google io开发者大会推出的新的设计语言，Material Design不像Android过去采用的Holo风格那样深沉，增加或修改了阴影动画功能，使其更加跳动和富有活力。 Android L 开发者预览版包含了支持Material Design的Apps。Material Design是一个综合的视觉指南、运动和交互设计平台。在你的应用中可以按...
Material Design风格各组件
勤学
03-14 914
Material Design风格各组件
Android Material Design-Creating Apps with Material Design(用 Material Design设计App)-(零)
Rocko's blog - http://rocko.xyz
10-23 4588
转载请注明出处：http://blog.csdn.net/bbld_/article/details/40400031 前言 这篇文章是官方material design文档翻译的第一篇，关于material design需要了解的知识可以参阅这本中文版的译文电子书。   Material design是一种跨平台的为了视觉、动作、交互设计的综合指南。要在你的A
毕业设计 仿QQ即时通讯 Android Studio与Material Design 的实践
04-10
在本项目中，开发者会学习如何使用Material Design组件库，创建符合现代审美的界面，提升用户体验。这包括使用诸如CardView、FloatingActionButton、Snackbar等组件，以及运用颜色、动画和触摸反馈等设计原则。 ...
Android-一款MaterialDesign风格阅览资讯和图片的Android软件
08-13
这款"Android-一款MaterialDesign风格阅览资讯和图片的Android软件"显然遵循了这一设计规范，旨在提供一个既美观又易用的用户界面，让用户在浏览新闻和图片时享受流畅的体验。 Material Design的核心理念是“纸和...
第11天：Material Design
weixin_41644568的博客
11-13 1359
是由Google在2014年推出的一套设计语言，旨在为用户提供统一、美观且直观的用户体验。它结合了经典设计原则和创新的技术，适用于各种设备和屏幕尺寸。Material Design不仅涵盖了视觉设计，还涉及动效设计、布局设计和组件设计等多个方面。主要特点包括：一致性：确保不同应用在视觉和交互上的一致性。灵活性：适应不同设备、屏幕尺寸和用户需求。可扩展性：支持从简单到复杂的各种界面设计。美观性：通过精心设计的组件和布局，提升应用的整体视觉效果。
Material Design实例教程：适用于Android Studio的实践示例
Material Design Example作为一个实例项目，通常包含了多个示例代码和设计模板，用以展示如何在Android应用中实现Material Design的各种特性和组件。 例如，使用Material Design的控件，开发者可以在Android应用中...
重磅教程！帮你全面彻底搞定Material design的学习笔记
风起云涌
12-30 2454
原文：http://www.uisdc.com/comprehensive-material-design-note PS:  想了解学习Material Design的同学一定要看看这篇文章，非常细致，特地引过来与君共勉。 自从Material design发布以来，可乐橙就在一直收集相关素材与资源，研究别人的作品。这套设计风格非常鲜明，带有浓郁的Google式严谨和理性哲学，深得我
进入Material Design时代
light_sky的专栏
11-01 2万+
进入Material Design时代 关于Material Design是5.0系统的重头戏，是一种具有可视化，交互性，动效以及多屏幕适应的全面设计。并逐渐成为一种设计标准，本篇文章通过对2篇官方文章的翻译，全面介绍Material Design的所有特点以及其实现和兼容，并整理了十多个在GitHub上相关的开源库，帮助你更好更快的实现Material Design。如果你正在学习或者即将学习并应用Material Design设计风格，那么这篇文章将对会帮助你更全面的理解它。
Material Design组件介绍
qin_520520的博客
05-07 791
引入依赖库 implementation 'com.android.support:design:28.0.0' 1.TabLayout tablayout 我们通常配合ViewPager实现多Fragment mtablayout = findViewById(R.id.tab_tab); mviewpager = findViewById(R.id.ta...
Material Design（三）--组件
weixin_45773421的博客
06-03 737
Material Design–组件 浮动操作按钮 FAB 浮动操作按钮是 Material Design 中最明显的标志了 同时它也是当前页面最重要的操作，（比如在邮箱的页面中，FAB 很可能是发邮件的按钮） 并且一个页面中只建议有一个 FAB。 △ FAB在APP的右下角位置并且常驻屏幕 △ FAB是一个页面中最显眼的设计，但并不是每个页面都需要FAB 浮动操作按钮强制使用圆形样式。 不要给浮动操作按钮添加额外的维度。 FAB的尺寸 FAB 默认尺寸 (56
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值