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

Creating Round Buttons with centered Image and Label

$
0
0

Hey together,

i'm quite new to xamarin forms and i would like to create some buttons like in the image linked next.

us.v-cdn.net/5019960/uploads/editor/ot/ox4hgakakrig.png

I tried something ike this:

<StackLayout Orientation="Horizontal">
            <Button ContentLayout="Top,-70" 
                    VerticalOptions="EndAndExpand"
                    HorizontalOptions="CenterAndExpand" 
                    Text="Label" 
                    FontSize="20"
                    Image="ic_home_white_72dp.png" 
                    WidthRequest="120" 
                    HeightRequest="120"  
                    BorderRadius="60" 
                    BackgroundColor="#3F51B5" 
                    TextColor="#FFFFFF" />

            <Button x:Name="button_app"
                    ContentLayout="Top,-70" 
                    VerticalOptions="EndAndExpand"
                    HorizontalOptions="CenterAndExpand" 
                    Text="Apps" 
                    FontSize="20"
                    Image="ic_apps_white_72dp.png" 
                    WidthRequest="120" 
                    HeightRequest="120"  
                    BorderRadius="60" 
                    BackgroundColor="#3F51B5" 
                    TextColor="#FFFFFF" />

            <Button ContentLayout="Top,-70" 
                    VerticalOptions="EndAndExpand"
                    HorizontalOptions="CenterAndExpand" 
                    Text="Telefon" 
                    FontSize="20"
                    Image="ic_phone_white_72dp.png" 
                    WidthRequest="120" 
                    HeightRequest="120"  
                    BorderRadius="60" 
                    BackgroundColor="#3F51B5" 
                    TextColor="#FFFFFF" />
            </StackLayout>

This is the output I'm getting
us.v-cdn.net/5019960/uploads/editor/e8/l0j5sqh1lrv1.png

How could i archive that the images in the buttonsare getting centered? Maybe with a custom button?


Viewing all articles
Browse latest Browse all 77050

Trending Articles



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