Tuesday 31 March 2015

Toolbar Widget Android

Looking for a new toolbar widget, Then check this tutorial which will let develop the latest going on toolbar. Toolbar widget has beed introduced by google in 5.0 and now we are seeing this in most of the google apps like gmail , playstore etc.

so how to go about it =>


Structure of my app is going to be like this as shown in image  :



Rest you can go your way, what ever you like ..


1. package : com.constants 

1.1 Constants.java

package com.constants;

import android.app.Activity;

import com.netsol.toolbarmaterialcomp.R;

public class Constants extends Activity{

public  static int mDefault=R.color.material_deep_teal_500;

public  static int mRed=R.color.red;

public  static int mBlue=R.color.blue;

public  static int mMaterialGrey=R.color.material_blue_grey_800;



}


2. package : com.fragments

2.1  Homefragment.java

package com.fragments;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.netsol.toolbarmaterialcomp.R;

public class Homefragment extends android.support.v4.app.Fragment{

    View mView;

@SuppressLint("InflateParams")
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
mView=inflater.inflate(R.layout.fragment_home, null);
return mView;
}

@Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
}


public static Fragment newInstance(int position) {
// TODO Auto-generated method stub
return null;
}
}

2.2 ListDrawerFragment.java

package com.fragments;

import android.annotation.SuppressLint;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.ListView;

import com.interfaces.DrawerCallback;
import com.netsol.toolbarmaterialcomp.R;

public class ListDrawerFragment extends android.support.v4.app.Fragment{

View mView;
ListView mLeftmenulistview; 
DrawerCallback mCallback;
String[] mListRowNames = new String[]{
            "Home", "Tab Layout", "BLUE", "MATERIAL GREY"
    };
    
@SuppressLint("InflateParams")
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
mView=inflater.inflate(R.layout.fragment_drawerlayout, null);
return mView;
}
 
@Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
        InitializeVariables(mView); 
     
}

private void InitializeVariables(View mView) {
mLeftmenulistview=(ListView)mView.findViewById(R.id.leftmenulistview);
mCallback=(DrawerCallback)getActivity();
setAdapter();
}

private void setAdapter() {
 ArrayAdapter<String> adapter = new ArrayAdapter<String>(getActivity(),
               android.R.layout.simple_list_item_1, android.R.id.text1, mListRowNames);
 mLeftmenulistview.setAdapter(adapter);
 
 mLeftmenulistview.setOnItemClickListener(new OnItemClickListener() {

@Override
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
long arg3) {
mCallback.onComplete(arg2);
}
});
}
}


2.3  SampleFragment.java

package com.fragments;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.netsol.toolbarmaterialcomp.R;

public class SampleFragment extends Fragment {

    private static final String ARG_POSITION = "position";

    private int position;

    public static SampleFragment newInstance(int position) {
        SampleFragment f = new SampleFragment();
        Bundle b = new Bundle();
        b.putInt(ARG_POSITION, position);
        f.setArguments(b);
        return f;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        position = getArguments().getInt(ARG_POSITION);
        
        View rootView = inflater.inflate(R.layout.row_tablyout, container, false);

        switch (position) {
            case 0:
                 break;
            case 1:

                break;
            case 2:
                break;
            case 3:

                break;
        }

        return rootView;
    }
}

2.4 TabFragment.java 

package com.fragments;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.netsol.toolbarmaterialcomp.R;
import com.tablayoutwork.SlidingTabLayout;
import com.viewpageradapter.ViewPagerAdapter;

public class TabFragment extends android.support.v4.app.Fragment {

View mView;
SlidingTabLayout slidingTabLayout;
 ViewPager pager;
   
   private String titles[] = new String[]{"Sample Tab 1", "Sample Tab 2", "Sample Tab 3", "Sample Tab 4"
           , "Sample Tab 5", "Sample Tab 6", "Sample Tab 7", "Sample Tab 8"};
   
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
mView=inflater.inflate(R.layout.fragment_tab, null);
 pager = (ViewPager) mView.findViewById(R.id.viewpager);
       slidingTabLayout = (SlidingTabLayout) mView.findViewById(R.id.sliding_tabs);
       pager.setAdapter(new ViewPagerAdapter(getActivity().getSupportFragmentManager(), titles,getActivity()));

       slidingTabLayout.setViewPager(pager);
       
       slidingTabLayout.setCustomTabColorizer(new SlidingTabLayout.TabColorizer() {
           @Override
           public int getIndicatorColor(int position) {
               return Color.BLUE;
           }
       });
       
return mView;
}
}


3. package : com.interfaces

3.1  DrawerCallback.java

package com.interfaces;

public interface DrawerCallback {

void onComplete(int value);
}


4. package : com.tablayoutwork

4.1 SlidingTabLayout.java

package com.tablayoutwork;

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Color;
import android.graphics.Typeface;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.util.SparseArray;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;
import android.widget.TextView;

/**
 * To be used with ViewPager to provide a tab indicator component which give constant feedback as to
 * the user's scroll progress.
 * <p>
 * To use the component, simply add it to your view hierarchy. Then in your
 * {@link android.app.Activity} or {@link android.support.v4.app.Fragment} call
 * {@link #setViewPager(android.support.v4.view.ViewPager)} providing it the ViewPager this layout is being used for.
 * <p>
 * The colors can be customized in two ways. The first and simplest is to provide an array of colors
 * via {@link #setSelectedIndicatorColors(int...)}. The
 * alternative is via the {@link com.tekinarslan.material.sample.SlidingTabLayout.TabColorizer} interface which provides you complete control over
 * which color is used for any individual position.
 * <p>
 * The views used as tabs can be customized by calling {@link #setCustomTabView(int, int)},
 * providing the layout ID of your custom layout.
 */
public class SlidingTabLayout extends HorizontalScrollView {
    /**
     * Allows complete control over the colors drawn in the tab layout. Set with
     * {@link #setCustomTabColorizer(com.tekinarslan.material.sample.SlidingTabLayout.TabColorizer)}.
     */
    public interface TabColorizer {

        /**
         * @return return the color of the indicator used when {@code position} is selected.
         */
        int getIndicatorColor(int position);

    }

    private static final int TITLE_OFFSET_DIPS = 24;
    private static final int TAB_VIEW_PADDING_DIPS = 16;
    private static final int TAB_VIEW_TEXT_SIZE_SP = 12;

    private int mTitleOffset;

    private int mTabViewLayoutId;
    private int mTabViewTextViewId;
    private boolean mDistributeEvenly;

    private ViewPager mViewPager;
    private SparseArray<String> mContentDescriptions = new SparseArray<String>();
    private ViewPager.OnPageChangeListener mViewPagerPageChangeListener;

    private final SlidingTabStrip mTabStrip;

    public SlidingTabLayout(Context context) {
        this(context, null);
    }

    public SlidingTabLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public SlidingTabLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);

        // Disable the Scroll Bar
        setHorizontalScrollBarEnabled(false);
        // Make sure that the Tab Strips fills this View
        setFillViewport(true);

        mTitleOffset = (int) (TITLE_OFFSET_DIPS * getResources().getDisplayMetrics().density);

        mTabStrip = new SlidingTabStrip(context);
        addView(mTabStrip, LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
    }

    /**
     * Set the custom {@link com.tekinarslan.material.sample.SlidingTabLayout.TabColorizer} to be used.
     *
     * If you only require simple custmisation then you can use
     * {@link #setSelectedIndicatorColors(int...)} to achieve
     * similar effects.
     */
    public void setCustomTabColorizer(TabColorizer tabColorizer) {
        mTabStrip.setCustomTabColorizer(tabColorizer);
    }

    public void setDistributeEvenly(boolean distributeEvenly) {
        mDistributeEvenly = distributeEvenly;
    }

    /**
     * Sets the colors to be used for indicating the selected tab. These colors are treated as a
     * circular array. Providing one color will mean that all tabs are indicated with the same color.
     */
    public void setSelectedIndicatorColors(int... colors) {
        mTabStrip.setSelectedIndicatorColors(colors);
    }

    /**
     * Set the {@link android.support.v4.view.ViewPager.OnPageChangeListener}. When using {@link com.tekinarslan.material.sample.SlidingTabLayout} you are
     * required to set any {@link android.support.v4.view.ViewPager.OnPageChangeListener} through this method. This is so
     * that the layout can update it's scroll position correctly.
     *
     * @see android.support.v4.view.ViewPager#setOnPageChangeListener(android.support.v4.view.ViewPager.OnPageChangeListener)
     */
    public void setOnPageChangeListener(ViewPager.OnPageChangeListener listener) {
        mViewPagerPageChangeListener = listener;
    }

    /**
     * Set the custom layout to be inflated for the tab views.
     *
     * @param layoutResId Layout id to be inflated
     * @param textViewId id of the {@link android.widget.TextView} in the inflated view
     */
    public void setCustomTabView(int layoutResId, int textViewId) {
        mTabViewLayoutId = layoutResId;
        mTabViewTextViewId = textViewId;
    }

    /**
     * Sets the associated view pager. Note that the assumption here is that the pager content
     * (number of tabs and tab titles) does not change after this call has been made.
     */
    public void setViewPager(ViewPager viewPager) {
        mTabStrip.removeAllViews();

        mViewPager = viewPager;
        if (viewPager != null) {
            viewPager.setOnPageChangeListener(new InternalViewPagerListener());
            populateTabStrip();
        }
    }

    /**
     * Create a default view to be used for tabs. This is called if a custom tab view is not set via
     * {@link #setCustomTabView(int, int)}.
     */
    @SuppressLint("NewApi")
protected TextView createDefaultTabView(Context context) {
        TextView textView = new TextView(context);
        textView.setGravity(Gravity.CENTER);
        textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, TAB_VIEW_TEXT_SIZE_SP);
        textView.setTypeface(Typeface.DEFAULT_BOLD);
        textView.setLayoutParams(new LinearLayout.LayoutParams(
                ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));

        TypedValue outValue = new TypedValue();
        getContext().getTheme().resolveAttribute(android.R.attr.selectableItemBackground,
                outValue, true);
        textView.setBackgroundResource(outValue.resourceId);
        textView.setAllCaps(true);

        int padding = (int) (TAB_VIEW_PADDING_DIPS * getResources().getDisplayMetrics().density);
        textView.setPadding(padding, padding, padding, padding);

        return textView;
    }

    private void populateTabStrip() {
        final PagerAdapter adapter = mViewPager.getAdapter();
        final OnClickListener tabClickListener = new TabClickListener();

        for (int i = 0; i < adapter.getCount(); i++) {
            View tabView = null;
            TextView tabTitleView = null;

            if (mTabViewLayoutId != 0) {
                // If there is a custom tab view layout id set, try and inflate it
                tabView = LayoutInflater.from(getContext()).inflate(mTabViewLayoutId, mTabStrip,
                        false);
                tabTitleView = (TextView) tabView.findViewById(mTabViewTextViewId);
            }

            if (tabView == null) {
                tabView = createDefaultTabView(getContext());
            }

            if (tabTitleView == null && TextView.class.isInstance(tabView)) {
                tabTitleView = (TextView) tabView;
            }

            if (mDistributeEvenly) {
                LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) tabView.getLayoutParams();
                lp.width = 0;
                lp.weight = 1;
            }

            tabTitleView.setText(adapter.getPageTitle(i));
            tabTitleView.setTextColor(Color.WHITE);
            tabView.setOnClickListener(tabClickListener);
            String desc = mContentDescriptions.get(i, null);
            if (desc != null) {
                tabView.setContentDescription(desc);
            }

            mTabStrip.addView(tabView);
            if (i == mViewPager.getCurrentItem()) {
                tabView.setSelected(true);
            }
        }
    }

    public void setContentDescription(int i, String desc) {
        mContentDescriptions.put(i, desc);
    }

    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();

        if (mViewPager != null) {
            scrollToTab(mViewPager.getCurrentItem(), 0);
        }
    }

    private void scrollToTab(int tabIndex, int positionOffset) {
        final int tabStripChildCount = mTabStrip.getChildCount();
        if (tabStripChildCount == 0 || tabIndex < 0 || tabIndex >= tabStripChildCount) {
            return;
        }

        View selectedChild = mTabStrip.getChildAt(tabIndex);
        if (selectedChild != null) {
            int targetScrollX = selectedChild.getLeft() + positionOffset;

            if (tabIndex > 0 || positionOffset > 0) {
                // If we're not at the first child and are mid-scroll, make sure we obey the offset
                targetScrollX -= mTitleOffset;
            }

            scrollTo(targetScrollX, 0);
        }
    }

    private class InternalViewPagerListener implements ViewPager.OnPageChangeListener {
        private int mScrollState;

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            int tabStripChildCount = mTabStrip.getChildCount();
            if ((tabStripChildCount == 0) || (position < 0) || (position >= tabStripChildCount)) {
                return;
            }

            mTabStrip.onViewPagerPageChanged(position, positionOffset);

            View selectedTitle = mTabStrip.getChildAt(position);
            int extraOffset = (selectedTitle != null)
                    ? (int) (positionOffset * selectedTitle.getWidth())
                    : 0;
            scrollToTab(position, extraOffset);

            if (mViewPagerPageChangeListener != null) {
                mViewPagerPageChangeListener.onPageScrolled(position, positionOffset,
                        positionOffsetPixels);
            }
        }

        @Override
        public void onPageScrollStateChanged(int state) {
            mScrollState = state;

            if (mViewPagerPageChangeListener != null) {
                mViewPagerPageChangeListener.onPageScrollStateChanged(state);
            }
        }

        @Override
        public void onPageSelected(int position) {
            if (mScrollState == ViewPager.SCROLL_STATE_IDLE) {
                mTabStrip.onViewPagerPageChanged(position, 0f);
                scrollToTab(position, 0);
            }
            for (int i = 0; i < mTabStrip.getChildCount(); i++) {
                mTabStrip.getChildAt(i).setSelected(position == i);
            }
            if (mViewPagerPageChangeListener != null) {
                mViewPagerPageChangeListener.onPageSelected(position);
            }
        }

    }

    private class TabClickListener implements OnClickListener {
        @Override
        public void onClick(View v) {
            for (int i = 0; i < mTabStrip.getChildCount(); i++) {
                if (v == mTabStrip.getChildAt(i)) {
                    mViewPager.setCurrentItem(i);
                    return;
                }
            }
        }
    }

}


4.2 SlidingTabStrip.java



package com.tablayoutwork;

import android.R;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
import android.widget.LinearLayout;


class SlidingTabStrip extends LinearLayout {

    private static final int DEFAULT_BOTTOM_BORDER_THICKNESS_DIPS = 0;
    private static final byte DEFAULT_BOTTOM_BORDER_COLOR_ALPHA = 0x26;
    private static final int SELECTED_INDICATOR_THICKNESS_DIPS = 3;
    private static final int DEFAULT_SELECTED_INDICATOR_COLOR = 0xFF33B5E5;

    private final int mBottomBorderThickness;
    private final Paint mBottomBorderPaint;

    private final int mSelectedIndicatorThickness;
    private final Paint mSelectedIndicatorPaint;

    private final int mDefaultBottomBorderColor;

    private int mSelectedPosition;
    private float mSelectionOffset;

    private SlidingTabLayout.TabColorizer mCustomTabColorizer;
    private final SimpleTabColorizer mDefaultTabColorizer;

    SlidingTabStrip(Context context) {
        this(context, null);
    }

    SlidingTabStrip(Context context, AttributeSet attrs) {
        super(context, attrs);
        setWillNotDraw(false);

        final float density = getResources().getDisplayMetrics().density;

        TypedValue outValue = new TypedValue();
        context.getTheme().resolveAttribute(R.attr.colorForeground, outValue, true);
        final int themeForegroundColor =  outValue.data;

        mDefaultBottomBorderColor = setColorAlpha(themeForegroundColor,
                DEFAULT_BOTTOM_BORDER_COLOR_ALPHA);

        mDefaultTabColorizer = new SimpleTabColorizer();
        mDefaultTabColorizer.setIndicatorColors(DEFAULT_SELECTED_INDICATOR_COLOR);

        mBottomBorderThickness = (int) (DEFAULT_BOTTOM_BORDER_THICKNESS_DIPS * density);
        mBottomBorderPaint = new Paint();
        mBottomBorderPaint.setColor(mDefaultBottomBorderColor);

        mSelectedIndicatorThickness = (int) (SELECTED_INDICATOR_THICKNESS_DIPS * density);
        mSelectedIndicatorPaint = new Paint();
    }

    void setCustomTabColorizer(SlidingTabLayout.TabColorizer customTabColorizer) {
        mCustomTabColorizer = customTabColorizer;
        invalidate();
    }

    void setSelectedIndicatorColors(int... colors) {
        // Make sure that the custom colorizer is removed
        mCustomTabColorizer = null;
        mDefaultTabColorizer.setIndicatorColors(colors);
        invalidate();
    }

    void onViewPagerPageChanged(int position, float positionOffset) {
        mSelectedPosition = position;
        mSelectionOffset = positionOffset;
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        final int height = getHeight();
        final int childCount = getChildCount();
        final SlidingTabLayout.TabColorizer tabColorizer = mCustomTabColorizer != null
                ? mCustomTabColorizer
                : mDefaultTabColorizer;

        // Thick colored underline below the current selection
        if (childCount > 0) {
            View selectedTitle = getChildAt(mSelectedPosition);
            int left = selectedTitle.getLeft();
            int right = selectedTitle.getRight();
            int color = tabColorizer.getIndicatorColor(mSelectedPosition);

            if (mSelectionOffset > 0f && mSelectedPosition < (getChildCount() - 1)) {
                int nextColor = tabColorizer.getIndicatorColor(mSelectedPosition + 1);
                if (color != nextColor) {
                    color = blendColors(nextColor, color, mSelectionOffset);
                }

                // Draw the selection partway between the tabs
                View nextTitle = getChildAt(mSelectedPosition + 1);
                left = (int) (mSelectionOffset * nextTitle.getLeft() +
                        (1.0f - mSelectionOffset) * left);
                right = (int) (mSelectionOffset * nextTitle.getRight() +
                        (1.0f - mSelectionOffset) * right);
            }

            mSelectedIndicatorPaint.setColor(color);

            canvas.drawRect(left, height - mSelectedIndicatorThickness, right,
                    height, mSelectedIndicatorPaint);
        }

        // Thin underline along the entire bottom edge
        canvas.drawRect(0, height - mBottomBorderThickness, getWidth(), height, mBottomBorderPaint);
    }

    /**
     * Set the alpha value of the {@code color} to be the given {@code alpha} value.
     */
    private static int setColorAlpha(int color, byte alpha) {
        return Color.argb(alpha, Color.red(color), Color.green(color), Color.blue(color));
    }

    /**
     * Blend {@code color1} and {@code color2} using the given ratio.
     *
     * @param ratio of which to blend. 1.0 will return {@code color1}, 0.5 will give an even blend,
     *              0.0 will return {@code color2}.
     */
    private static int blendColors(int color1, int color2, float ratio) {
        final float inverseRation = 1f - ratio;
        float r = (Color.red(color1) * ratio) + (Color.red(color2) * inverseRation);
        float g = (Color.green(color1) * ratio) + (Color.green(color2) * inverseRation);
        float b = (Color.blue(color1) * ratio) + (Color.blue(color2) * inverseRation);
        return Color.rgb((int) r, (int) g, (int) b);
    }

    private static class SimpleTabColorizer implements SlidingTabLayout.TabColorizer {
        private int[] mIndicatorColors;

        @Override
        public final int getIndicatorColor(int position) {
            return mIndicatorColors[position % mIndicatorColors.length];
        }

        void setIndicatorColors(int... colors) {
            mIndicatorColors = colors;
        }
    }
}


5. package : com.toolbarmaterialcomp

5.1  MainActivity.java

package com.toolbarmaterialcomp;

import android.annotation.SuppressLint;
import android.content.Intent;
import android.content.res.Configuration;
import android.os.Bundle;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.widget.Toolbar;
import android.util.Log;
import android.view.Gravity;
import android.view.MenuItem;
import android.widget.FrameLayout;
import android.widget.LinearLayout;
import android.widget.Toast;

import com.constants.Constants;
import com.fragments.Homefragment;
import com.fragments.ListDrawerFragment;
import com.fragments.TabFragment;
import com.interfaces.DrawerCallback;
import com.netsol.toolbarmaterialcomp.R;

public class MainActivity extends ActionBarActivity implements DrawerCallback{

FrameLayout mContainer;
Toolbar mToolbar;
private DrawerLayout mDrawerLayout;
private ActionBarDrawerToggle drawerToggle;
private LinearLayout mDrawerListLayout;
android.support.v4.app.FragmentManager mFragmentManager;
android.support.v4.app.FragmentTransaction mFragmentTransaction;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
initializeToolbar();
setToolbarColor(Constants.mDefault);
setToolbarTitle();
setToolbarMenuListeners();
initializeFragmentManager();
initializeDrawerVariables();
setUpNavigationDrawer();
}

private void setUpNavigationDrawer() {
drawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.app_name, R.string.app_name);
mDrawerLayout.setDrawerListener(drawerToggle);

}

private void initializeDrawerVariables() {
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
/*
*  Drawer List Below
*/
mDrawerListLayout = (LinearLayout) findViewById(R.id.navdrawer);
setLeftDrawerMenu();
/*
*   Intialize Container
*/
mContainer=(FrameLayout)findViewById(R.id.containerlayout);

}


void initializeFragmentManager()
{
mFragmentManager = getSupportFragmentManager();
}

private void setLeftDrawerMenu() {
ListDrawerFragment mDrawerfragment=new ListDrawerFragment();
android.support.v4.app.FragmentTransaction mFragmentTransactionList= mFragmentManager.beginTransaction();
mFragmentTransactionList.add(R.id.navdrawer, mDrawerfragment).commit();
}

private void setToolbarMenuListeners() {
// Set an OnMenuItemClickListener to handle menu item clicks
mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
setToolbarActionMenuClicks(item);
return true;
}
});
// Inflate a menu to be displayed in the toolbar
mToolbar.inflateMenu(R.menu.toolbarmenu);
// setSupportActionBar(toolbar);
}

private void setToolbarTitle() {
mToolbar.setTitle("New Toolbar");
}

private void setToolbarColor(int color) {
mToolbar.setBackgroundColor(getResources().getColor(color));
}

private void initializeToolbar() {
mToolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
if(mToolbar!=null){
//setSupportActionBar(mToolbar);
mToolbar.setNavigationIcon(R.drawable.ic_ab_drawer);
}
}

void setToolbarActionMenuClicks(MenuItem mItem){
switch (mItem.getItemId()) {
case R.id.searchItem:
Toast.makeText(getApplicationContext(), "Search", Toast.LENGTH_SHORT).show();
startActivity(new Intent(MainActivity.this, SecondActivity.class));
break;
case R.id.filterItem:
Toast.makeText(getApplicationContext(), "Filter", Toast.LENGTH_SHORT).show();
break;
case R.id.defaultid:
setToolbarColor(Constants.mDefault);
break;
case R.id.red:
setToolbarColor(Constants.mRed);
break;
case R.id.Blue:
setToolbarColor(Constants.mBlue);
break;
case R.id.materialgrey:
setToolbarColor(Constants.mMaterialGrey);
break;
}


}


/*
*   Drawer Option Itemselected
*/

@SuppressLint("InlinedApi")
@Override
public boolean onOptionsItemSelected(MenuItem item) {
if (drawerToggle.onOptionsItemSelected(item)) {
return true;
}

switch (item.getItemId()) {
case android.R.id.home:
mDrawerLayout.openDrawer(Gravity.START);
return true;
}

return super.onOptionsItemSelected(item);
}

@Override
protected void onPostCreate(Bundle savedInstanceState) {
super.onPostCreate(savedInstanceState);
drawerToggle.syncState();
}

@Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
drawerToggle.onConfigurationChanged(newConfig);
}


@Override
public void onComplete(int value) {

Log.e("value<><><>", ""+value);

android.support.v4.app.Fragment mFragmentToAdd=null;
switch (value) {
case 0:
mContainer.removeAllViews();
mFragmentTransaction = mFragmentManager.beginTransaction();
mFragmentToAdd=new Homefragment();

break;
case 1:
mContainer.removeAllViews();
mFragmentTransaction = mFragmentManager.beginTransaction();
mFragmentToAdd=new TabFragment();

break;

default:
break;
}
if(mFragmentToAdd==null){
Toast.makeText(getApplicationContext(), "Add your fragment, which you want to show", Toast.LENGTH_LONG).show();
}else{
mFragmentTransaction.add(R.id.containerlayout, mFragmentToAdd).commit();
}
   mDrawerLayout.closeDrawer(Gravity.START);
        
}
}



5.2 SecondActivity.java

package com.toolbarmaterialcomp;

import com.netsol.toolbarmaterialcomp.R;

import android.content.ComponentName;
import android.os.Bundle;
import android.support.v4.app.NavUtils;
import android.support.v4.content.IntentCompat;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.TextView;

public class SecondActivity extends ActionBarActivity {

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

Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
((TextView) findViewById(R.id.toolbar_title)).setVisibility(View.VISIBLE);
((TextView) findViewById(R.id.toolbar_title))
.setText("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)));
}
});
}
}


6. package : com.viewpageradapter

6.1 ViewPagerAdapter.java

package com.viewpageradapter;

import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.TextView;

import com.fragments.SampleFragment;
import com.netsol.toolbarmaterialcomp.R;

public class ViewPagerAdapter extends FragmentPagerAdapter {

final int PAGE_COUNT =8;
private String titles[] ;
View mView;
Context mContext;
TextView mTextView;

public ViewPagerAdapter(FragmentManager fm, String[] titles2,Context mContext) {
super(fm);
titles=titles2;
this.mContext=mContext;
}



@Override
public Fragment getItem(int position) {
switch (position) {
        // Open FragmentTab1.java
        case 0:
            return SampleFragment.newInstance(position);
        case 1:
            return SampleFragment.newInstance(position);
        case 2:
            return SampleFragment.newInstance(position);
        case 3:
            return SampleFragment.newInstance(position);
        case 4:
            return SampleFragment.newInstance(position);
        case 5:
            return SampleFragment.newInstance(position);
        case 6:
            return SampleFragment.newInstance(position);
        case 7:
            return SampleFragment.newInstance(position);

    }
return null;
}


@Override
public Object instantiateItem(View container, int position) {
LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(mContext.LAYOUT_INFLATER_SERVICE);

mView = inflater.inflate(R.layout.row_tablyout, null);

//mTextView=(TextView)mView.findViewById(R.id.tabname);
// mTextView.setText(titles[position]);
return mView;

}

public CharSequence getPageTitle(int position) {
return titles[position];
}

@Override
public int getCount() {
return PAGE_COUNT;
}

}


And XML layouts here :

1. fragment_drawerlayout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ListView
        android:id="@+id/leftmenulistview"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimaryDark"
        android:choiceMode="singleChoice"
        android:divider="@android:color/white"
        android:dividerHeight="1dp"
        android:drawSelectorOnTop="false" >
    </ListView>

</LinearLayout>

2. fragment_home.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:singleLine="true"
        android:text="Home Fragment"
        android:textSize="30sp"
        android:textStyle="bold" />

</LinearLayout>

3. fragment_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Tab Fragment" />

    <com.tablayoutwork.SlidingTabLayout
        android:id="@+id/sliding_tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimaryDark" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="1"
        android:background="@android:color/white" />

</LinearLayout>

4. main.xml 

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <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="?attr/actionBarSize"
            android:background="?attr/colorPrimaryDark"
            android:minHeight="?attr/actionBarSize"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

        <FrameLayout
            android:id="@+id/containerlayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/red" >
        </FrameLayout>
    </LinearLayout>

    <!--
    <ListView
        android:id="@+id/navdrawer"
        android:layout_width="200dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:layout_marginTop="?attr/actionBarSize"
        android:background="?attr/colorPrimaryDark"
        android:choiceMode="singleChoice"
        android:divider="@android:color/white"
        android:dividerHeight="1dp"
        android:drawSelectorOnTop="false" >
    </ListView>

    -->

    <LinearLayout
        android:id="@+id/navdrawer"
        android:layout_width="200dp"
        android:layout_marginTop="?attr/actionBarSize"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/blue"
        android:orientation="vertical" />

</android.support.v4.widget.DrawerLayout>

5. row_tablyout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="5dp" >

    <ImageView
        android:id="@+id/tabimg"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="center"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/tabname"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:singleLine="true"
        android:text="Demo"
        android:textSize="15sp" />

</LinearLayout>

6. second.xml 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}" >

    <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:contentInsetLeft="0dp"
        app:contentInsetStart="0dp"
        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>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/my_awesome_toolbar"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="51dp"
        android:text="@string/hello_world" />

</RelativeLayout>



Output :











Cheers!!!
Happy Coding


References : Chris Banes article

Working with tabs in Android using Fragments

Hey Guys,

Today i worked on tabs using fragments. And Always try to keep things simple as a like that        way.
 So here we go...
 
Since we have seen alots of examples which maintain fragment stacks manually using hashmaps  and all . But i've read this from stackoverflow and other reference web sites about           
 fragmenttabhost so going to use this.
And thats how it works.
Base Classes :

 1. AppMainTabActivity.java
    
public class AppTabBSecondFragment extends BaseFragment {

Button mBackbtn;
View mView;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
mView = inflater.inflate(R.layout.app_tab_b_second_screen, container,
false);
initializeWidgets();
return mView;
}

private void initializeWidgets() {
mBackbtn = (Button) mView.findViewById(R.id.backbtn);

mBackbtn.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {

mActivity.handleBackPress();

}
});
}

}

2. BaseFragment.java

import android.content.Intent;
import android.os.Bundle;
import android.support.v4.app.Fragment;

public class BaseFragment extends Fragment {
public AppMainTabActivity mActivity;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

mActivity = (AppMainTabActivity) this.getActivity();
}

public boolean onBackPressed() {
return false;
}

public void onActivityResult(int requestCode, int resultCode, Intent data) {

}
}


Fragments which we are going to add in tabs and replace now 

1. AppTabAFirstFragment.java


public class AppTabAFirstFragment extends BaseFragment {
    private Button mGotoButton;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View view       =   inflater.inflate(R.layout.app_tab_a_first_screen, container, false);

        mGotoButton =   (Button) view.findViewById(R.id.id_next_tab_a_button);
        mGotoButton.setOnClickListener(listener);

        return view;
    }

    private OnClickListener listener        =   new View.OnClickListener(){
        @Override
        public void onClick(View v){
            /* Go to next fragment in navigation stack*/
            mActivity.mAddFragments(AppConstants.TAB_A, new AppTabASecondFragment(),true,true);
        }
    };
}


2. AppTabASecondFragment.java

public class AppTabASecondFragment extends BaseFragment {

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
        View view    =  inflater.inflate(R.layout.app_tab_a_second_screen, container, false);
        return view;
}

}

3. AppTabBFirstFragment.java

public class AppTabBFirstFragment extends BaseFragment {

    private Button mGotoButton;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View view       =   inflater.inflate(R.layout.app_tab_b_first_screen, container, false);

        mGotoButton =   (Button) view.findViewById(R.id.id_next_tab_b_button);
        mGotoButton.setOnClickListener(listener);

        return view;
    }

    private OnClickListener listener        =   new View.OnClickListener(){
        @Override
        public void onClick(View v){
            /* Go to next fragment in navigation stack*/
            mActivity.mAddFragments(AppConstants.TAB_B, new AppTabBSecondFragment(),true,true);
        }
    };
}


4. AppTabBSecondFragment.java

public class AppTabBSecondFragment extends BaseFragment {

Button mBackbtn;
View mView;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
mView = inflater.inflate(R.layout.app_tab_b_second_screen, container,
false);
initializeWidgets();
return mView;
}

private void initializeWidgets() {
mBackbtn = (Button) mView.findViewById(R.id.backbtn);

mBackbtn.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {

mActivity.handleBackPress();

}
});
}

}

5. AppTabCFirstFragment.java

public class AppTabCFirstFragment extends BaseFragment {

    private Button mGotoButton;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View view       =   inflater.inflate(R.layout.app_tab_c_first_screen, container, false);

        mGotoButton =   (Button) view.findViewById(R.id.id_next_tab_C_button);
        mGotoButton.setOnClickListener(listener);

        return view;
    }

    private OnClickListener listener   =  new View.OnClickListener(){
        @Override
        public void onClick(View v){
            /* Go to next fragment in navigation stack*/
            mActivity.mAddFragments(AppConstants.TAB_C, new AppTabCSecondFragment(),true,true);
        }
    };
}


6. AppTabCSecondFragment.java

public class AppTabCSecondFragment extends BaseFragment {
Button mBackbtn;
View mView; 
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
mView = inflater.inflate(R.layout.app_tab_c_second_screen,
container, false);
initializeWidgets();
return mView;
}

private void initializeWidgets() {
mBackbtn=(Button)mView.findViewById(R.id.backbtn);
mBackbtn.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {

mActivity.handleBackPress();
}
});

}
}


Now interface that i used to handle backpress normally :

1. BackButtonCallback.java

public interface BackButtonCallback {

void handleBackPress();
}


Now the constants class for this ....


1. AppConstants.java

public class AppConstants {
public static final String TAB_A = "tab_a_identifier";
public static final String TAB_B = "tab_b_identifier";
public static final String TAB_C = "tab_c_identifier";

}


And finally the XML layouts :  


1. app_main_tab_fragment_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:orientation="horizontal" />

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0" />

        <FrameLayout
            android:id="@+id/realtabcontent"
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />
    </LinearLayout>

</TabHost>

2. tabs_icon.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tabsLayout" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:background="@drawable/tab_bg_selector"
android:gravity="center" android:orientation="vertical">
    <ImageView android:layout_width="fill_parent" android:layout_height="fill_parent"
        android:id="@+id/tab_icon" />
</LinearLayout>

3. app_tab_a_first_screen.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#aa5500"
    android:gravity="center"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="TAB A FIRST SCREEN"
        android:textColor="@android:color/white"
        android:textSize="30sp"
        android:textStyle="bold" />

    <Button
        android:id="@+id/id_next_tab_a_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dip"
        android:text="Next" />

</LinearLayout>

4. app_tab_a_second_screen.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:orientation="vertical"  android:background="#0055aa"
    android:gravity="center">
    
    <TextView android:layout_width="fill_parent" android:layout_height="wrap_content"
        android:gravity="center" android:text="TAB A SECOND SCREEN"
        android:textSize="30sp" android:textStyle="bold"
        android:textColor="@android:color/white"/>
    
</LinearLayout>

5. app_tab_b_first_screen.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:orientation="vertical"  android:background="#000000"
    android:gravity="center">
    
    <TextView android:layout_width="fill_parent" android:layout_height="wrap_content"
        android:gravity="center" android:text="TAB B FIRST SCREEN"
        android:textSize="30sp" android:textStyle="bold"
        android:textColor="@android:color/white"/>
    
    <Button android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:text="Next" android:id="@+id/id_next_tab_b_button"
        android:padding="10dip"/>

</LinearLayout>

6. app_tab_b_second_screen.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#00ffff"
    android:gravity="center"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="TAB B SECOND SCREEN"
        android:textColor="@android:color/white"
        android:textSize="30sp"
        android:textStyle="bold" />

    <Button
        android:id="@+id/backbtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/back_button" />

</LinearLayout>

7.  app_tab_c_first_screen.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:orientation="vertical"  android:background="@android:color/darker_gray"
    android:gravity="center">
    
    <TextView android:layout_width="fill_parent" android:layout_height="wrap_content"
        android:gravity="center" android:text="@string/tab_c_first_screen"
        android:textSize="30sp" android:textStyle="bold"
        android:textColor="@android:color/white"/>
    
    <Button android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:text="Next" android:id="@+id/id_next_tab_C_button"
        android:padding="10dip"/>

</LinearLayout>

8. app_tab_c_second_screen.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:orientation="vertical"  android:background="@android:color/background_dark"
    android:gravity="center">
    
    <TextView android:layout_width="fill_parent" android:layout_height="wrap_content"
        android:gravity="center" android:text="@string/tab_c_second_screen"
        android:textSize="30sp" android:textStyle="bold"
        android:textColor="@android:color/white"/>
    
    
    <Button 
        android:id="@+id/backbtn"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="@string/back_button"
        />
</LinearLayout>


Output :