More Group Sites
Education Books
School Rankings
Jobless Net
Better Home
Enviro++
更好教育论坛
Welcome Guest! To enable all features please Login or Register.

Notification

Icon
Error

Share
Options
View
Go to last post Go to first unread
hong  
#1 Posted : Saturday, 28 July 2018 10:53:34 AM(UTC)
hong

Rank: Administration

Reputation:

Groups: AcademicCoachingSchool, admin, Administration, BookSeller, CatholicSchool, CoachingAdult, CoachingProfessional, CoachingSports, ExtraCurriculumCoaching, IndependentSchool, Moderator, MusicTeacher, PrivateSchool, PublicSchool, SelectiveSchool, tutor
Joined: 23/11/2008(UTC)
Posts: 522

Xamarin forms floating bottom right button using absolute or relative layouts

Like GMail or YMail's compose button, or we call it floating action button FAB, the same can be achieved through AbsoluteLayout or RelativeLayout with Xamarin forms.

AbsoluteLayout

Code:
<ContentPage.Content>
        <AbsoluteLayout>
            <StackLayout Orientation="Vertical" Spacing="0" AbsoluteLayout.LayoutFlags="All"
                         AbsoluteLayout.LayoutBounds="0,0,1,1">
                <your controls />
            </StackLayout>
            <Button 
                x:Name="AddButton"
                HorizontalOptions="End"
                VerticalOptions="End"
                WidthRequest="30"
                HeightRequest="30"
                CornerRadius="15"
                Text="+"
                Clicked="AddItem_Clicked"
                AbsoluteLayout.LayoutFlags="PositionProportional"
                AbsoluteLayout.LayoutBounds="1, 1, AutoSize, AutoSize" />
        </AbsoluteLayout>
    </ContentPage.Content>
</ContentPage>


Please note that the property AutoSize means the width or height of the child (the button here) in the AbsoluteLayout should be sized to that button's native size. You may need to set Width and Height of the bounds manually instead of using AutoSize so the button's position can have a little bit gap away from the bottom right corner.

RelativeLayout

Code:
<ContentPage.Content>
        <RelativeLayout>
            <ContentView
                RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
                RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}">
                <StackLayout Orientation="Vertical" Spacing="0" >
                <your controls /> 
                </StackLayout>
            </ContentView>
            <Button 
                x:Name="AddButton"
                HorizontalOptions="End"
                VerticalOptions="End"
                WidthRequest="30"
                HeightRequest="30"
                CornerRadius="15"
                Text="+"
                Clicked="AddItem_Clicked"
                RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1, Constant=-35}"
                RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1, Constant=-35}" />
        </RelativeLayout>
    </ContentPage.Content>
</ContentPage>


Please note that the constant in XConstraint and YConstraint of RelativeLayout is an offset so you can adjust the button's position at the bottom right corner of the page. Maybe this constant approach is easier to manipulate the offset than the AutoSize property of AbsoluteLayout.

Edited by user Saturday, 28 July 2018 7:45:35 PM(UTC)  | Reason: Not specified

Sponsor
Rss Feed  Atom Feed
Users browsing this topic
Guest
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.