Android : Usages & Issues of Toolbar (Material Compatibility) in Appcompat 21

Toolbar Widget

Toolbar is fully supported in AppCompat and has feature and API parity with the framework widget. In AppCompat,Toolbar is implemented in the android.support.v7.widget.Toolbar class. There are two ways to use Toolbar:

• Use a Toolbar as an Action Bar when you want to use the existing Action Bar facilities (such as menu inflation and selection, ActionBarDrawerToggle, and so on) but want to have more control over its appearance.
• Use a standalone Toolbar when you want to use the pattern in your app for situations that an Action Bar would not support; for example, showing multiple toolbars on the screen, spanning only part of the width, and so on.

Toolbar supports a more focused feature set than ActionBar. From start to end, a toolbar may contain a combination of the following optional elements:

1. A navigation button
2. A branded logo image
3. A title and subtitle
4. One or more custom views
5. An action menu

Things to do remind while Implementing ToolBar

IllegalStateException (windowActionBar)

java.lang.RuntimeException: Unable to start activity ComponentInfo{}: java.lang.IllegalStateException: This Activity already has an action bar supplied by the window decor. Do not request Window.FEATURE_ACTION_BAR and set windowActionBar to false in your theme to use a Toolbar instead.

Solution:

add

 <item name="windowActionBar">false</item>  

in theme.

Apply Styles for Version above API level 14+

   <color name="holo_blue_light">#ff33b5e5</color>  
   <color name="green">#36A245</color>  
   <color name="ripple_material_light">#40000000</color>  
   <style name="AppBaseTheme" parent="@style/Theme.AppCompat.Light.DarkActionBar">  
     <item name="windowActionBar">false</item>  
     <item name="colorPrimary">@color/holo_blue_light</item>  
     <item name="colorPrimaryDark">@color/green</item>  
     <item name="colorAccent">@color/ripple_material_light</item>  
   </style>  

Above 21+

   <style name="AppBaseTheme" parent="android:Theme.Material.Light">  
     <item name="windowActionBar">false</item>  
     <item name="colorPrimary">@color/ripple_material_light</item>  
     <item name="colorPrimaryDark">@color/green</item>  
     <item name="colorAccent">@color/holo_blue_light</item>  
   </style>  

Styling of ToolBar:

Styling of Toolbar is done differently to the standard action bar, and is set directly onto the view.

   <android.support.v7.widget.Toolbar  
     xmlns:app="http://schemas.android.com/apk/res-auto"  
     android:id="@+id/my_awesome_toolbar"  
     android:layout_width="match_parent"  
     android:layout_height="wrap_content"  
     android:background="?attr/colorPrimary"  
     android:minHeight="?attr/actionBarSize"  
     app:theme="@style/ThemeOverlay.AppCompat.Light" />  

ThemeOverlay.AppCompat.Light : Changes the Toolbar title text color to Black.

ThemeOverlay.AppCompat.Dark.ActionBar : Changes the Toolbar title text color to White.

Usage of inflateMenu in Toolbar:

If you're using setSupportActionBar(toolbar); then inflateMenu of toolbar cannot be used, because Toolbar is acting like Actionbar. So, all the menu related callbacks are default.

The only time you need to call toolbar.inflateMenu() is when you are using the Toolbar as a standalone widget. In this case you need to manually populate the Toolbar with content/actions. For instance, if you want it to display actions, you need to inflate a menu into it:

 Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);  
 // Set an OnMenuItemClickListener to handle menu item clicks  
 toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {  
 @Override  
 public boolean onMenuItemClick(MenuItem item) {  
      switch (item.getItemId()) {  
      case R.id.searchItem:  
           Toast.makeText(getApplicationContext(), "Search", Toast.LENGTH_SHORT).show();  
           break;  
      case R.id.filterItem:  
           Toast.makeText(getApplicationContext(), "Filter", Toast.LENGTH_SHORT).show();  
           break;  
      }  
      return true;  
      }  
 });  
 // Inflate a menu to be displayed in the toolbar  
 toolbar.inflateMenu(R.menu.toolbar_menu);  
 

res/xml/toolbar_menu.xml  
 <?xml version="1.0" encoding="utf-8"?>  
 <menu xmlns:android="http://schemas.android.com/apk/res/android"  
   xmlns:app="http://schemas.android.com/apk/res-auto" >  
   <item  
     android:id="@+id/searchItem"  
     android:icon="@android:drawable/ic_menu_search"  
     android:title="Search"  
     app:showAsAction="always"/>  
   <item  
     android:id="@+id/filterItem"  
     android:icon="@android:drawable/ic_menu_info_details"  
     android:title="Info"  
     app:showAsAction="always"/>  
 </menu>  

Navigations in Toolbar:

Here we can see how toolbar navigation works and this is similar to the action of setDisplayHomeAsUpEnabled(true) in the actionbar.

Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);

toolbar.setTitle("Second Activity");

toolbar.setNavigationIcon(R.drawable.ic_up);

toolbar.setNavigationOnClickListener(new View.OnClickListener() {

           @Override

           public void onClick(View view) {

           NavUtils.navigateUpTo(SecondActivity.this, IntentCompat.makeMainActivity(new ComponentName(SecondActivity.this, SecondActivity.class)));

           }

});

Customize Toolbar:

The customization of the toolbar here is to center align the title text and it is as follows.

<android.support.v7.widget.Toolbar  
     xmlns:app="http://schemas.android.com/apk/res-auto"  
     android:id="@+id/my_awesome_toolbar"  
     android:layout_width="match_parent"  
     android:layout_height="wrap_content"  
     android:background="?attr/colorPrimary"  
     android:minHeight="?attr/actionBarSize"  
     app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" >  
     <TextView  
       android:id="@+id/toolbar_title"  
       android:layout_width="wrap_content"  
       android:layout_height="wrap_content"  
       android:layout_gravity="center"  
       android:singleLine="true"  
       android:text="Toolbar Title"  
       android:textColor="@android:color/white"  
       android:textSize="18sp"  
       android:textStyle="bold" />  
</android.support.v7.widget.Toolbar>  

Source Code

You can download the source code by clicking here: ToolBarMaterialComp Source Code.  This project is built using eclipse IDE. Unzip and import the project into Eclipse, it’s a good idea to use the Project by clean and rebuild from the project menu. It works in all API levels above 2.3.

As always, thanks for reading :) 

Don't forget to +1 this blog and share this post on Google+ if you found it interesting!

Have something to add to this post? If you have any other quick thoughts/hints that you think people will find useful? Share it in the comments & feedback's are welcome.

Android: Material Theme in Kitkat

Material Theme look and feel can be easily achieve in KitKat because of the new features Translucent UI in KitKat, where you have the ability to sit behind status and navigation bars

We can getting material theme look and feel in 2 ways.

1. We can write our own styles.xml and modify according to our needs.
2. Import SystemBarTint library and apply changes as per need.

First Approach using styles.xml:

We can build our own theme by setting with Translucent Theme in xml

If you are seeking more control over translucent decor, consider using a custom theme that extends something other than *.TranslucentDecor and use the following style properties in your theme:

 <item name="android:windowTranslucentStatus">true</item>  
 <item name="android:windowTranslucentNavigation">true</item>  

If your content does not need to be full bleed you can structure your layouts in such a way that the content will reside in an area of the screen that is not blocked by the status or navigation bar. To do this you would set android:fitsSystemWindows="true" on the content layout/view in your layout xml or in style.xml as

  <item name="android:fitsSystemWindows">true</item>.  

.
Add Some Color to the status bar, just set the windowBackground attribute in my theme.

 <item name="android:windowBackground">@color/window_bg</item>  

Second Approach Using SystemBarTine:

This library jgilfelt-SystemBarTint offers a simple way to create a background "tint" for the system bars. Internally even this library is depended on the Translucent  theme.

Source Code

You can download the source code by clicking here: MaterialThemeLookInKitKat.  This project is built using eclipse IDE. Unzip and import the project into Eclipse, it’s a good idea to use the Project by clean and rebuild from the project menu. This example is built using 2nd approach.

Output:

Thanks for reading :) 

Whether this post is helpful?

Have something to add to this post? If you have any other quick thoughts/hints that you think people will find useful? Share it in the comments.

Solution: Stuck @ installing apps from Google Play Store

Problem

If you are stuck at some percentage while installing apps from Google Play Store.

Reason

The reason behind this is Google Play Store transfers data in background to update itself. Without completing the background data transfer, Play Store won’t start downloading apps.
It will be showing progress bar/loading bar will be running and showing percentage but the download won’t start until your Google services job is finished.

Solution

Wait a few minutes until the Google Play Store is completely upgraded.

Even after, If the problem persists, then follow the steps below.

• Go the play store and start installing application.
• Now, minimize play Store and go to Settings → Apps → RUNNING
• Find the Google Play services. Tap and stop all the Google Play Services.
• Now Go back to play store again and your download will start and finishes... 

Thanks for reading :) 

Whether this post is helpful?

Have something to add to this post? If you have any other quick thoughts/hints that you think people will find useful? feedback are welcome.