How to make Title Bar & Tabs custom using Fragments
Solution 1
I think you already got the answer, that's why you developed this:
https://stackoverflow.com/questions/19000981/actionbarsherlock-swapping-tabs-using-viewpager
Anyways if you still looking for answer, So
I really recommend you to use ActionBarStyleGenerator:
http://jgilfelt.github.io/android-actionbarstylegenerator/
With that tool you can easily theme your graphic elements in your toolbar.
Solution 2
use this for QA:2,3,4
create xml(tab1) in drawble folder
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- When selected, use grey -->
<item android:drawable="@drawable/videos_gray"
android:state_selected="true" />
<!-- When not selected, use white-->
<item android:drawable="@drawable/videos_white" />
and use that in java file
// Create an actionbar
ActionBar actionBar = getActionBar();
// Hide Actionbar Icon
actionBar.setDisplayShowHomeEnabled(false);
// Hide Actionbar Title
actionBar.setDisplayShowTitleEnabled(false);
// Create Actionbar Tabs
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
// Create first Tab
tab = actionBar.newTab().setTabListener(new FragmentTab1());
// Create your own custom icon
tab.setIcon(R.drawable.tab1);
actionBar.addTab(tab);
// Create Second Tab
tab = actionBar.newTab().setTabListener(new FragmentTab2());
// Set Tab Title
tab.setText("Tab2");
actionBar.addTab(tab);
// Create Third Tab
tab = actionBar.newTab().setTabListener(new FragmentTab3());
// Set Tab Title
tab.setText("Tab3");
actionBar.addTab(tab);
Comments
-
Sonali almost 2 years
I am writing a program in which i am using Fragments to work with Tabs, but i need few changes in my UI
I need few changes in my UI, small 5 questions:
Question 1: How to Change Background color of TITLE BAR (I want RED)
Question 2: How to Change Background color of Tab (I want GRAY)
Question 3: How to Change color of Selected Tab (I want RED)
Question 4: How to show Icon above the Text in Tabs
Question 5: How to place share button over Title Bar at Right side
Manifest.xml:
<application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <activity android:name="com.example.test.MainActivity" android:label="@string/app_name" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application>
MainActivity.java:
public class MainActivity extends FragmentActivity { ViewPager ViewPager; TabsAdapter TabsAdapter; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //create a new ViewPager and set to the pager we have created in Ids.xml ViewPager = new ViewPager(this); ViewPager.setId(R.id.pager); setContentView(ViewPager); //Create a new Action bar and set title to strings.xml final ActionBar bar = getActionBar(); bar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); bar.setTitle(R.string.app_name); //Attach the Tabs to the fragment classes and set the tab title. TabsAdapter = new TabsAdapter(this, ViewPager); TabsAdapter.addTab(bar.newTab().setText("About"), FragAbout.class, null); TabsAdapter.addTab(bar.newTab().setText("Location"), FragLocation.class, null); TabsAdapter.addTab(bar.newTab().setText("Menus"), FragMenus.class, null); TabsAdapter.addTab(bar.newTab().setText("Reservation"), FragReservation.class, null); TabsAdapter.addTab(bar.newTab().setText("Social"), FragSocial.class, null); if (savedInstanceState != null) { bar.setSelectedNavigationItem(savedInstanceState.getInt("tab", 0)); } } @Override protected void onSaveInstanceState(Bundle outState) { super.onSaveInstanceState(outState); outState.putInt("tab", getActionBar().getSelectedNavigationIndex()); } // create TabsAdapter to create tabs and behavior public static class TabsAdapter extends FragmentPagerAdapter implements ActionBar.TabListener, ViewPager.OnPageChangeListener { private final Context mContext; private final ActionBar mActionBar; private final ViewPager mViewPager; private final ArrayList<TabInfo> mTabs = new ArrayList<TabInfo>(); static final class TabInfo { private final Class<?> clss; private final Bundle args; TabInfo(Class<?> _class, Bundle _args) { clss = _class; args = _args; } } public TabsAdapter(FragmentActivity activity, ViewPager pager) { super(activity.getSupportFragmentManager()); mContext = activity; mActionBar = activity.getActionBar(); mViewPager = pager; mViewPager.setAdapter(this); mViewPager.setOnPageChangeListener(this); } public void addTab(ActionBar.Tab tab, Class<?> clss, Bundle args) { TabInfo info = new TabInfo(clss, args); tab.setTag(info); tab.setTabListener(this); mTabs.add(info); mActionBar.addTab(tab); notifyDataSetChanged(); } @Override public void onPageScrollStateChanged(int state) { // TODO Auto-generated method stub } @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { // TODO Auto-generated method stub } @Override public void onPageSelected(int position) { // TODO Auto-generated method stub mActionBar.setSelectedNavigationItem(position); } @Override public void onTabReselected(Tab tab, FragmentTransaction ft) { // TODO Auto-generated method stub } @Override public void onTabSelected(Tab tab, FragmentTransaction ft) { Object tag = tab.getTag(); for (int i=0; i<mTabs.size(); i++) { if (mTabs.get(i) == tag) { mViewPager.setCurrentItem(i); } } } @Override public void onTabUnselected(Tab tab, FragmentTransaction ft) { // TODO Auto-generated method stub } @Override public Fragment getItem(int position) { TabInfo info = mTabs.get(position); return Fragment.instantiate(mContext, info.clss.getName(), info.args); } @Override public int getCount() { return mTabs.size(); } }
FragAbout.java:
public class FragAbout extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View myFragmentView = inflater.inflate(R.layout.frag_about, container, false); return myFragmentView; } }