maui
maui copied to clipboard
dotnet
🚀🚀🚀 Floating Action Button🚀🚀🚀
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 [email protected] 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
Mini
On Hover
On Clicked
Extended
Extended (no icon)
Use cases (there are many)
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!
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.
Any updates on this? Still waiting.
Not up to me man, ms doesn't have resources on MAUI 😁
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>```
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?
Knowing this in not a control that we see on all platforms.. Maybe it could reside in some third-party lib? Community toolkit proposes already something: https://vladislavantonyuk.github.io/articles/Creating-dynamic-floating-action-button/
What's going on?
- It's currently one of the most valuable companies in the world.
- Its market capitalization is around $3.82 trillion USD.
- Its shares are priced at $513.58.
- It operates one of the largest cloud infrastructure networks on the planet.
- It employs around 228,000 people worldwide.
- Xbox, GitHub, Office, LinkedIn.
- Copilot everywhere, Azure OpenAI Service, Security with AI, Developer acceleration, Responsible AI leadership, Productivity and business AI apps.
- AI, AI, AI, AI, AI, AI, AI...
But in more than two years + all the AI models + all the computing and calculation power + a quantum computer + supercomputers + its entire team of programmers + The most advanced, effective and efficient languages on the planet...
But still can't create a simple FLOATING ACTION BUTTON.
Even do the binding to the native library
And on top of that, they expect us to pay for a Copilot that's useless in MAUI.
There are bindings, the material package, but that's for native project
What's going on?
- It's currently one of the most valuable companies in the world.
- Its market capitalization is around $3.82 trillion USD.
- Its shares are priced at $513.58.
- It operates one of the largest cloud infrastructure networks on the planet.
- It employs around 228,000 people worldwide.
- Xbox, GitHub, Office, LinkedIn.
- Copilot everywhere, Azure OpenAI Service, Security with AI, Developer acceleration, Responsible AI leadership, Productivity and business AI apps.
- AI, AI, AI, AI, AI, AI, AI...
But in more than two years + all the AI models + all the computing and calculation power + a quantum computer + supercomputers + its entire team of programmers + The most advanced, effective and efficient languages on the planet...
But still can't create a simple FLOATING ACTION BUTTON.
Even do the binding to the native library
And on top of that, they expect us to pay for a Copilot that's useless in MAUI.
What's going on?
- It's currently one of the most valuable companies in the world.
- Its market capitalization is around $3.82 trillion USD.
- Its shares are priced at $513.58.
- It operates one of the largest cloud infrastructure networks on the planet.
- It employs around 228,000 people worldwide.
- Xbox, GitHub, Office, LinkedIn.
- Copilot everywhere, Azure OpenAI Service, Security with AI, Developer acceleration, Responsible AI leadership, Productivity and business AI apps.
- AI, AI, AI, AI, AI, AI, AI...
But in more than two years + all the AI models + all the computing and calculation power + a quantum computer + supercomputers + its entire team of programmers + The most advanced, effective and efficient languages on the planet...
But still can't create a simple FLOATING ACTION BUTTON.
Even do the binding to the native library
And on top of that, they expect us to pay for a Copilot that's useless in MAUI.
That is why I moved to React Native forever. 0 support, they don't listen to the community, plus it is full of bugs and inconsistencies.
Ditch this framework and Microsoft whenever as fast as possible.
MAUI is the biggest disappointment of all time! Many bugs, standard app controls like a QR scanner or FAB control are not implemented. They don't listen to the community. Microsoft, what the fuck?! Why you gave up Xamarin, MAUI is not better, it's rather worse than before.
That is why I moved to React Native forever. 0 support, they don't listen to the community, plus it is full of bugs and inconsistencies.
Ditch this framework and Microsoft whenever as fast as possible.
The problem with MAUI is that it's a bit of everything and a lot of nothing, given that (in the case of Android) it does not consider the entire system API, so there are app and system states and lifecycle events that you will never be able to account for, not even in exceptions.
There's also a lot of blame on the developers, who dive into programming on a system and multiple devices without knowing them, thinking it's just like any other web implementation, and then they end up making huge runtime errors.
On top of that, you have to consider that C# isn't exactly the best language for programming on devices. It's got way too much ceremony and rigidity.
En mi caso uso F# Fabulous MAUI y Fabulous Avalonia.
MAUI is the biggest disappointment of all time! Many bugs, standard app controls like a QR scanner or FAB control are not implemented. They don't listen to the community. Microsoft, what the fuck?! Why you gave up Xamarin, MAUI is not better, it's rather worse than before.
Yes, it's terrifying. At a low level, it leaves much to be desired, not to mention that the UI controls are ugly and you have to do too many tricks to make it look good. In my case, I achieved better security, performance, and responsiveness with F# Fabulous MAUI and Fabulous Avalonia.
MAUI is the biggest disappointment of all time! Many bugs, standard app controls like a QR scanner or FAB control are not implemented. They don't listen to the community. Microsoft, what the fuck?! Why you gave up Xamarin, MAUI is not better, it's rather worse than before.
Yes, it's terrifying. At a low level, it leaves much to be desired, not to mention that the UI controls are ugly and you have to do too many tricks to make it look good. In my case, I achieved better security, performance, and responsiveness with F# Fabulous MAUI and Fabulous Avalonia.
I totally agree on what you are saying!
That is why I moved to React Native forever. 0 support, they don't listen to the community, plus it is full of bugs and inconsistencies.
Ditch this framework and Microsoft whenever as fast as possible.
The problem with MAUI is that it's a bit of everything and a lot of nothing, given that (in the case of Android) it does not consider the entire system API, so there are app and system states and lifecycle events that you will never be able to account for, not even in exceptions.
There's also a lot of blame on the developers, who dive into programming on a system and multiple devices without knowing them, thinking it's just like any other web implementation, and then they end up making huge runtime errors.
On top of that, you have to consider that C# isn't exactly the best language for programming on devices. It's got way too much ceremony and rigidity.
En mi caso uso F# Fabulous MAUI y Fabulous Avalonia.
You pointed out a very specific thing that I always thought. I had to learn how to build UI for iOS and Android in native IDE (android studio and Xcode, just to be able to do some really simple and stupid things that the framework does not provide. It is really a shame that people need to have this huge background just to make things flawlessy work.
You pointed out a very specific thing that I always thought. I had to learn how to build UI for iOS and Android in native IDE (android studio and Xcode, just to be able to do some really simple and stupid things that the framework does not provide. It is really a shame that people need to have this huge background just to make things flawlessy work.
In fact, the mobile world is a universe in itself, as it occupies an intermediate position [Embedded > Smartphone || Tablet < Laptop].
Although, Ex: the Android API level is just one, each brand 'adds' its own things on top of it (policies and restrictions), not to mention that each brand has a different range of devices (low, mid, high), and each device model has its own 'particularities' regarding hardware and software.
Then we can talk about the policies that each PlayStore has for its Apps, which fully cover how and what they can/should do, their behaviour, and the way they should be programmed.
- The UI & UX must comply with certain rules.
- The way you connect to remote services must be or have certain considerations in mind.
- The use of resources largely determines how the system will treat your app.
- According to the type of data, options, and functionality your app offers, this is how it should be presented for evaluation on the Play Store, along with its policies and legal framework.
- Permissions, Notifications, Lifecycle's, Events & States {App/System/User}, each one are a whole separate ecosystem.
Your app needs to be responsive at all times, but you can't inject code from outside or be a PWA, and also you shouldn't overuse the webview. By webview, I mean a web page view, not an interactive web. (Interactions should be minimal and determined)
In the current times we are living in (as far as software is concerned), it is impossible to have (by nature) a framework where:
write once and run everywhere,since desktop, laptop, mobile, and embedded are platforms that serve different functions.- The same goes for systems! Although one could say that there are only 3 (Apple, Windows, Linux), Linux in itself is a universe! Just because Android is Linux, it doesn't mean or even remotely imply that it is the same as Fedora, Debian, etc.
We can talk about the portability of languages, etc. But the way of interacting with a system... is completely different.
I believe that MAUI (C# or F#) would be more well-received if each system and platform were separate:
- MAUI Android.
- MAUI iOS.
- MAUI MAC.
- MAUI Windows.
- MAUI Office.
- MAUI IoT (Whatever that means for MS, given that Arduino is not the same as ESP32, and much less Raspberry Pi.)
IoT makes no sense in (so far) any other language than Assembler, C, C++, Since any other language incorporates garbage collection, which is harmful in applications, environments, tasks, and/or systems that require a 0-second response. (Unless we are talking about C# or F# for embedded systems, Like a different version of the language).
I say all of this based on decades of knowledge and experience in programming on these systems.