How to change the selected tab background color?

[Prashanthlkv]

How to change the selected tab background color?

[saqlainmediasoft]

Hi Prashanthlkv, Follow the Instruction to solve your problem.

1 ) Create an XML file in Drawable Folder, give it any name you want. Let say [ custom_bg ]. 2) Copy the Below Code into [ custom_bg ] File.

<?xml version="1.0" encoding="utf-8"?>
   <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:state_selected="true">
          <shape android:shape="rectangle">            
              <solid android:color="#000"></solid>
         </shape>
      </item>
  </selector> 

3. Now go to your Custom Created or Default Layout which will be in your LAYOUT Folder and Find you Layout (Linear, Relative, Fragment etc) and Paste the Below Line:

      android:background="@drawable/custom_bg"

For your More Clarification, i am going to Paste code below:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ripple="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@drawable/custom_bg"
    android:padding="8dp" />

hope this will solve the problem. if you have any problem, Please do ask again.

[Prashanthlkv]

hi, I need to change only the selected(highlighted) tabs's background , not the whole tabs background. Help me in solving this. Thanks in advance

[cyberrob-zz]

Prepare a selector xml say tab_bk.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/some_ripple" android:state_pressed="true" />
    <item android:drawable="@drawable/some_ripple" android:state_focused="true" />
    <item android:drawable="@android:color/transparent" />
</selector>

then apply it to PagerSlidingTabStrip

<com.astuetz.PagerSlidingTabStrip
        android:id="@+id/channel_tabs"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_gravity="top"
        android:background="@color/theme_color"
        android:textColor="@color/text_color_near_black"
        app:pstsDividerColor="#00000000"
        app:pstsIndicatorColor="@color/highlight_color"
        app:pstsIndicatorHeight="4dp"
        app:pstsShouldExpand="true"
        app:pstsTabBackground="@drawable/tab_bk" />

then you got it!

[kathisai]

@cyberrob Above works only for pressed_state only. focused_state did not effect tab background.

[kadilier]

Could not get the above solution to work, so i found another way some sort of a "trick". You can use the Indicator, which highlights the selected/focused tab, and set it to cover the whole tab space. eg
android:Background = "#yourUnselectedTabColor" app:pstsIndicatorColor="#yourSelectedTabColor" app:pstsIndicatorHeight="aBigValue"

where a BigValue can be something like: 2000sp. Maybe not the best practice but it works.

[tariq007]

@kadilier in that case the selected color/indicator hides the Tab name, what to do then?

[kazisane]

nhg

[emerald3d]

Hi Prashanthlkv, Follow the Instruction to solve your problem.

1 ) Create an XML file in Drawable Folder, give it any name you want. Let say [ custom_bg ]. 2) Copy the Below Code into [ custom_bg ] File.

<?xml version="1.0" encoding="utf-8"?>
   <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:state_selected="true">
          <shape android:shape="rectangle">            
              <solid android:color="#000"></solid>
         </shape>
      </item>
  </selector> 

3. Now go to your Custom Created or Default Layout which will be in your LAYOUT Folder and
   Find you Layout (Linear, Relative, Fragment etc) and Paste the Below Line:

      android:background="@drawable/custom_bg"

For your More Clarification, i am going to Paste code below:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ripple="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@drawable/custom_bg"
    android:padding="8dp" />

hope this will solve the problem. if you have any problem, Please do ask again.

I am writing to you years later to express my gratitude!