话不多说直接进入正题。
本文所有使用到的图标资源下载地址:https://pan.baidu.com/s/1kWhs8mF
使用到的图标、图片都在里面,按照文件夹名即可快速找到需要的资源。
新建项目MaterialDesignTest,一切默认。
一、标题栏Toolbar
要想使用Toolbar,就必须替换掉默认的ActionBar。替换步骤分两步:
1、隐藏ActionBar
2、定义Toolbar
ActionBar根据指定的AppTheme主题来显示的,找到主题的定义位置,修改主题即可达到隐藏ActionBar的目的。打开res/values/styles.xml。
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
将parent指定的主题修改来隐藏ActionBar,两种修改方式:
Theme.AppCompat.NoActionBar //深色主题,即界面主体颜色深色,陪衬色为浅色
Theme.AppCompat.Light.NoActionBar //浅色主题,即界面主体颜色浅色,陪衬色为深色
这里选择浅色主题,即修改parent值为:
parent="Theme.AppCompat.Light.NoActionBar"
接下来就是使用Toolbar,修改activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
</FrameLayout>
为了兼容Android 5.0以前的系统,使用了xmlns:app命名空间,定义了高度为actionBar高度,背景颜色为colorPrimary,设置Toolbar的主题和弹出菜单的主题分别为深色和浅色。
修改MainActivity中的代码:
package com.my.materialdesigntest;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
}
运行程序:
它现在已经不是ActionBar了,而是Toolbar,接下来的任务就是丰富这个标题栏的内容。
1、为标题栏修改标题
打开AndroidManifest.xml文件,找到application标签,加入以下内容。
<application
...
<activity android:name=".MainActivity"
android:label="Fruits">
...
</activity>
</application>
这样MainActivity的标题栏就被修改成了Fruits,不修改默认显示应用程序名,当然也可以在资源文件夹下指定标题,方便日后维护。
2、为标题栏添加按钮
右击res目录→New→Directory,创建menu文件夹。右击menu文件夹→New→Menu resource file,创建toolbar.xml文件夹。修改代码,如下所示:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto" >
<item
android:id="@+id/backup"
android:icon="@drawable/ic_backup"
android:title="Backup"
app:s