CODEWITHSUNDEEP
androidandroid-layoutandroid-actionbarandroid-fragmentactivity
user2459179
user2459179

Reputation: 307

How to customize tabs actionbar

Basically I want to make tabs in actionbar look like this: (notice this is actionbar, not tabhost)

enter image description here

Here is what I have so far: enter image description here

As you can see the problems is that the padding between the tabs is too large, it doesn't fit the whole screen. Making the tab bars slidable. I want the tab to be fixed (not slidable).

How could I do that ? How could i fix the padding of the tabbar?

Thank you for reading the question.

Upvotes: 1

Views: 753

Answers (3)

Jinu
Jinu

Reputation: 8675

You should use Support.v4.pagerslider or pager sliding tab strip

using actionbar tab is waste of time if you want customise here is the code

use below link to style actionbar

You need to change tab_indicator_ab_example.xml inside drawable like below

     <selector xmlns:android="http://schemas.android.com/apk/res/android"> 

     <item android:drawable="@android:color/transparent" 
         android:state_focused="false" 
         android:state_pressed="false" 
         android:state_selected="false"/>
<item android:drawable="@drawable/layer_bg_selected_tabs_green" 
    android:state_focused="false" 
    android:state_pressed="false" 
    android:state_selected="true"/>

<!-- Focused states -->
<item android:drawable="@android:color/transparent" 
    android:state_focused="true" 
    android:state_pressed="false" 
    android:state_selected="false"/>
<item android:drawable="@drawable/layer_bg_selected_tabs_green" 
    android:state_focused="true" android:state_pressed="false" 
    android:state_selected="true"/>

<!-- Pressed -->
<!-- Non focused states -->
 <item android:drawable="@drawable/tab_unselected_pressed_example" 
     android:state_focused="false" android:state_pressed="true" 
     android:state_selected="false"/>
<item android:drawable="@drawable/layer_bg_selected_tabs_green" 
    android:state_focused="false" android:state_pressed="true" 
    android:state_selected="true"/>

<!-- Focused states -->
<item android:drawable="@android:color/transparent" 
    android:state_focused="true" 
    android:state_pressed="true" 
    android:state_selected="false"/>
<item android:drawable="@drawable/layer_bg_selected_tabs_green" 
    android:state_focused="true" android:state_pressed="true" 
    android:state_selected="true"/>
     </selector>

create xml layer_bg_selected_tabs_green.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- code for tab indicator -->
 <item>
    <shape android:shape="rectangle" >
        <solid android:color="#F58634" />
        <padding android:bottom="3dp" />
    </shape>
</item>
<item>
    <shape android:shape="rectangle" >
        <solid android:color="#FFFFFF" />
    </shape>
</item>
</layer-list>

change indicator here and padding chnages height Solid changes color of indicator

Upvotes: 1

Tamilselvan Kalimuthu
Tamilselvan Kalimuthu

Reputation: 1532

If you want to remove the tab indicator present in your action bar tabs you can try like Remove tab Indicator.

and for more customization try with this Actionbar style generator

Upvotes: 2

user2459179
user2459179

Reputation: 307

Well, I did this by override the style of the action bar:

<style name="CustomActionBarTheme"
       parent="@android:style/Theme.Holo.Light.DarkActionBar">
    <item name="android:actionBarTabTextStyle">@style/TabTextStyle</item>
    <item name="actionBarTabTextStyle">@style/TabTextStyle</item>
    <item name="android:scrollHorizontally">false</item>
    <item name="android:paddingLeft">0dp</item>
    <item name="android:paddingRight">0dp</item>
</style>

Hope this help anyone come across this problem :).

Upvotes: 0

Related Questions