Toolbar

Card toolbar (Nested toolbar) in Android application

Alex Zhukovich 4 min read
Card toolbar (Nested toolbar) in Android application
Table of Contents

Today, I'm talking about card toolbar or nested toolbar.

A Toolbar is a generalization of action bars for use within application layouts. While an action bar is traditionally part of an Activity's opaque window decor controlled by the framework, a Toolbar may be placed at any arbitrary level of nesting within a view hierarchy.

Demo: Nested toolbar

STEP 1: Add libraries to the project

Need to add some dependences to build.grade file in the project.

dependencies {
    compile fileTree(dir: ‘libs’, include: [‘*.jar’])
    compile ‘com.android.support:appcompat-v7:22.2.0’
    compile ‘com.android.support:cardview-v7:22.2.0’
    compile ‘com.android.support:recyclerview-v7:22.2.0’
    compile ‘com.android.support:design:22.2.0’
}

STEP 2: Add colors, string and dimensions

We need to create colors.xml file in res/values folder for adding file with all colors of the project.

<resources>
    <color name="primaryColor">#3F51B5</color>
    <color name="primaryColorDark">#303F9F</color>
</resources>

We can store all strings in the strings.xml file in res/values folder.

<resources><br />
    <string name="app_name">NestedToolbar Demo</string><br />
    <string name="action_search">Search</string><br />
</resources><br />

We need to create the dimens.xml file in res/values folder for adding dimensions to the project.

<resources>
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
    <dimen name="toolbar_double_height">112dp</dimen>
    <dimen name="cardview_toolbar_spacer">32dp</dimen>
</resources>

You can create different file with colors, dimensions, etc. For difference screens, orientation, etc for it need to create different folder, like values-land for colors, dimensions, etc.

STEP 3: Update main layout

Next step is update layout for the MainActivity.

<FrameLayout 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:background="@color/background_material_light" >
    
    <android.support.v7.widget.Toolbar
        android:id="@+id/generalToolbar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/toolbar_double_height"
        android:background="?attr/colorPrimary" />
    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="@dimen/cardview_toolbar_spacer"
        android:layout_marginRight="@dimen/cardview_toolbar_spacer"
        android:layout_marginBottom="16dp"
        android:layout_marginTop="?attr/actionBarSize"
        app:cardBackgroundColor="@android:color/white"
        app:cardElevation="4dp">
        
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            
            <android.support.v7.widget.Toolbar
                android:id="@+id/nestedToolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize" />
            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:alpha="0.12"
                android:background="@android:color/black" />
            <FrameLayout
                android:id="@+id/content_frame"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </LinearLayout>
    </android.support.v7.widget.CardView>
</FrameLayout>

STEP 4: Add a menu

Need to add a file with a menu to the project. In my case this file called menu_main.xml in res/menu folder.

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools" 
    tools:context=".MainActivity">
    
    <item
        android:id="@+id/action_search"
        android:orderInCategory="100"
        android:title="@string/action_search"
        app:showAsAction="always"
        app:actionViewClass="android.support.v7.widget.SearchView"/>
</menu>

STEP 5: Update MainActivity

After it need to update main activity.

public class MainActivity extends AppCompatActivity {
    private Toolbar mNestedToolbar, mGeneralToolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mNestedToolbar = (Toolbar) findViewById(R.id.nestedToolbar);
        mGeneralToolbar = (Toolbar) findViewById(R.id.generalToolbar);

        mGeneralToolbar.setNavigationIcon(R.drawable.ic_action_menu);
        setSupportActionBar(mNestedToolbar);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);

        MenuItem searchItem = menu.findItem(R.id.action_search);
        mSearchView = (SearchView) MenuItemCompat.getActionView(searchItem);
        mSearchView.setOnQueryTextListener(this);
        if (searchRequest != null)
        mSearchView.setQuery(searchRequest, true);
        return true;
    }
}
Demo: Nested toolbar

After it you can run application.

Demo: Nested toolbar

I also add more components and content to this project and publish it to GitHub.


Mobile development with Alex

A blog about Android development & testing, Best Practices, Tips and Tricks

Share
More from Mobile development with Alex

Great! You’ve successfully signed up.

Welcome back! You've successfully signed in.

You've successfully subscribed to Mobile development with Alex.

Success! Check your email for magic link to sign-in.

Success! Your billing info has been updated.

Your billing was not updated.