Android 5.X 系列開始使用新的設計風格Material Design來統一整個Android系統的介面設計風格。

Material Design 主題

Material Design 現在有三種預設的主題可以設定，程式碼如下：

@android:style/Theme.Material
@android:style/Theme.Material.Light
@android:style/Theme.Material.Light.DarkActionBar

同時，Android 5.X 提出了Color Palette的概念，讓開發者可以自己設定系統區域的顏色，是整個app的顏色風格和系統的顏色風格保持統一。

通過如下所示程式碼，可以通過使用自定義Style的方式來建立自己的Color Palette顏色主題，從而實現不同的顏色風格。

    <!-- Base application theme. -->
    <style name="AppTheme" parent="android:Theme.Material.Light">
        <!-- Customize your theme here. -->

        <!--Main theme colors-->
        <!--your app branding color for the app bar-->
 

        <item name="colorPrimary">@color/colorPrimary</item>
        <!--darker variant for the status bar and contextual app bars-->
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <!--theme UI controls like checkboxes and text fields-->
 

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

Palette

Android 5.X 創新的使用Palette來提取顏色，從而讓主題能夠動態適應當前頁面的色調，做到整個app顏色基調和諧統一。

Android內建了幾種提取色調的種類，如下所示：

• Vibrant（充滿活力的）
• Vibrant dark（充滿活力的黑）
• Vibrant light（充滿活力的亮）
• Muted（柔和的）
• Muted dark（柔和的的黑）
• Muted light（柔和的的亮）

使用Palette的API，能夠讓我們從bitmap中獲取對應的色調，修改當前的主題色調。

使用Palette首先需要在Android Studio 中引用相關的依賴，在專案列表中點選F4，然後在Module Setting的Dependencies選項卡中新增com.android.support:palette-v7:24.0.0引用，重新Sync專案即可。可以通過傳遞一個Bitmap物件給Palette，並呼叫它的Palette.generate()靜態方法或者Palette.generateAsync()方法來建立一個Palette。接下來，就可以使用getter方法來檢索相應的色調。

下面的例子演示瞭如何通過載入的圖片的柔和色調來改變狀態列和Actionbar的色調，程式碼如下所示：

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.test);
        // 建立Palette物件
        Palette.generateAsync(bitmap,
                new Palette.PaletteAsyncListener() {
                    @Override
                    public void onGenerated(Palette palette) {
                        // 通過Palette來獲取對應的色調
                        Palette.Swatch vibrant = palette.getDarkVibrantSwatch();
                        // 將顏色設定給相應的元件
                        getActionBar().setBackgroundDrawable(new ColorDrawable(vibrant.getRgb()));
                        Window window = getWindow();
                        window.setStatusBarColor(vibrant.getRgb());
                    }
                });
    }
}

效果圖如下：

檢視與陰影

Material Design 的一個很重要的特點就是擬物扁平化。通過展現生活中的材質效果、恰當地使用陰影和光線，配合完美的動畫效果，模擬出一個動感十足又美麗大膽的視覺效果。

以往的Android View通常具有兩個屬性——X和Y，而在Android 5.X 中，Google為其增加了一個新的屬性——Z，對應垂直方向上的高度變化。

在Android 5.X 中，View的Z值由兩部分組成，elevation和translationZ(它們都是Android 5.X 新引入的屬性)。elevation是靜態的成員，translationZ可以在程式碼中使用來實現動畫效果，它們的關係如下所示：

Z = elevation + translationZ

通過在XML佈局中使用如下所示程式碼來靜態設定View的檢視高度。

android:elevation="XXdp"

通過下面的程式碼，演示了不同檢視高度所顯示效果的不同，XML程式碼如下所示：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        android:background="@mipmap/ic_launcher"/>

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        android:elevation="2dp"
        android:background="@mipmap/ic_launcher"/>

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        android:elevation="10dp"
        android:background="@mipmap/ic_launcher"/>

</LinearLayout>

效果圖如下：

在程式中，同樣可以使用如下程式碼來動態改變檢視高度。

view.setTranslationZ(XXX);

通常也會使用屬性動畫來為檢視高度改變的時候增加一個動畫效果，程式碼如下所示：

                if (mFlag) {
                    view.animate().translationZ(100);
                    mFlag = false;
                } else {
                    view.animate().translationZ(0);
                    mFlag = true;
                }

Tinting 和 Clipping

Android 5.X 在對影象的操作上增加了更多的新功能，比如Tinting（著色）和Clipping（裁剪）。

Tinting（著色）

Tinting的使用非常簡單，只要在XML中配置好tint和tintMode就可以了。在下面的程式碼中，設定了幾種不同的tint和tintMode來演示Tinting效果，XML程式碼如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:elevation="5dp"
        android:layout_margin="5dp"
        android:src="@mipmap/ic_launcher" />

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:elevation="5dp"
        android:layout_margin="5dp"
        android:src="@mipmap/ic_launcher"
        android:tint="@android:color/holo_blue_bright"/>

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:elevation="5dp"
        android:layout_margin="5dp"
        android:src="@mipmap/ic_launcher"
        android:tint="@android:color/holo_blue_bright"
        android:tintMode="add"/>

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:elevation="5dp"
        android:layout_margin="5dp"
        android:src="@mipmap/ic_launcher"
        android:tint="@android:color/holo_blue_bright"
        android:tintMode="multiply"/>

</LinearLayout>

效果圖如下：

Tint通過修改影象的Alpha遮罩來修改影象的顏色，從而達到重新著色的目的。

Clipping（裁剪）

Clipping可以改變一個檢視的外形，要使用Clipping，首先需要使用ViewOutlineProvider來修改outline，然後再通過setOutlineProvider將outline作用給檢視。

在下面的例子中，將一個正方形的TextView通過Clipping裁剪成一個圓角正方形和一個圓，XML程式碼如下所示：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_rect"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:elevation="1dp"
        android:layout_margin="5dp" />

    <ImageView
        android:id="@+id/tv_cicle"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:elevation="1dp"
        android:layout_margin="5dp" />

</LinearLayout>

程式程式碼如下：

public class ClippingActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_clipping);

        View view1 = findViewById(R.id.tv_rect);
        View view2 = findViewById(R.id.tv_cicle);

        //獲取Outline
        ViewOutlineProvider viewOutlineProvider1 = new ViewOutlineProvider() {

            @Override
            public void getOutline(View view, Outline outline) {
                //修改outline為特定的形狀
                outline.setRoundRect(0, 0, view.getWidth(), view.getHeight(), 30);
            }
        };
        //獲取Outline
        ViewOutlineProvider viewOutlineProvider2 = new ViewOutlineProvider() {

            @Override
            public void getOutline(View view, Outline outline) {
                //修改outline為特定的形狀
                outline.setOval(0, 0, view.getWidth(), view.getHeight());
            }
        };

        //重新設定形狀
        view1.setOutlineProvider(viewOutlineProvider1);
        view2.setOutlineProvider(viewOutlineProvider2);
    }

}

效果圖如下：

程式碼地址