Quantcast
Channel: Xamarin.Forms — Xamarin Community Forums
Viewing all articles
Browse latest Browse all 58056

Problem with Button with Image on Android (iOS working)

$
0
0

So I have a problem with putting an image on a button and it's driving me crazy. Any suggestions/help would be greatly appreciated!
Normal Xamarin.Forms Button is not working either on iOS or Android. (see two attached screenshots Android_Button & iOS_Button)
So I've created my own renderer which is working fine on iOS (See iOS_CustButton) However it's causing me problems on Android.

Here's the xaml for the page:

<RelativeLayout>
    <StackLayout
        RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=0}"
        RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=0}"
        RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
        RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.6}" >
        <Image Source="shared/logo.png" HorizontalOptions="Center" />
    </StackLayout>

    <StackLayout
        RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=0}"
        RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.58}"
        RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
        RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.4}" >
        <StackLayout Orientation="Vertical" Padding="20,1,20,20"  VerticalOptions="FillAndExpand">
            <local:ImageButton2 Text="Start spil" Command="{Binding StartCommand}" Image="shared/knap_graa.png" Font="{Binding Font}" TextColor="#000" VerticalOptions="FillAndExpand"/>
            <local:ImageButton2 Text="Info" Command="{Binding InfoCommand}" Image="shared/knap_graa.png" Font="{Binding Font}" TextColor="#000" VerticalOptions="FillAndExpand"/>
            <local:ImageButton2 Text="Highscore" Command="{Binding HiscoreCommand}" Image="shared/knap_graa.png" Font="{Binding Font}" TextColor="#000" VerticalOptions="FillAndExpand"/>
            <local:ImageButton2 Text="Besøg hjemmeside" Command="{Binding WebCommand}" Image="shared/knap_graa.png" Font="{Binding Font}" TextColor="#000" VerticalOptions="FillAndExpand"/>
        </StackLayout>
    </StackLayout>
</RelativeLayout>

And here is the code for the Android custom renderer: (snippet)

    protected override void OnElementChanged (ElementChangedEventArgs<Button> e)
    {
        base.OnElementChanged (e);
        if (e.OldElement != null) {
            return;
        }
        button = new global::Android.Widget.Button(Context);
        button.SetBackgroundResource(Resource.Drawable.knap_graa);
        button.Text=Control.Text;
        button.SetTextColor (Element.TextColor.ToAndroid());
        SetNativeControl (button);
    }

If I set the BackgroundResource it seems like the button does not respect the layout but takes up all the vertical space of the inner StackLayout. If I don't set any BackgroundResource - all the 4 buttons are laid out correct.

See attached screen shots (Android_CustButton and Android_NoImage)

I simply cannot get this to work and any help would be appreciated.

Thanks in advance.

Normal Xamarin.Forms button with Image on iOS:

image

Normal Xamarin.Forms button with Image on Android:

image

Custom button renderer working on iOS:

image

Custom button renderer not working on Android:

image

Custom button renderer on Android without setting BackgroundResource:

image


Viewing all articles
Browse latest Browse all 58056

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>