How to change colour of Tabs like this? When I click/swipe to green or any other tab, the tab colour should change to that appropriate colour and rest of other tabs colour should change to black. How can I do this? Im using Viewpager.
I tried this code inside onpagelistener:
if(position == 0) {
viewpager.getChildAt(position).setBackgroundColour(getResources().getcolor(R.color.red);
}
else if(position == 1) {
viewpager.getChildAt(position).setBackgroundColour(getResources().getcolor(R.color.green);
}
But above code has no effect.
And Im using this code : Android Viewpager tutorial Androidhive
Finally I solved it. Thanks to #Xcihnegn for his idea. This is the solution:
/* For setting default selected tab */
actionBar.setSelectedNavigationItem(0);
actionBar.getTabAt(0).setCustomView(R.layout.fragmnt_red);
/**
* 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);
if(position == 0)
{
actionBar.getSelectedTab().setCustomView(R.layout.fragmnt_red);
}else if(position == 1)
{
actionBar.getSelectedTab().setCustomView(R.layout.fragmnt_orange);
}else if(position == 2)
{
actionBar.getSelectedTab().setCustomView(R.layout.fragmnt_green);
}
}
}
#Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
#Override
public void onPageScrollStateChanged(int arg0) {
}
});
}
#Override
public void onTabSelected(ActionBar.Tab tab, android.support.v4.app.FragmentTransaction fragmentTransaction) {
viewPager.setCurrentItem(tab.getPosition());
}
When one tab gets unselected, setCustomView(null) changes its layout back to its original black colour. So only selected tabs will change colour. Unselecting the tabs will change its layout to original form.
#Override
public void onTabUnselected(ActionBar.Tab tab, android.support.v4.app.FragmentTransaction fragmentTransaction) {
if(tab.getPosition() == 0)
{
actionBar.getTabAt(0).setCustomView(null);
}else if(tab.getPosition() == 1)
{
actionBar.getTabAt(1).setCustomView(null);
}else if(tab.getPosition() == 2)
{
actionBar.getTabAt(2).setCustomView(null);
}
}
}
To remove unnecessary padding appear when setting the custom view we should use this code in styles.xml.
<style name="Custom.ActionBar.TabView.Empty" parent="#android:style/Widget.ActionBar.TabView">
<item name="android:paddingLeft">0dp</item>
<item name="android:paddingRight">0dp</item>
<item name="android:background">#000000</item>
</style>
<style name="CustomActionbartab" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="actionBarTabStyle">#style/Custom.ActionBar.TabView.Empty</item>
<item name="android:actionBarTabStyle">#style/Custom.ActionBar.TabView.Empty</item>
</style>
Dont forget to add the this code just above setcontentview in your activity.
settheme(R.styles.CustomActionbartab);
Custom layout for tabs.
<?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:background="#color/red">
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="RED"
android:textStyle="bold"
android:gravity="center"
android:textColor="#ffffff"/>
</RelativeLayout>
There is tutorial Styling tabs in the Android action bar. You can choose your parent theme as Theme.Holo for API>=3, or Theme.AppCompat for support library V7, etc.
And besides, for <item name="android:background">, you could set it to a selector you create for tab state change:
android:background="#drawable/selector_tab"
For selector_tab can be like:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/pressed_color"
android:state_pressed="true" />
<item android:color="#color/selected_color"
android:state_selected="true" />
<item android:color="#color/normal_color" />
</selector>
[UPDATE]
For change tab color dynamically, suggest to use custom view with tab:
//your_custom_tab.xml
<?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"
>
<TextView
android:id="#+id/tab_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:maxLines="1" />
</LinearLayout>
LinearLayout customView = (LinearLayout) getLayoutInflater().inflate(R.layout.your_custom_tab, null);
then setCustomeView(customView) when add tab to ActionBar. And in your tab/page change listener:
Tab selectedTab = yourActionBar.getSelectedTab();
View tabView = selectedTab.getCustomView();
tabView.setBackgroundColor(your_select_color);
To remove possible gap around tab caused by custom view, you can set tab style:
<style name="ActionBarTabStyle" parent="#android:style/Widget.AppCompat.Light.ActionBar.TabView">
<item name="android:paddingLeft">0dp</item>
<item name="android:paddingRight">0dp</item>
<item name="android:paddingTop">0dp</item>
<item name="android:paddingBottom">0dp</item>
</style>
and use your theme parent accordingly.
Hope this help!
I had a similar problem. In my case, I wanted to change the color of the action bar whenever the user clicked on one of the fragments in the navigation drawer.
Here is the code I used to resolve this issue.
Since you can't access the Action bar from a fragment, you have to create it in your main menu. Here is the method I used.
public void restoreActionBar(int parsedColor) {
this.parsedColor = parsedColor;
ActionBar actionBar = getSupportActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_STANDARD);
actionBar.setDisplayShowTitleEnabled(true);
actionBar.setTitle(mTitle);
actionBar.setBackgroundDrawable(new ColorDrawable(parsedColor));
}
public boolean onCreateOptionsMenu(Menu menu) {
if (!mNavigationDrawerFragment.isDrawerOpen()) {
// Only show items in the action bar relevant to this screen
// if the drawer is not showing. Otherwise, let the drawer
// decide what to show in the action bar.
getMenuInflater().inflate(R.menu.main_activity_trekkly, menu);
restoreActionBar(parsedColor);
return true;
}
return super.onCreateOptionsMenu(menu);
}
Now in your class that extends fragment:
public void onAttach(Activity activity) {
super.onAttach(activity);
((MainActivityTrekkly)activity).onSectionAttached(4);
MainActivityTrekkly mA = ((MainActivityTrekkly)getActivity());
mA.restoreActionBar(Color.parseColor("#028482"));
}
I got this working with the Navigation drawer so you might have to adapt this code.
Did this help?
Related
I got a little problem, as I'm trying to add 4 Icons to a Bottom Navigation Bar in Android.
On some devices it looks like this
But I want it to be looking like this
How to achieve that ? Thanks in advance
Don't know which code you need. Just added everything used by the viewpager for the Bottom navigation Bar
bottomNavigationView.setOnNavigationItemSelectedListener(
new BottomNavigationView.OnNavigationItemSelectedListener() {
#Override
public boolean onNavigationItemSelected(#NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.action_stdplan:
viewPager.setCurrentItem(0);
break;
case R.id.action_klausur:
viewPager.setCurrentItem(1);
break;
case R.id.action_hausaufgaben:
viewPager.setCurrentItem(2);
break;
case R.id.action_fehlzeiten:
viewPager.setCurrentItem(3);
break;
}
return false;
}
});
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
#Override
public void onPageSelected(int position) {
if (prevMenuItem != null) {
prevMenuItem.setChecked(false);
}
else
{
bottomNavigationView.getMenu().getItem(0).setChecked(false);
}
Log.d("page", "onPageSelected: "+position);
bottomNavigationView.getMenu().getItem(position).setChecked(true);
prevMenuItem = bottomNavigationView.getMenu().getItem(position);
}
#Override
public void onPageScrollStateChanged(int state) {
}
});
setupViewPager(viewPager);
}
private void setupViewPager(ViewPager viewPager) {
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
stdplanFragment =new StdplanFragment();
klausurenFragment =new KlausurenFragment();
hausaufgabenFragment =new HausaufgabenFragment();
fehlzeitenFragment =new FehlzeitenFragment();
adapter.addFragment(stdplanFragment);
adapter.addFragment(klausurenFragment);
adapter.addFragment(hausaufgabenFragment);
adapter.addFragment(fehlzeitenFragment);
viewPager.setAdapter(adapter);
}
}
bottom_navigation.xml:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/action_stdplan"
android:checked="true"
android:icon="#drawable/ic_dashboard_black_24dp"
android:title="#string/tab1"
app:showAsAction="never" />
<item
android:id="#+id/action_klausur"
android:checked="false"
android:icon="#android:drawable/ic_menu_agenda"
android:title="#string/tab2"
app:showAsAction="never" />
<item
android:id="#+id/action_hausaufgaben"
android:checked="false"
android:icon="#android:drawable/ic_menu_manage"
android:title="Hausaufgaben"
app:showAsAction="never" />
<item
android:id="#+id/action_fehlzeiten"
android:checked="false"
android:icon="#android:drawable/ic_menu_recent_history"
android:title="#string/tab3"
app:showAsAction="never" />
</menu>
I fixed it myself by changing the font size of the titles
Everyone else struggling with this: Just add these two lines to your dimens.xml
<dimen name="design_bottom_navigation_text_size" tools:override="true">10sp</dimen>
<dimen name="design_bottom_navigation_active_text_size" tools:override="true">10sp</dimen>
It could be a problem from a smallest thing possible. Not sure if it has anything to do with the image icons you have used, but can you please see if the image icons happen to have any paddings i.e. in the image itself?
Also for debugging purposes please remove the titles or keep them empty and see if it aligns the image icons properly.
Can you please change the following,
app:showAsAction="never"
to
app:showAsAction="ifRoom"
I would try following this link just in case.
Sorry if this question have been asked before.
I want to change icon when it is selected in tab of tab layout. How can I do this using selector?.
I have two tabs in my application on selected state icon should change.
1. create a custom tab selector- You need to add both state selected true and false
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/home_fill"
android:state_selected="true"/>
<item android:drawable="#drawable/home_line"
android:state_selected="false"/>
</selector>
2. Add the custom tab selector drawable as the icon for tabItem
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/footer"
app:tabIndicatorColor="#color/female_colour">
<android.support.design.widget.TabItem
android:id="#+id/tab_home"
android:layout_width="#dimen/_25dp"
android:layout_height="#dimen/_25dp"
android:padding="#dimen/_4dp"
android:icon="#drawable/tab_home"
/>
</android.support.design.widget.TabLayout>
Code is Tested on Android version 7.1.1
Please try this
tabLayout.getTabAt(0).setIcon(R.drawable.selector);
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
#Override
public void onTabSelected(TabLayout.Tab tab) {
tab.setIcon(selectedImageResources[tab.getPosition()]);
getSupportActionBar().setTitle(pageTitles[tab.getPosition()]);
viewPager.setCurrentItem(tab.getPosition());
}
#Override
public void onTabUnselected(TabLayout.Tab tab) {
tab.setIcon(imageResources[tab.getPosition()]);
}
#Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
To make tab selector and deselector you can use this way
1.Create Custom view and Inflate it:
private View getTabView(int imgDrawable) {
View view = getLayoutInflater().inflate(R.layout.tab_view, null);
ImageView imgTab = (ImageView) view.findViewById(R.id.imgTab);
imgTab.setImageDrawable(getResources().getDrawable(imgDrawable));
return view;
}
2.Create drawable Selector
tab_home_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ic_home_selected" android:state_selected="true" />
<item android:drawable="#drawable/ic_home_deselected" />
</selector>
3.Insert in tab:
tabDashboardLayout = (TabLayout) findViewById(R.id.tabDashboardLayout);
//Adding the tabs using addTab() method
View tabView = getTabView(R.drawable.tab_home_selector);;
tabDashboardLayout.addTab(tabDashboardLayout.newTab().setCustomView(tabView));
For individual tab you to have create individual drawable selector and add to tab
please Check these question you will get your answer
TabLayout selected Tab icon is not selected on start up:
Change icon and title color when selected in android design library TabLayout
Can anyone please guide, how to achieve this sort of tab style in the attached image , I have worked on many tab styles, but not getting this one .
Update:
How I did it #PRAVIN :
theme.xml in res/values folder
<style name="CustomActionBarTheme2" parent="#android:style/Theme.Holo">
<item name="android:actionBarItemBackground">#drawable/selectable_background_example</item>
<item name="android:actionBarTabStyle">#style/MyActionBarTab</item>
<item name="android:actionBarStyle">#style/ActionBar.Solid.Example</item>
</style>
<!-- ActionBar tabs styles -->
<style name="MyActionBarTab" parent="#android:style/Widget.Holo.Light.ActionBar.TabView">
<item name="android:background">#drawable/actionbar_tab_indicator</item> <!-- actionbar_tab_indicator -->
<item name="android:showDividers">none</item>
<item name="android:paddingLeft">20dp</item>
<item name="android:paddingRight">20dp</item>
In my Main activity:
private String[] tabs = { "Tab1", "Tab2", "tab3","Tab4" };
getActionBar().setDisplayShowTitleEnabled(false);
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
// Adding Tabs
for (String tab_name : tabs) {
if(tab_name.equals("Tab1")){
actionBar.addTab(actionBar.newTab().setIcon(R.drawable.tab_home)
.setTabListener(this));
} else if(tab_name.equals("Tab2")){
actionBar.addTab(actionBar.newTab().setIcon(R.drawable.tab_search)
.setTabListener(this));
}else if(tab_name.equals("Tab3")){
actionBar.addTab(actionBar.newTab().setIcon(R.drawable.tab_home)
.setTabListener(this));
}else if(tab_name.equals("Tab4")){
actionBar.addTab(actionBar.newTab().setIcon(R.drawable.tab_search)
.setTabListener(this));
}
}
and finally i add that custom theme to my activity
<activity
android:name="aimviz.omi.shoppingcartapp.MainActivity"
android:theme="#style/CustomActionBarTheme2" />
any ways i am unable to remove divider line, but code works. Thanks #PRAVIN.
the below url helped me a lot:Iphone like tabbar in android
the modifications are in only change in drawable xml files as per your needs.
With custom Action Bar Tabs :
custom_tab_layout.xml xml layout file for each tab
<?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="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/tab_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/tab_to_opine"
android:background="#android:color/transparent" />
<TextView
android:id="#+id/tab_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
Code in activity :
In onCreate()
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
......
getActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
createNewTab(R.layout.custom_tab_layout, "My Tab");
......//TODO add more tabs
}
public void createNewTab(int view, int titleView, String title) {
ActionBar.Tab tab = getActionBar().newTab();
tab.setTabListener(this);
tab.setCustomView(view);
getSupportActionBar().addTab(tab);
TextView Title=(TextView)view.findViewById(R.id.tab_title)
Title.setText(title);
}
So using this line of codes you can achieve custom action bar tabs
I am Using Sherlock library and i also implement with myself. My problem is that i added two items in menu, now i want 1 item in left of actionbar and second in right of actionbar. How to to it?
You can create such action bar, but it's little more complicated than inflating a menu. Menu created in onCreateOptionsMenu() method will be always aligned to right, placed in split action bar or hidden under the menu key.
If you want your action bar to contain just two menu items - one on the left edge and the other on the right edge - you have to create custom view in the action bar.
The custom view layout will be something like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageButton android:src="#drawable/ic_menu_item1"
android:background="?attr/actionBarItemBackground"
android:layout_width="?attr/actionBarSize"
android:layout_height="match_parent"
android:scaleType="centerInside"
android:id="#+id/item1"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"/>
<ImageButton android:src="#drawable/ic_menu_item2"
android:background="?attr/actionBarItemBackground"
android:layout_width="?attr/actionBarSize"
android:layout_height="match_parent"
android:scaleType="centerInside"
android:id="#+id/item2"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"/>
</RelativeLayout>
Define in the theme that you want to use custom view. The theme should contain:
<style name="MyTheme" parent="#style/Theme.Sherlock">
<item name="actionBarStyle">#style/MyActionBarStyle</item>
<item name="android:actionBarStyle">#style/MyActionBarStyle</item>
</style>
<style name="MyActionBarStyle" parent="#style/Widget.Sherlock.ActionBar">
<item name="displayOptions">showCustom</item>
<item name="android:displayOptions">showCustom</item>
</style>
Set the custom view in the activity (or fragment):
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ActionBar ab = getSherlock().getActionBar();
LayoutInflater li = LayoutInflater.from(this);
View customView = li.inflate(R.layout.my_custom_view, null);
ab.setCustomView(customView);
ImageButton ibItem1 = (ImageButton) customView.findViewById(R.id.item1);
ibItem1.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
// ...
}
});
ImageButton ibItem2 = (ImageButton) customView.findViewById(R.id.item2);
ibItem2.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
// ...
}
});
}
You have to add the click listeners for the menu items. You cannot use onOptionsItemSelected() in this case.
Additionally to Tomik's answer. You need to add
ab.setDisplayShowCustomEnabled(true);
in onCreate method, otherwise custom view does not appear (at least for me).
I am creating an app that has 4 main sections. I would like to have a very simple way of doing the navigation which would mean if the phone supports an action bar, then I would like it to display a tabbed action bar. Otherwise the regular menu button showing the menu is fine.
The problem is though that the action bar seams un-manageable or un-created when trying it out on phones with an sdk version that actually supports action bars.
I am using a menu/menu.xml file to create the menu and items that I want to display. I am then using onCreateOptionsMenu() with MenuInflater to populate the menu for each Activity. This works just fine on all phones but on phones that use the action bar, I get a title-type bar with the app icon on the far left, the current Activity title next to it, and then on the far right is the icon for the first menu item followed by the 3 squares (which when you click on them, show the rest of the menu items). This situation stays the same regardless of the Activity that I am in.
What I want is a tabbed action bar to show up instead with the icon and text (if there is room for the text) and have whatever current Activity the user is viewing to be "selected" in the tabbed-action bar. The same way shown here:
http://developer.android.com/images/ui/actionbar.png (I can't make it an image due to being a new user)
Here is the code I am using:
manifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest
xmlns:android="http://schemas.android.com/apk/res/android"
package="com.mypackage"
android:versionCode="1"
android:versionName="1.0" >
<uses-permission
android:name="android.permission.INTERNET" />
<uses-permission
android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission
android:name="android.permission.READ_PHONE_STATE" />
<uses-sdk
android:minSdkVersion="10"
android:targetSdkVersion="15" />
<application
android:icon="#drawable/icon"
android:label="#string/app_name"
android:theme="#android:style/Theme.Holo">
<uses-library android:name="com.google.android.maps" />
<activity
android:name=".ActivityLoad"
android:label="label">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
....more activities....
</application>
</manifest>
menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/menuMap"
android:title="#string/A_MAP_TITLE"
android:icon="#drawable/nav_map"
android:showAsAction="ifRoom|withText">
</item>
<item
android:id="#+id/menuList"
android:title="#string/A_LIST_TITLE"
android:icon="#drawable/nav_list"
android:showAsAction="ifRoom|withText">
</item>
<item
android:id="#+id/menuMore"
android:title="#string/A_MORE_TITLE"
android:icon="#drawable/nav_more"
android:showAsAction="ifRoom|withText">
</item>
<item
android:id="#+id/menuReport"
android:title="#string/A_REPORT_TITLE"
android:icon="#drawable/nav_report"
android:showAsAction="ifRoom|withText">
</item>
</menu>
MyActivity.java
#Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.options, menu);
return super.onCreateOptionsMenu(menu);
}
I have tried setting the action bar navigation mode using this code in my activities onCreate() method but all that happens is a blank action bar is shown below the "bad" action bar that I get by default:
ActionBar actionBar = getActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
All the tutorials seam to just say "use a style" or something but I have no idea where to put a style xml file or how to set this to my menu or what I should actually be doing here. If anyone could help it would be greatly appreciated!
First make sure your MyActivity.java is implementing ActionBar.TabListener
which means you will need to override 3 functions.
I don't know how you did your fragments but this is how I did it in MyActivity.java:
public class MyActivity extends FragmentActivity implements ActionBar.TabListener {
private static final String STATE_SELECTED_NAVIGATION_ITEM = "selected_navigation_item";
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Set up the action bar.
final ActionBar actionBar = getActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
// For each of the section, add a tab to the action bar.
actionBar.addTab(actionBar.newTab().setText(R.string.title_status).setTabListener(this));
actionBar.addTab(actionBar.newTab().setText(R.string.title_configuration).setTabListener(this));
}
#Override
public void onRestoreInstanceState(Bundle savedInstanceState) {
if (savedInstanceState.containsKey(STATE_SELECTED_NAVIGATION_ITEM)) {
getActionBar().setSelectedNavigationItem(
savedInstanceState.getInt(STATE_SELECTED_NAVIGATION_ITEM));
}
}
#Override
public void onSaveInstanceState(Bundle outState) {
outState.putInt(STATE_SELECTED_NAVIGATION_ITEM,
getActionBar().getSelectedNavigationIndex());
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
//getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
#Override
public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
}
#Override
public void onTabSelected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
// When the given tab is selected, show the tab contents in the container
Fragment fragment = new DummySectionFragment();
Bundle args = new Bundle();
args.putInt(DummySectionFragment.ARG_SECTION_NUMBER, tab.getPosition() + 1);
fragment.setArguments(args);
getSupportFragmentManager().beginTransaction()
.replace(R.id.container, fragment)
.commit();
}
#Override
public void onTabReselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
}
/**
* A dummy fragment representing a section of the app, but that simply displays dummy text.
*/
public static class DummySectionFragment extends Fragment {
public DummySectionFragment() {
}
public static final String ARG_SECTION_NUMBER = "section_number";
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
TextView textView = new TextView(getActivity());
textView.setGravity(Gravity.CENTER);
Bundle args = getArguments();
textView.setText(Integer.toString(args.getInt(ARG_SECTION_NUMBER)));
return textView;
}
}
}
In order to customize the actionbar you need to use a custom style that has Theme.Holo as a parent. This way it inherits everything from the Holo theme but then you can overwride what you want. Inside manifest.xml use:
<application
android:theme="#style/AppTheme">
instead of:
<application
android:theme="#android:style/Theme.Holo">
Then inside values/styles.xml put your custom style:
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="AppTheme" parent="android:Theme.Holo.Light">
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="android:actionBarTabStyle">#style/MyActionBarTabStyle</item>
<item name="android:actionBarTabBarStyle">#style/MyActionBarTabBar</item>
</style>
This is where it gets a little tricky. within the same file(values/styles.xml) you need to define each style you referenced above.
<style name="MyActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#drawable/menu_bar</item> <!-- remove if you don't have custom background for action bar -->
<item name="android:displayOptions"></item> <!-- get rid of logo on left and title, if you want logo on left put useLogo here -->
<item name="android:customNavigationLayout">#layout/custom_action_bar</item> <!-- This is where you define how you want things to layout in your actionbar. I use a relative layout -->
</style>
<!-- Style for tab bar -->
<style name="MyActionBarTabBar" parent="#android:style/Widget.Holo.Light.ActionBar.TabBar">
<item name="android:showDividers">none</item>
<item name="android:paddingLeft">20dp</item>
</style>
<!-- Style for action bar tabs -->
<style name="MyActionBarTabStyle" parent="#android:style/Widget.Holo.Light.ActionBar.TabView">
<item name="android:background">#drawable/menu_tab</item> <!-- I use a background for my tabs also -->
</style>
If you don't care about custom background for each tab remove the last style from above.
If you have a custom background for each tab (you will need a selected state .9.png image and a not selected state .9.png image), you will need drawable/menu_tab.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:constantSize="false"
android:dither="true"
android:variablePadding="false" >
<item android:state_selected="true" >
<inset android:insetTop="23dp"
android:insetBottom="26dp" >
<bitmap android:src="#drawable/menu_selected" ></bitmap>
</inset>
</item>
<item android:state_selected="false" >
<inset android:insetTop="20dp"
android:insetBottom="26dp" >
<bitmap android:src="#drawable/menu_not_selected" ></bitmap>
</inset>
</item>
</selector>
Now create layout/custom_action_bar.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:contentDescription="#string/LogoText"
android:paddingRight="20dp"
android:paddingTop="20dp"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
The custom_action_bar can be however you want to layout the rest of the action bar elements. I just put the logo on the right but in your case you can use the overflow menu button or whatever you want. I use a custom background for the action bar and for each tab. If you do so you will need to create .9.png files to make sure they are compatible with different screens.
The finished result looks like: