Android Material Design初探--启用MD主题

Posted on Edited on In ,

Android Material Design是在android L引入的，引入Material Design之后，android重构了很多东西，比如Material Theme , Widgets , 自定义Shadows， Vector drawables，和自定义动画。

Material Design提供了比较多的自定义的颜色属性，我们这里主要用到其中的五个：

colorPrimaryDark 通常用来体现状态栏，在MD风格中，该颜色为最主色中最深的颜色；

colorPrimary 通常用来体现APP的主体颜色，这个颜色通常是toolbar的背景色；

textColorPrimary 这个是主体文字的颜色，通常用来表示toolbar当中文字的颜色；

windowBackground 这个是APP的背景色；

navigationBarColor 这个表示底部导航条的颜色（这个导航条是android系统当中的导航条）。

image

Notice：如果需要对MD的颜色设计有了解，可以参照谷歌官方文档

基本常识有了解之后，开始敲代码了。

1，正常的创建一个工程（推荐IDE为android studio）；

2，为当前APP定义一套基础颜色。在项目目录res/values下找到colors.xml或者新建该文件（事实上，这个文件的名字不是很重要，文件类型选择android xml value种类就好），在文件中写入你的颜色值

<?``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``>
3，使用刚才定义好的颜色，为当前APP设定主体。打开文件res/values/styles.xml，根据个人需要定义颜色值，EG：

<resources>


    <!-- Base application theme. -->

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

        <!-- Customize your theme here. -->

    </style>


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

        <item name="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>

 
4，在res/values-v21下新建样式文件style.xml。写入如下样式信息

<resources>


    <!-- Base application theme. -->

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

        <!-- Customize your theme here. -->

        <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>

*在value-v21目录下的文件是专门给android lollipop使用的。

5，使APP使用我们创建的主题，修改androidManifest.xml 文件中，application的android:theme 值为AppTheme（我们刚才设定的主题）
> android:theme=”@style/AppTheme”

设置了上面的信息之后，app的主题会使用MD风格，接下来，我们需要给APP添加Toolbar（toolbar是action bar的升级版，这货更灵活、更好用）。

1，给toolbar创建一个布局文件，命名为toolbar.xml（当然，这个文件名是可以随意的），其中该xml布局文件的根节点为android.support.v7.widget.Toolbar

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

<android.support.v7.widget.Toolbar

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

    xmlns:local="http://schemas.android.com/apk/res-auto"

    android:id="@+id/toolbar"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:minHeight="?attr/actionBarSize"

    android:background="?attr/colorPrimary"

    local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

    local:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

2，将toolbar include到主activity的布局文件（activity_main.xml ）当中

<RelativeLayout

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

    android:layout_width="match_parent"

    android:layout_height="match_parent" >


    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_alignParentTop="true"

        android:orientation="vertical">

        <include android:id="@+id/toolbar" layout="@layout/toolbar" />

    </LinearLayout>


</RelativeLayout>

3，网上下载到搜索图标，然后将其导入到项目当中。

导入方法为：在资源目录当中右键->new->image assets 。在新的窗口中设定必要的信息，asset type 为action bar and tab icons（实际生产当中，请根据自己的需求来），在image file当中选择你下载好的图片，在resource name当中给图片起名字。

image

根据实际情况，将文件分别保存为符合android设计规范的各种尺寸

image

保存完了之后，同步下文件目录，你会看到如图的效果，这就说明你导入成功了。

image

4，图标导入成功之后，我们来编辑菜单文件。

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

    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item

        android:id="@+id/action_search"

        android:title="@string/action_search"

        android:orderInCategory="100"

        android:icon="@drawable/ic_action_search"

        app:showAsAction="ifRoom" />


    <item

        android:id="@+id/action_settings"

        android:title="@string/action_settings"

        android:orderInCategory="100"

        app:showAsAction="never" />

</menu>

5，编辑MainActivity.java 。

–让当前activity继承自AppCompatActivity ;

–让toolbar支持actionbar的相关属性；

–根据需要选择性复写onCreateOptionsMenu 和 onOptionsItemSelected

package cn.com.httpbin.app.inbox.activity;


import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.support.v7.widget.Toolbar;

import android.view.Menu;

import android.view.MenuItem;


import cn.com.httpbin.app.inbox.R;


public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;


    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);


        toolbar = (Toolbar) findViewById(R.id.toolbar);

        setSupportActionBar(toolbar);

        getSupportActionBar().setDisplayShowHomeEnabled(true);

    }


    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        // Inflate the menu; this adds items to the action bar if it is present.

        getMenuInflater().inflate(R.menu.menu_main, menu);

        return true;

    }


    @Override

    public boolean onOptionsItemSelected(MenuItem item) {

        // Handle action bar item clicks here. The action bar will

        // automatically handle clicks on the Home/Up button, so long

        // as you specify a parent activity in AndroidManifest.xml.

        int id = item.getItemId();


        //noinspection SimplifiableIfStatement

        if (id == R.id.action_settings) {

            return true;

        }


        return super.onOptionsItemSelected(item);

    }

}

如图所示：：：

image