Android to achieve cool top bar _android

Appbarlayout is a ViewGroup container component that inherits Linerlayout implementations, and it is designed to material the app Bar, which supports gesture sliding, but often with toolbar, Coordinatorlayout and Collapsingtoolbarlayout, together with the use of the appbarlayout, before we talk about a simple study of toolbar. As always, I would like to summarize some of my notes in the course of my study as well as some places to pay attention to.

First, Toolbar

Toolbar is a Material design-style navigation control launched in Android 5.0, and Google recommends that you use Toolbar as the navigation bar for Android clients to replace Actionbar, which means Actionbar can do, toolbar can do. Compared with Actionbar, Toolbar is more flexible. It is not like actionbar, it must be fixed at the top of the activity, but can be placed in any position in the interface. In addition, in the design of Toolbar, Google also left us with a lot of room to modify

• Set navigation bar icon
• Set the app logo
• Set headings and subheadings
• Add one or more custom controls
• Set Action Menu

For easy understanding, let's look at the effect chart:

According to the effect chart, from left to right are navigation bar icons, app logos, titles and subheadings, custom controls (a TextView and ImageView), and Actionmenu

1, with toolbar, the first to hide the original Actionbar
(1) By setting the following properties in the Apptheme tab in our Styles.xml file:

<item name= "Windowactionbar" >false</item>
<item name= "Android:windownotitle" >true</item>

(2) by modifying the subject of our inheritance: Theme.AppCompat.Light.NoActionBar

<style name= "Apptheme" parent= "Theme.AppCompat.Light.NoActionBar" >
  <item name= "Colorprimary" >@ color/blue</item>
  <item name= "Colorprimarydark" > @color/blue_dark</item>
  <item "Coloraccent" > @color/red</item>
  <item name= "textallcaps" >false</item>
 </style >

(3) Invoke the following sentence in the activity, removing the default navigation bar

Supportrequestwindowfeature (Window.feature_no_title);

2. Add the toolbar controls we need in the layout file

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout xmlns:android=
"http://schemas.android.com/apk/" Res/android "
 android:layout_width=" match_parent "
 android:layout_height=" match_parent "
 android:o" rientation= "vertical" >

 <android.support.v7.widget.toolbar
  android:id= "@+id/toolbar"
  android: Layout_width= "Match_parent"
  android:layout_height= "android:actionbarsize"
  android:background= "? attr/ Colorprimary ">
  <!--custom control-->
  <textview
   android:layout_width=" Wrap_content "
   android:layout_height= "Wrap_content"
   android:text= "click"/>

  <imageview
   android:layout_width= "Wrap_content"
   android:layout_height= "wrap_content"
   android:layout_marginleft= "2DP"
   android:src = "@mipmap/icon"/>
 </android.support.v7.widget.Toolbar>
</LinearLayout>

3, then add the Action menu menu item in Menu_main.xml

<menu xmlns:android= "http://schemas.android.com/apk/res/android"
 xmlns:app= "http://schemas.android.com/ Apk/res-auto ">
 <item
  android:id=" @+id/add "
  android:icon=" @mipmap/icon_add "
  app: showasaction= "Always"/>
 <item android:id= "@+id/add_friend"
  android:title= "
  add Friends"
  app: showasaction= "Never"/>
 <item android:id= "@+id/scace"
  android:title= "
  Sweep"
  app: showasaction= "Never"/>
</menu>

4. Initialize the toolbar control in the activity and set the corresponding property

Package per.lijuan.appbarlayoutdome;
Import Android.os.Bundle;
Import android.support.v7.app.AppCompatActivity;
Import Android.support.v7.widget.Toolbar;
Import Android.view.Menu;
Import Android.view.MenuItem;
Import Android.view.Window;

Import Android.widget.Toast;
 /** * Created by Lijuan on 2016/8/31.

 * * Public class Activity extends Appcompatactivity {private Toolbar Toolbar;
  @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);
  Supportrequestwindowfeature (Window.feature_no_title);
  Setcontentview (R.layout.activity_second);

  toolbar = (toolbar) Findviewbyid (R.id.toolbar);
  /** * Set the title */toolbar.settitle ("title");
  /** * Set sub-title/Toolbar.setsubtitle ("sub-title");
  /** * Set the APP logo * * * Toolbar.setlogo (R.mipmap.ic_launcher);
  /** * Set Navigation button * * Toolbar.setnavigationicon (R.mipmap.back);
 Setsupportactionbar (toolbar); @Override public boolean Oncreateoptionsmenu (Menu menu) {Getmenuinflater ().Flate (R.menu.menu_main, menu);
 return true; /** * Set Menu button action * * @return/@Override public boolean onoptionsitemselected (MenuItem item) {Switch (it Em.getitemid ()) {case Android.
    R.id.home:finish ();
   Break
    Case R.id.add:toast.maketext (Secondactivity.this, "add", Toast.length_short). Show ();
   Break
    Case R.id.add_friend:toast.maketext (secondactivity.this, "add Friend", Toast.length_short). Show ();
   Break
    Case R.id.scace:toast.maketext (secondactivity.this, "sweep", Toast.length_short). Show ();
   Break
  Default:break;
 return super.onoptionsitemselected (item);

 }
}

Second, collapsingtoolbarlayout

The Collapsingtoolbarlayout function is to provide a folding toolbar, which inherits to Framelayout, sets Layout_scrollflags to it, It can control controls contained in Collapsingtoolbarlayout (such as: ImageView, Toolbar) to make corresponding Scrollflags scrolling events when responding to Layout_behavior events (remove screen or anchor on top of screen) )

Third, Appbarlayout

Let's take a look at the final effect:

From the effect diagram, when a Layout_behavior control is set to respond to a layout_scrollflags event in Collapsingtoolbarlayout, ImageView will have an upward scrolling screen of parallax effects. When you start folding, the background color of the collapsingtoolbarlayout (that is, the background color of the toolbar) becomes the background color we set up, and toolbar is always fixed to the top

Activity_main.xml

<?xml version= "1.0" encoding= "Utf-8"?> <android.support.design.widget.coordinatorlayout 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.support.design.widget.appbarlayout Android:layout_width= "Match_parent" android:layout_height= "wrap_content" Android:theme= "@style ThemeOverlay.AppCompat.Dark.ActionBar "> <android.support.design.widget.collapsingtoolbarlayout android:id= "@+id/collapsing_toolbar_layout" android:layout_width= "match_parent" android:layout_height= "Wrap_content" App:con Tentscrim= "#3F51B5" app:layout_scrollflags= "scroll|exituntilcollapsed" > <imageview android:layout_width= " Match_parent "android:layout_height=" Wrap_content "android:adjustviewbounds=" true "android:src=" @mipmap/icon_b G "app:layout_collapsemode=" parallax "App:layout_collapseparallaxmultiplier= "0.5"/> <android.support.v7.widget.toolbar android:id= "@+id/toolbar" match _parent "android:layout_height=" 56DP "app:layout_collapsemode=" pin "app:title=" @string/app_name "App:title Textcolor= "#FFFFFF"/> </android.support.design.widget.CollapsingToolbarLayout> </ android.support.design.widget.appbarlayout> <android.support.v7.widget.recyclerview android:id= "@+id/ Recyclerview "android:layout_width=" match_parent "android:layout_height=" match_parent "app:layout_behavior=" @

 String/appbar_scrolling_view_behavior "/> </android.support.design.widget.CoordinatorLayout>

(1) We set up a ImageView and a toolbar in the Collapsingtoolbarlayout, and put this collapsingtoolbarlayout as a whole in appbarlayout

(2) in Collapsingtoolbarlayout, we set up the app:layout_scrollflags= "scroll|enteralwayscollapsed", and its value also includes:
Scroll-You must set this if you want to scroll, which means that the view with the value set to scroll will scroll along with the scrolling event
◦enteralways-value is set to Enteralways view, and when Recyclerview scrolls down, the view scrolls down directly
◦exituntilcollapsed-The value is set to Exituntilcollapsed view, and when the view is going to "fade", it will slide up until the remaining height reaches its minimum height. Then respond to the internal sliding events of the Recyclerview.
◦enteralwayscollapsed-The view that is set to enteralwayscollapsed has set the MinHeight property and when this flag is used, this view can only be entered at a minimum height, and only when the scrolling view reaches the top, it expands to the full height

In addition app:contentscrim= "#3F51B5" refers to the background color when the full collapsingtoolbarlayout is folded (shrunk)

(3) in the ImageView control, we set the App:layout_collapsemode= "Parallax", Layout_collapsemode (collapse mode)-There are two values:
pin-When set to this mode, toolbar can also remain on the screen when the collapsingtoolbarlayout is completely shrunk
Parallax-When the content scrolls, the view (such as ImageView) in the collapsingtoolbarlayout can also scroll at the same time to achieve the parallax scrolling effect, usually and layout_ Collapseparallaxmultiplier (set parallax factor) with

In addition app:layout_collapseparallaxmultiplier= "0.5" set the parallax scrolling factor, the value is: 0~1

(4) In the toolbar control, we set the Layout_collapsemode (Collapse mode): The PIN

Mainactivity.class

Package com.per.appbarlayout;
Import Android.graphics.Color;
Import Android.os.Bundle;
Import Android.support.design.widget.CollapsingToolbarLayout;
Import android.support.v7.app.AppCompatActivity;
Import Android.support.v7.widget.LinearLayoutManager;
Import Android.support.v7.widget.RecyclerView;
Import Android.support.v7.widget.Toolbar;
Import Android.view.LayoutInflater;
Import Android.view.Menu;
Import Android.view.MenuItem;
Import Android.view.View;
Import Android.view.ViewGroup;

Import Android.widget.TextView;
 public class Mainactivity extends appcompatactivity {public Toolbar mtoolbar;

 Private Recyclerview Mrecyclerview;
  @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);

  Setcontentview (R.layout.activity_main);
  Mtoolbar = (Toolbar) Findviewbyid (R.id.toolbar);
  Mtoolbar.settitletextcolor (Color.green);
  Mtoolbar.settitle ("Appbarlayout");

  Setsupportactionbar (Mtoolbar); Getsupportactionbar (). sethomebuttonenabled (tRue);

  Getsupportactionbar (). Setdisplayhomeasupenabled (True);
  Mrecyclerview = (Recyclerview) Findviewbyid (R.id.recyclerview);
  Mrecyclerview.setlayoutmanager (This) (new Linearlayoutmanager);

  Mrecyclerview.setadapter (New Contentadapter ()); Collapsingtoolbarlayout mcollapsingtoolbarlayout = (collapsingtoolbarlayout) Findviewbyid (R.id.collapsing_toolbar_
  Layout);
  The title Mcollapsingtoolbarlayout.settitle ("Appbarlayout") is set through collapsingtoolbarlayout;
  Modify Font Color Mcollapsingtoolbarlayout.setexpandedtitlecolor (color.white) by collapsingtoolbarlayout;//Set font color when not shrinking Mcollapsingtoolbarlayout.setcollapsedtitletextcolor (color.red);/Set the color of the font on the toolbar after shrinking} @Override public Boolean
  Oncreateoptionsmenu (Menu menu) {getmenuinflater (). Inflate (R.menu.menu_main, menu);
 return true; @Override public boolean onoptionsitemselected (MenuItem item) {switch (Item.getitemid ()) {case Android.
    R.id.home:finish ();
  Break
 return super.onoptionsitemselected (item); } pRivate class Contentadapter extends recyclerview.adapter<contentadapter.contentholder> {@Override public Conten Tadapter.contentholder Oncreateviewholder (viewgroup parent, int viewtype) {return new Contentholder (layoutinflater.fr Om (mainactivity.this). Inflate (Android.
  R.layout.simple_list_item_1, parent, false)); @Override public void Onbindviewholder (contentadapter.contentholder holder, int position) {Holder.itemTv.setTex
  T ("item");
  @Override public int GetItemCount () {return 35;

   Class Contentholder extends Recyclerview.viewholder {private TextView ITEMTV;
    Public Contentholder (View Itemview) {super (Itemview); ITEMTV = (TextView) Itemview.findviewbyid (Android.
   R.ID.TEXT1);

 }
  }
 }
}

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.