Android Material Design 史上最全的材料設計控件大全

主要内容：

本文将要介紹Material design和Support library控件，主要包括TextInputLayout、SwitchCompat、SnackBar、FloatingActionButton、Shadows、Ripples、TabLayout、RecyclerView、Card、NavigationView、BottomSheet、Palette控件。

轉載請注明出處，謝謝！！

http://blog.csdn.net/johnny901114/article/details/51918436

先來看下效果吧。

1. TextInputLayout:

TextInputLayout是用來增強EditText的，使用的時候也是在EditText包裹一層布局，如：

<android.support.design.widget.TextInputLayout
    android:id="@+id/til_username"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp">

    <EditText
        android:id="@+id/et_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="UserName"/>
</android.support.design.widget.TextInputLayout>           

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

1>主要功能特色：

①當裡面的EditText擷取焦點後，EditText的hint文字，會移動到EditText的上面做Label，提示使用者。從上面的gif圖就看出了，我就不贅述了。

②具有錯誤提示機制，當使用者輸入的内容不符合要求時，可以提示使用者，以前我們都是用toast的方式，體驗很差。在布局中設定app:errorEnabled=”true” 在代碼中調用textInputLayout.setError(tip)方法，就可以在EditText的下方顯示錯誤内容。

③具有字數統計功能，很多情況下輸入文字都有文字字數限制，比如輸入回報、描述等。以前我們都是自己去實作，現在好了，有系統控件幫我們實作了。通過下面的配置啟用該功能

app:counterEnabled="true"
app:counterMaxLength="50"
app:errorEnabled="true"           

• 1
• 2
• 3

• 1
• 2
• 3

2> 具體的使用詳解

由于篇幅的原因，下面的講解，我就不每個屬性值都去改下，然後貼出圖檔，這樣也沒有任何必要，希望需要的同學，自己去試試。代碼會在後面有github連結。

紙上得來終覺淺，絕知此事要躬行

①如何更改EditText的下方的橫線的顔色。如下圖所示：

這個顔色的控制是在樣式檔案裡設定的，通過

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

• 1

• 1

② 如何更改擷取焦點後，上面Label的顔色/大小等。如下圖所示：

這個顔色大小等屬性修改通過

app:hintTextAppearance="@style/HintAppearance"           

• 1

• 1

本工程裡的樣式是這樣的：

<style name="HintAppearance" parent="TextAppearance.AppCompat">
    <item name="android:textSize">sp</item>
    <item name="android:textColor">#8bc34a</item>
</style>
           

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

③如何修改錯誤提示的顔色，如下圖所示：

錯誤的樣式通過如下方式修改：

app:errorTextAppearance="@style/ErrorAppearance"           

• 1

• 1

<style name="ErrorAppearance" parent="TextAppearance.AppCompat">
    <item name="android:textSize">sp</item>
    <item name="android:textColor">#a2ced1</item>
</style>
           

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

需要注意的是，該屬性不止改變的是錯誤文字的顔色、大小，還修改了EditText的的那條橫線的顔色。

如果不想在編寫TextInputLayout布局的時候都去設定，還可以通過style檔案去統一設定，如：

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

• 1

• 1

當然，如果你設定了errorTextAppearance同時又設定了textColorError，TextInputLayout會優先使用errorTextAppearance配置的顔色。

④ 字數統計功能，修改錯誤的有顔色和上面是一樣。如何修改

統計字數

的樣式。如下圖：

這裡分兩種情況，一種是沒有超過的情況，另一種是超過字數的情況。

//沒有超過最大字數
app:counterTextAppearance="@style/CounterAppearance"
//超過最大字數
app:counterOverflowTextAppearance="@style/CounterOverflowAppearance"           

• 1
• 2
• 3
• 4

• 1
• 2
• 3
• 4

使用TextInputLayout遇到的一些坑：

① 如果加上字數統計需要在style裡加上textErrorColor，否則超過字數會後會閃退。

② 如果不需要字數統計，且啟用錯誤機制（setErrorEnabled(true)）, 不需要加上textErrorColor（不會閃退）系統會提供一個預設的error color。

當然可以通過textErrorColor來自定義錯誤顔色(error color).

可以使用更為強大的errorTextAppearance來定義錯誤顔色，字型大小等屬性。如果TextInputLayout 同時 設定了textErrorColor和errorTextAppearance ，隻有errorTextAppearance生效.

③ 如果加上字數統計，且同時設定了textErrorColor和errorTextAppearance。

這個時候回出現奇怪的效果，

Label

和

統計

的顔色為textErrorColor的顔色。

EditText的

橫線

和

錯誤文字提示

為errorTextAppearance設定的效果。是以為什麼不加上textErrorColor會閃退，因為超過字數後TextInputLayout需要textErrorColor屬性設定的顔色。

2 SwitchCompat

效果圖我就不上了，文章開頭就已經有了。 這個控件使用也非常簡單。下面就說一下其他相關用法：

//SwitchCompat被豎線隔開
switchCompat.setSplitTrack(false);

//SwitchCompat右邊會出現錯誤提示
switchCompat.setError("error");

//是否顯示文字[預設為 開啟/關閉](當然也可以自定義文字)
switchCompat.setShowText(true);

//自定義文字
switchCompat.setTextOff("Off");
switchCompat.setTextOn("On");

//設定左邊文字和右邊按鈕的距離
switchCompat.setSwitchPadding();

//設定關閉和開啟
switchCompat.setChecked(true/false);


//監聽switchCompat開啟和關閉變化
switchCompat.setOnCheckedChangeListener();

//設定Track圖示
switchCompat.setTrackResource(R.mipmap.ic_back_gray);

//switchCompat設定訓示圖示[但是開啟和關閉都是一個圖示,可以在setOnCheckedChangeListener裡動态設定]
switchCompat.setThumbResource(R.mipmap.ic_back_gray);           

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28

希望有需要的同學，把github上面的工程下載下傳下來，然後打開這些方法，運作看看效果。在這裡我就不貼圖了。

3. SnackBar、FloatingActionButton、Shadows、Ripples

因為這些都比較簡單，我就放在一起說了。

1> SnackBar 使用方法很簡單[和Toast差不多]，如下所示：

//帶按鈕的
Snackbar.make(container, "Snackbar with action", Snackbar.LENGTH_SHORT)
        .setAction("Action", new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(v.getContext(), "Snackbar Action pressed",Toast.LENGTH_SHORT).show();
            }
        }).show();



//純文字的
Snackbar.make(container, "This is Snackbar", Snackbar.LENGTH_SHORT).show();           

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

2> FloatingActionButton

使用方法：

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="16dp"
    android:clickable="true"
    android:src="@null"
    app:backgroundTint="#0091eb"
    app:fabSize="normal"/>           

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

通過Android:src修改圖檔

通過app:backgroundTint修改背景顔色

通過app:fabSize設定大小，隻有兩個選項normal和mini

3> Shadows

在布局中設定陰影

android:elevation="2dp"
app:elevation="2dp" //如果在Toolbar等控件，一定要加上這句，否則設定無效           

• 1
• 2

• 1
• 2

4> Ripple效果

在res目錄下建立drawable-v21. 然後建一個資源檔案 如下所示：

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#dcdcdc"> //android:color 按下去的效果
    <item> //預設效果
        <shape>
            <solid android:color="#0091eb" />
            <corners android:radius="2dp" />
        </shape>
    </item>
</ripple>           

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

需要注意的是，需要在drawable目錄下建立同樣名稱的資源檔案，否則在低版本上運作去閃退，因為找不到該檔案，drawable-v21隻在android5.0或以上系統有效。

4 Toolbar+TabLayout+RecyclerView+Card

1> Toolbar的使用

在布局中：

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    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="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:title="@string/app_name"/>           

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

在Java代碼中設定Toolbar相關屬性

Toolbar toolbar = (Toolbar) view.findViewById(R.id.toolbar);
if (toolbar != null) {
    toolbar.setNavigationIcon(R.mipmap.ic_back_white);//設定傳回按鈕的icon
    if (title != null) {
        toolbar.setTitle(title);//設定title
    }
    AppCompatActivity activity = (AppCompatActivity) getActivity();
    activity.setSupportActionBar(toolbar);
    toolbar.setNavigationOnClickListener(new View.OnClickListener() { //傳回按鈕的點選事件
        @Override
        public void onClick(View v) {
            finish();
        }
    });
activity.getSupportActionBar().setDisplayHomeAsUpEnabled(true);//顯示傳回按鈕
}
           

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

如何設定Toolbar按鈕

首先在menu檔案夾下建立菜單檔案人，如：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/fixed"
        android:title="Fixed"/>
    <item
        android:id="@+id/scroll"
        android:title="Scrollable"/>
</menu>
           

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

//設定菜單
@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
    inflater.inflate(R.menu.tab_menu, menu);
    super.onCreateOptionsMenu(menu, inflater);
}


//處理菜單的點選事件
@Override
public boolean onOptionsItemSelected(MenuItem menuItem) {
    switch (menuItem.getItemId()) {
        case R.id.fixed:
            tabLayout.setTabMode(TabLayout.MODE_FIXED);
            break;
        case R.id.scroll:
            tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
            break;
    }
    return super.onOptionsItemSelected(menuItem);
}
           

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23

如果是在fragment使用menu，需要在onCreate方法裡調用 setHasOptionsMenu(true);

@Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setHasOptionsMenu(true);
    }
           

• 1
• 2
• 3
• 4
• 5
• 6

• 1
• 2
• 3
• 4
• 5
• 6

2> TabLayout

TabLayout屬于design支援包下，是以需要在gradle加載相關配置：

compile 'com.android.support:design:23.4.0'           

• 1

• 1

TabLayout一般和ViewPager一起結合使用：

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    style="@style/TabLayoutStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    app:tabContentStart="50dp"
    app:tabMode="scrollable"/>

<android.support.v4.view.ViewPager
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
           

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

使用其實非常簡單，關鍵就一個方法：

tabLayout.setupWithViewPager(viewPager);           

• 1

• 1

完整代碼如下所示：

viewPager.setAdapter(new ViewPagerAdapter(
        Arrays.asList("Tab1", "Tab2", "Tab3", "Tab4", "Tab5", "Tab6"),
        Arrays.asList(new RecyclerViewFragment(), new RecyclerViewFragment(),
                new RecyclerViewFragment(), new RecyclerViewFragment(),
                new RecyclerViewFragment(), new RecyclerViewFragment()

        )));
tabLayout.setupWithViewPager(viewPager);           

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

TabLayout還可以設定滾動和螢幕填充。

通過以下兩個方法設定即可：

tabLayout.setTabMode(TabLayout.MODE_FIXED);
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);           

• 1
• 2

• 1
• 2

效果圖我就不貼出來了。

在TabLayout.MODE_SCROLLABLE模式下還可以設定左邊的padding：

app:tabContentStart=”50dp”

下面是

Adapter

代碼

class ViewPagerAdapter extends FragmentStatePagerAdapter {
private List<String> list;
private List<? extends Fragment> fs;

public ViewPagerAdapter(List<String> list, List<? extends Fragment> fs) {
    super(getChildFragmentManager());
    this.list = list;
    this.fs = fs;
}



@Override
public int getCount() {
    return list.size();
}



@Override
public Fragment getItem(int position) {
    return fs.get(position);
}



@Override

public Object instantiateItem(ViewGroup container, int position) {
    return super.instantiateItem(container, position);
}



@Override
public CharSequence getPageTitle(int position) {
    return list.get(position);
}
}           

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39

3> RecyclerView

RecyclerView 是ListView的替代者，使用方法也相似，隻不過方法名都替我們規範好了。

RecyclerView功能方面比ListView更加強大。比如動畫、橫向滾動、瀑布流等。

從使用角度上講，RecyclerView不僅要設定adapter，還要設定layoutManager，layoutManager也就是相對于listView強大的地方。

系統内置的LayoutManager有：

LinearLayoutManager

、

GridLayoutManager

、

StaggeredGridLayoutManager

下面具體說下用法：

recyclerView recyclerView = (RecyclerView) view.findViewById(R.id.recycler_view);

LinearLayoutManager linearLayoutManager = new LinearLayoutManager(recyclerView.getContext());

linearLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);

recyclerView.setHasFixedSize(true);

recyclerView.setLayoutManager(linearLayoutManager);

recyclerView.setAdapter(new RecyclerAdapter(list));
           

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

下面是

adapter

public class RecyclerAdapter extends RecyclerView.Adapter {
    private List<String> list;
    public RecyclerAdapter(List<String> list) {
        this.list = list;
    }
    //建立Holder和ListView中一樣。
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new ItemViewHolder(LayoutInflater.from(parent.getContext())
                .inflate(R.layout.item_card_view, parent, false));
    }
    //綁定資料
    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        ItemViewHolder itemViewHolder = (ItemViewHolder) holder;
        itemViewHolder.tvTitle.setText(list.get(position));
        itemViewHolder.tvDesc.setText(list.get(position) + " this is description");
    }

    @Override
    public int getItemCount() {
        return list.size();
    }



    static class ItemViewHolder extends RecyclerView.ViewHolder {
        TextView tvTitle, tvDesc;
        public ItemViewHolder(View itemView) {
            super(itemView);
            tvTitle = (TextView) itemView.findViewById(R.id.tv_vibrant);
            tvDesc = (TextView) itemView.findViewById(R.id.title_desc);
        }
    }
}
           

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36

需要說明的地方已經注釋了，就不贅述了！

4> CardView

CardView屬于V7包下，是以需要加入如下配置：

compile 'com.android.support:cardview-v7:23.4.0'           

• 1

• 1

CardView使用非常簡單，配置下就可以了：

<android.support.v7.widget.CardView
    android:id="@+id/card_view"
    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="wrap_content"
    android:background="#ffffff"
    app:cardCornerRadius="2dp"
    app:cardElevation="3dp"/>           

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

兩個重要的屬性：

app:cardCornerRadius=”2dp” 設定圓角

app:cardElevation=”3dp” 設定陰影

5 NavigationView

NavigationView主要是結合DrawerLayout來使用的。

下來看下布局：

<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawer_layout"
    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:fitsSystemWindows="true">

    <include layout="@layout/navigation_container_view"/>
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/app_header"
        app:insetForeground="@color/colorPrimaryDark"
        app:menu="@menu/navigation_menu"/>
</android.support.v4.widget.DrawerLayout>           

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

從上面的布局可以看出NavigationView 分兩部分，一個是header，一個是menu。

① 如何修改icon和text的顔色

從文章開頭的GIF可以看到，背景是藍色的，menu的按鈕和文字是黑色的，怎麼修改呢？

可以通過如下配置修改：

app:itemIconTint="#2196f3"  給icon着色
app:itemTextColor="#009688" menu文字顔色
app:itemBackground="@drawable/my_ripple" 設定menu item的背景           

• 1
• 2
• 3

• 1
• 2
• 3

效果如下：

②如何修改 Toolbar 左邊

漢堡圖示

的顔色

通過開頭的那個GIF圖可以看到 ，Toolbar左邊的icon是黑色的，這個icon網上也叫

hamburger icon

，形似漢堡，是以網上很多人叫做hamburger icon。

通過一個樣式就可以修改了：

<style name="DrawerArrowStyle" parent="@style/Widget.AppCompat.DrawerArrowToggle">
    <item name="spinBars">true</item>
    <item name="color">@android:color/white</item> //custom color
</style>

//然後在style中加上就可以了
<item name="drawerArrowStyle">@style/DrawerArrowStyle</item>           

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• 1
• 2
• 3
• 4
• 5
• 6
• 7

下面是完整的menu布局：

<group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_search1"
            android:checked="true"
            android:icon="@mipmap/ic_search_black"
            android:title="Search1"/>
        <item
            android:id="@+id/nav_search2"
            android:checked="true"
            android:icon="@mipmap/ic_search_black"
            android:title="Search2"/>
        <item
            android:id="@+id/nav_search3"
            android:icon="@mipmap/ic_search_black"
            android:title="Search3"
            app:actionLayout="@layout/menu_action_layout"/>
        <item
            android:id="@+id/nav_search4"
            android:icon="@mipmap/ic_search_black"
            android:title="Search4"/>
        <item
            android:id="@+id/nav_search5"
            android:icon="@mipmap/ic_search_black"
            android:title="Search5"
            android:visible="false"/>
    </group>
    <item
        android:id="@+id/navigation_subheader"
        android:title="SubHeader">
        <menu>
            <item
                android:id="@+id/nav_search6"
                android:checked="true"
                android:icon="@mipmap/ic_search_black"
                android:title="Search6"/>
            <item
                android:id="@+id/nav_search7"
                android:checked="true"
                android:icon="@mipmap/ic_search_black"
                android:title="Search7"/>
        </menu>
    </item>
    <group android:id="@+id/aligned_items">
        <item
            android:id="@+id/nav_search8"
            android:icon="@mipmap/ic_search_black"
            android:title="Search8"/>
        <item
            android:id="@+id/nav_search9"
            android:icon="@mipmap/ic_search_black"
            android:title="Search9"/>
    </group>
</menu>           

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53

效果如下：

③ 修改menu裡的 SubHeader 顔色

從上面的圖我們發現SubHeader是黑色的，怎麼修改顔色, 加上下面的配置即可：

<item name="android:textColorSecondary">#ffffff</item>           

• 1

• 1

BottomSheet

BottomSheet 其實就是個Behavior，并且這個Behavior内置的，無需自己定義，使用非常簡單，隻需要在布局的時候配置behavior即可，從這裡可以看出，behavior的強大了吧，後面有時間研究下自定behavior，然後再來和大家一起讨論、分享。

Palette

Palette 中文意思問，調色器。就是你給它一張圖檔，通過palette可以擷取各種顔色。

其實Google官方已經給出了，很好的例子，在google demo裡面做出了非常詳解的使用示例，我這裡隻做抛磚引玉的作用，需要的同學可以去github上去下載下傳google demo。我這裡給下google的效果圖：

github源碼下載下傳位址