i am currently implementing some swipable tabs into my app, i have got it all working good, the part i am struggling on is changing the icon of the tab when the user swipes.
Basically the tabs update fine when the user swipes and selects the tabs, it updates from selected to non selected, the problem is that it is also changing the actionbar main icon and i was wondering how to stop this and only update the tabs.
Here is the relevant code for the main activity let me know if you need anything else
public class MainActivity extends FragmentActivity implements
ActionBar.TabListener{
private ViewPager viewPager;
private TabsPagerAdapter mAdapter;
private ActionBar actionBar;
// Tab titles
private static final int[] ICONS = new int[] {
R.drawable.ic_tab_n,
R.drawable.ic_tab_f,
R.drawable.ic_tab_h,
R.drawable.ic_tab_n,
R.drawable.ic_tab_p,
};
private static final int[] ICONS_SELECTED = new int[] {
R.drawable.ic_tab_n_selected,
R.drawable.ic_tab_f_selected,
R.drawable.ic_tab_h_selected,
R.drawable.ic_tab_n_selected,
R.drawable.ic_tab_p_selected,
};
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Initilization
viewPager = (ViewPager) findViewById(R.id.pager);
actionBar = getActionBar();
mAdapter = new TabsPagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(mAdapter);
actionBar.setHomeButtonEnabled(false);
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
// Adding Tabs
// for (String tab_name : tabs) {
// actionBar.addTab(actionBar.newTab().setText(tab_name).setIcon(resources.getDrawable(ICONS[]))
// .setTabListener(this));
// }
for (int i=0; i < tabs.length; i++) {
actionBar.addTab(actionBar.newTab()
.setIcon(ICONS[i])
.setTabListener(this));
}
/**
* on swiping the viewpager make respective tab selected
* */
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageSelected(int position) {
// on changing the page
// make respected tab selected
actionBar.setSelectedNavigationItem(position);
actionBar.setIcon(ICONS_SELECTED[position]);
}
#Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
#Override
public void onPageScrollStateChanged(int arg0) {
if (arg0 == ViewPager.SCROLL_STATE_DRAGGING) {
actionBar.setIcon(ICONS[viewPager.getCurrentItem()]);
}
}
});
viewPager.setCurrentItem(2, false);
}
#Override
public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {
}
#Override
public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
// on tab selected
// show respected fragment view
viewPager.setCurrentItem(tab.getPosition());
tab.setIcon(ICONS_SELECTED[tab.getPosition()]);
}
#Override
public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {
tab.setIcon(ICONS[tab.getPosition()]);
}
}
I see this twice in your code, and it seems likely to do exactly what you don't want to happen:
actionBar.setIcon(ICONS_SELECTED[position]);
There is no reason to change the action bar icon, so those lines should be commented out.
Edit: Setting and then resetting the tab icons probably is not going to work either. I recommend changing the code to use a state list drawable for the tab icons, where each of the five tabs gets its own state list drawable as an icon, that will automatically display the corresponding selected or unselected version of its icon, depending on the state of the tab.
Edit: The Android 4 standard clock app is a good example of icons in tabs. The source at the link should be very useful, especially the drawable folder.
Related
I have a tab swiped layout which includes four tabs each of which have their own layout and fragment, in my main activity layout a viewpager takes part for changing tabs. specific view(tab) loads when app starts up and the others will be loaded when the tab changes. my problem is when I nevigate to the third or forth tab (not the second tab) a new instance of it's corresponding fragment will be created instead of loading previously created fragment (the expected behavior that only occur for the second tab).When I navigate to the second tab (SecondPageFragment()) and again come back to first tab it works correct and doesn't create a new IndexFragment, it load the previously created fragment instead so every thing is fine in this case but when I go to the third or forth tab and then come back to first tab it creates an new instance of IndexFragment.
what's the possible reason for that and why it only happens for third,forth etc tab and only second tab works correct and as expected ????
here is my codes that switch the tabs and their corresponding fragments
public class TabsPagerAdapter extends FragmentPagerAdapter {
public TabsPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int index) {
switch (index) {
case 0:
return new ForthPageFragment();
case 1:
return new ThirdPageFragment();
case 2:
return new SecondPageFragment();
case 3:
return new IndexFragment();
default :
break;
}
return null;
}
#Override
public int getCount() {
// get item count - equal to number of tabs
return 4;
}
}
and here is my main activity code :
public class MainActivity extends FragmentActivity implements
ActionBar.TabListener {
private ViewPager viewPager;
private TabsPagerAdapter mAdapter;
private ActionBar actionBar;
// Tab titles
private String[] tabs = { "صفحه چهارم","صفحه سوم","صفحه دوم","صفحه اصلی" };
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Initilization
viewPager = (ViewPager)findViewById(R.id.tabpager);
actionBar = getActionBar();
mAdapter = new TabsPagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(mAdapter);
actionBar.setHomeButtonEnabled(false);
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
// Adding Tabs
for (String tab_name : tabs) {
actionBar.addTab(actionBar.newTab().setText(tab_name)
.setTabListener(this));
}
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageSelected(int position) {
// on changing the page
// make respected tab selected
actionBar.setSelectedNavigationItem(position);
}
#Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
#Override
public void onPageScrollStateChanged(int arg0) {
}
});
viewPager.setCurrentItem(3);
}
#Override
public void onTabReselected(Tab tab, FragmentTransaction ft) {
}
#Override
public void onTabSelected(Tab tab, FragmentTransaction ft) {
viewPager.setCurrentItem(tab.getPosition());
}
}
viewPager.setOffscreenPageLimit(3);
Screenshot of my app:
I want to change the blue underline to white programmatically, that is by using java code not using xml styles. Can anyone suggest please how to do it?
Here is my java code. I am able to change tab background.
public class MainActivity extends FragmentActivity implements
ActionBar.TabListener {
private ViewPager viewPager;
private TabsPagerAdapter mAdapter;
private ActionBar actionBar;
// Tab titles
private String[] tabs = { "Music", "Video"};
#SuppressWarnings("deprecation")
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Initilization
viewPager = (ViewPager) findViewById(R.id.pager);
actionBar = getActionBar();
mAdapter = new TabsPagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(mAdapter);
//actionBar.setHomeButtonEnabled(false);
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
actionBar.setBackgroundDrawable(new ColorDrawable(Color.parseColor("#DF0174")));
actionBar.setStackedBackgroundDrawable(new ColorDrawable(Color.parseColor("#DF3A01")));//to change the tab colors
// Adding Tabs
for (String tab_name : tabs) {
actionBar.addTab(actionBar.newTab().setText(tab_name)
.setTabListener(this));
}
/**
* on swiping the viewpager make respective tab selected
* */
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageSelected(int position) {
// on changing the page
// make respected tab selected
actionBar.setSelectedNavigationItem(position);
}
#Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
#Override
public void onPageScrollStateChanged(int arg0) {
}
});
}
#Override
public void onTabReselected(Tab tab, FragmentTransaction ft) {
}
#Override
public void onTabSelected(Tab tab, FragmentTransaction ft) {
// on tab selected
// show respected fragment view
viewPager.setCurrentItem(tab.getPosition());
}
#Override
public void onTabUnselected(Tab tab, FragmentTransaction ft) {
}
}
Just use a filter
This will be applied to the region that isn't transparent
tabHost.getTabWidget().getChildAt(tabHost.getCurrentTab()).getBackground().setColorFilter(Color.BLUE, PorterDuff.Mode.MULTIPLY);
One line of code - no need to change states
Just add this attribute to your TabLayout in your xml file:
app:tabIndicatorColor="#color/yourColor"
I have 3 different Tabs, where each one has text. Now I want to find out how to Add drawable images on top of the text of the tab. I know that this was possible using tabhosts but that has been deprecated. My class is the following :
public class MainActivity extends FragmentActivity implements
ActionBar.TabListener {
private ViewPager viewPager;
private TabsPagerAdapter mAdapter;
private ActionBar actionBar;
// Tab titles
private String[] tabs = { "Top Rated", "Games", "Movies" };
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Initilization
viewPager = (ViewPager) findViewById(R.id.pager);
actionBar = getActionBar();
mAdapter = new TabsPagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(mAdapter);
actionBar.setHomeButtonEnabled(false);
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
// Adding Tabs
for (String tab_name : tabs) {
actionBar.addTab(actionBar.newTab().setText(tab_name)
.setTabListener(this));
}
/**
* on swiping the viewpager make respective tab selected
* */
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageSelected(int position) {
// on changing the page
// make respected tab selected
actionBar.setSelectedNavigationItem(position);
}
#Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
#Override
public void onPageScrollStateChanged(int arg0) {
}
});
}
#Override
public void onTabReselected(Tab tab, FragmentTransaction ft) {
}
#Override
public void onTabSelected(Tab tab, FragmentTransaction ft) {
// on tab selected
// show respected fragment view
viewPager.setCurrentItem(tab.getPosition());
}
#Override
public void onTabUnselected(Tab tab, FragmentTransaction ft) {
}
}
See this link: http://developer.android.com/reference/android/app/ActionBar.Tab.html#setIcon%28android.graphics.drawable.Drawable%29
Sample code:
actionBar.addTab(actionBar.newTab().setText(tab_name).setIcon(R.drawable.tab_icon).setTabListener(this));
But please consider:
Action bar navigation modes are deprecated and not supported by inline toolbar action bars. Consider using other common navigation patterns instead. (http://developer.android.com/design/patterns/navigation.html)
Edit:
For your Code you could do something like this:
Create the icons as you do for the titles:
// Tab titles
private String[] tabs = { "Top Rated", "Games", "Movies" };
//make sure this has the same length as tabs-array!
private int[] icons = {R.drawable.tab_rated, R.drawable.tab_games, R.drawable.tab_movies}
And add them in a loop:
// Adding Tabs
for (int i = 0; i < tabs.length; i++) {
actionBar.addTab(actionBar.newTab().setText(tabs[i]).setIcon(icons[i]).setTabListener(this));
}
Hi in my project i am using a actionbar with three tabs which are fragments. now i have a button in fragment C, when i click the button i need to swipe back to fragment B, also i want to carry my data from fragment C to B this is secondary, can some one point me in right direction how can i achieve this .
Below is my MainActivty which has all the fragments
public class MainActivity extends FragmentActivity implements
ActionBar.TabListener {
private String[] tabs = { "fragA", "fragB", ""fragC", " };
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main)
// Initilization
viewPager = (ViewPager) findViewById(R.id.pager);
actionBar = getActionBar();
mAdapter = new TabsPagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(mAdapter);
// Adding Tabs
for (String tab_name : tabs) {
actionBar.addTab(actionBar.newTab().setText(tab_name)
.setTabListener(this));
}
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageSelected(int position) {
// on changing the page
// make respected tab selected
actionBar.setSelectedNavigationItem(position);
}
#Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
#Override
public void onPageScrollStateChanged(int arg0) {
}
});
}
#Override
public void onTabReselected(Tab tab, FragmentTransaction ft) {
}
#Override
public void onTabSelected(Tab tab, FragmentTransaction ft) {
// on tab selected
// show respected fragment view
viewPager.setCurrentItem(tab.getPosition());
}
#Override
public void onTabUnselected(Tab tab, FragmentTransaction ft) {
}
I think this question is a duplicate, take a look here Android ActionBar Tabs - Swipe code is almost the same: a viewpager, an actionbar and you need transiction between fragments to be done with a swipe gesture.
Hope it helped you out ;)
I am really stuck. I did four Swipe Views with Tabs in my main activity but what I want is when user opens the application it shows automatically the second tab not the first one.
This is my MainActivity.java
public class MainActivity extends FragmentActivity implements
ActionBar.TabListener {
private ViewPager viewPager;
private TabsPagerAdapter mAdapter;
private ActionBar actionBar;
// Tab titles
private String[] tabs = { "First Tab", "Second Tab", "Third Tab", "Fourth Tab" };
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Initilization
viewPager = (ViewPager) findViewById(R.id.pager);
actionBar = getActionBar();
mAdapter = new TabsPagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(mAdapter);
actionBar.setHomeButtonEnabled(false);
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
// Adding Tabs
for (String tab_name : tabs) {
actionBar.addTab(actionBar.newTab().setText(tab_name)
.setTabListener(this));
}
/**
* on swiping the viewpager make respective tab selected
* */
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageSelected(int position) {
// on changing the page
// make respected tab selected
actionBar.setSelectedNavigationItem(position);
}
#Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
#Override
public void onPageScrollStateChanged(int arg0) {
}
});
}
#Override
public void onTabReselected(Tab tab, FragmentTransaction ft) {
}
#Override
public void onTabSelected(Tab tab, FragmentTransaction ft) {
// on tab selected
// show respected fragment view
viewPager.setCurrentItem(tab.getPosition());
}
#Override
public void onTabUnselected(Tab tab, FragmentTransaction ft) {
}
And this is my main_activity.xml:
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
The second tab is index 1, all you should need to do is add a setCurrentItem to change the current tab to the correct one after you have setup the page change listener.
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_paged);
... code omitted ...
/**
* on swiping the viewpager make respective tab selected
**/
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {...}
// set the default tab to the second tab
viewPager.setCurrentItem(1, false);
}
You can use this code to make the desired tab selected
suppose if you want to select the second tab to be default selected tab then
actionBar.setSelectedNavigationItem(1);
will do the same