Custom navigation layout of the navigation bar in Android

Toolbar series article navigation

The use of Toolbar in the navigation bar in Android

The overflow menu OverflowMenu in the navigation bar in Android

The search box SearchView of the navigation bar in Android

Custom navigation layout of the navigation bar in Android

Tab navigation and TabLayout usage of the navigation bar in Android

Before we talked about the various usages of Toolbar, but at this time we have a small partner who sent out a soul torture: it's too ugly, it's really ugly. what? Well, since the requirements are so high, then we can only zoom in and start customizing the layout. It's actually very simple, just add our own layout to the Toolbar container. The sample code is as follows:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">
    <androidx.appcompat.widget.Toolbar
        app:contentInsetStartWithNavigation="0dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tl_head">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="中间"
                android:layout_centerInParent="true"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="左边"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:text="右边"/>
        </RelativeLayout>
    </androidx.appcompat.widget.Toolbar>
</LinearLayout>

In this way, we have defined three texts in the Toolbar. We can also define functions such as a date picker, or customize our own title. You can also define the icon buttons on the right.

Guess you like

Origin blog.csdn.net/weixin_38322371/article/details/114266019