android主题制作_如何在Android中制作黑夜模式主题

android主题制作

Hello World, today we are going to see how we can implement a dark theme or night mode in our android application. This tutorial is going to be very simple and easy to understand. The dark theme is attractive to users and it is comfortable for low light conditions. Recently many apps adapt dark mode in their app and the output of the night mode is amazing as many users love dark mode for their app. An example of a dark theme is Whatsapp dark mode in android see the below image.

Hello World,今天我们将看到如何在我们的android应用程序中实现黑暗主题或夜间模式 。 本教程将非常简单易懂。 深色主题对用户有吸引力,并且在弱光条件下也很舒适。 最近,许多应用程序在其应用程序中采用了暗模式,并且夜间模式的输出令人惊奇,因为许多用户喜欢其应用程序的暗模式 。 深色主题的示例是android中的Whatsapp深色模式,请参见下图。

Image for post

Let’s look at how our app will look like, see the below gif for our end result app.

让我们看一下我们的应用程序的外观,请参阅下面的gif最终结果应用程序。

Image for post

Let’s see how we can implement dark theme in our app.

让我们看看如何在应用程序中实现深色主题。

制作深色主题的布局 (Make layout for dark theme)

First, we need to make our layout so that we can apply our dark theme to it.

首先,我们需要进行布局,以便我们可以将深色主题应用于该布局。

If you see the above gif we used cardview to make our layout.

如果您看到上面的gif,我们使用cardview进行布局。

See the below code for layout.

请参见下面的代码进行布局。

Now we need to set theme colors in the layout, for example, we need to set the background color of activity and cardview and also we need to set textview color and icon colors. But setting all the colors we need some way to set colors dynamically.

现在我们需要在布局中设置主题颜色,例如,我们需要设置活动和卡片视图的背景颜色,还需要设置文本视图颜色和图标颜色。 但是设置所有颜色我们需要某种方式来动态设置颜色。

We want to change the background color of activity to dark black color when we apply our dark theme in the application.

当我们在应用程序中应用深色主题时,我们想将活动的背景色更改为深黑色。

To make the dynamic values we will need to make attrs.xml file in the values folder.

要制作动态值,我们需要在values文件夹中制作attrs.xml文件。

为布局创建自定义属性值。 (Make custom attribute values for layout.)

Create a new xml file in the values folder. Right-click on values folder and click on new then click values resource file and type attrs in the file name field.

在values文件夹中创建一个新的xml文件。 右键单击“ values”文件夹,然后单击“新建”,然后单击“ values”资源文件,然后在“文件名”字段中键入attrs。

Your values folder should look like below:

您的values文件夹应如下所示:

Image for post

In the attrs.xml we will declare our custom attribute values like below.

在attrs.xml中,我们将声明我们的自定义属性值,如下所示。

In the above code, we have defined 7 values and their type which is color. Each of the values, we will use in our layout file.

在上面的代码中,我们定义了7个值及其颜色类型。 我们将在布局文件中使用每个值。

But before using these values we need to assign or set these values in our currently applied theme and also we will make our dark theme and update these attribute values.

但是在使用这些值之前,我们需要在当前应用的主题中分配或设置这些值,并且我们将使我们的主题变暗并更新这些属性值。

See also: Cardview with Recyclerview Example

另请参阅: Cardview with Recyclerview示例

在styles.xml中将Dark设为主题,并设置属性值。 (Make Dark theme in styles.xml and set attributes value.)

First, we will set attribute values for our default or light theme then we will update those attribute values in the Dark theme. Let’s do this.

首先,我们将为默认或浅色主题设置属性值,然后在深色主题中更新这些属性值。 我们开工吧。

In the AppTheme we are setting our attribute value you are free to change as per your need. We are setting default colors. Then we made a new theme called DarkAppTheme and now this time we are setting all the custom attribute values to the dark theme matching colors.

在AppTheme中,我们设置属性值,您可以根据需要自由更改。 我们正在设置默认颜色。 然后,我们创建了一个名为DarkAppTheme的新主题,现在这一次我们将所有自定义属性值设置为与深色主题匹配的颜色。

We have set the app background color to black and other background colors to dark colors and set text and icon colors according to the dark theme.

我们已将应用程序的背景色设置为黑色,其他背景色设置为深色,并根据深色主题设置了文本和图标的颜色。

Now the time to use these values in our layout. Open your activity XML file and check the background and textColor values as shown below.

现在是时候在我们的布局中使用这些值了。 打开您的活动XML文件,并检查背景和textColor值,如下所示。

If you noticed background and text color values, see how we use the attribute values in the activity layout so that these take values from the currently applied theme and set we set DarkAppTheme the values of the Dark theme will update and hence our layout values will also update and our dark theme will be in use.

如果您注意到背景和文本颜色值,请查看我们如何在活动布局中使用属性值,以便它们从当前应用的主题中获取值并设置DarkAppTheme,设置Dark主题的值将更新,因此布局值也将更新更新,我们的黑暗主题将被使用。

Let’s see our we can switch our theme from the java code.

让我们看看我们可以从Java代码切换主题。

使用Java将主题设置为DarkAppTheme (Set Theme to DarkAppTheme using Java)

Now we have completed our XML part now its time to make logic to change the dark theme in the app.

现在,我们已经完成了XML部分,现在该进行逻辑更改应用程序中的深色主题了。

If you want to read further then you can continue read here: Apply dark mode in android studio

如果您想进一步阅读,则可以继续阅读此处: 在android studio中应用深色模式

Thank you for reading.

感谢您的阅读。

翻译自: https://medium.com/@akshayranagujjar/how-to-make-dark-night-mode-theme-in-android-a1c1bf95a302

android主题制作

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值