The use of Android's ToolBar

Toolbar is a Material Design style navigation control launched in Android 5.0. Google highly recommends that you use Toolbar as the navigation bar of the Android client to replace the previous Actionbar . Compared with Actionbar , Toolbar is obviously much more flexible. Unlike Actionbar , it must be fixed at the top of the Activity, but can be placed anywhere on the interface. In addition, when designing Toolbar , Google also left developers a lot of room for customization and modification. These customizable and modified properties are described in detail in the API documentation, such as:

• Set the navigation bar icon;
• Set the logo of the App;
• Support setting title and subtitle;
• Support adding one or more custom controls;
• Support Action Menu;

So how to use it? First of all, we need to use the v7 support package, and then define the theme style of the program. In the style, we must first remove the Actionbar, as follows:

 

<resources>
  <style name="AppTheme" parent="AppTheme.Base">
  </style>

  <style name="AppTheme.Base" parent="Theme.AppCompat">
    <item name="windowActionBar">false</item>
    <item name="android:windowNoTitle">true</item>

    <item name="android:fitsSystemWindows">true</item>
    <!-- Color of toolbar bar -->
    <item name="colorPrimary">@color/accent_material_dark</item>
    <!-- Status bar color-->
    <item name="colorPrimaryDark">@color/accent_material_light</item>
    <!--The background color of the window-->
    <item name="android:windowBackground">@color/dim_foreground_material_dark</item>
  </style>
</resources>

 

 

Also we can set the default bottom navigation bar default color for the system version of API21 in values-v21:

/res/values-v21/styles.xml

 

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="AppTheme.Base">
      <!-- Bottom navigation bar color-->
      <item name="android:navigationBarColor">@color/accent_material_light</item>
    </style>
</resources>

activity.xml

 

<RelativeLayout 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"
    tools:context=".MainActivity"
    android:background="@android:color/white"
    >

    <TextView
        android:layout_below="@+id/toolbar"
        android:text="hello_world"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:textColor="@android:color/black"
        android:layout_marginTop="5dp"
        />

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_height="?attr/actionBarSize"
        android:layout_width="match_parent"
        android:background="?attr/colorPrimary" >

    </android.support.v7.widget.Toolbar>

</RelativeLayout>

Activity

public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate (savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

        // App Logo
        toolbar.setLogo(R.mipmap.ic_launcher);
        // Title
        toolbar.setTitle("Title");
        setSupportActionBar(toolbar);
        // Navigation Icon only works if it is set in setSupoortActionBar
        // otherwise back bottom will appear
        toolbar.setNavigationIcon(R.drawable.ab_android);
        // The listener event of Menu item click must be set in setSupportActionBar to be effective
        toolbar.setOnMenuItemClickListener(onMenuItemClick);
    }

    private Toolbar.OnMenuItemClickListener onMenuItemClick = new Toolbar.OnMenuItemClickListener() {
        @Override
        public boolean onMenuItemClick(MenuItem menuItem) {
            String msg = "";
            switch (menuItem.getItemId()) {
                case R.id.action_edit:
                    msg += "Edit";
                    break;
                case R.id.action_share:
                    msg += "Share";
                    break;
                case R.id.action_settings:
                    msg += "Setting";
                    break;
            }

            if(!msg.equals("")) {
                Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
            }
            return true;
        }
    };

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // In order to make the Toolbar's Menu effective, the program here cannot be removed
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

}

 

Add dependency library:

compile 'com.android.support:appcompat-v7:21.0.0'

 

Source code click to download

The operation effect is as follows: