›

Customize xamairn froms tabbar color

AfsarunnisaMdAfsarunnisaMd USMember ✭✭
in Xamarin.Forms

Hi, We have one requirement that we need to add gradient background color for tabbar in xamrin froms, how can we do that ?

Tagged:

Answers

  • DarshanJSDarshanJS USMember ✭✭✭✭
    edited January 2018

    @AfsarunnisaMd said:

    If it is Android app then to Android Project >> Resources >> Values >> styles
    change the color in below code and try

                <!-- Set theme colors from http://www.google.com/design/spec/style/color.html#color-color-palette -->
            <!-- colorPrimary is used for the default action bar background -->
            <item name="colorPrimary">#770754</item>
            <!-- colorPrimaryDark is used for the status bar -->
            <item name="colorPrimaryDark">#770754</item>
  • CharwakaCharwaka INMember ✭✭✭✭✭

    @DarshanJS said:

    @AfsarunnisaMd said:

    If it is Android app then to Android Project >> Resources >> Values >> styles
    change the color in below code and try

                <!-- Set theme colors from http://www.google.com/design/spec/style/color.html#color-color-palette -->
            <!-- colorPrimary is used for the default action bar background -->
            <item name="colorPrimary">#770754</item>
            <!-- colorPrimaryDark is used for the status bar -->
            <item name="colorPrimaryDark">#770754</item>

    will this work in forms with custom renderer ?

  • seanydaseanyda GBMember ✭✭✭✭✭

    @Charwaka said:

    @DarshanJS said:

    @AfsarunnisaMd said:

    If it is Android app then to Android Project >> Resources >> Values >> styles
    change the color in below code and try

                <!-- Set theme colors from http://www.google.com/design/spec/style/color.html#color-color-palette -->
            <!-- colorPrimary is used for the default action bar background -->
            <item name="colorPrimary">#770754</item>
            <!-- colorPrimaryDark is used for the status bar -->
            <item name="colorPrimaryDark">#770754</item>

    will this work in forms with custom renderer ?

    That is Xamarin.Forms, To do your styling in your Xamarin.Forms Android app you would use the styles.xml theme. But that doesn't answer the question because he asked for a gradient.

  • DarshanJSDarshanJS USMember ✭✭✭✭

    @Charwaka said:

    @DarshanJS said:

    @AfsarunnisaMd said:

    If it is Android app then to Android Project >> Resources >> Values >> styles
    change the color in below code and try

                <!-- Set theme colors from http://www.google.com/design/spec/style/color.html#color-color-palette -->
            <!-- colorPrimary is used for the default action bar background -->
            <item name="colorPrimary">#770754</item>
            <!-- colorPrimaryDark is used for the status bar -->
            <item name="colorPrimaryDark">#770754</item>

    will this work in forms with custom renderer ?

    I didn't tried in customer render

  • CharwakaCharwaka INMember ✭✭✭✭✭

    As @CraigDunn said

    There's no real drawing API currently in Xamarin.Forms that would let you render a gradient in a platform-independent way. A couple of options might be:

    an image of the gradient set to fill the entire screen. you could supply multiple resolution images on each platform to avoid too much pixellation

    a custom renderer on each platform that uses native APIs to draw the gradient on each platform

  • seanydaseanyda GBMember ✭✭✭✭✭

    Checkout the below for how to add gradients to the style.xml

    https://stackoverflow.com/questions/18439924/custom-gradient-background-of-actionbar-compat

  • stesvisstesvis USMember ✭✭✭

    Is there a way to change the tab bar colors in iOS without using a custom renderer?
    I was using a custom renderer to change the colors in both android and iOS but that conflicts with the Tabs Badge plugin...so i have to find a solution without using custom renderers.

Sign In or Register to comment.