Floating Action Button for Xamarin.Android

Floating Action Button for Android Using Xamarin in Visual Studio

Android L has introduced something called a Floating Action Button (FAB), which is basically a circle overlayed on top your application. This FAB can be clicked to do an action. 

Floating action buttons are used for a promoted action. They are distinguished by a circled icon floating above the UI and have motion behaviors that include morphing, launching, and a transferring anchor point.
Floating action buttons come in two sizes:
  • Default size: For most use cases
  • Mini size: Only used to create visual continuity with other screen elements
At 2014 Google I/O, Google announced a new visual language called Material Design. Material Design guides creation of user experiences that work well on different devices, with different input methods and on different platforms. Google is gradually implementing Material Design in their apps and products, and we can start playing with it, too.

One interesting new design pattern is the promoted action, implemented as a floating action button. This pattern exemplifies the underlying principles of Material Design and is a good place to start adapting existing applications to the new version of Android.

You can see from Google’s guidelines that there are many ways to apply this pattern incorrectly, as evidenced by the various “Don’ts” on that page. Today, I want to show you how to implement a floating action button in Xamarin using Visual Studio.

Floating Action Button (FAB) is created ad seperate project and added to the sample as a package. The FAB is also give a small animation on it's click event.





Code Behind : 
XML
    <floatingactionbutton.Fab 
        android:id="@+id/fabbutton" 
        android:layout_width="70dp" 
        android:layout_height="70dp" 
        android:layout_gravity="bottom|right" 
        android:layout_marginBottom="15dp" 
        android:layout_marginRight="15dp" />


Download source code from Here...



HAPPY CODING   (-_-)


Popular posts from this blog

Face Detection In Xamarin.Android

Image
First we can create our main layout having a button to take picture using camera and name it as: Main.axml <? xml   version = "1.0"   encoding = "utf-8" ?>    < LinearLayout   xmlns:android = "http://schemas.android.com/apk/res/android"         android:orientation = "vertical"         android:layout_width = "fill_parent"         android:layout_height = "match_parent"         android:padding = "10dip" >         < TextView             android:layout_width = "fill_parent"             android:layout_height = "wrap_content"             android:text = "Click Take a Picture button"             android:gravity = "center_horizontal"             android:layout_weight = "1.0"   />         < Button             android:layout_width = "wrap_content"             android:layout_height = "wrap_content"             an
Read more

Remove Android Action Bar Icon in Xamarin.Forms

Image
In this article we are creating a custom control renderer for Xamarin.Forms allowing developers to override the default native rendering of a Xamarin.Forms control with their own platform-specific code. We have seen many Xamarin related forums having a strong discussion about removing the action bar icon from an Android project in Xamarin.Forms. Many of them suggest making the application icon as transparent by altering the MainActivity.cs in Android project somewhat like the following: [Activity (Label = "Sample Application", Icon = "@android:color/transparent", MainLauncher = true] In this condition no one notices that by altering like this they are making the application icon to be transparent. As a result the application will not show an icon when it is installed on a device. Today we are showing a way to render your page so that you will be able to remove the unwanted action bar icon depending on your needs. Here I'm going to render the Navigat
Read more