CODEWITHSUNDEEP
androidtabsstyles
Omama
Omama

Reputation: 157

Custom Tab Style like in Wanelo shopping app 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 .

enter image description here

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.

Upvotes: 0

Views: 1276

Answers (1)

Pravin
Pravin

Reputation: 1362

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

Upvotes: 2

Related Questions