Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

How to add an colored underline to a button on Xamarin.Forms Android

I am trying to add a colored underline to a Button on Xamarin.Forms. I made a custom renderer for iOS and got that working, but I can't seem to figure out a way to do it with a custom renderer on Android. The only thing i've found was adding a same color underline, but I want it to be a certain thickness and color. Anyone know how to handle this on Android?

Answers

  • seanydaseanyda GBMember ✭✭✭✭✭
    edited December 2017

    @JoshuaNovak.6915 said:
    I am trying to add a colored underline to a Button on Xamarin.Forms. I made a custom renderer for iOS and got that working, but I can't seem to figure out a way to do it with a custom renderer on Android. The only thing i've found was adding a same color underline, but I want it to be a certain thickness and color. Anyone know how to handle this on Android?

    If you placed a BoxView with a HeightRequest of the "line" you want it to be, in a Grid with a Button.

    Something like the below would work...

    Grid customBtn = new Grid
        {
             Children = {
                      new Button { /* Button Properties */ },
                      new BoxView { VerticalOptions = LayoutOptions.End, HeightRequest = 1, BackgroundColor = Color.Red }
              }
        };
    

    and this would be a cross platform solution, so you can ditch your iOS, Droid and UWP renderers.

  • @seanyda I'm trying to keep my views somewhat clean and not have 3 views for something that should just be one. This also doesn't work well since you can't click the line.

  • seanydaseanyda GBMember ✭✭✭✭✭
    edited December 2017

    @JoshuaNovak.6915 said:
    @seanyda I'm trying to keep my views somewhat clean and not have 3 views for something that should just be one. This also doesn't work well since you can't click the line.

    You would be able to add a TapGestureRecognizer to the whole Grid, which contains the Button and BoxView. A lot of developers find it a much cleaner solution to use a Grid instead of a Button because it's a nicer cross platform solution because the effect will be identical across iOS, Android and Windows - However building custom renderers for each platform for that effect would probably be less efficient or clean.

  • @seanyda I disagree. It's way less clean to have 3 views try to act as one view and not even get the native effects when that is the whole point of the platform to begin with. Not to mention that is 3 views for every one that Android now has to render and I all ready have a lot of views in my app.

  • @seanyda said:

    @JoshuaNovak.6915 said:
    I am trying to add a colored underline to a Button on Xamarin.Forms. I made a custom renderer for iOS and got that working, but I can't seem to figure out a way to do it with a custom renderer on Android. The only thing i've found was adding a same color underline, but I want it to be a certain thickness and color. Anyone know how to handle this on Android?

    If you placed a BoxView with a HeightRequest of the "line" you want it to be, in a Grid with a Button.

    Something like the below would work...

    Grid customBtn = new Grid
        {
             Children = {
                      new Button { /* Button Properties */ },
                      new BoxView { VerticalOptions = LayoutOptions.End, HeightRequest = 1, BackgroundColor = Color.Red }
              }
        };
    

    and this would be a cross platform solution, so you can ditch your iOS, Droid and UWP renderers.

    Thank you so much....

Sign In or Register to comment.