Android Material Design Toolbar and Palette practices, androidpalette

Android Material Design Toolbar and Palette practices, androidpalette

Reprinted please indicate the source: http://blog.csdn.net/bbld_/article/details/41439715 [Rocko's bog]

Preface

We all know that Marterial Design is a brand new UI design specification launched by Google. If you do not know much about it, you can refer to the unofficial Chinese instruction manual of Material Design, or the translations of my previous Material Design are not as simple as Google's Android Holo style. Material Design is now highly valued by Google. After the launch of this brand-new Design language, our apps on Android soon used the brand-new Design of Material Design, such as the Play store, Google Map, Google +, and relatively new Inbox; the visual experience on the Web is also very Material. The most helpful part is the official introduction of Material Design (self-prepared ladder). Google Apps on IOS are also slowly advancing. So how can I keep up with Google's pace as an Android developer? Here we will use the Toolbar and Palette, which were launched after API21.ThingsOf course, Google has already put them in the v7 library, and the use of Material Design to Design apps is not limited to these two aspects. The previous Material Design translations have clearly known how to complete the Design. In addition to Toolbar and Palette, this article also describes the use of Drawer in Toolbar.

Toolbar

What is a Toolbar? Let's talk about its official introduction. A Toolbar is a Standard Toolbar for the application content. It can be said that it is an upgraded version of Actionbar. The two are not independent of each other. To use a Toolbar, you must link it with the ActionBar. The most obvious aspect of the Actionbar Toolbar is that it becomes very free and can be placed everywhere, because it is defined and used as a ViewGroup, so simply using ActionBar is a little outdated, some of its methods have been marked out.

So how can we use it? First, we need to use the v7 support package, and then define the theme style of the program. In the style, we need to remove the Actionbar first, a bit like trying to practice it, you must first feel like yourself. As follows:

/Res/values/styles. xml

<Resources xmlns: android = "http://schemas.android.com/apk/res/android"> <style name = "AppBaseTheme" parent = "Theme. AppCompat. Light. NoActionBar"> <! -- Toolbar (actionbar) color --> <item name = "colorPrimary"> # 00006ff </item> <! -- Status Bar color --> <item name = "colorPrimaryDark"> # 3A5FCD </item> <! -- Background color of the window --> <item name = "android: windowBackground"> @ android: color/white </item> <! -- SearchView --> <item name = "searchViewStyle"> @ style/MySearchViewStyle </item> </style> <style name = "AppTheme" parent = "@ style/AppBaseTheme"> </style> <style name = "MySearchViewStyle" parent = "Widget. appCompat. searchView "> <! -- Background for the search query section (e.g. editText) <item name = "queryBackground">... </item> Background for the actions section (e.g. voice, submit) <item name = "submitBackground">... </item> Close button icon <item name = "closeIcon">... </item> Search button icon <item name = "searchIcon">... </item> Go/commit button icon <item name = "goIcon">... </item> Voice search button icon <item name = "voiceIcon">... </item> Commit icon shown in the query suggestion row <item name = "commitIcon">... </item> Layout for query suggestion rows <item name = "suggestionRowLayout">... </item> --> </style> </resources>

The simplest way to remove an Actionbar is to directly inherit the topic of the NoActionBar. The color attribute description is as clear as the figure below:

In addition, SearchView provides more customization and more styles for setting in AppCompat. However, you can use the default one.

We can also set the default color of the navigation bar at the bottom of the default for the system version of API21 in the values-v21:

/Res/values-v21/styles. xml

<Resources xmlns: android = "http://schemas.android.com/apk/res/android"> <style name = "AppTheme" parent = "@ style/AppBaseTheme"> <! -- Color of the bottom navigation bar --> <item name = "android: navigationBarColor"> # 00006ff </item> </style> </resources>

Set the next step of the topic:
Define a Toolbar in layout of xml:

/Layout/toolbar. xml

<?xml version="1.0" encoding="utf-8"?><android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res/com.example.toolbar"    android:id="@+id/toolbar"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:background="?attr/colorPrimary"    android:minHeight="?attr/actionBarSize"    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"    app:theme="@style/ThemeOverlay.AppCompat.ActionBar" ></android.support.v7.widget.Toolbar>

We use toolbar as an independent layout xml to include toolbar in other la S. We can see that we can set the attributes of the Toolbar here. The following attributes are not described in detail.

Then, you can include it in the activity layout. Of course, you usually put it on the top. You can put it in the middle, bottom, or other places, it can be seen that its degree of freedom is very high. The next step is the code. In onCreate:

MToolbar = (Toolbar) findViewById (R. id. toolbar); // toolbar. setLogo (R. drawable. ic_launcher); mToolbar. setTitle ("Rocko"); // The title text must be before setsuppactionactionbar, otherwise it will be invalid // toolbar. setSubtitle ("subtitle"); setsuppactionactionbar (mToolbar);/* These are also set through ActionBar. Note that after setsuppactionactionbar (toolbar, otherwise, an error is reported * // getSupportActionBar (). setTitle ("title"); // getsuppactionactionbar (). setSubtitle ("subtitle"); // getSupportActionBar (). setLogo (R. drawable. ic_launcher);/* The Menu listening can be set in the toolbar, or the onOptionsItemSelected callback method of the Activity can be used to process */mToolbar. setOnMenuItemClickListener (new Toolbar. onMenuItemClickListener () {@ Overridepublic boolean onMenuItemClick (MenuItem item) {switch (item. getItemId () {case R. id. action_settings: Toast. makeText (MainActivity. this, "action_settings", 0 ). show (); break; case R. id. action_share: Toast. makeText (MainActivity. this, "action_share", 0 ). show (); break; default: break;} return true ;}});

The key point above is setSupportActionBar (mToolbar); the Toolbar is used as the ActionBar to set. Menu can still be used and processed like ActionBar:

Res/menu/main. xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    tools:context=".MainActivity" >    <item        android:id="@+id/ab_search"        android:orderInCategory="80"        android:title="action_search"        app:actionViewClass="android.support.v7.widget.SearchView"        app:showAsAction="ifRoom"/>    <item        android:id="@+id/action_share"        android:orderInCategory="90"        android:title="action_share"        app:actionProviderClass="android.support.v7.widget.ShareActionProvider"        app:showAsAction="ifRoom"/>    <item        android:id="@+id/action_settings"        android:orderInCategory="100"        android:title="action_settings"        app:showAsAction="never"/></menu>

In this step, the program looks like:
PS. Genymotion can use a simulator of 5.0.

I can feel that this is no different from ActionBar. Ah, how did the menu icon on the left come out? In fact, it hasn't been processed yet. He is Navigation drawer, using the new version of v4 and v7 libraries, the drawer obviously has a cool Interactive Animation (see the final gif image ). So how can we use drawer in Toolbar after using Toolbar. The following is also followed by the Code.

/Layout/activity_main.xml

<LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android" xmlns: tools = "http://schemas.android.com/tools" android: layout_width = "match_parent" android: layout_height = "match_parent" android: orientation = "vertical" tools: context = "com. example. toolbar. mainActivity "> <include layout =" @ layout/toolbar "/> <android. support. v4.widget. drawerLayout android: id = "@ + id/drawer" android: layout_width = "ma Tch_parent "android: layout_height =" match_parent "> <! -- Content interface --> <LinearLayout android: layout_width = "match_parent" android: layout_height = "match_parent" android: orientation = "vertical"> <com. example. toolbar. widget. pagerSlidingTabStrip android: id = "@ + id/tabs" android: layout_width = "match_parent" android: layout_height = "48dip"> </com. example. toolbar. widget. pagerSlidingTabStrip> <android. support. v4.view. viewPager android: id = "@ + id/pager" android: layout_widt H = "match_parent" android: layout_height = "match_parent"> </android. support. v4.view. ViewPager> </LinearLayout> <! -- Slide menu content --> <LinearLayout android: id = "@ + id/drawer_view" android: layout_width = "match_parent" android: layout_height = "match_parent" android: layout_gravity = "start" android: background = "@ drawable/drawer" android: orientation = "vertical" android: padding = "8dp"> <TextView android: layout_width = "match_parent" android: layout_height = "match_parent"/> </LinearLayout> </android. support. v4.widget. drawerLayout> </LinearLayout>

You can ignore Pager first, which will be discussed later. For the sake of simplicity, the content of the slide menu is presented with images. You can see that the layout settings are similar. The differences are in the Code:

getSupportActionBar().setDisplayHomeAsUpEnabled(true);mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer);mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.drawer_open,R.string.drawer_close);mDrawerToggle.syncState();mDrawerLayout.setDrawerListener(mDrawerToggle);

First, display the icon settings, and then set ActionBarDrawerToggle as the listener of DrawerLayout, which is relatively simple. effect:

What if I need to overwrite the drawer toolbar? You just need to adjust the layout of the interface slightly, and the effect will not be pasted (brain fill, or change the source code to setContentView for running ):

<Android. support. v4.widget. drawerLayout xmlns: android = "http://schemas.android.com/apk/res/android" xmlns: tools = "http://schemas.android.com/tools" android: id = "@ + id/drawer" android: layout_width = "match_parent" android: layout_height = "match_parent" android: fitsSystemWindows = "true"> <LinearLayout android: layout_width = "match_parent" android: layout_height = "match_parent" android: orientation = "vertical" S: context = "com. example. toolbar. MainActivity"> <include layout = "@ layout/toolbar"/> <! -- Content interface --> <LinearLayout android: layout_width = "match_parent" android: layout_height = "match_parent" android: background = "@ drawable/content" android: orientation = "vertical"> <com. example. toolbar. widget. pagerSlidingTabStrip android: id = "@ + id/tabs" android: layout_width = "match_parent" android: layout_height = "48dip" android: visibility = "invisible"> </com. example. toolbar. widget. pagerSlidingTabStrip> <android. Support. v4.view. viewPager android: id = "@ + id/pager" android: layout_width = "match_parent" android: layout_height = "match_parent" android: visibility = "invisible"> </android. support. v4.view. viewPager> </LinearLayout> <! -- Slide menu content --> <LinearLayout android: id = "@ + id/drawer_view" android: layout_width = "match_parent" android: layout_height = "match_parent" android: layout_gravity = "start" android: background = "@ drawable/drawer" android: orientation = "vertical" android: clickable = "true" android: padding = "8dp"> <TextView android: layout_width = "match_parent" android: layout_height = "match_parent"/> </LinearLayout> </android. support. v4.widget. drawerLayout>

After pulling out the menu, you can click the Toggle button. In the solution, set the slide layout to clickable = "true ". The problem that a slide menu does not need to overwrite the Toolbar seems to be found in the examples provided by Google. I think it makes no sense to overwrite the animation of the Toggle button? Or are there other considerations? For the moment, we can just watch Google Play. The new version of Play is not covered.

Palette

Before talking about Palette, let's talk about the Pager mentioned above. ViewPager should be known to everyone. Generally, ViewPager, xxxTabStrip, and Fragment come together. The xxxTabStrip here uses PagerSlidingTabStrip on Github. When our Pager switchover is accompanied by the change in Fragment, the content in Fragment is generally different, so the general visual effects in each Fragment are also different, therefore, we can use Palette to extract the Dominant Color of Fragment. What is the color used in Fragment to extract the color of Palatte? It depends on your own situation. For example, in this demo, Fragment is a TextView and sets a background for Fragment. Then, I can extract the background image to Palette.

After talking about the above section, you basically know that Palatte is used to extract color from Bitmap, and then set the color to title and content.

First paste the code of the Pager part:

Private void initViews () {mToolbar = (Toolbar) findViewById (R. id. toolbar); // toolbar. setLogo (R. drawable. ic_launcher); mToolbar. setTitle ("Rocko"); // The title text must be before setsuppactionactionbar, otherwise it will be invalid // toolbar. setSubtitle ("subtitle"); setsuppactionactionbar (mToolbar);/* These are also set through ActionBar. Note that after setsuppactionactionbar (toolbar, otherwise, an error is reported * // getSupportActionBar (). setTitle ("title"); // getsuppactionactionbar (). setSubtitle ("subtitle"); // getSupportActionBar (). setLogo (R. drawable. ic_launcher);/* The Menu listening can be set in the toolbar, or it can be processed using the following two callback methods like ActionBar */mToolbar. setOnMenuItemClickListener (new Toolbar. onMenuItemClickListener () {@ Overridepublic boolean onMenuItemClick (MenuItem item) {switch (item. getItemId () {case R. id. action_settings: Toast. makeText (MainActivity. this, "action_settings", 0 ). show (); break; case R. id. action_share: Toast. makeText (MainActivity. this, "action_share", 0 ). show (); break; default: break;} return true ;}}); getsuppactionactionbar (). setDisplayHomeAsUpEnabled (true);/* findView */mDrawerLayout = (DrawerLayout) findViewById (R. id. drawer); mDrawerToggle = new ActionBarDrawerToggle (this, mDrawerLayout, mToolbar, R. string. drawer_open, R. string. drawer_close); mDrawerToggle. syncState (); mDrawerLayout. setDrawerListener (mDrawerToggle); mpagerslanguingtabstrip = (pagerslanguingtabstrip) findViewById (R. id. tabs); mViewPager = (ViewPager) findViewById (R. id. pager); mViewPager. setAdapter (new MyPagerAdapter (getSupportFragmentManager (); mPagerSlidingTabStrip. setViewPager (mViewPager); mPagerSlidingTabStrip. setOnPageChangeListener (new OnPageChangeListener () {@ Overridepublic void onPageSelected (int arg0) {colorChange (arg0);} @ Overridepublic void merge (int arg0, float arg1, int arg2) {}@ Overridepublic void onPageScrollStateChanged (int arg0) {}}); initTabsValue () ;}/ *** mPagerSlidingTabStrip default configuration **/private void initTabsValue () {// bottom cursor color mpagerslanguingtabstrip. setIndicatorColor (Color. BLUE); // tab split line color mPagerSlidingTabStrip. setDividerColor (Color. TRANSPARENT); // tab background mPagerSlidingTabStrip. setBackgroundColor (Color. parseColor ("# 00006ff"); // The Bottom Line Height of the tab. setUnderlineHeight (int) TypedValue. applyDimension (TypedValue. COMPLEX_UNIT_DIP, 1, getResources (). getDisplayMetrics (); // The height of the cursor mPagerSlidingTabStrip. setIndicatorHeight (int) TypedValue. applyDimension (TypedValue. COMPLEX_UNIT_DIP, 5, getResources (). getDisplayMetrics (); // The selected text color mPagerSlidingTabStrip. setSelectedTextColor (Color. WHITE); // The normal text color mPagerSlidingTabStrip. setTextColor (Color. BLACK );}

These are some basic settings. Where can we start working with Palette? It's just when we switch the tab. The onPagerSelect method contains 45 rows of the above Code. He did this:

/*** UI color change */@ SuppressLint ("NewApi") private void colorChange (int position) {// BitmapBitmap bitmap = BitmapFactory used to extract the color. decodeResource (getResources (), SuperAwesomeCardFragment. getBackgroundBitmapPosition (position); // part of the Palette. generateAsync (bitmap, new Palette. paletteAsyncListener () {/*** callback method after extraction */@ Overridepublic void onGenerated (Palette palette) {Palette. swatch vibrant = palette. GetVibrantSwatch ();/* UI color uniformity processing, looks more Material */mPagerSlidingTabStrip. setBackgroundColor (vibrant. getRgb (); mPagerSlidingTabStrip. setTextColor (vibrant. getTitleTextColor (); // the color of the status bar, cursor, and bottom navigation bar must be deepened or not added. For details, see mPagerSlidingTabStrip after the code. setIndicatorColor (colorBurn (vibrant. getRgb (); mToolbar. setBackgroundColor (vibrant. getRgb (); if (android. OS. build. VERSION. SDK_INT> = 21) {Window window = getWin Dow (); // obviously, these two products are available in new APIs. Window. setStatusBarColor (colorBurn (vibrant. getRgb (); window. setNavigationBarColor (colorBurn (vibrant. getRgb () ;}}});}/*** color deepening processing ** @ param RGBValues * RGB values, which are composed of alpha (transparency), red (red), green (green), blue (blue), * in Android, we generally use its hexadecimal format, * For example: "# FFAABBCC ", each letter on the leftmost to rightmost represents alpha (transparency), * red (red), green (green), and blue (blue ). Each color value occupies one byte (8 bits) with a value ranging from 0 ~ 255 * so the following shift method can be used to obtain the value of each color, and then reduce the value of each color, in the synthesis of RGB color, the color will look deeper * @ return */private int colorBurn (int RGBValues) {int alpha = RGBValues> 24; int red = RGBValues> 16 & 0xFF; int green = RGBValues> 8 & 0xFF; int blue = RGBValues & 0xFF; red = (int) Math. floor (red * (1-0.1); green = (int) Math. floor (green * (1-0.1); blue = (int) Math. floor (blue * (1-0.1); return Color. rgb (red, green, blue );}

Palette requires you to write a few things on your own. You only need to obtain various extracted color settings for the corresponding view in the callback method after it is extracted. The color of the image is bright and prominent, which is easy to understand. How can we make a good combination of the extracted colors? If you have a UI Designer, it would be better to look at it like me. The above color processing: for example, if Toolbar is used as an ActionBar and there are some obvious ActionBar, that is, visual ActionButtonIn my opinion, the color of the status bar should be a little deeper than that of the ToolBar, and it seems that there are some boundaries to separate. In Android, the RGB Color is reduced by Color. You can see that the method I used to increase the Color is obtained first. RGBColor Red, Green, BlueAnd then reduce the value of each color, FloorThe function is the function of downgrading. If you don't understand it, You can first look at the composition of RGB colors. When it is set to the same, it is more likely that there are no obvious items such as ActionButton or more actionbuttons with no three points. It looks more flat and more integrated.

After talking about this, Palette is a powerful tool for us to process the UI tone, so it can be said that it is an essential part of Material Design.

END
Demo effect:

Demo Source: http://download.csdn.net/detail/bbld_/8191251