.png)
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"
"Understanding The Sliding Tab Layout Implementation"
Requirements
1. Android Studio (latest version recommended)
2. Material Design Support Library (Add the dependency mention below)
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
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
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.
2. Material Design Support Library (Add the dependency mention below)
compile 'com.android.support:design:22.2.0
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.
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.
Here the lines which define the color of text when either selected, focused or pressed are as following
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.
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.
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.
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.
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]
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
with the code below
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.
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
Let Us Understand Sliding Tabs/ Tab Layout
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");
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
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.
Thank you so much)))
ReplyDeleteYou are most welcome!!
Deleteme pueden compartir
ReplyDeletecontent doesn't change upon Tap click,
ReplyDeletehow can i do it.
But it awesome tutorial.
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! :)
ReplyDeleteI found solution for it, I wish it help you.
Deleteprivate 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) {
}
});
This comment has been removed by the author.
ReplyDeleteIt is better to add this line in Main Activity
ReplyDeletetabLayout.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.
how do you add 'Material design support library' and where do you get it?
ReplyDeletedo you have a tutorial for that sir please
Hello, whene i change the orientation , the application crash
ReplyDeleteThat tutorial was awesome information,i really excited what a great information to be shared through this post.
ReplyDeleteThanks for sharing this post.
php training in chennai
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.
ReplyDeleteiOS Training in Chennai
ReplyDeleteHai,
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
I like this kind of information and Thank goodness someone is promoting quality content.
ReplyDeleteOracle SQL Training in Chennai
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.
ReplyDeleteSEO Training in Chennai
Very informative and easy to understand tutorial. Thank you! :)
ReplyDeleteHello, 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.
ReplyDeleteSorry 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
ReplyDeletecompile 'com.android.support:design:22.2.0 add this in apps build.gradle
Deletei'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?
ReplyDeletegood jobs bro!
ReplyDeleteHi 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.
ReplyDeleteAndroid Training in Chennai
Hi, great tutorial btw, keep it up.I keep getting this error msg :
ReplyDeleteThe 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?
Do we have to add toolbar layout separately?
ReplyDeleteOn the line layout = "@layout/toolbar"/> in activitymain.xml, its showing "Cannot resolve symbol @layout/toolbar"
Do we have to add toolbar layout separately?
ReplyDeleteOn the line layout = "@layout/toolbar"/> in activitymain.xml, its showing "Cannot resolve symbol @layout/toolbar"
yes you do have to add it separately other wise you can add toolbar widget in that layout xml also.
Deletein this case, fragment get item method is dedicated for only one fragment. how is there more than one fragment?
ReplyDeleteTrying to figure this out as well...
Deletenice tutorial
ReplyDeletehow 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)
ReplyDeleteI 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?
ReplyDeleteVery attarctive information.great to know about this new methods.The points are really motivable for the readers.Great and useful article.
ReplyDeleteSEO training in chennai adyar
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!!
ReplyDeleteHadoop Training in Chennai Adyar
Hello.
ReplyDelete? There is an option to download the project
Hi guys, I have a problem.
ReplyDeleteWhen 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
How to change the color of only selected tab?
ReplyDeleteExcellent, thanks
ReplyDeleteReally i enjoyed very much. And this may helpful for lot of peoples. So you are provided such a nice and great article within this.
ReplyDeleteSEO Training in Chennai
can you write toolbar.xml code
ReplyDeletewhich has been include in main_activity.xml
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.
ReplyDeleteBest Seo Web design company Chennai
I have realize that, i gained many information from this valuable post. Thanks a lot for your best post share with us.
ReplyDeleteBest Seo Training Institute in Chennai
i wanna create 4 tabs but only 3 tabs to show, i want slide it.
ReplyDeleteis it possible using tabhost? if yes, where i must change the code?
Such a nice tutorial. Do refer these tutorials too :)
ReplyDeleteAndroid Retrofit Tutorial
Android Volley Tutorial
Google Maps using Retrofit
I followed your example but i want a listview on tab and data on it which comes from json using CustomAdapter with model class
ReplyDeleteI 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!
ReplyDeleteif u please provide the source code of it
ReplyDeletethanku
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.
ReplyDeleteI 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 ?
ReplyDeleteI found this Solution but it slows down the function of tapping quite a bit
DeletetabLayout.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());
}
});
necesito su ayuda
ReplyDeletecomo 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));
}
What about Layout@toolbar shows error
ReplyDelete@Override
ReplyDeletepublic Fragment getItem(int position) {
return new TabFragment();
i have an error in this line, the return type doesnot match
This comment has been removed by the author.
ReplyDeletehi
ReplyDeletewhere is toolbar.xml layout?
how we can download source code?
Another possible implementation of tabs in android https://ps06756.wordpress.com/2016/12/04/how-to-implement-tabs-in-android/
ReplyDeleteVery Nice Post.
ReplyDeleteBest Software Training Institute in bangalore
Best SAP Training in bangalore
Best Advanced Excel Training in bangalore
It's a very Nice post.
ReplyDeleteBest IT Training in Bangalore
I appreciate everything you have added to my knowledge base.Admiring the time and effort you put into your blog and detailed information you offer.Thanks. TutuApp iOS 10
ReplyDeletewww.android4devs.com
ReplyDelete..very good!
http://www.android4devs.com
ReplyDeleteThanks for publishing this details. Sara
ReplyDeleterun 3 unblocked
ReplyDeleterun 3 unblocked 66
unblocked games run 3
run 3 unblocked 333
run 3 unblocked
unblocked games run
Good quality post and comments, thanks everyone. I read good idea. I like it. thank you for sharing blog post with us.
ReplyDeleteNina
Wow, Excellent post. This article is really very interesting and effective.The article you have shared here very awesome. I really like and appreciated your work. I read deeply your article, the points you have mentioned in this article are useful.
ReplyDeleteAndroid Training
Android Training in Chennai
nice work keep it up thanks for sharing the knowledge.Thanks for sharing this type of information, it is so useful. led lawn lights in delhi
ReplyDelete