Tab Layout - Material Design Support Library Tutorial (Sliding Tabs)

With Material Design Support library out and available, Building great looking android apps have become easier for a developers. Today we are going to take a look at building Sliding Tabs in android. I have covered the development of sliding tabs before this library was available in another post which was a little tiresome job, with Material design support library integrating sliding tabs in your layout has now become a piece of cake.


Prerequisites

This tutorial is going to use a toolbar as action bar and if you aren't familiar with building toolbar then before starting out this tutorial please go through that my Toolbar tutorial. This is not absolutely necessary but I strongly recommend you do give it a read.

Secondly I have explained the working of sliding tabs in my previous post before this library was out. I recommend you to give that post a read as well, I don't want you to read the complete tutorial but just the part under
"Understanding The Sliding Tab Layout Implementation"

Requirements

1. Android Studio (latest version recommended)

2. Material Design Support Library (Add the dependency mention below)

compile 'com.android.support:design:22.2.0


Let Us Understand Sliding Tabs/ Tab Layout 




Material design support library provides a class called TabLayout which is basically a view class, required to be added into you layout for creating Sliding Tabs. Most of the times you are going to add this view below your toolbar because thats where you want your Tabs to be placed. Before staring out lets have a look at what we are trying to build up in this tutorial.


As you can see the tabs viz. Home, Inbox, Star are hold by Tab Layout which is placed right below the Toolbar, below the tab layout we have a view pager which is going to be linked with tab layout to achieve the desired effect.


Steps To Build Sliding Tabs With Tab Layout


1. Open Android studio and create a new blank project, after your project has been created go to the res->values folder and create a new file named color.xml. Add the following lines to that file, everything about those colors have been explained in my Toolbar tutorial. The property with name "indicator" is used to define the color of the indicator line below the tabs. which we will set appropriately to the indicator while we code.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="PrimaryColor">#2196F3</color>
    <color name="PrimaryDarkColor">#1976D2</color>
    <color name="indicator">#ecd95a</color>

</resources>

2. Now we need to create a state list selector for the tabs text, this state list selector will define the text color of the tabs when they are selected and also define the default text color (When the tab is not the selected tab) So go to res folder and create a new folder named Color. Now create a new file inside this folder and name it tab_selector.xml and add the following lines to that file.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_selected="true" android:color="@android:color/white" />
        <item android:state_focused="true" android:color="@android:color/white" />
        <item android:state_pressed="true" android:color="@android:color/white" />
        <item android:color="#d1c9c9" />
</selector>

Here the lines which define the color of text when either selected, focused or pressed are as following

<item android:state_selected="true" android:color="@android:color/white" />
<item android:state_focused="true" android:color="@android:color/white" />
<item android:state_pressed="true" android:color="@android:color/white" />

And the line below defines the default color for the text on tabs.

<item android:color="#d1c9c9" />

3. Now we need to define the style of our app for this project we are only going to define the color properties of our app, you can also define many other properties like text color, text type and font sizes and many more. To do that go to res->values->style.xml and add the following lines to your file. Again all this has been explained previously in my Toolbar tutorial.
<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/PrimaryColor</item>
        <item name="colorPrimaryDark">@color/PrimaryDarkColor</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

4. Now time to set up out tabs in our layout go to res->layout->activity_main.xml and add the following lines of code in your file. All we are doing here is basically we are having a relative layout as our root view inside which we are adding Toolbar, below Toolbar we have our Tab Layout and below Tab Layout we have ViewPager. We are setting the background color of the tabs to the primary color which is blue. The same color has been setup for toolbar as well.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:background="#dfdfdf"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <include
        android:id="@+id/tool_bar"
        layout="@layout/toolbar"/>

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/PrimaryColor"
        android:layout_below="@+id/tool_bar"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/tabs"
        />

</RelativeLayout>


5. Now lets define how a single tabs content will look like, As you have seen we are not going to do anything fancy we are just having a simple text which says "Hello, This is a tab layout" which is placed in middle of the the screen. So go to res->layout and create a new layout name it tabs.xml and add the following lines of code to it.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:textAppearance="?android:attr/textAppearanceMedium"
        android:text="This is a tab layout"
        android:id="@+id/textView"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />
</RelativeLayout>

6. Now we are pretty much done with the design part of the app so we can start coding it now. First of all we have added a view pager in the layout so we need to create a fragment which this view pager will hold. We are going to have three tabs but for ease of this tutorial I am only going to create one fragment which this view pager will hold and the same fragment will be shown when the tab changes. obviously you can create new fragment and add different content in them as per your requirement. We have already created the layout for the fragment (tabs.xml) now we need to code it so go to java->[package name] and create a new java class and name it TabFragment.java and add the following lines of code to that file.

package com.android4devs.slidingtabs;

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

/**
 * Created by Admin on 11-12-2015.
 */
public class TabFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.tabs, container, false);
    }
}


7. Now as we have a view pager, we need to create an adapter for the view pager, So go to java->[package name] and create a new java class, name it ViewPagerAdapter.java and add the following lines of code to it. [Read the comments in the code bellow to understand whats happening]


package com.android4devs.slidingtabs;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;

/**
 * Created by Admin on 11-12-2015.
 */
public class ViewPagerAdapter extends FragmentStatePagerAdapter {

    public ViewPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        return new TabFragment();    // Which Fragment should be dislpayed by the viewpager for the given position
                                    // In my case we are showing up only one fragment in all the three tabs so we are
                                    // not worrying about the position and just returning the TabFragment
    }

    @Override
    public int getCount() {
        return 3;           // As there are only 3 Tabs
    }
   
}

8. Now we have everything in place to start coding our main activity, so go to java->[package-name]->MainActivity.java and add the following line of code to the file, [Read the comments in the file to understand whats happening]

package com.android4devs.slidingtabs;

import android.content.Context;
import android.support.design.widget.TabLayout;
import android.support.v4.content.ContextCompat;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {

    //Declaring All The Variables Needed
    
    private Toolbar toolbar;
    private TabLayout tabLayout;
    private ViewPager viewPager;
    private ViewPagerAdapter viewPagerAdapter;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        /*
        Assigning view variables to thier respective view in xml
        by findViewByID method
         */
        
        toolbar = (Toolbar) findViewById(R.id.tool_bar);
        tabLayout = (TabLayout) findViewById(R.id.tabs);
        viewPager = (ViewPager) findViewById(R.id.viewpager);

        /*
        Creating Adapter and setting that adapter to the viewPager
        setSupportActionBar method takes the toolbar and sets it as
        the default action bar thus making the toolbar work like a normal
        action bar.
         */
        viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());
        viewPager.setAdapter(viewPagerAdapter);
        setSupportActionBar(toolbar);

        /*
        TabLayout.newTab() method creates a tab view, Now a Tab view is not the view 
        which is below the tabs, its the tab itself.
         */
        
        final TabLayout.Tab home = tabLayout.newTab();
        final TabLayout.Tab inbox = tabLayout.newTab();
        final TabLayout.Tab star = tabLayout.newTab();

        /*
        Setting Title text for our tabs respectively
         */
        
        home.setText("Home");
        inbox.setText("Inbox");
        star.setText("Star");

        /*
        Adding the tab view to our tablayout at appropriate positions
        As I want home at first position I am passing home and 0 as argument to 
        the tablayout and like wise for other tabs as well
         */
        tabLayout.addTab(home, 0);
        tabLayout.addTab(inbox, 1);
        tabLayout.addTab(star, 2);
        
        /*
        TabTextColor sets the color for the title of the tabs, passing a ColorStateList here makes
        tab change colors in different situations such as selected, active, inactive etc
        
        TabIndicatorColor sets the color for the indiactor below the tabs
         */
        
        tabLayout.setTabTextColors(ContextCompat.getColorStateList(this, R.color.tab_selector));
        tabLayout.setSelectedTabIndicatorColor(ContextCompat.getColor(this, R.color.indicator));

        /*
        Adding a onPageChangeListener to the viewPager
        1st we add the PageChangeListener and pass a TabLayoutPageChangeListener so that Tabs Selection
        changes when a viewpager page changes.
         */
        
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
        

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}



9. Now if you run the project you would have a working demo of sliding tabs as shown below.



10. Now many a times you wont be needing text on tabs but you would be needing icons in place of text, Well with the TabLayout thats very easy to add as well. So to get Icons instead of text first of all copy paste your icons into your projects drawable folder, I have downloaded 

ic_home_grey.png,
ic_inbox_grey.png
ic_star_grey.png 

ic_home_white.png
ic_inbox_white.png
ic_star_white.png

grey icon for non selected tab and white for selected tab. I copy pasted all 6 icons in my project

11. Now open up MainActivity and Replace the following line of code

home.setText("Home");
inbox.setText("Inbox");
star.setText("Star");

with the code below

home.setIcon(R.drawable.ic_home_white);
inbox.setIcon(R.drawable.ic_inbox_grey);
star.setIcon(R.drawable.ic_star_grey);

First Icon (Home) is set to white and rest to grey because by default home tab will be selected when app is going to open up.

12. Now I need to change the icons as soon as some other tab is selected by the user, for that we add a onPageListner to the ViewPager and in the method onPageSelected we change the icons appropriately. To do this open up your main activity and add the following code to it. So MainActivity.java for tabs with icon looks something like this.
package com.android4devs.slidingtabs;

import android.content.Context;
import android.support.design.widget.TabLayout;
import android.support.v4.content.ContextCompat;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {

    //Declaring All The Variables Needed

    private Toolbar toolbar;
    private TabLayout tabLayout;
    private ViewPager viewPager;
    private ViewPagerAdapter viewPagerAdapter;


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

        /*
        Assigning view variables to thier respective view in xml
        by findViewByID method
         */

        toolbar = (Toolbar) findViewById(R.id.tool_bar);
        tabLayout = (TabLayout) findViewById(R.id.tabs);
        viewPager = (ViewPager) findViewById(R.id.viewpager);

        /*
        Creating Adapter and setting that adapter to the viewPager
        setSupportActionBar method takes the toolbar and sets it as
        the default action bar thus making the toolbar work like a normal
        action bar.
         */
        viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());
        viewPager.setAdapter(viewPagerAdapter);
        setSupportActionBar(toolbar);

        /*
        TabLayout.newTab() method creates a tab view, Now a Tab view is not the view
        which is below the tabs, its the tab itself.
         */

        final TabLayout.Tab home = tabLayout.newTab();
        final TabLayout.Tab inbox = tabLayout.newTab();
        final TabLayout.Tab star = tabLayout.newTab();

        //Setting Icons to our respective tabs

        home.setIcon(R.drawable.ic_home_white);
        inbox.setIcon(R.drawable.ic_inbox_grey);
        star.setIcon(R.drawable.ic_star_grey);

        /*
        Adding the tab view to our tablayout at appropriate positions
        As I want home at first position I am passing home and 0 as argument to
        the tablayout and like wise for other tabs as well
         */
        tabLayout.addTab(home, 0);
        tabLayout.addTab(inbox, 1);
        tabLayout.addTab(star, 2);

        /*
        TabTextColor sets the color for the title of the tabs, passing a ColorStateList here makes
        tab change colors in different situations such as selected, active, inactive etc

        TabIndicatorColor sets the color for the indiactor below the tabs
         */

        tabLayout.setTabTextColors(ContextCompat.getColorStateList(this, R.color.tab_selector));
        tabLayout.setSelectedTabIndicatorColor(ContextCompat.getColor(this, R.color.indicator));

        /*
        Adding a onPageChangeListener to the viewPager
        1st we add the PageChangeListener and pass a TabLayoutPageChangeListener so that Tabs Selection
        changes when a viewpager page changes.
        
        2nd We add the onPageChangeListener to change the icon when the page changes in the view Pager
         */

        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                switch (position){
                    case 0:
                        /*
                        setting Home as White and rest grey
                        and like wise for all other positions 
                         */
                        home.setIcon(R.drawable.ic_home_white);
                        inbox.setIcon(R.drawable.ic_inbox_grey);
                        star.setIcon(R.drawable.ic_star_grey);
                        break;
                    case 1:
                        home.setIcon(R.drawable.ic_home_grey);
                        inbox.setIcon(R.drawable.ic_inbox_white);
                        star.setIcon(R.drawable.ic_star_grey);
                        break;
                    case 2:
                        home.setIcon(R.drawable.ic_home_grey);
                        inbox.setIcon(R.drawable.ic_inbox_grey);
                        star.setIcon(R.drawable.ic_star_white);
                        break;
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}


13. Now If you run the app you would get your app running and it would look like this.



14. So with that we have a working sliding tabs demo with text as well as icons.

Bonus Tip

1. When creating your ViewPagerAdapter.java you can ovverride the getPageTitle(int Positon) method something like following

@Overridepublic CharSequence getPageTitle(int position) {
    switch (position){
        case 0:
            return "Home";
        case 1:
            return "Inbox";
        case 2:
            return "Star";
    }
    return "Default Text";
}

By doing so, your tabs would get title text from this method instead of setting them like

home.setText("Home");
inbox.setText("Inbox");
star.setText("Star");

2. Sometimes you might want to have icons and text or some other wired combination as your tab, well with the new library even thats possible, Lets say I want to have a Icon and TextView Below the icon and I want the TextView Bold well . So all I do is create a new layout file name it custom_view.xml add the following line of code to it

<?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="wrap_content"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_gravity="center_horizontal"
        />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:textSize="16sp"
        android:textStyle="bold" />

</LinearLayout>


Now All I need to do is set this layout to the Tabs we created in the MainActivity.xml, lets say I want to set this layout as the tab view to the home tab so I remove setIcon() method and add a setCustomView() method to the tab and this layout gets added to the tab. Now ofcourse you need to inflate the view in a view object something like the following before you set the view to the tabs to have a appropriate icon and text set to all the tabs here is the part of the code you need to add in your main activity


        View HomeView = getLayoutInflater().inflate(R.layout.coustom_view,null);
        ImageView iconHome = (ImageView) HomeView.findViewById(R.id.imageView);
        TextView textView = (TextView) HomeView.findViewById(R.id.textView2);
        iconHome.setImageResource(R.drawable.ic_home_grey);
        textView.setText("Home");

        View InboxView = getLayoutInflater().inflate(R.layout.coustom_view,null);
        ImageView iconIn = (ImageView) InboxView.findViewById(R.id.imageView);
        TextView textViewIn = (TextView) InboxView.findViewById(R.id.textView2);
        iconIn.setImageResource(R.drawable.ic_inbox_grey);
        textViewIn.setText("Inbox");

        View StarView = getLayoutInflater().inflate(R.layout.coustom_view,null);
        ImageView iconStar = (ImageView) StarView.findViewById(R.id.imageView);
        TextView textViewStar = (TextView) StarView.findViewById(R.id.textView2);
        iconStar.setImageResource(R.drawable.ic_inbox_grey);
        textViewStar.setText("Star");

        home.setCustomView(HomeView);
        inbox.setCustomView(InboxView);
        star.setCustomView(StarView);

        tabLayout.addTab(home, 0);
        tabLayout.addTab(inbox, 1);
        tabLayout.addTab(star, 2);

If you run the app with the above changes here is the result you would get



So we have a icon and textview below it and a bold style to text view as we wanted, So that wraps the TabLayout in the Material design support library. 

 I dont know if you can call this as a tip but thats a option available while working with the TabLayout as a blogger providing tutorials I want reader to know all that I understand. Hope you like the tutorial, Subscribe to mail list and Keep Coding.

Akash bangad

Computer Engineer from Maharashtra,India. Trying to make my way in the world of mobile development. Steve Jobs admirer and techy at heart.

66 comments:

  1. content doesn't change upon Tap click,
    how can i do it.
    But it awesome tutorial.

    ReplyDelete
  2. As Rokia already said, if you tap on a tab, the slider bar goes to that tab, but the content doesnt change and the previews tab icon stays white. Would be great if someone knows how to fix that! :)

    ReplyDelete
    Replies
    1. I found solution for it, I wish it help you.
      private TabLayout tabLayout;
      tabLayout = (TabLayout) findViewById(R.id.tabs);

      tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
      @Override
      public void onTabSelected(TabLayout.Tab tab) {
      viewPager.setCurrentItem(tab.getPosition());
      }

      @Override
      public void onTabUnselected(TabLayout.Tab tab) {

      }

      @Override
      public void onTabReselected(TabLayout.Tab tab) {

      }
      });

      Delete
  3. This comment has been removed by the author.

    ReplyDelete
  4. It is better to add this line in Main Activity
    tabLayout.setOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewPager));

    If we miss this line it will be not possible to change tab by clicking. Only swipe (slide) will work.

    ReplyDelete
  5. how do you add 'Material design support library' and where do you get it?
    do you have a tutorial for that sir please

    ReplyDelete
  6. Hello, whene i change the orientation , the application crash

    ReplyDelete
  7. That tutorial was awesome information,i really excited what a great information to be shared through this post.
    Thanks for sharing this post.
    php training in chennai

    ReplyDelete
  8. The programming was very easily understand and more important coding are provided on this post and this is very valuable in my studies,all coding easily understand and develop more skills,thanks for sharing this post.
    iOS Training in Chennai

    ReplyDelete

  9. Hai,

    Nicely written post. I am just about to start a new blog and there could not have been a better guide than this one for some good pointers. I am looking forward to starting a successful blog after reading this incredibly useful post of yours. Waiting for more such posts like this.

    Keep writing and sharing!

    – Rithika
    SEO Training in Chennai

    ReplyDelete
  10. Wow amazing i saw the article with execution models you had posted. It was such informative. Really its a wonderful article. Thank you for sharing and please keep update like this type of article because i want to learn more relevant to this topic.

    Web Designing Training in Chennai

    ReplyDelete
  11. I like this kind of information and Thank goodness someone is promoting quality content.


    Oracle SQL Training in Chennai

    ReplyDelete
  12. Thank you for your post. This was really an appreciating one. You done a good job. Keep on blogging like this unique information with us.

    SEO Training in Chennai

    ReplyDelete
  13. Very informative and easy to understand tutorial. Thank you! :)

    ReplyDelete
  14. Hello, I've been trying to follow the tutorial, but I get an error message " selector needs to be declare". Due to this I've not been able to continue with the rest of the tutorial. Kindly help me with it. Thank You.

    ReplyDelete
  15. Sorry i wanna ask why TabLayout on my MainActivity.java get an error message "cannot resolve symbol TabLayout"? Hope someone give me a solution thank you

    ReplyDelete
    Replies
    1. compile 'com.android.support:design:22.2.0 add this in apps build.gradle

      Delete
  16. Thank you for having taken your time to provide us with your valuable information
    relating to your stay with us.we are sincerely concerned.., Most importantly, you
    Keepit the major... Peridot Systems Consumer Complaints

    ReplyDelete
  17. i've come across the problem of upgrading. i upgrade my apps but it's always flash-backing. is it the problem of my phone or the new app? how can i recover to the old version?

    ReplyDelete
  18. Hi I read your post very carefully and I think you are right that a well written post should be at least a 100 words and should capture the essence of your blog, book or article.

    Android Training in Chennai

    ReplyDelete
  19. Hi, great tutorial btw, keep it up.I keep getting this error msg :
    The following classes cannot be instantiated:
    -android.support.design.TabLayout (Open Class, Show Exception, Clear Cache)
    Can anyone tell me how to resolve this so I can get going with my project?

    ReplyDelete
  20. Do we have to add toolbar layout separately?
    On the line layout = "@layout/toolbar"/> in activitymain.xml, its showing "Cannot resolve symbol @layout/toolbar"

    ReplyDelete
  21. Do we have to add toolbar layout separately?
    On the line layout = "@layout/toolbar"/> in activitymain.xml, its showing "Cannot resolve symbol @layout/toolbar"

    ReplyDelete
    Replies
    1. yes you do have to add it separately other wise you can add toolbar widget in that layout xml also.

      Delete
  22. in this case, fragment get item method is dedicated for only one fragment. how is there more than one fragment?

    ReplyDelete
    Replies
    1. Trying to figure this out as well...

      Delete
  23. how to write seperate fragments for seperate tabs i mean each individual tab having its own fragment to display data(different types of data for different tabs)

    ReplyDelete
  24. I added a button to each of the tabs. Then started a new unique activity through that button. In android manifest, I mention that the main activity is the parent for these new activities. I go to newactivity1 from button1 in tab1. When I press the back button, I'm back at the mainactivity with tab1 opened. But when I go back from activities newactivity2 and newactivity3 created from tab2 and tab3 respectively, the tab1 is by default opened. How do go back from say newactivity3 and go back to the tab3 in mainactivity?

    ReplyDelete
  25. Very attarctive information.great to know about this new methods.The points are really motivable for the readers.Great and useful article.
    SEO training in chennai adyar

    ReplyDelete
  26. Really an amazing post..! By reading your blog post i gained more information. Thanks a lot for posting unique information and made me more knowledgeable person. Keep on blogging!!
    Hadoop Training in Chennai Adyar

    ReplyDelete
  27. Hello.
    ? There is an option to download the project

    ReplyDelete
  28. Hi guys, I have a problem.
    When I give a slap back to the top of the list collapsing toolbar not automatically expands.
    I need the collapsingtoolbar has the same behavior playstore

    ReplyDelete
  29. How to change the color of only selected tab?

    ReplyDelete
  30. Really i enjoyed very much. And this may helpful for lot of peoples. So you are provided such a nice and great article within this.

    SEO Training in Chennai

    ReplyDelete
  31. can you write toolbar.xml code
    which has been include in main_activity.xml

    ReplyDelete
  32. Your content is awesome . You have done a great job and its very useful for me . I appreciate your effort and I hope that you will get more positive comments from the web users.
    Best Seo Web design company Chennai

    ReplyDelete
  33. This content creates a new hope and inspiration with in me. Thanks for sharing article like this. The way you have stated everything above is quite awesome. Keep blogging like this. Thanks.
    Digital marketing company
    Digital marketing services

    ReplyDelete
  34. I have realize that, i gained many information from this valuable post. Thanks a lot for your best post share with us.

    Best Seo Training Institute in Chennai

    ReplyDelete
  35. i wanna create 4 tabs but only 3 tabs to show, i want slide it.
    is it possible using tabhost? if yes, where i must change the code?

    ReplyDelete
  36. I followed your example but i want a listview on tab and data on it which comes from json using CustomAdapter with model class

    ReplyDelete
  37. I followed your example but i want a listview on tab and data on it which comes from json using CustomAdapter with model class? Need help!

    ReplyDelete
  38. Thanks for all your information, Website is very nice and informative content.

    monkey go happy | superfighters 2 | bloons td | happy wheels 3

    ReplyDelete
  39. if u please provide the source code of it
    thanku

    ReplyDelete
  40. I am getting some random crash on swiping between the tabs.Also the crash is very dynamic sometimes it comes immediately but sometimes it comes after 15-20 iterations.

    ReplyDelete
  41. I found a minor flaw. When sliding to go to a new tab it works like a charm but upon tapping to go to a new tab there's a problem. I added the code Rokia suggested but when I slide to go to a new tab then tap on the icon of the previous tab only the indicator slides in but the fragment stays. Any solution for that ?

    ReplyDelete
    Replies
    1. I found this Solution but it slows down the function of tapping quite a bit

      tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
      @Override
      public void onTabSelected(TabLayout.Tab tab) {
      viewPager.setCurrentItem(tab.getPosition());
      }

      @Override
      public void onTabUnselected(TabLayout.Tab tab) {
      viewPager.setCurrentItem(tab.getPosition());
      }

      @Override
      public void onTabReselected(TabLayout.Tab tab) {
      viewPager.setCurrentItem(tab.getPosition());
      }
      });

      Delete
  42. necesito su ayuda
    como le hago para introducir codigo como este para una de las vistas ya que tengo en cada una botones y cosas asi, ya lo intente en la clase que va asociada al layout de donde tengo esto

    String[] capacidades = {"245W","250W","255W","260W","285W","300W","310W","335W"};
    Double v1,v2,v3,v4,v5,v6;
    Double Cant;
    Double Nmod;
    Double VCb ;
    Double Pdiario;
    Double Pnecesaria;

    Spinner menu ;
    Spinner mod;
    TextView prom;
    EditText b1;
    EditText b2;
    EditText b3;
    EditText b4;
    EditText b5;
    EditText b6;
    Button f1,f2;


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

    prom = (TextView) findViewById(R.id.promedio);
    b1 = (EditText) findViewById(R.id.bim1);
    b2 = (EditText) findViewById(R.id.bim2);
    b3 = (EditText) findViewById(R.id.bim3);
    b4 = (EditText) findViewById(R.id.bim4);
    b5 = (EditText) findViewById(R.id.bim5);
    b6 = (EditText) findViewById(R.id.bim6);
    menu = (Spinner) findViewById(R.id.lista);
    mod = (Spinner) findViewById(R.id.modulos);
    f1 = (Button) findViewById(R.id.fact1);
    f2 = (Button) findViewById(R.id.fact2);


    menu.setAdapter(new ArrayAdapter(this, android.R.layout.simple_spinner_item, datos));

    mod.setAdapter(new ArrayAdapter(this, android.R.layout.simple_spinner_item, capacidades));

    }

    ReplyDelete
  43. What about Layout@toolbar shows error

    ReplyDelete
  44. The share your really gives us excitement. Thanks for your sharing. If you feel tired at work or study try to participate in our games to bring the most exciting feeling. Thank you!
    hotmail sign in | red ball 1

    ReplyDelete
  45. You need to kill time, you'd have time to look these kids active. Refer to our website. Hope you get the most comfort.
    Thanks for sharing ! word cookies game | hill climb racing 2

    ReplyDelete

  46. The blog or and best that is extremely useful to keep I can share the ideas
    of the future as this is really what I was looking for, I am very comfortable and pleased to come here. Thank you very much.
    tanki online | 2048 game |
    tanki online game

    ReplyDelete
  47. @Override
    public Fragment getItem(int position) {
    return new TabFragment();

    i have an error in this line, the return type doesnot match

    ReplyDelete
  48. This comment has been removed by the author.

    ReplyDelete
  49. This is one of the cult game now, a lot of people enjoy playing them . Also you can refer to the game :
    animal jam 2 | five nights at freddys 2 | hotmail login

    ReplyDelete
  50. Your blog posts are more interesting and impressive. I think there are many people like and visit it regularly, including me.I actually appreciate your own position and I will be sure to come back here.
    lucky patcher l wings.io l geometry dash l launcher ll minecraft

    ReplyDelete
  51. hi
    where is toolbar.xml layout?
    how we can download source code?

    ReplyDelete
  52. Wonderful blog! I found it while searching on Yahoo News. Do you have any suggestions on how to get listed in Yahoo News? I’ve been trying for a while but I never seem to get there! Many thanks.
    2048 online | tanki online 3

    ReplyDelete