How to Change selected Tab Background color in Tabbedpage in Xamarin.forms

Dilipkumar.7949Dilipkumar.7949 USMember ✭✭
edited May 2019 in Xamarin.Forms

I want to change selected tab background color like attached image. Please send me any reference code or links.
Thanks in Andvance.


  • BharathiBogaBharathiBoga USMember ✭✭

    You can achieve using styles .
    In drawable folder create "tab_background.xml"

        <?xml version="1.0" encoding="utf-8"?>
        <selector xmlns:android="">
            <item android:drawable="@drawable/tab_background_selected" android:state_selected="true" />
            <item android:drawable="@drawable/tab_background_unselected" android:state_selected="false" android:state_focused="false" android:state_pressed="false" />

    Then create, tab_background_selected.xml in the drawable folder:

        <?xml version="1.0" encoding="utf-8"?>
        <shape xmlns:android="" >
            <solid android:color="#000000" />

    Then, tab_background_unselected.xml in the drawable folder:

        <?xml version="1.0" encoding="utf-8" ?>
        <shape xmlns:android="" >
          <solid android:color="#DCDCDC" />

    Finally, in your styles.xml

          <style name="Base.Widget.Design.TabLayout" parent="android:Widget">
            <item name="tabBackground">@drawable/tab_background</item>

    this is the final output :

  • Dilipkumar.7949Dilipkumar.7949 USMember ✭✭

    Thanks for the Reply. Its working like a charm in Android. How can i achieve in IOS?

  • ImKhanImKhan Member ✭✭
    edited October 2019

    it did work with your set colors, when i tried to change my own color code it gives this error
    ".Android\Resources\drawable\tab_background_unselected.xml' is modified after output file"

    can you help what can be reason?

Sign In or Register to comment.