I have implemented Swipe Views with Tabs from the Android's official website: http://developer.android.com/training/implementing-navigation/lateral.html
I want to make two modifications to this code:
The Tab bar on the top shows three different tabs. On top left; the previous tab, on top right; the next tab and on top mid; the current/selected tab. I want to hide the previous and the next tabs. I want it to show only the current/selected tab bar.
In this code, each tab has only one fragment. I want Tab 2 to have 3 fragments lined horizontally. What I want is, if I swipe on from the top on the Tabs, I will go directly to the next/previous Tabs. But if I swipe on the screen, below the Tabs, I should be able to swipe three times for tab two before I reach tab 3. To elaborate: I need horizontally scroll-able List-views in each fragment.
Is this the right direction for this? Any help would be appreciated.
I didn't understand your first point, but about grouping several fragments under the same tab, you can do it by adding your own listeners for tabs pressed and for viewPager swipe, instead of letting the view Pager implement that logic. Here is an example:
//setup tabs
mTabLayout = (TabLayout) findViewById(R.id.tabs);
mTabLayout.addTab(mTabLayout.newTab("Prev"));
mTabLayout.addTab(mTabLayout.newTab("Current"));
mTabLayout.addTab(mTabLayout.newTab("Next"));
//Listen for pressed tabs
mTabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
#Override
public void onTabSelected(TabLayout.Tab tab) {
if (mDissableTabListener) {
return;
}
if (tab.getPosition() == 0) {
//go to first position
mViewPager.setCurrentItem(0);
} else if (tab.getPosition() == 1){
//i.e: go to your first tab at the center
,ViewPager.setCurrentItem(1);
} else if (tab.getPosition() == 2) {
//go to last position
if (mViewPager.getCurrentItem() == mViewPager.getAdapter().getCount() -1) {
//we are in the last tab, so move to first position
mViewPager.setCurrentItem(0);
}
}
}
...
});
//Now use a OnViewPagerListener to change selected tab when there is a swipe
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
//avoid the TabSelectedMethod to be called (it would change the viewPager current item)
mDissableTabListener = true;
if (position == mViewPager.getAdapter().getCount() -1){
//When swipe to last
mTabLayout.getTabAt(2).select();
} else if (position == 0){
//select first tab
mTabLayout.getTabAt(0).select();
} else {
//select center tab
mTabLayout.getTabAt(1).select();
}
mDissableTabListener = false;
}
...
});
Related
As bellow code indicate three Tab ,
i want to change the tab colour when perticular tab click
i tried all the setting background colour and also i follow all answer , but it is not helpfull
please give me any solution for this.
i want to show the tab colour should be different when clicking the tab
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
#Override
public void onTabSelected(TabLayout.Tab tab) {
if (tab.getPosition() == 0) {
tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF")); // setting colour but its not working
recyclerView.setBackgroundResource(R.drawable.bghomeback);
titleText.setVisibility(View.GONE);
titleText1.setVisibility(View.VISIBLE);
ContentfulAdapter.getInstance().filter("");
mSearchView.setVisibility(View.GONE);
mSearchImage.setVisibility(View.GONE);
mSearchText.setVisibility(View.GONE);
mFavText.setVisibility(View.INVISIBLE);
swipeRefresh.setOnRefreshListener(storyFragment::requestSync);
swipeRefresh.setEnabled(true);
} else if (tab.getPosition() == 1) {
titleText.setVisibility(View.VISIBLE);
titleText1.setVisibility(View.GONE);
// mRelative.setBackgroundResource(Color.parseColor("#000000"));
tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));
recyclerView.setBackgroundResource(R.drawable.seraback);
ContentfulAdapter.getInstance().filter("");
mSearchView.setVisibility(View.VISIBLE);
mFavText.setVisibility(View.GONE);
mSearchView.setQuery("", false);
swipeRefresh.setRefreshing(false);
swipeRefresh.setEnabled(false);
} else if (tab.getPosition() == 2){
recyclerView.setBackgroundResource(R.drawable.favback);
tabLayout.setSelectedTabIndicatorColor(R.drawable.taitemselect1);
titleText.setVisibility(View.VISIBLE);
titleText1.setVisibility(View.GONE);
// mSearchImage.setVisibility(View.GONE);
mSearchText.setVisibility(View.GONE);
mSearchView.setVisibility(View.GONE);
// ContentfulAdapter.getInstance().filter("");
// swipeRefresh.setOnRefreshListener(storyFragment::requestSync);
mFavText.setVisibility(View.VISIBLE);
mFavText.setText("The books you mark as favourite will appear in this page.\n No favourite book added.");
ContentfulAdapter.getInstance().showFavoriteItem();
if (ContentfulAdapter.getInstance().getItemCount() < 1) {
mFavText.setVisibility(View.VISIBLE);
mFavText.setText("The books you mark as favourite will appear in this page.\n No favourite book added.");
} else {
mFavText.setVisibility(View.INVISIBLE);
}
swipeRefresh.setRefreshing(false);
swipeRefresh.setEnabled(false);
}
ISSUE
The reason why this code isn't working is that actually you are not changing the tab background but the color of the indicator of the selected tab
SOLUTION
Since I'm not sure of what you're trying to achieve, I'll give you some useful information about TabLayout.
The method TabLayout.getTabCount() returns the number of tabs in your Layout;
the method TabLayout.getTabAt() returns an object of type TabLayout.Tab that represents the tab.
With these two methods you can iterate over all the tabs and use the method TabLayout.Tab.setCustomView(int) or TabLayout.Tab.setCustomView(View) to use a custom view for that tab, as explained here in the answer of MarcGV.
If you want a more dynamic solution you can use TabLayout.getSelectedTabPosition() to get the index of the selected tab and get the Tab object with the method mentioned before.
If you need to change just the color of each tab you can try to do the following:
for (int i = 0; i < tabLayout.getTabCount(); i++) {
TabLayout.Tab tab = tabLayout.getTabAt(i);
tab.getCustomView().setBackgroundColor(Color.parseColor(getRandomColor()));
}
I assume that the method getRandomColor() picks one value from 000000 to FFFFFF.
I have a tab layout with a view pager and 5 different tabs, if the user is not registered only one option is available, so I want to disable the click on the other tabs. What I did is override the onTabSelected to change the current item in the viewPager.
#Override
public void onTabSelected(TabLayout.Tab tab) {
if (User.current != null) {
viewPager.setCurrentItem(tab.getPosition());
} else {
viewPager.setCurrentItem(0);
}
}
It works perfectly but it has one problem, the tab indicator change to the selected tab, so I want to keep the tab indicator on the first tab.
I have three tabs like Tab1, Tab2, Tab3 and i have viewpager in MainFragment to display these three tabs. How can i display a spinner in toolbar only when user navigates to Tab3.
Insert spinner in toolbar custom view, implement ViewPager callbacks to receive current pager position and make some logic:
#Override
public void onPageSelected(int position) {
super.onPageSelected(position);
if (position == 0 || position == 1)
spinner.setVisibility(View.GONE); // hide spinner
else if (position == 2)
spinner.setVisibility(View.VISIBLE); // show spinner
}
I have implemented the tabs using new Android Design library (23.0.1 version). I followed this link http://blog.grafixartist.com/material-design-tabs-with-android-design-support-library/.
Everything is fine but: I have total 7 tabs so all tabs are not seen at the same time in the phone screen as the width of all tabs are more than the screen width. when I selected the right most tab (or any tab from right side), it does not come to the middle of the TabLayout (mid of the screen) so that the next hidden tabs on right side gets visibility.
Even when I swipe to right most page, it selects the tab with the indicator shown under the tab but the tab selected is off the screen. It should move to the middle of the screen.
Any clue ?
I had to add
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE) in source code
or
app:tabMode="scrollable" in XML.
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
tabLayout.setScrollPosition(position,positionOffset,true);
}
#Override
public void onPageSelected(int position) {
}
#Override
public void onPageScrollStateChanged(int state) {
}
});
using method addOnPageChangeListener worked for me
I am running an app with 3 tabs that support both swiping and action bar for tab navigation. i set up a validation check so that it when tab 2 is selected, if certain requirements arent met, it returns to tab 1.
It works well with swiping (if swiping from tab1 to tab2, it displays the error message and returns to tab 1) but with the action bar, if an action bar button is pressed for tab2, the error message is displayed and tab1's view displayed but the action bar button remains on the tab 2.
I had tried the following script but with no luck of changing the active tab button back to the first tab. This is especially a problem since data is supposed to be saved to sqlite when whenever a new tab is selected.
public void onTabSelected(Tab tab, FragmentTransaction ft) {
check = GlobalApp.data().value;
if(tab.getTag() == "Product")
{
if(check == "Select Client")
{
actionBar.setSelectedNavigationItem(0);
viewPager.setCurrentItem(0);
alert.showAlertDialog(Invoice2.this,
"Error",
"Client name not selected", true);
}
else
{
viewPager.setCurrentItem(tab.getPosition());
}
}
else if ((tab.getTag() == "Confirm"))
{
viewPager.setCurrentItem(tab.getPosition());
}
First bind the tabs to the ViewPager:
ActionBar.TabListener tabListener = new ActionBar.TabListener() {
public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
viewPager.setCurrentItem(tab.getPosition());
//Do the criteria check here; AFTER setting current item.
}
then Viewpager to the tabs:
viewPager.setOnPageChangeListener(
new ViewPager.SimpleOnPageChangeListener() {
#Override
public void onPageSelected(int position) {
getActionBar().setSelectedNavigationItem(position);
//Do the criteria check here; AFTER setting current item.
}
});
After that you can perform check for your criteria after commented lines. Regardless of you changing the tab or page, your tabs and your pages should change synchronously. For more info check this Android Developers training page