Easily Create Floating Action Button in Xamarin.Forms

5

Introduction :-

A floating action button (FAB) is a circular button that triggers the primary action in your app’s UI. This page shows you how to add the FAB to your layout, customize some of its appearance, and respond to button taps.

Screen: Floating Action Button “FAB” Screen

CODE :-

<StackLayout BackgroundColor=”Lime”>

<StackLayout BackgroundColor=”Black” HorizontalOptions=”FillAndExpand” VerticalOptions=”FillAndExpand” HeightRequest=”50″>

<Label Text=”Floating Action Button” TextColor=”White” FontSize=”18″ HorizontalOptions=”Center” VerticalOptions=”Center” Margin=”0,10,0,0″/>

</StackLayout>

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height=”*”/>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width=”*”/>

</Grid.ColumnDefinitions>

<ScrollView Grid.Row=”0″ Grid.Column=”0″>

<StackLayout x:Name=”labelList” Margin=”15″>

<Button HeightRequest=”50″ Text=”First Button” BorderColor=”Black” BorderWidth=”2″ BorderRadius=”10″/>

<Button HeightRequest=”50″ Text=”Second Button” BorderColor=”Black” BorderWidth=”2″ BorderRadius=”10″/>

<Button HeightRequest=”50″ Text=”Third Button” BorderColor=”Black” BorderWidth=”2″ BorderRadius=”10″/>

<Button HeightRequest=”50″ Text=”Fourth Button” BorderColor=”Black” BorderWidth=”2″ BorderRadius=”10″/>

<Button HeightRequest=”50″ Text=”Fifth Button” BorderColor=”Black” BorderWidth=”2″ BorderRadius=”10″/>

<Button HeightRequest=”50″ Text=”Sixth Button” BorderColor=”Black” BorderWidth=”2″ BorderRadius=”10″/>

<Button HeightRequest=”50″ Text=”Seventh Button” BorderColor=”Black” BorderWidth=”2″ BorderRadius=”10″/>

<Button HeightRequest=”50″ Text=”Eighth Button” BorderColor=”Black” BorderWidth=”2″ BorderRadius=”10″/>

<Button HeightRequest=”50″ Text=”Nineth Button” BorderColor=”Black” BorderWidth=”2″ BorderRadius=”10″/>

<Button HeightRequest=”50″ Text=”Tenth Button” BorderColor=”Black” BorderWidth=”2″ BorderRadius=”10″/>

<Button HeightRequest=”50″ Text=”Eleventh Button” BorderColor=”Black” BorderWidth=”2″ BorderRadius=”10″/>

<Button HeightRequest=”50″ Text=”Twelveth Button” BorderColor=”Black” BorderWidth=”2″ BorderRadius=”10″/>

<Button HeightRequest=”50″ Text=”Thirteenth Button” BorderColor=”Black” BorderWidth=”2″ BorderRadius=”10″/>

<Button HeightRequest=”50″ Text=”Fourteenth Button” BorderColor=”Black” BorderWidth=”2″ BorderRadius=”10″/>

<Button HeightRequest=”50″ Text=”Fifteenth Button” BorderColor=”Black” BorderWidth=”2″ BorderRadius=”10″/>

</StackLayout>

</ScrollView>

<StackLayout x:Name=”searchBtn” Grid.Row=”0″ Grid.Column=”0″ WidthRequest=”80″ HeightRequest=”80″ BackgroundColor=”Transparent” VerticalOptions=”EndAndExpand” HorizontalOptions=”EndAndExpand” Margin=”5″>

<Button HeightRequest=”80″ Image=”circleplus” BackgroundColor=”HotPink” WidthRequest=”80″ />

</StackLayout>

</Grid>

</StackLayout>

  • You wil get the following screen.

2

Hopefully this will help you to understand and we have successfully created a floating action button (FAB) in Xamarin.Forms .

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>