Last article Shop Project Actual | 2.1 Android Imitate Jingdong Shop - Custom Toolbar (1) Now that you've introduced some of the basic properties of Toolbar and its simple use, this article begins by describing how to define a Toolbar that belongs to your own Style.

Customize Theme

Modify the style of the application - AppTheme, set the background color of the Toolbar and the color of the status bar yourself, and set the windowActionBar to false.

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimary</item>
    <item name="android:windowActionBar">false</item>
    <item name="android:windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

Customize Toolbar Layout

Create a new Toolbar layout file, toolbar.xml, under the res file. In the layout file, we need to define a search box, a title, and a button on the right.The code is as follows.

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<EditText
    android:id="@+id/toolbar_searchview"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_centerVertical="true"
    android:gravity="center"
    android:drawableLeft="@mipmap/icon_search"
    style="@style/search_view"
    android:hint="Please enter search content"
    android:visibility="gone"
    />

<TextView
    android:id="@+id/toolbar_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:layout_gravity="center"
    android:gravity="center"
    android:textColor="@color/white"
    android:textSize="20sp"
    android:visibility="gone"
    />

<Button
    android:id="@+id/toolbar_rightButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:textColor="@color/white"
    android:visibility="gone"
    style="@android:style/Widget.Material.Toolbar.Button.Navigation"
    /></RelativeLayout>

Once the layout file is defined, you can start defining the Toolbar.

Customize Toolbar

1. Extend Toolbar properties

Custom Toolbar requires some custom attributes. Define the attributes you need to customize in the attrs.xml file. First create a new attrs.xml file, and then define the required attributes.

<declare-styleable name="CNiaoToolBar">
    <attr name="rightButtonIcon" format="reference"/>
    <attr name="isShowSearchView" format="boolean"/>
    <attr name="rightButtonText" format="string"/>
</declare-styleable>

2. Define Toolbar

The new class file inherits from the Toolbar and is named CNiaoToolbar.

First add the layout and define the layout control.

 mInflater = LayoutInflater.from(getContext());
 mView = mInflater.inflate(R.layout.toolbar, null);
 mTextTitle = (TextView) mView.findViewById(R.id.toolbar_title);
 mSearchView = (EditText) mView.findViewById(R.id.toolbar_searchview);
 mRightButton = (Button) mView.findViewById(R.id.toolbar_rightButton);
 LayoutParams lp = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.CENTER_HORIZONTAL);
 addView(mView, lp);

Then you get the properties to set and display the style and content of the Toolbar based on its values.

if(attrs !=null) {
        final TintTypedArray a = TintTypedArray.obtainStyledAttributes(getContext(), attrs,
                R.styleable.CNiaoToolBar, defStyleAttr, 0);
        final Drawable rightIcon = a.getDrawable(R.styleable.CNiaoToolBar_rightButtonIcon);
        if (rightIcon != null) {
            //setNavigationIcon(navIcon);
            setRightButtonIcon(rightIcon);
        }
        boolean isShowSearchView = a.getBoolean(R.styleable.CNiaoToolBar_isShowSearchView,false);
        if(isShowSearchView){
            showSearchView();
            hideTitleView();
        }
        CharSequence rightButtonText = a.getText(R.styleable.CNiaoToolBar_rightButtonText);
        if(rightButtonText !=null){
            setRightButtonText(rightButtonText);
        }
        a.recycle();
    }

Style settings for controls in the Toolbar and listening can be defined, such as listening for events on the right button.

public  void setRightButtonOnClickListener(OnClickListener li){
    mRightButton.setOnClickListener(li);
}

3. Call Toolbar

Custom toolbars can be called directly in the layout file layout.

<com.liuting.cniao_shop.widget.CNiaoToolbar
    android:id="@id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    app:isShowSearchView="true" />

Final results

Run the code to get the final result.