Styling actionbar tabs - the easy way - android

I'm trying to apply a custom style to the actionbar tabs, but for now without any success. I know there are many tutorials out there, but can someone explain how it should be done or provide a link to a good tutorial or documentation on how can I implement custom styling.
Here is the code I have:
ActionBar actionBar = getActionBar();
Tab1 = actionBar.newTab().setText("TAB1");
Tab2 = actionBar.newTab().setText("Tab2");
// Set Tab Listeners
Tab1.setTabListener(new TabListener(fragmentTab1));
Tab2.setTabListener(new TabListener(fragmentTab2));
// Add tabs to actionbar
actionBar.addTab(Tab1);
actionBar.addTab(Tab2);
What Im trying to achieve:

Here is a snippet of code I wrote for one of my projects, you should be able to easily adjust it for your own needs!
//#param string - the R.string.name_of_string, I use it for convenience
private ActionBar.Tab createCustomTab(ActionBar actionBar, int string){
View tabView = getLayoutInflater().inflate(R.layout.tab, null);
((TextView) tabView.findViewById(R.id.txt_tab)).setText(string);
//in my case I wanted to center the layout - for some reason certain layout params do not work in the XML,
// (such as centering), so I do that here
LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
lp.gravity = Gravity.CENTER;
tabView.setLayoutParams(lp);
return actionBar.newTab().setCustomView(tabView);
}
Let me know if you have any questions!

Related

Android TabLayout always shows first tab indicator irrespective of which tab is selected

enter image description hereHere, my first tab selection indicator is always visible
I have added TabLayout inside a fragment. But indicator of first tab is always visible even though I have selected other tabs. Please find the screen shot.
It will be of great help if anybody can suggest on what mistake I am making.
Please find the below code:
ViewPagerAdapter adapter = new ViewPagerAdapter(getChildFragmentManager());
Fragment frag1 = new MyFragment1();
adapter.addFragment(frag1, getString(R.string.frag_video));
FragmentMediaPhotos frag2 = new MyFragment2();
adapter.addFragment(frag2, getString(R.string.frag_photo));
FragmentMediaMusic frag3 = new MyFragment3();
adapter.addFragment(frag3, getString(R.string.frag_audios));
mViewPager.setAdapter(adapter);
mTabLayout.setupWithViewPager(mViewPager);
After this setting three layout like this:
TextView tabOne = (TextView) LayoutInflater.from(mContext).inflate(R.layout.layout_tab_text_view, null);
tabOne.setText("Video");
mTabLayout.getTabAt(0).setCustomView(tabOne);
My activity was extended from BaseActivity and I kept BaseActivity as abstract.
Keeping BaseActivity abstract caused the issue.

Change android actionbar tab text color on orientation change programaticly?

I want to change color of text in tabs. How can I reference the tab layout in which I want to change color property inside of the function:
public void onConfigurationChanged(Configuration newConfig)
{
findViewById(R.id.tab_textview); // returns null
}
Since this returns null. tab_textview is the template for the tab. In the onCreate I just put tabs inside the actionbar and everything works. I just need to change color when orientation is changed so the text is white and visible. Find many similar problems but I cant get it to work. I am very new to android programming.
At the onCreate method, we initial the ActionBar like this:
ActionBar actionBar = getActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
Tab tab = actionBar
.newTab()
.setCustomView(R.layout.tab_textview) // use our TextView
.setTabListener(
new Chapter1TabListener<FragmentA>(this, "fragmentA",
FragmentA.class));
TextView tabview = (TextView) tab.getCustomView();
tabview.setText("First Tab");
actionBar.addTab(tab);
tab = actionBar
.newTab()
.setCustomView(R.layout.tab_textview)
.setTabListener(
new Chapter1TabListener<FragmentB>(this, "fragmentB",
FragmentB.class));
tabview = (TextView) tab.getCustomView();
tabview.setText("Second Tab");
actionBar.addTab(tab);
Override onConfigurationChanged, try as following:
super.onConfigurationChanged(newConfig);
if(newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) {
ActionBar actionBar = getActionBar();
for(int i=0; i<actionBar.getTabCount(); i++ ) {
Tab tab = actionBar.getTabAt(i);
TextView tv = (TextView) tab.getCustomView();
tv.setTextColor(getResources().getColor(android.R.color.holo_blue_dark));
}
}

Master/Detail Flow inside of a Fragment

I have a app that uses ActionBar and Fragment to show several different views in the app. So far I am only showing either a list of items, a photo, a web view... but I want to go further and show in the Fragment a Master/Detail Flow, so that I can have a ListView and DetailView. This is so far a sample code
// ActionBar
ActionBar actionbar = getActionBar();
actionbar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
// create new tabs and and set up the titles of the tabs
ActionBar.Tab mFindTab = actionbar.newTab().setText(
getString(R.string.ui_tabname_find));
ActionBar.Tab mChatTab = actionbar.newTab().setText(
getString(R.string.ui_tabname_chat));
ActionBar.Tab mMeetTab = actionbar.newTab().setText(
getString(R.string.ui_tabname_meet));
ActionBar.Tab mPartyTab = actionbar.newTab().setText(
getString(R.string.ui_tabname_party));
// create the fragments
Fragment mFindFragment = new FindFragment();
Fragment mChatFragment = new ChatFragment();
Fragment mMeetFragment = new MeetFragment();
Fragment mPartyFragment = new PartyFragment();
// bind the fragments to the tabs - set up tabListeners for each tab
mFindTab.setTabListener(new MyTabsListener(mFindFragment,
getApplicationContext()));
mChatTab.setTabListener(new MyTabsListener(mChatFragment,
getApplicationContext()));
mMeetTab.setTabListener(new MyTabsListener(mMeetFragment,
getApplicationContext()));
mPartyTab.setTabListener(new MyTabsListener(mPartyFragment,
getApplicationContext()));
// add the tabs to the action bar
actionbar.addTab(mFindTab);
actionbar.addTab(mChatTab);
actionbar.addTab(mMeetTab);
actionbar.addTab(mPartyTab);
How can I create the Master/Detail Flow so that when touch on the corresponding action bar.tab it is shown?
Did you know that you can create stubs for this in the 'New' Menu?
The menu selections: File>New>Android Activity>Master / Detail Flow
I suggest you create an example using this Wizard, and then use it to understand how everything works (this will give you code that uses the proper patterns, and has implemented all the correct code standards).

Changing between action bar tabs by clicking a common button in android

I have these 5 tabs and in the first tab/fragment I have a button, I want to be able to switch to another tab by clicking this button. Here's my code which contains the tabs:
actBar = getSupportActionBar();
actBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
secPagerAdapter = new SectionsPagerAdapter(
getSupportFragmentManager());
vPager = (ViewPager) findViewById(R.id.pager);
vPager.setAdapter(secPagerAdapter);
vPager
.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
#Override
public void onPageSelected(int position) {
actBar.setSelectedNavigationItem(position);
}
});
Tab tab = actBar.newTab()
.setIcon(R.drawable.home)
.setTabListener(this);
actBar.addTab(tab, true);
tab = actBar.newTab()
.setIcon(R.drawable.cart)
.setTabListener(this);
actBar.addTab(tab);
tab = actBar.newTab()
.setIcon(R.drawable.users)
.setTabListener(this);
actBar.addTab(tab);
tab = actBar.newTab()
.setIcon(R.drawable.products)
.setTabListener(this);
actBar.addTab(tab);
tab = actBar.newTab()
.setIcon(R.drawable.settings)
.setTabListener(this);
actBar.addTab(tab);
This creates me a pretty nice action bar with tabs and all, and as you see the one with the home drawable has the below code:
actBar.addTab(tab, true);
since it is true, when this activity is opened it starts with this tab. So... I have a button within this tab. When I tap this button, I want it to scroll right through to the third tab which has the users drawable as an icon. I've seen things about tabhost around here and well, if that's the 'only' case, I gotta say, I don't know about tabhost. I tried to change that true boolean to be able to switch between tabs onClick but it didn't work.
Thanks in advance. I'd really appreciate it.
use this inside button click listener
actionBar.setSelectedNavigationItem(tab_position);

How to set up an ActionBar Sherlock Tab?

I'm switching my App's Tab (API 7) to the one's used in the Action Bar Sherlock because of the design, but I don't know how to set this up.
That's how I used to do:
tabH = (TabHost) findViewById(R.id.tabhost);
tabH.setup();
TabSpec espec = tabH.newTabSpec("tabONE");
espec.setContent(R.id.tbhot);
espec.setIndicator("A");
tabH.addTab(espec);
espec = tabH.newTabSpec("tabTWO");
espec.setContent(R.id.tbrecente);
espec.setIndicator("B");
tabH.addTab(espec);
espec = tabH.newTabSpec("tabTHREE");
espec.setContent(R.id.tbcreate);
espec.setIndicator("C");
tabH.addTab(espec);
And now that's what I'm doing:
getSupportActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
for (int i = 1; i <= 3; i++) {
ActionBar.Tab tab = getSupportActionBar().newTab();
if (i == 1)
tab.setText("A");
else if(i == 2)
tab.setText("B");
else if (i == 3)
tab.setText("C");
tab.setTabListener(this);
getSupportActionBar().addTab(tab);
}
That works, but I don't know how to set the Content, so all tabs have the same thing in it. How do I do it?
Also, my other tab was at the bottom of the layout. Is it possible to set this one at the bottom too? I believe that if I could set the TabHost in the new tab, it will be in the bottom too, so the question is, how to set the tabhost here?
I typically use fragments for the content. You have to implement the ActionBar.TabListener and adjust your content there, but it's pretty easy. You can add all your fragments at the beginning and show/hide them, or replace the current fragment.

Categories

Resources