如何在 Android 中使用 Style 构建 Material 和 Dark 主题应用程序?
为了增加安卓应用的用户流量,需要对安卓应用的主题和样式进行调整。在当今的移动应用程序开发中,还需要考虑应用程序的外观和感觉。应用程序用户需要的一项主要功能是黑暗主题。 Android 设备的默认主题在 Android 棒棒糖(5.0)之前是深色的,但 Android Q 于 2019 年第三季度发布。大多数应用程序实现了应用程序的深色主题版本。在本文中,说明了如何实现 Android 应用程序的 Material Dark 主题版本。
为什么是黑暗主题?
深色主题会降低移动设备屏幕发出的亮度,从而减轻眼睛疲劳。同时保持最小的色彩对比度。这也有助于应用程序的功能设计。消耗更少的电池电量,适应当前的光线条件。带有 OLED 显示屏的设备可以适应深色主题。最重要的是,该应用程序的深色主题版本有更多的粉丝。
了解样式和主题之间的区别
- Android 开发人员见证了样式和主题的模糊性。原因是在 Android 中只有标签名 ,没有
标签可用。 - 风格 是定义单个视图外观的属性集合。样式属性是字体、颜色、大小、背景颜色等。例如,标题和正文的字体大小可能不同。
- 主题, 相反,它应用于整个应用程序、活动或视图层次结构,而不仅仅是单个视图。 Themes 还可以将样式应用到状态栏、窗口背景等非视图元素。例如,colorPrimary 应用到整个应用程序的所有 Floating Action Buttons 或 Normal Buttons。可以从下图中看出区别。
- 上图可以清楚地看到样式和主题之间的区别。样式应用于父视图组内的特定视图,但主题应用于整个父视图组。
- 但是样式和主题是齐头并进的,例如浮动操作按钮和普通可点击按钮可以分别具有不同的颜色,如 colorPrimary 和 colorSecondary。
材质主题属性
在Android应用程序中实现功能材料主题的主要3个属性是:
- 颜色
- 排版
- 形状
- 材料设计组件
- 关于这些属性的基本信息可以参考Android Material Design简介
- 大家可能在最近更新的 Android studio(4.1 及以上)中看到了 Color 属性的不同。那些是:
原色变体: Attribute Description Default ValuecolorPrimary This color primary color of the application. This color is the most used color in the Application. This can also be called a branding color #FF6200EE colorPrimaryVariant This is the variant of the colorPrimary. This may be a lighter or darker variant of the primary color. #FF3700B3 colorOnPrimary The name itself indicates the color should be assigned to those elements which are above the colorPrimary. #FFFFFFFF
次要颜色变体: Attribute Description Default ValuecolorSecondary The color which is most used after the colorPrimary. This color is accented complement color of the colorPrimary. #FF03DAC5 colorSecondaryVariant This is a variant of the colorSecondary. This may be a lighter or darker variant of the colorSecondary. #FF018786 colorOnSecondary This name also indicates that the color should be assigned to those elements which are above the colorSecondary. #FF000000
表面颜色: Attribute Description Default ValuecolorSurface Surface color that affects surface components, such as cards, sheets, menus. #FFFFFF colorOnSurface This color assigned to the texts or icons which are above the colorSurface #000000
错误的颜色:Attribute Description Default Value colorError This indicated the color assigned to elements which state, the error. #B00020 colorOnError The color which is assigned to texts or icons which are above the colorError. #FFFFFF
排版:
Material Design Typography 系统中有预定义和精心设计的文本排版变体。请看下图:
这些默认是 Material Design 主题自带的属性,可以根据应用中 Text 的上下文直接应用到 TextViews 上。
实施应用程序深色主题变体的步骤
第 1 步:创建空活动 Android Studio 项目:
创建一个空的活动 Android Studio 项目并选择 Kotlin 作为编程语言。参考安卓 |如何在 Android Studio 中创建/启动新项目?。
第 2 步:添加所需的依赖项
- 将以下依赖项添加到应用程序级 gradle 文件中,并同步项目。
- 但是,在创建新的 Android Studio(4.0 及更高版本)项目时,默认情况下会添加此依赖项。
implementation ‘com.google.android.material:material:1.3.0-alpha04’
第 3 步:添加主要和次要品牌颜色
- 我们需要主要决定主要和次要颜色,并从中取出颜色代码。在这种情况下,原色是绿色,与之互补的是 red_200 和 red_700 作为辅助品牌色。
- 可以使用此或此制作自己的色样和组合。
- 调用以下颜色以在 colors.xml 文件内的应用程序中实现相同的颜色。
XML
#98d5b0
#e5f5eb
#18ad62
#008c4c
#eb8baf
#b31058
#FF000000
#FFFFFFFF
#B00020
XML
XML
XML
Kotlin
package com.aditya.gfgarticle
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.appcompat.app.AppCompatDelegate
import com.google.android.material.switchmaterial.SwitchMaterial
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// Instance for the material switch
val switchMaterial: SwitchMaterial = findViewById(R.id.switchMaterial)
// handle the checked changes for the material switch
switchMaterial.setOnCheckedChangeListener { buttonView, isChecked ->
when (isChecked) {
// if checked toggle to dark mode
true -> AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)
// if unchecked toggle back to light mode
false -> AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)
}
}
}
}
步骤 4:使用 themes.xml 文件
- 首先,将 DayNight DarkActionBar 主题应用到应用程序的浅色主题和深色主题,如下所示:
- 遵循上面讨论的 Material Design Guidelines 提供的颜色系统,以下是应用于应用程序的浅色主题和深色主题的颜色系统。
- 当应用程序在浅色主题下时,应用以下 values\theme.xml。
XML
- 当应用程序处于深色主题下时,将应用以下 values-night\themes.xml。
XML
- 查看以下图片,这些文件位于 Android Studio 项目中。
步骤 5:使用 activity_main.xml 文件
- 应用程序的主要布局由 Material Design Type 系统组成。和一个扩展浮动操作按钮和一个普通浮动操作按钮来展示应用程序的辅助品牌颜色。
- 布局中的所有文本视图都继承了 Material 类型系统的样式。例如 – “style=”@style/TextAppearance.MaterialComponents.Headline4”。
XML
输出界面:
步骤 6:使用 MainActivity.kt 文件
在 MainActivity.kt 文件中,已经处理了材质切换按钮的检查更改侦听器。如果设备不支持应用程序的深色主题,则该项目本身支持各种 API 的深色主题版本。
科特林
package com.aditya.gfgarticle
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.appcompat.app.AppCompatDelegate
import com.google.android.material.switchmaterial.SwitchMaterial
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// Instance for the material switch
val switchMaterial: SwitchMaterial = findViewById(R.id.switchMaterial)
// handle the checked changes for the material switch
switchMaterial.setOnCheckedChangeListener { buttonView, isChecked ->
when (isChecked) {
// if checked toggle to dark mode
true -> AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)
// if unchecked toggle back to light mode
false -> AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)
}
}
}
}
输出: