🚀🚀🚀 Floating Action Button🚀🚀🚀

ziomek64 commented 1 year ago

Description

This was already requested in Xamarin Forms - https://github.com/xamarin/Xamarin.Forms/issues/12997

So I will copy what's there, the author is - techprotom, he described it perfectly

We really need it, it's a core of material design

Floating action button

The floating action button is one of the most crucial components used in Google's material design - especially for layouts in which it is needed to add one or more items to a list or compose a new email. In addition to this - it's striking design - which can come in two forms (mini or normal size) make for a better user experience than using standard buttons.

Imagine this GitHub Repo as a puzzle - this puzzle is missing crucial parts. One of these parts is the floating action - which I know and can guarantee will be a perfect feature/addition to your library.

Implementing a floating action button in Xamarin.Forms right now is a clunky job - and a third-party library which makes it easier to implement a floating action button plus one that utilises material design would make not only my life - but the life of many others - just that much better.

Please consider adding this to your library - it will certainly attract more users.

Email me at todoescode@gmail.com if you need help or want to ask any questions. - Probably don't email him, as it was old issue

Images and links:

Floating action button: https://material.io/components/buttons-floating-action-button

Regular regular

Mini mini

On Hover on_hover

On Clicked on_clicked

Extended

Extended (no icon) extended_noicon

Use cases (there are many) case1 case2 case3 case4 case5 case6

Public API Changes

TBD

Intended Use-Case

For example mail app, would be great to have an action button at a glance at all times to compose a new email. When scrolling down it would disappear to not cover mails, when going up it would appear again.

For long lists, collections, a button like this could scroll the whole collection up so you're back at the top again or display a pop-up to choose a group to scroll to.

Possibilities are endless, those are two simple ones that i came up with and that I often see in apps. See the pictures as well!

ghost commented 1 year ago

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

Manish-Pradhan-FP commented 9 months ago

Any updates on this? Still waiting.

ziomek64 commented 9 months ago

Any updates on this? Still waiting.

Not up to me man, ms doesn't have resources on MAUI 😁

leonedev commented 6 months ago

PLEASE, implement it is really useful!

PrathyushTaneti commented 6 months ago

still waiting!

MrSnuffff commented 5 months ago

Up

Wout-M commented 2 months ago

Any progress on this?

ziomek64 commented 2 months ago

Any progress on this?

Of course not, nobody cares from Microsoft

leonedev commented 2 months ago

Any progress on this?

Still no ofc........

lavr2004 commented 1 month ago

This is how I realized <FloatingActionButton> using only XAML markup.

Example based on <Grid> Control, that have such feature: if any contol inside Grid-layout placed in same position (row-column) like another - this second element stay up on that first like on the stack.

So, if that first element is <StackLayout> with <ScrollView>, and second element is usual <Button> we getting as a result <FloatingActionButton>-analogue with full functionality of that, that can "fly"on the stack while user is scrolling screen.

This is how it looks on device:

This is markup example.


<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XXX.MainPage">
    <Grid>
        <ScrollView>
        <VerticalStackLayout Spacing="10">
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>

        </VerticalStackLayout>
        </ScrollView>
        <Button
            x:Name="FloatingActionButton"
            HorizontalOptions="End"
            VerticalOptions="End"
            Text="+"
            Clicked="OnFloatingActionButtonClicked"
            CornerRadius="50"
            Margin="0, 0, 10, 10"
            FontAttributes="Bold"/>
    </Grid>
</ContentPage>```

ziomek64 commented 1 month ago

This is how I realized <FloatingActionButton> using only XAML markup.

Example based on <Grid> Control, that have such feature: if any contol inside Grid-layout placed in same position (row-column) like another - this second element stay up on that first like on the stack.

So, if that first element is <StackLayout> with <ScrollView>, and second element is usual <Button> we getting as a result <FloatingActionButton>-analogue with full functionality of that, that can "fly"on the stack while user is scrolling screen.

This is how it looks on device:

This is markup example.

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XXX.MainPage">
    <Grid>
        <ScrollView>
        <VerticalStackLayout Spacing="10">
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>
            <Label Text="-------------------------------------------------"/>
            <Label Text="================================================="/>

        </VerticalStackLayout>
        </ScrollView>
        <Button
            x:Name="FloatingActionButton"
            HorizontalOptions="End"
            VerticalOptions="End"
            Text="+"
            Clicked="OnFloatingActionButtonClicked"
            CornerRadius="50"
            Margin="0, 0, 10, 10"
            FontAttributes="Bold"/>
    </Grid>
</ContentPage>```

Couldn't you just use absolute layout and place it where you want?

Wout-M commented 1 month ago

Yea I've used absolute layout myself with positionproportional

dotnet / maui