custom Toolbar One

In fact, there are many great gods have written this aspect of the article, but I am more stupid, old some places do not understand, turned a lot of articles and videos about toolbar, here to summarize.
Reference: Youtube:slidenerd

Stage a custom color matching can modify the color place-api>=21

Toolbar can be customized places include:

• Status bar color (state bar/colorprimarydark) (only valid for api21 and above)
• Title bar background color (toolbar/colorprimary)
• Pop-up menu background color (optionmenu)
• Content area background color (Background)
• Navigation bar Color (navigationbar) (only valid for api21 and above)
• Title text color (titlebartextcolor/textcolorprimary)
• Pop-up menu text color (textcolor)
• Content text color (textcolor)
• Control Color (coloraccent)

Wen/pheynix (author of Jane's book)
Original link: http://www.jianshu.com/p/91eabe0c326d
Copyright belongs to the author, please contact the author to obtain authorization, and Mark "book author". Api<21 temporarily unable to modify the color match of the status bar and navigation bar to create a new item under res/values/ New Colors.xml, and add the color to use, the specific color of their own choice, it is recommended to refer to the specifications given by Google (self-FQ);

1 <?xml version= "1.0" encoding= "Utf-8"?>2 <resources>3     <color name= " Primarycolor "> #ffeb3b </color>4     <color name=" Primarycolordark "> #fbc02d </color> 5     <color name= "Accentcolor" > #50514f </color>6     <color name= "Textcolorprimary" > #33b5e5 </color>7     <color name= "textcolorsecondary" > #aa66cc </color>8 </ Resources>

Create a new Toolbar.xml as a toolbar layout file under Res/layout;

1  <?xml version= "1.0" encoding= "Utf-8"?>2  <android.support.v7.widget.Toolbar3      xmlns:android= "http://schemas.android.com/apk/res/android"4     xmlns:app= "/http Schemas.android.com/apk/res-auto "5     android:layout_width=" Match_parent "6     android: layout_height= "Wrap_content"7     android:background= "@color/primarycolor"8 </ Android.support.v7.widget.toolbar>

• Android.support.v7.widget.Toolbar must be used in line 1
• Line 7 sets the content area background color

Add the following code to the Mainactivity.java to introduce toolbar,
---Must import Android.support.v7.widget.Toolbar---:

Wen/pheynix (author of Jane's book)
Original link: http://www.jianshu.com/p/91eabe0c326d
Copyright belongs to the author, please contact the author to obtain authorization, and Mark "book author".

1  Packagecom.pheynix.material;2 3 ImportAndroid.os.Bundle;4 Importandroid.support.v7.app.ActionBarActivity;5 ImportAndroid.support.v7.widget.Toolbar;6 ImportAndroid.view.Menu;7 ImportAndroid.view.MenuItem;8 9  Public classMainactivityextendsactionbaractivity {Ten  One @Override A protected voidonCreate (Bundle savedinstancestate) { -     Super. OnCreate (savedinstancestate); - Setcontentview (r.layout.activity_main); the  -    //----------------------The following code to add---------------------- -Toolbar Toolbar =(Toolbar) Findviewbyid (R.id.app_bar); - Setsupportactionbar (toolbar); +    //----------------------above for the added code---------------------- - } +  A @Override at  Public BooleanOncreateoptionsmenu (Menu menu) { - getmenuinflater (). Inflate (R.menu.menu_main, menu); -     return true; - } -  - @Override in  Public Booleanonoptionsitemselected (MenuItem item) { -     intID =Item.getitemid (); to  +     if(id = =r.id.action_settings) { -         return true; the     } *  $     return Super. onoptionsitemselected (item);Panax Notoginseng}

Then we customize the styles used by api<21, modify the Values/styles.xml as follows,

1 <resources> 2    <style name= "Apptheme" parent= "Myapptheme" > 3    </ Style> 4  5    <style name= "Myapptheme" parent= "Theme.AppCompat.Light.NoActionBar" >  6        <item name= "colorprimary" > @color/primarycolor</item> 7        <item name= " Colorprimarydark "> @color/primarycolordark</item> 8        <item name=" Coloraccent ">@ Color/accentcolor</item> 9    </style> </resources>

---567 line Name= "Colorprimary" instead of name= "Android:colorprimary", who is wrong who is pregnant--

• The style tag of line 2 is the theme used by Androidmanifest (Android:theme), and it inherits from our custom style to make changes to the app theme.
• The style of line 4 is that our custom style,parent can be defined as:
  • Parent= "Theme.AppCompat.Light"--white keynote theme (so to speak)
  • Parent= "Theme.appcompat"--Black Keynote theme
  • Parent= "Theme.AppCompat.Light.NoActionBar"--the theme of the white keynote, and remove the default Actionbar
  • Parent= "Theme.AppCompat.NoActionBar"--black keynote theme, and remove the default Actionbar
• Line 5 defines the color of the title bar, but no effect (well, no egg), the title bar color needs to be defined in the toolbar layout file Toolbar.xml android:background= "@color/colorprimary"
• Row 6 is used to define the color of the status bar (StatusBar)
• Row 7 is used to define the color of the control

If you need to run on a api>=21 device, you need to create a new values-21 under the Res folder and create a new styles.xml with the following:

 1  <resources>2  <style Name= "Apptheme" parent= "Myapptheme" >3  <item name= "android:colorprimary "> @color/primarycolor</item>4  <item name=" Android: Colorprimarydark "> @color/primarycolordark</item>5  <item name=" Android:coloraccent "> @color/accentcolor</item>6  <item name=" Android:navigationbarcolor "> @color/primarycolor</item>7  </ Style>8  </resources> 

• Line 2 Choose to inherit our custom myapptheme, of course, inherited Values/styles.xml in line 4 introduced by the parent is also possible (not introduced to the line of ~);
• The title bar background color defined in line 3 also does not work and needs to be defined in the toolbar layout file Toolbar.xml android:background= "@color/colorprimary"
• Row 5 defines the color of the navigation bar, and the navigation bar color only takes effect when api>=21

The color of the title bar text color and pop-up menu button can also be customized;
If you just want to set the color to black or white , just change the style in Toolbar.xml, see the code:

  1  <?xml version=" 1.0 "encoding=" Utf-8 "?>  <android.support.v7.widget.toolbar   3  xmlns:android=" Http://schemas.android.com/apk/res/android " 4  xmlns:app= "Http://schemas.android.com/apk/res-auto"  5  Androi D:layout_width= "Match_parent"  android:layout_height=" Wrap_content " 7  android:background= "@color/primarycolor"  8  app:popuptheme= "@ Style/themeoverlay.appcompat.dark " app:theme=" @style/mycustomtoolbarstyle ">10  </android.support.v7.widget.toolbar> 

• Line 8 Sets the pop-up menu style, and the value can be selected by the system:
  • @style/themeoverlay.appcompat.dark--> white on black background
  • @style/themeoverlay.appcompat.light--> black word on white background
• Line 9 sets the title bar style, and the value can be selected by the system:
  • @style/themeoverlay.appcompat.dark--> white on black background
  • @style/themeoverlay.appcompat.light--> black word on white background
    However, due to the previous setting of the Background property in Toolbar.xml, the background of the title bar is not changed because of the setting here;

If you want to set a richer font color , you can add custom styles in Values/styles.xml, and then modify the values of App:popuptheme and App:theme in Toolbar.xml

Add a <style> tag to the styles.xml:

1 <style name= "Mycustomtoolbarstyle" parent= "ThemeOverlay.AppCompat.Light" >2    <item Name= "Android:textcolorprimary" > @color/textcolorprimary</item>3    <item name= "Android: Textcolorsecondary "> @color/textcolorsecondary</item>4    <item name=" "Android:textcolor" > @color/textcolorsecondary</item>5 </style>

• Row 2 is used to define the title bar text color
• Row 3 is used to define the color of the pop-up menu icon (the three dots that are arranged vertically)

• Line 4 to define the color of the pop-up menu Optionmenu text
  Modify Toolbar.xml

  App:popuptheme= "@style/mycustomtoolbarstyle"
  App:theme= "@style/mycustomtoolbarstyle"

Stage a custom color match that's it, I went to bed.
What the?! How do you say the color of the content text is set? Oh, my God.

1 <TextView  2     android:textcolor= "#ffac00" 3     android:layout_width= " Match_parent " 4     android:layout_height=" Match_parent " 5     android:text=" @string/hello_ World "/>

Wen/pheynix (author of Jane's book)
Original link: http://www.jianshu.com/p/91eabe0c326d
Copyright belongs to the author, please contact the author to obtain authorization, and Mark "book author".

custom Toolbar One