Gradients in both navbar and tabbedpage bar

joellinderjoellinder SEMember ✭✭
edited July 2018 in Xamarin.Forms

Hi fellow devs!

I've been working on a app for almost a year now and i have grown tired of its pretty stale look with only solid colors.
So i decided to try to implement some nice gradients and I've almost got what i wanted.

My problem is that i want the gradient to continue to flow down into my tabbed view like in this picture:

But i can only set individual gradients by editing the xml layout files for the tabbar and toolbar. Which leaves
a ugly transition between the views.

I've found these two threads on stack overflow which gives some details on how to accomplish this:
https://stackoverflow.com/questions/44398634/gradient-from-actionbar-in-to-tabs
https://stackoverflow.com/questions/43797567/android-extend-toolbar-into-translucent-status-bar-while-keeping-other-layout-ob

But i do not know how i would tackle this in xamarin forms. I would guess i would need to write my own renderer but i don't really know
where to start.

Thanks for your time!

Answers

  • BillyLiuBillyLiu Member, Xamarin Team Xamurai
    edited July 2018

    @joellinder

    But i can only set individual gradients by editing the xml layout files for the tabbar and toolbar. Which leaves a ugly transition between the views.

    I think you could try to change the android:angle property in your gradient file. For example, you could try to use 0 or 180.

    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
      <gradient
          android:angle="180"
          android:centerColor="#26C986"
          android:endColor="#109F8D"
          android:startColor="#36ED81"
          android:type="linear" />
    </shape>
    

    The result will be:

    And you could refer to following link for more information:
    https://stackoverflow.com/questions/46809733/how-to-add-a-gradient-in-xamarin-forms-toolbar-and-uinavigationbar

Sign In or Register to comment.