Mobile development

Alex Zhukovich

Card toolbar (Nested toolbar) in Android application


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.
Nested toolbar demo
You can download and try this project.

Get it on Google Play

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 COLOURS, STRINGS AND DIMENSIONS.
For add colors to the project better way create file colors.xml in res/values/ folder.

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

For add strings to the project better way use file strings.xml in res/values/ folder.
<resources>
    <string name="app_name">NestedToolbar Demo</string>
    <string name="action_search">Search</string>
</resources>

For add dimensions to the project better way use file dimens.xml in res/values/ folder.
<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 main activity.

<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 menu for 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 MAIN ACTIVITY
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;
    }
}

Nested toolbar on a tablet
After it you can run application.
Nested toolbar demo
You can download and try this project.

Get it on Google Play

I also add some more components and content to this project and publish whole project to github.

Share Share on Reddit0Share on VKTweet about this on TwitterShare on LinkedIn10Share on Google+0Share on Facebook1Flattr the authorEmail this to someoneShare on Tumblr0
« »

© 2017 Mobile development. Theme by Anders Norén.