Forum Xamarin.Forms

Cant Resize Image in Button ?

I Have button with image property , when my image resolution is to big the image will to big for the button and the only solution i know is to change the image resolution but when i change the image resolution to smaller size the image will look broken / not hd (to low resolution) . is there any method to change the height request for the image in button without change the image resolution?

Tagged:

Best Answer

Answers

  • Eric_LiraEric_Lira USMember ✭✭✭

    Hi @TheodorusGumilang
    Where you're getting your images from? Is it from platform specific folder? If it is, you need to use different resolutions on specific folders (android) or specific names (IOs).
    For example, on android you have a folder called Resources and inside it, you have drawable, drawable-hdpi, drawable-xhdpi and drawable-xxhdpi.
    Lets say you have an image size of 50x50 on folder drawable, than you need the same image been 1.5x bigger on drawable-hdpi, with would be 75x75, than 2x (100x100) bigger on drawable-xhdpi and 3x bigger on drawable-xxhdpi (150x150).
    With IOs is similar, but you need to change the name of the file.

    Check the link bellow, you will find all you need.
    https://developer.xamarin.com/guides/xamarin-forms/user-interface/images/

    Another really good option is to use Iconize where you can use fonts as icons.
    https://github.com/jsmarcus/Xamarin.Plugins/tree/master/Iconize

  • @Eric_Lira yes my image is from drawable, but my prolem is i cant change the height and width of my image on button without change the resolution example and MyLogo.png resoluton is 144 x 144 . Because my Logo resolution is so big the image will overlap the button , and my only solution is change the image to 48 x 48 so the image not overlaping. and it seem like button dont have height request for the image property , so it will shows what it is . So lets say if i add hdpi, xhdpi , etc resource will it fix my problem ?

  • Eric_LiraEric_Lira USMember ✭✭✭

    @TheodorusGumilang can you post your xaml?

  • @Eric_Lira here is my XAML , as you can see inside my button there is a image. And what i want to know is how to make heigh request to that image so i dont need to make my image resolution smaller to fit my button

                    <Grid.RowDefinitions>
                        <RowDefinition Height="0" />
                        <RowDefinition Height="100" />
                        <RowDefinition Height="100" />
                        <RowDefinition Height="100" />
    
    
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
    
                        <ColumnDefinition Width="110" />
                        <ColumnDefinition Width="110" />
                        <ColumnDefinition Width="110" />
    
                    </Grid.ColumnDefinitions>
    
                    <AbsoluteLayout  Grid.Row="1" Grid.Column="0" >
                        <Button  AbsoluteLayout.LayoutFlags="WidthProportional" AbsoluteLayout.LayoutBounds="0,0,1,100"  Clicked="GotoVPoint" Image="ic_pointsummary.png" Margin="5" 
        Style="{StaticResource plainButton}" />
                        <Label FontFamily="Panton-LightCaps.otf#Panton-LightCaps" AbsoluteLayout.LayoutFlags="WidthProportional" AbsoluteLayout.LayoutBounds="0,80,1,50"  FontSize="12" Text="V-POINT" HorizontalOptions="Center"/>
                    </AbsoluteLayout>
    
                    <AbsoluteLayout  Grid.Row="1" Grid.Column="1">
                        <Button  AbsoluteLayout.LayoutFlags="WidthProportional" AbsoluteLayout.LayoutBounds="0,0,1,100" Margin="1" Clicked="gotoCardCommunity" Image="ic_card.png" 
        Style="{StaticResource plainButton}" />
                        <Label  FontFamily="Panton-LightCaps.otf#Panton-LightCaps" AbsoluteLayout.LayoutFlags="WidthProportional" AbsoluteLayout.LayoutBounds="0,80,1,50"  FontSize="12" Text="V-CARD" HorizontalOptions="Center"/>
                    </AbsoluteLayout>
    
                    <AbsoluteLayout Grid.Row="1" Grid.Column="2">
                        <Button  AbsoluteLayout.LayoutFlags="WidthProportional" AbsoluteLayout.LayoutBounds="0,0,1,100"  Margin="1" Clicked="goEvent" Image="ic_event" 
        Style="{StaticResource plainButton}" />
                        <Label FontFamily="Panton-LightCaps.otf#Panton-LightCaps"  AbsoluteLayout.LayoutFlags="WidthProportional" AbsoluteLayout.LayoutBounds="0,80,1,50"  FontSize="12" Text="PROMO" HorizontalOptions="Center"/>
                    </AbsoluteLayout>
    
                    <AbsoluteLayout Grid.Row="2" Grid.Column="0" >
                        <Button  AbsoluteLayout.LayoutFlags="WidthProportional" AbsoluteLayout.LayoutBounds="0,0,1,100"  Margin="1" Clicked="gotoNearbyLocation" Image="ic_catalog" 
        Style="{StaticResource plainButton}" />
                        <Label FontFamily="Panton-LightCaps.otf#Panton-LightCaps"  AbsoluteLayout.LayoutFlags="WidthProportional" AbsoluteLayout.LayoutBounds="0,80,1,50"  FontSize="12" Text="V-CATALOG" HorizontalOptions="Center"/>
                    </AbsoluteLayout>
    
                    <AbsoluteLayout  Grid.Row="2" Grid.Column="1">
                        <Button  AbsoluteLayout.LayoutFlags="WidthProportional" AbsoluteLayout.LayoutBounds="0,0,1,100" Margin="1" Clicked="GoToVOutlet"  Image="ic_store" 
        Style="{StaticResource plainButton}" />
                        <Label FontFamily="Panton-LightCaps.otf#Panton-LightCaps"  AbsoluteLayout.LayoutFlags="WidthProportional" AbsoluteLayout.LayoutBounds="0,80,1,50"  FontSize="12" Text="V-OUTLET" HorizontalOptions="Center"/>
    
                    </AbsoluteLayout>
    
    
                    <AbsoluteLayout Grid.Row="2" Grid.Column="2" >
                        <Button  AbsoluteLayout.LayoutFlags="WidthProportional" AbsoluteLayout.LayoutBounds="0,0,1,100" Margin="1"  Clicked="gotoNews"  Image="ic_news" 
        Style="{StaticResource plainButton}" />
                        <Label FontFamily="Panton-LightCaps.otf#Panton-LightCaps" AbsoluteLayout.LayoutFlags="WidthProportional" AbsoluteLayout.LayoutBounds="0,80,1,50"  FontSize="12" Text="V-NEWS" HorizontalOptions="Center"/>
    
                    </AbsoluteLayout>
    
                    <Button BackgroundColor="#FAFAFA" Grid.Row="3" Grid.Column="1" Command="{Binding SlideOpenCommand}" Image="ic_slideup.png"/>
    
                </Grid>
    
  • @Eric_Lira Wow thanks for your anwer this is very helpfull for me

  • SteveShaw.5557SteveShaw.5557 USMember ✭✭✭
    edited September 2018

    Or instead of all that, an alternative that @ClintStLaurent suggested here, is to layer the image and the button as separate elements inside of a single-cell grid, instead of using button's image property.

    Personally, I put the image (a png with transparency) on top of the button (after the button in the XAML), with InputTransparent="True". Example of icon inside a circle with Accent colored background:

    <Grid>
    <Button BackgroundColor="Accent" BorderColor="White" BorderWidth="1"
    WidthRequest="36" HeightRequest="36" CornerRadius="18"
    VerticalOptions="Center" HorizontalOptions="Center"
    Command="{Binding YourCommand}" />
    <!-- button doesn't resize its image to fit, so make a separate overlay -->
    <!-- [Tested on Android] Margin value would be same on each side, to center the image,
    but had to make right/bottom slightly larger to keep image from touching border circle. -->
    <Image Source="{StaticResource YourImage}"
    WidthRequest="22" HeightRequest="22" Margin="6,6,8,8" InputTransparent="True" />
    </Grid>

    Depending on your situation, the Vertical/HorizontalOptions might be better on the <Grid> itself, or repeated in both <Button> and <Image>; I extracted this code from one cell of a multi-element grid; in that case instead of <Grid>, I had <Button Grid.Row="0" Grid.Column="3"> and same for <Image>.

Sign In or Register to comment.