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.
[xml]
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’
}
[/xml]

STEP 2: ADD COLOURS, STRINGS AND DIMENSIONS.
For add colors to the project better way create file colors.xml in res/values/ folder.
[xml]

#3F51B5 #303F9F

[/xml]
For add strings to the project better way use file strings.xml in res/values/ folder.
[xml]

NestedToolbar Demo
Search

[/xml]
For add dimensions to the project better way use file dimens.xml in res/values/ folder.
[xml]

16dp
16dp
112dp
32dp

[/xml]
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.
[xml]










[/xml]

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.
[xml]



[/xml]

STEP 5: UPDATE MAIN ACTIVITY
After it need to update main activity.
[java]
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;
}
}
[/java]
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.

CategoriesUncategorized

1 thought on “Card toolbar (Nested toolbar) in Android application

Leave a Reply

Your email address will not be published. Required fields are marked *