Custom Tab Style like in Wanelo shopping app android - android

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

Related

Android How to remove the second title in my actionbar?

i created an a custom toolbar to replace the default action bar of appcompat in android. but when i run the application i get two title, like in the picture
http://i.stack.imgur.com/wOPVE.png
i want only the title in the middle
here the code:
Main.java
public class MainMenu extends AppCompatActivity{
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main_menu);
Toolbar toolbar = (Toolbar)findViewById(R.id.mytoolbar);
setSupportActionBar(toolbar);
Typeface mistral = Typeface.createFromAsset(getAssets(), "MISTRAL.TTF");
TextView title = (TextView)findViewById(R.id.toolbar_title);
title.setText("Fyllo");
title.setTypeface(mistral);
}
#Override
public boolean onCreateOptionsMenu(Menu menu){
super.onCreateOptionsMenu(menu);
getMenuInflater().inflate(R.menu.my_menu, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
int id =item.getItemId();
if(id == R.id.action_settings){
Toast.makeText(getApplicationContext(),"this is a menu option",Toast.LENGTH_SHORT).show();
return true;
}
return super.onOptionsItemSelected(item);
}
MainMenu.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
tools:context="com.example.adams.fyllo.MainMenu">
<android.support.v7.widget.Toolbar
android:id="#+id/mytoolbar"
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="#00000000"
android:elevation="4dp"
android:title="Services">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_gravity="center"
android:text="Toolbar Title" />
</android.support.v7.widget.Toolbar>
</RelativeLayout>
And for style, i am using AppTheme
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#000000</item>
<item name="colorPrimaryDark">#000000</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:titleTextStyle">#style/NoTitleText</item>
</style>
<style name="NoTitleText">
<item name="android:textSize">0sp</item>
<item name="android:textColor">#00000000</item>
</style>
</resources>
What can i do to remove this error
You have given titles two times either you want to remove upper one remove TextView which is inside Toolbar and setTitle of toolbar.
otherwise remove title from the Toolbar
You can remove title with help of
getSupportActionBar().setDisplayShowTitleEnabled(false);

How to make ActionBar and stacked bar share same background image

is it possible for actionbar and it's stacked bar(one that contain navigation tabs) to share same background image? one that starts from actionbar and ends at stacked bar?
currently the way am implementing this, am ending up having action bar with it own image and stacked bar with its own.
my styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="android:actionMenuTextColor">#color/app_yellow</item>
<item name="android:windowActionBarOverlay">true</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">#style/MyActionBar</item>
<item name="actionMenuTextColor">#color/app_yellow</item>
</style>
<!-- ActionBar styles -->
<style name="MyActionBar" parent="#style/Widget.AppCompat.Light.ActionBar">
<item name="android:titleTextStyle">#style/MyActionBarTitleText</item>
<item name="android:actionBarTabTextStyle">#style/MyActionBarTabText</item>
<item name ="android:actionBarTabStyle">#style/MyTabStyle</item>
<item name="background">#drawable/actionbar</item>
</style>
<!-- individual ActionBar tabs style -->
<style name="MyTabStyle" parent ="Widget.AppCompat.Light.ActionBar.TabView">
<item name ="background">#android:color/transparent</item>
<item name ="android:background">#android:color/transparent</item>
</style>
in my activity
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ActionBar actionBar = getSupportActionBar();
// Specify that tabs should be displayed in the action bar.
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
actionBar.setLogo(R.mipmap.ic_launcher);
actionBar.setDisplayUseLogoEnabled(true);
actionBar.setDisplayShowHomeEnabled(true);
actionBar.setStackedBackgroundDrawable(getResources().getDrawable(R.drawable.actionbar));
From Michael De Soto guidance(see his comment above), i was able to have actionbar and stacked bar share same background image by using a toolbar that has
actionbar details(e.g icons,titles) in views(textview for titles, imageviews for icons etc)
Stacked bar details(basically tabs) in a tablayout.
Here how i implemented it guys
my activity xml
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:id="#+id/mainActivityBar"
android:layout_alignParentTop="true"
android:background="#drawable/actionbar"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetEnd="0dp"
app:contentInsetRight="0dp"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="President"
android:id="#+id/appname_1"
android:background="#android:color/transparent"
android:textColor="#ffffff"
android:layout_marginLeft="20dp" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
style="#style/myCustomTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:layout_below="#+id/appname_1"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="false"
android:layout_alignParentLeft="false"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="false"
android:layout_alignLeft="#+id/appname_1"
app:tabGravity="fill"
app:tabMode="scrollable"/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
added the following in my styles.xml
<style name="mainActivityTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
<item name="android:textColorSecondary">#android:color/white</item>
<!--We will be using the toolbar so no need to show ActionBar-->
<item name="android:windowActionBar">false</item>
</style>
<style name="myCustomTabLayout" parent="Widget.Design.TabLayout">
<item name="tabIndicatorColor">?attr/colorAccent</item>
<item name="tabIndicatorHeight">2dp</item>
<item name="tabSelectedTextColor">?android:textColorPrimary</item>
</style>
Finally, my activity
public class MainActivity extends AppCompatActivity {
private SectionsPagerAdapter mSectionsPagerAdapter;
TabLayout tabLayout;
private ViewPager mViewPager;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar =(Toolbar) findViewById(R.id.mainActivityBar);
setSupportActionBar(toolbar);
tabLayout = (TabLayout) findViewById(R.id.tabs);
// Create the adapter that will return a fragment for each of the three
// primary sections of the activity.
mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());
// Set up the ViewPager with the sections adapter.
mViewPager = (ViewPager) findViewById(R.id.pager);
mViewPager.setAdapter(mSectionsPagerAdapter);
mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.setupWithViewPager(mViewPager);
}
public class SectionsPagerAdapter extends FragmentStatePagerAdapter {
public SectionsPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
// getItem is called to instantiate the fragment for the given page.
switch (position) {
case 0:
return Item1fragment.newInstance();
case 1:
return Item2fragment.newInstance();
case 2:
return Item3fragment.newInstance();
}
return null;
}
#Override
public int getCount() {
// Show 3 total pages.
return 3;
}
#Override
public CharSequence getPageTitle(int position) {
Locale l = Locale.getDefault();
switch (position) {
case 0:
return "Item1;
case 1:
return "Item2";
case 2:
return "Item3";
}
return "";
}
}
}
Thanks for your indepth answer OP. For those coming here in future, if you want to display the back button on the toolbar, it will push all the subsequent views in the Toolbar to the side by about 50dp, even when aligned below, even when using app:contentInsetStart="0dp". Because of this, I have just gone for the transparent backgrounds and having a view behind them.

how to set custom Action Bar properly in Android

I have created a custom action bar in my android app. Unfortunately the height and width is not set properly in my custom layout. After I run the app there remains a blank space left and right at the custom action bar as well as a heights problem. How can I solve this ?
Custom action bar
<?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"
android:background="#3A86CF"
android:orientation="horizontal"
android:layout_gravity="fill_horizontal">
<ImageView
android:id="#+id/imgLeftMenu"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="left|center_vertical|center_horizontal"
android:layout_weight="1"
android:src="#drawable/menu_left" />
<TextView
android:layout_width="200dp"
android:layout_height="30dp"
android:layout_weight="1"
android:id="#+id/txtTitle"
android:gravity="center_vertical|center_horizontal"
android:text="All Post"
android:textColor="#android:color/white" />
<ImageView
android:id="#+id/imgSearch"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#android:drawable/ic_menu_search" />
<ImageView
android:id="#+id/imgAdd"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#android:drawable/ic_menu_add" />
</LinearLayout>
Activity code
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.all_post);
CustomActionBar();
}
public void CustomActionBar()
{
android.support.v7.app.ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayOptions( android.support.v7.app.ActionBar.DISPLAY_SHOW_CUSTOM);
// Do any other config to the action bar
getSupportActionBar().setDisplayShowTitleEnabled(false);
getSupportActionBar().setDisplayShowHomeEnabled(false);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
// set custom view
View actionBarView = getLayoutInflater().inflate(
R.layout.custom_action_bar, null);
View btnMenuLeft= actionBarView.findViewById(R.id.imgLeftMenu);
btnMenuLeft.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
}
});
View textView_Title= actionBarView.findViewById(R.id.txtTitle);
View btnMenuShare= actionBarView.findViewById(R.id.imgSearch);
View btnMenuAdd= actionBarView.findViewById(R.id.imgAdd);
android.support.v7.app.ActionBar.LayoutParams params = new android.support.v7.app.ActionBar.LayoutParams(
android.support.v7.app.ActionBar.LayoutParams.MATCH_PARENT,android.support.v7.app.ActionBar.LayoutParams.MATCH_PARENT);
actionBar.setCustomView(actionBarView, params);
// Hide the home icon
actionBar.setIcon(android.R.color.transparent);
actionBar.setLogo(android.R.color.transparent);
}
style.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="android:height">5dp</item>
</style>
</resources>
put below code in your style.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="actionBarStyle">#style/MyActionBar</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
<!-- Customize your theme here. -->
</style>
<!-- ActionBar styles -->
<style name="MyActionBar" parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:background">#color/actionbar_bg</item>
<item name="background">#color/actionbar_bg</item>
<item name="android:homeAsUpIndicator">#drawable/ic_backarrow</item>
<item name="homeAsUpIndicator">#drawable/ic_backarrow</item>
</style>
Use "#style/AppTheme" in manifest
Custom layout
<?xml version="1.0" encoding="utf-8"?>
<TextView
android:id="#+id/cal_tvActionbarTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textColor="#color/white"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="bold" />
Write below code in your java class for actionbar
/**
* Method to change ActionBar Title
*/
public void setMainScreenActionBar(String p_title)
{
LayoutInflater m_inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
ActionBar m_actionBar = getSupportActionBar();
View m_viewActionBar = m_inflater.inflate(R.layout.custom_actionbar_title_layout, null);
ActionBar.LayoutParams m_params = new ActionBar.LayoutParams(ActionBar.LayoutParams.WRAP_CONTENT, ActionBar.LayoutParams.MATCH_PARENT, Gravity.CENTER);
TextView m_tvTitle = (TextView) m_viewActionBar.findViewById(R.id.cal_tvActionbarTitle);
m_tvTitle.setText(p_title);
m_actionBar.setCustomView(m_viewActionBar, m_params);
m_actionBar.setDisplayShowCustomEnabled(true);
m_actionBar.setDisplayShowTitleEnabled(false);
m_actionBar.setDisplayHomeAsUpEnabled(true);
m_actionBar.setHomeButtonEnabled(true);
}
put below code in your style.xml
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">Light">
<item name="actionBarStyle">#style/MyActionBar</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
<!-- Customize your theme here. -->
</style>
<!-- ActionBar styles -->
<style name="MyActionBar" parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:layout_height">5dp<background">#color/actionbar_bg</item>
<item name="background">#color/actionbar_bg</item>
<item name="android:homeAsUpIndicator">#drawable/ic_backarrow</item>
<item name="homeAsUpIndicator">#drawable/ic_backarrow</item>
</style>
If you donĀ“t fix Use "#style/AppTheme" in manifest
Custom layout
<?xml version="1.0" encoding="utf-8"?>
<TextView
android:id="#+id/cal_tvActionbarTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textColor="#color/white"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="bold" />
Write belove code in your problem with this post a screenshot please. java class for actionbar
/**
* Method to change ActionBar Title
*/
public void setMainScreenActionBar(String p_title)
{
LayoutInflater m_inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
ActionBar m_actionBar = getSupportActionBar();
View m_viewActionBar = m_inflater.inflate(R.layout.custom_actionbar_title_layout, null);
ActionBar.LayoutParams m_params = new ActionBar.LayoutParams(ActionBar.LayoutParams.WRAP_CONTENT, ActionBar.LayoutParams.MATCH_PARENT, Gravity.CENTER);
TextView m_tvTitle = (TextView) m_viewActionBar.findViewById(R.id.cal_tvActionbarTitle);
m_tvTitle.setText(p_title);
m_actionBar.setCustomView(m_viewActionBar, m_params);
m_actionBar.setDisplayShowCustomEnabled(true);
m_actionBar.setDisplayShowTitleEnabled(false);
m_actionBar.setDisplayHomeAsUpEnabled(true);
m_actionBar.setHomeButtonEnabled(true);
}

How to change Viewpager tab colour dynamically?

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?

Different style of Tabs (ActionBarSherlock)

I want to create two tabs with different styles. What I must do to get such result like in example?
Example:
And what I have now:
TabsActivity
public class TabsActivity extends SherlockFragmentActivity {
private TabsAdapter mTabsAdapter;
private ActionBar mActionBar;
private TabHost tabHost;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.l_maintab);
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.ICE_CREAM_SANDWICH) {
BitmapDrawable bg = (BitmapDrawable)
getResources().getDrawable(R.drawable.bg_striped);
getSupportActionBar().setBackgroundDrawable(bg);
BitmapDrawable bgSplit = (BitmapDrawable)
getResources().getDrawable(R.drawable.bg_striped_split_img);
bgSplit.setTileModeXY(Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);
getSupportActionBar().setSplitBackgroundDrawable(bgSplit);
}
final ActionBar bar = getSupportActionBar();
bar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
bar.setDisplayOptions(0, ActionBar.DISPLAY_USE_LOGO);
bar.setDisplayShowTitleEnabled(true);
bar.setDisplayShowHomeEnabled(true);
mTabsAdapter = new TabsAdapter(this, (ViewPager) findViewById(R.id.pager));
ActionBar.Tab events_tab = bar.newTab().setText("Events");
ActionBar.Tab volo_tab = bar.newTab().setText("Volunteers");
mTabsAdapter.addTab(events_tab, EventFragment.class, null);
mTabsAdapter.addTab(volo_tab, UserFragment.class, null);
bar.selectTab(bar.getTabAt(tabnum));
}
l_maintab.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
This is controlled by the background that you assign to the tab (usually through styles and themes). Create a style for the tab:
<style name="MyTabStyle" parent="Widget.Sherlock.ActionBar.TabView">
<item name="android:background">#drawable/my_tab_indicator</item>
</style>
I've extended the ActionBarSherlock style so that the only relevant override is the background attribute. In your theme definition, add these to your theme:
<item name="actionBarTabStyle">#style/MyTabStyle</item>
<item name="android:actionBarTabStyle">#style/MyTabStyle</item>
Then all you need to do is make a drawable resource for each state and include a state-list drawable resource for your background.
EDIT:
If you have two different tab styles:
<style name="MyTabStyle" parent="Widget.Sherlock.ActionBar.TabView">
<item name="android:background">#drawable/my_tab_indicator</item>
</style>
<style name="MyOtherTabStyle" parent="Widget.Sherlock.ActionBar.TabView">
<item name="android:background">#drawable/my_other_tab_indicator</item>
</style>
Make your app theme, then make a second one extending it:
<style name="MyAppTheme" parent="Theme.Sherlock...">
<!-- other theme attributes -->
<item name="actionBarTabStyle">#style/MyTabStyle</item>
<item name="android:actionBarTabStyle">#style/MyTabStyle</item>
</style>
<style name="MyAppTheme.Alternate">
<!-- Override just the tab style -->
<item name="actionBarTabStyle">#style/MyOtherTabStyle</item>
<item name="android:actionBarTabStyle">#style/MyOtherTabStyle</item>
</style>
In your Manifest, set android:theme="#style/MyAppTheme" in the <application> element. For Activities that need the second tab style, use android:theme="#style/MyAppTheme.Alternate" in the <activity> element.

Categories

Resources