ToolBar and appcompatacitibar implement the immersive Statusbar effect and appcompatactivity

ToolBar and appcompatacitibar implement the immersive Statusbar effect and appcompatactivity

Toolbar is a new component of android sdk API21. The following is an official Google introduction document:

A standard toolbar for use within application content.

A Toolbar is a generalizationaction barsFor use within application layouts. While an action bar is traditionally part ofActivity'sOpaque window decor controlled by the framework, a Toolbar may be placed at any arbitrary level of nesting within a view hierarchy. an application may choose to designate a Toolbar as the action bar for an Activity usingsetActionBar()Method.

Toolbar supports a more focused feature set than ActionBar. From start to end, a toolbar may contain in a combination of the following optional elements:

• A navigation button.This may be an Up arrow, navigation menu toggle, close, collapse, done or another glyph of the app's choosing. this button shoshould always be used to access other navigational destinations within the container of the Toolbar and its signified content or otherwise leave the current context signified by the Toolbar. the navigation button is vertically aligned within the Toolbar'sminimum height, If set.
• A branded logo image.This may extend to the height of the bar and can be arbitrarily wide.
• A title and subtitle.The title shoshould be a signpost for the Toolbar's current position in the navigation hierarchy and the content contained there. the subtitle, if present shocould indicate any extended information about the current content. if an app uses a logo image it shoshould strongly consider omitting a title and subtitle.
• One or more custom views.The application may add arbitrary child views to the Toolbar. They will appear at this position within the layout. If a child view'sToolbar.LayoutParamsIndicatesGravityValueCENTER_HORIZONTALThe view will attempt to center within the available space remaining in the Toolbar after all other elements have been measured.
• Anaction menu.The menu of actions will pin to the end of the Toolbar offering a few frequent, important or typical actions along with an optional overflow menu for additional actions. action buttons are vertically aligned within the Toolbar'sminimum height, If set.

In modern Android UIs developers shoshould lean more on a fully ally distinct color scheme for toolbars than on their application icon. the use of application icon plus title as a standard layout is discouraged on API 21 devices and newer.

The focus of the above introduction is that toolbar is a new component of api21, which is mainly used to make up for the shortcomings of actionbar. It inherits from viewgroup, and its free attributes include navigation buttons (similar to up buttons ), logo image, title and subtitle, one or more custom views and menus.

Here is a special introduction to An application may choose to designate a Toolbar as the action bar for an Activity usingsetActionBar()Method. we can use toolbar as actiobar in any activity, but before api21, we can only use setSupportActionbar (). The corresponding topic should also be set to NoActionbar (do not suspect that this is the case, it's Okay ), about toolbar is good. I will try again)

For details, see sdk/docs/reference/android/widget/Toolbar.html.

Next we will introduce appcompataciti.pdf

Official introduction: You can addActionBarTo your activity when running on API level 7 or higher by extending this class for your activity and setting the activity themeTheme.AppCompatOr a similar theme.

It is mainly used to provide the function of adding actionbar to earlier sdk versions, and provides Theme. appCompat (Theme recommended by Google. material.

For details, see yourSDKpath/sdk/docs/reference/android/support/v7/app/AppCompatActivity.html.

Google's new 22.1 library also contains the following components. Their biggest feature is that android: theme: Can Be Used in components to control component styles.

AppCompatAutoCompleteTextView
AppCompatButton
AppCompatCheckBox
AppCompatCheckedTextView
AppCompatEditText
AppCompatMultiAutoCompleteTextView
AppCompatRadioButton
AppCompatRatingBar
AppCompatSpinner
AppCompatTextView

After introducing so many good things, we started to get into the question: how to use toolbar and appcompataciti.pdf to implement the immersive Statusbar effect.

First, use AndroidStudio to build a project.

Step 2 Add a dependency Library:

Select open module settings app dependency, click the plus sign below to select 'com. android. support: appcompat-v7: 22.1.1'

Step 3: Modify the built-in theme

Modify the original values/style:

<Pre name = "code" class = "html"> <resources> <style name = "actionequaleme" parent = "Theme. appCompat. noActionBar "> <item name =" windowActionBar "> false </item> <item name =" android: windowNoTitle "> true </item> <! -- Toolbar (actionbar) color --> <item name = "colorPrimary"> #673AB7 </item> <! -- Background color of the window --> <item name = "colorPrimaryDark"> @ android: color/holo_blue_bright </item> </style> </resources>

To use the toolbar, we need to set the topic

Theme. AppCompat. NoActionBar. Otherwise, the program crash may be caused by a conflict.

Then we create a new folder named: values-v19 in the same directory, the role of this package is to provide the effect above api19 +

Copy and modify the style file:

<Resources> <style name = "actionequaleme" parent = "Theme. appCompat. noActionBar "> <item name =" windowActionBar "> false </item> <item name =" android: windowNoTitle "> true </item> <! -- Toolbar (actionbar) color --> <item name = "colorPrimary"> #673AB7 </item> <! -- Status Bar color --> <item name = "colorPrimaryDark"> @ android: color/holo_blue_bright </item> </style> </resources>

The status bar color will only take effect after api19 or later.

Step 4: Create a layout file:

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

<?xml version="1.0" encoding="utf-8"?><LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:fitsSystemWindows="true">    <include layout="@layout/toobar"></include>    <android.support.v7.widget.AppCompatCheckedTextView        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:text="Hello World, MyActivity"/></LinearLayout>

Step 5: Use AppcompatAcitivity and toolbar

Public class MainActivity extends AppCompatActivity {private Toolbar mToolbar; @ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); // this. getWindow (). setBackgroundDrawableResource (getResources (). getColor (android. r. color. holo_blue_bright); // sets the color of the status bar. if the version is later than 4.4, if (Build. VERSION. SDK_INT> = Build. VERSION_CODES.KITKAT) {SystemBarTintManager tintManager = new SystemBarTintManager (this); tintManager. setStatusBarTintEnabled (true); tintManager. setStatusBarTintResource (android. r. color. holo_blue_bright);} mToolbar = (Toolbar) findViewById (R. id. toolbar); mToolbar. setTitle ("Main title"); // The title text must be before setsuppactionactionbar; otherwise, setsuppactionactionbar (mToolbar) is invalid );}}

In this way, we can achieve the immersive effect. In the project, I used an open-source engineering SystemBarTintManager, which will be pasted in the source code.

Then paste the running effect:

You may think that our pursuit is over, but it is not done yet. We haven't played this toolbar yet. We can see that it inherits from viewgroup, so I'm curious to add a subview in it, and found that it can run successfully.

<?xml version="1.0" encoding="utf-8"?><android.support.v7.widget.Toolbar    xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/toolbar"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:background="@android:color/holo_blue_bright"    android:theme="@style/ThemeOverlay.AppCompat.Dark"    android:popupTheme="@style/ThemeOverlay.AppCompat.Dark"    android:minHeight="?attr/actionBarSize">    <TextView        android:layout_width="match_parent"        android:layout_height="40dp"        android:text="123"/>  </android.support.v7.widget.Toolbar>

The title bar shows 123, and the title set previously becomes invalid. After that, I put a new LinearLayout, which can also be correctly laid out. If there is a sub-layout, the setTitile method will fail, while the mToolbar will. the setNavigationIcon method is not affected.

If we want to simulate the effect of the navigation button above the actionbar similar to the above, we need to configure mToolbar. setNavigationIcon in java code. xml will not be resolved due to the api version issue. If you do not want to use actionbar, you can comment out the toolbar. The color of the status bar is also controllable. Please specify the source for reprinting.

Source Code address: https://github.com/jelychow/demo
If you have any questions, please leave a message or correct me...