The thing is I tried using https://baskren.github.io/Forms9Patch/ but I feel like I don't fully grasp it.
Don't get me wrong, the tool is great it does stretch the 9patch images. It's just that I can't get the buttons to look properly based of Google brand guidelines.
https://developers.google.com/identity/branding-guidelines
And this here are the drawables I am using : https://developers.google.com/identity/images/signin-assets.zip.
Here are the results of different button tries and dimensions
This is the code that got me the closest to the button I want
<f9p:Button Text = "Sign in with xxhdpi"
TextColor="White"
FontSize="14"
FontFamily="sans-serif-medium"
WidthRequest="60"
>
<f9p:Button.BackgroundImage>
<f9p:Image Source="{local:ImageMultiResource TestingApp.Resources.Images.btn_google_signin_dark_normal_xxhdpi}"/>
</f9p:Button.BackgroundImage>
</f9p:Button>
I tried using a grid with image and button as well but it didn't work out.
It would be awesome if someone would point me in a proper direction.
I've actually done this before. Here is a general outline of what I did:
Put your multi-platform icon files into your .NetStandard project as Embedded Resources. This means that I found all of the various resolutions provided by Google (_xxhdpi, _xhdpi, _hdpi, _mdpi, etc) and then renamed them to the following:
And then put them in to the Resources/Google folder in my project (FormsFirebase.Ui). So, for example, the EmbeddedResourceId for the first file, in the above list, is FormsFirebase.Ui.Resources.Google.icon@¾x.png.
As you will see in a moment, renaming these files, as shown above, will allow Forms9Patch.Button to pick the right image for the right screen resolution (so it will look great) - freeing you from having to manage this. Likewise, putting them in the .NetStandard project means they are available for all platforms - freeing you up from having to figure this out multiple times!
In your Forms9Patch.Button, refer to the above icon image in a resolution independent fashion. This can be done a couple of ways. One of the more verbose ways is:
var myButton = new Forms9Patch.Button
{
Text = "Sign in with xxhdpi",
TextColor=Color.White,
FontSize=14,
FontFamily="sans-serif",
WidthRequest=60,
IconImage = new Forms9Patch.Image
{
Source = Forms9Patch.ImageSource.FromMultiResource("FormsFirebase.Ui.Resources.Google.icon", GetType().Assembly),
Padding = 1,
},
Spacing = 4,
TintIcon = false,
BackgroundColor = Color.FromRGB(81,134,236)
};
A couple of things to Note:
First, I set TintIcon to false in order to not tint the icon to the same color as the TextColor. Also, I set IconImage, not BackgroundImage. This is to be sure the image is a peer to the text, rather than in a layer below it.
Also note that I am able to set the padding of the IconImage as well as the Forms9Patch.Button.Padding and the Forms9Patch.Button.Spacing (the distance between the IconImage and the Text or HtmlText, depending on if HasTightSpacing has been set to true).
Instead of using multiple .png files (for each screen resolution), if you have .svg version of your image available, you can use that instead. Much less work!
Another thing you might be interested in: Just as Forms9Patch handles images in a platform independent fashion (by putting them in a cross platform project as Embedded Resources), it can do the same thing with Fonts. This means you can put a font file (.ttf or .otf) into your cross platform project and use its EmbeddedResourceId as the value for FontFamily. And this behavior can be extended to Xamarin.Forms elements by use of the Forms9Patch.EmbeddedResourceFontEffect.
Now for a bit of proselytization (please forgive me if this does not apply to you): I see that you used XAML for your sample code. Notice I didn't in my response. If you are new to .Net and/or Xamarin.Forms, I would highly recommend not using XAML. Don't get me wrong, XAML is great - it's just not for beginners. Why? There's just too many things going on under the covers that, as a beginner, will trip you up and slow you down. Rather, I would recommend you write all of your UI in C# so you can learn to manage your properties and learn how binding really works. Once you have mastered making very efficient layouts with the best "context appropriate" use of binding, then you're ready for XAML. For me, the real test was being able to make very a complex cell layout in a large list in a ListView smoothly scroll on a low-end Android phone. After that experience, I was able to take advantage of all the benefits of developing in XAML (and there are many) without worrying about being shackled by my novice mistakes.