手把手教你打造一个Material Design风格的App(一)

你应该听说过Android的Material Design,它是在Android 5.0(Lollipop)版本引入的。在Material Design中还引入了很多新东西,比如Material Theme,新的小部件,自定义的阴影,矢量图片及自定义动画等。如果你之前没有用过Material Design,那么本文将是一个很好的入门教程。

在这篇教程中,我们将会学习Material Design开发的基本步骤,即编写自定义的主题以及使用RecyclerView来实现抽屉导航。

通过下面的两个链接可以获取更多关于Material Design的知识:

>Material Design规范

>使用Material Design创建App

本文Demo的视频在YouTube上,请点击这里

1.下载Android Studio

在开始之前,需要下载Android Studio并做一些必要的配置,因为从现在开始,在本教程中,我将会一直使用Android Studio。如果你是第一次接触Android Studio,可以通过其说明文档来大致了解一下Android Studio。

2.Material Design色彩定制

Material Design提供了一系列属性来自定义颜色主题,但是我们一般使用5个主要的属性来定义整体的主题风格。

colorPrimaryDark——这是App深色调的基本颜色,主要用于通知栏背景。

colorPrimary——这是App的主要颜色,用于工具栏背景。

textColorPrimary——这是文本的主要颜色,用于工具栏标题。

windowBackGroud——这是App的默认背景色。

navigationBarColor——这是底部导航栏的背景颜色。

你可以浏览一下Material Design的色彩方案,然后选择一个适合你的App的。

3.创建Material Design主题

(1)在Android Studio中,通过菜单File-->New Project,填写必需的详细信息来创建一个新的工程,当提示选择一个默认的Activity时,选择Blank Activity,然后继续。

(2)打开res-->values-->strings.xml,然后添加下面的string值。

strings.xml

<resources>

<string name="app_name">Material Design</string>

<string name="action_settings">Settings</string>

<string name="action_search">Search</string>

<string name="drawer_open">Open</string>

<string name="drawer_close">Close</string>

<string name="nav_item_home">Home</string>

<string name="nav_item_friends">Friends</string>

<string name="nav_item_notifications">Messages</string>

<!-- navigation drawer item labels  -->

<string-array name="nav_drawer_labels">

<item>@string/nav_item_home</item>

<item>@string/nav_item_friends</item>

<item>@string/nav_item_notifications</item>

</string-array>

<string name="title_messages">Messages</string>

<string name="title_friends">Friends</string>

<string name="title_home">Home</string>

</resources>

(3)打开res-->values-->colors.xml,然后添加下面的颜色值。如果你没有找到colors.xml文件,请创建一个名为colors.xml的资源文件。

colors.xml

<?xml version="1.0" encoding="utf-8"?>

<resources>

<color name="colorPrimary">#F50057</color>

<color name="colorPrimaryDark">#C51162</color>

<color name="textColorPrimary">#FFFFFF</color>

<color name="windowBackground">#FFFFFF</color>

<color name="navigationBarColor">#000000</color>

<color name="colorAccent">#FF80AB</color>

</resources>

(4)打开res-->values-->dimens.xml,然后添加如下内容。

dimens.xml

<resources>

<!-- Default screen margins, per the Android Design guidelines. -->

<dimen name="activity_horizontal_margin">16dp</dimen>

<dimen name="activity_vertical_margin">16dp</dimen>

<dimen name="nav_drawer_width">260dp</dimen>

</resources>

(5)打开res-->values中的style.xml文件,然后添加如下样式。在style.xml中定义的样式是所有Android版本中通用的,这里我将我的主题命名为MyMaterialTheme。

styles.xml

<resources>

<style name="MyMaterialTheme" parent="MyMaterialTheme.Base">

</style>

<style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">

<item name="android:windowNoTitle">true</item>

<item name="windowActionBar">false</item>

<item name="colorPrimary">@color/colorPrimary</item>

<item name="colorPrimaryDark">@color/colorPrimaryDark</item>

<item name="colorAccent">@color/colorAccent</item>

</style>

</resources>

(6)现在,在res文件夹下,新建一个名为values-v21的文件夹。在values-v21文件夹里面,创建另一个style.xml文件并填写如下内容,这个style则是仅供Android Lollipop(5.0)使用的。

styles.xml

<resources>

<style name="MyMaterialTheme" parent="MyMaterialTheme.Base">

<item name="android:windowContentTransitions">true</item>

<item name="android:windowAllowEnterTransitionOverlap">true</item>

<item name="android:windowAllowReturnTransitionOverlap">true</item>

<item name="android:windowSharedElementEnterTransition">@android:transition/move</item>

<item name="android:windowSharedElementExitTransition">@android:transition/move</item>

</style>

</resources>

(7)到这里我们已经准备好了基本的Material Design 样式。为了使用该主题,打开AndroidManifest.xml文件然后修改<application>标签中的android:theme属性:

android:theme="@style/MyMaterialTheme"

在应用了这个主题之后,你的AndroidManifest.xml文件应该是下面的样子:

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="androidhive.info.materialdesign" >

<application

android:allowBackup="true"

android:icon="@mipmap/ic_launcher"

android:label="@string/app_name"

android:theme="@style/MyMaterialTheme" >

<activity

android:name=".activity.MainActivity"

android:label="@string/app_name" >

<intent-filter>

<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />

</intent-filter>

</activity>

</application>

</manifest>

现在,如果你运行App,你可以看到通知栏的颜色变成了我们在样式里所声明的颜色。

由于文章太长,请继续关注:手把手教你打造一个Material Design风格的App(二)

原文地址:http://www.androidhive.info/2015/04/android-getting-started-with-material-design/

时间: 2024-08-25 06:43:07

手把手教你打造一个Material Design风格的App(一)的相关文章

手把手教你打造一个Material Design风格的App(二)

--接上文. 3.1添加ToolBar(ActionBar) 添加ToolBar非常简单,你需要做的仅仅是为toolbar创建一个单独的layout布局,如果你想在哪里展示toolbar,只要在对应布局里将toolbar的布局文件include进来即可. (8)在res-->layout文件夹下创建一个名为toolbar.xml的文件,然后在里面添加一个android.support.v7.widget.Toolbar元素,这样就创建了一个具有特定高度和主题的toolbar. toolbar.x

手把手教你打造一个Material Design风格的App(三)

--接上文. 3.2添加抽屉导航 添加导航抽屉跟Android 5.0之前是一样的,只是以前我们使用ListView来作为菜单容器,现在我们则使用Material Design风格的RecyclerView. (14)在你工程的java文件夹中,创建3个名为activity.adapter.model的包,将MainActivity.java移到activtiy包中,这样做使得你的代码可以很好地组织和管理. (15)打开位于app模块下的build.gradle文件并添加如下依赖.添加完依赖之后

手把手教你打造一个Material Design风格的App(四)

--接上文. 3.3实现导航抽屉菜单项的选择 尽管导航抽屉已经实现了,但是你会发现选择抽屉列表项并没有反应,这是因为我们还没有实现RecycleView items的点击监听. 因为我们在导航抽屉里有3个菜单(Home,Friends & Messages),所以需要为每一个菜单项创建一个独立的Fragment. (24)在res-->layout里面,创建一个名为fragment_home.xml的文件并添加如下代码. fragment_home.xml <RelativeLayou

教你轻松实现Material Design风格的知乎主页(详解多种控件的综合使用)

本文讲主要来说说Toolbar.RecyclerView.CardView.DrawerLayout.以及SwiperefreshLayout的综合使用,其中Toolbar和RecyclerView在前几篇博客已经详细讲述其用法了,有兴趣的可以去看看.现在利用这几个控件实现Material Design风格的知乎主页(Android v3.3版 知乎),在讲到相关控件的时候,我也会提及一下这个控件的用法.那么,让我们开始控件之旅吧. 示例效果 在动手写代码之前,我们先要看看最终的实现效果是什么:

手把手教你打造一个心电图效果View Android自定义View

大家好,看我像不像蘑菇-因为我在学校呆的发霉了. 思而不学则殆 丽丽说得对,我有奇怪的疑问,大都是思而不学造成的,在我书读不够的情况下想太多,大多等于白想,所以革命没成功,同志仍需努力. 好了废话不说了,由于布总要做一个心电图的玩意,所以做来练练手,总之拿到的UI图如下: 做好的效果如下: 拿到图,先做一些简单的分析.呃.. 背景表格的绘制 心电图的绘制 背景表格的绘制: 首先drawColor黑色,然后用循环来画线. 心电图的绘制: 看样子是path,应该没问题. 于是就大干一番,按照这俩步骤

打造Material Design风格的TabBar

自从Material Design问世以来, 各种Material Design风格的控件层出不穷, 尤其是google家的几个APP更是将Material Design应用到了极致. 最近在使用google photos的时候发现这款软件的Tabbar做的非常不错, 内容突出, Material Design风味很浓, 再者, 我还没有做过一个Material Design风格的Tabbar, 所以萌生了仿照一个google photos这种tabbar的念想, 今天我们就来一步步的去实现一下

开发Google Material Design风格的WPF程序

今天在网上看到了一个Material Design风格的WPF皮肤,看上去还是挺不错的 这个项目是开源的,感兴趣的朋友可以下载试下: https://github.com/ButchersBoy/MaterialDesignInXamlToolkit. 另外,该作者还实现了一个WinForm版本的:https://github.com/IgnaceMaes/MaterialSkin,不过貌似没有WPF版实现的好

[Material Design] 教你做一个Material风格、动画的按钮

前段时间Android L 发布了,相信看过发布会了解过的朋友都为其中的 “Material Design” 感到由衷的惊艳吧!至少我是的. 在惊艳之余感到由衷的遗憾,因为其必须在 ”Android L“ 上才能使用,MD,郁闷啊. 之后便自己想弄一个点击动画试试,此念头一发不可收拾:干脆一不做二不休,就重写了一个 ”MaterialButton“ 控件出来. 在这里不讨论什么是 :“Material Design” . 在这里将给大家分享一下我自己弄的 “Material Design” 风格

[Material Design] 教你做一个Material风格、动画的按钮(MaterialButton)

前段时间Android L 发布了,相信看过发布会了解过的朋友都为其中的 "Material Design" 感到由衷的惊艳吧!至少我是的. 在惊艳之余感到由衷的遗憾,因为其必须在 "Android L" 上才能使用,MD,郁闷啊. 之后便自己想弄一个点击动画试试,此念头一发不可收拾:干脆一不做二不休,就重写了一个 "MaterialButton" 控件出来. 在这里不讨论什么是 :"Material Design" . 在这