Using DialogFragment with FloadingActionButton in Xamarin.Android
To create a dialog fragment, we will be using DialogFramgnet. This is an inheritance from the Fragment.
We need to install the Xamarin.Android.Support.Design from Nuget. After we create a style for an app and apply it in AndroidMainest.xml. If you don't use own style that the application will be an error may show up.
Style.xml
01.<?xml version="1.0" encoding="utf-8" ?>
02.<resources>
03. <style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
04. <item name="windowNoTitle">true</item>
05. <!--We will be using the toolbar so no need to show ActionBar-->
06. <item name="windowActionBar">false</item>
07. <!-- Set theme colors from http://www.google.com/design/spec/style/color.html#color-color-palette-->
08. <!-- colorPrimary is used for the default action bar background -->
09. <item name="colorPrimary">#3a1972 </item>
10. <!-- colorPrimaryDark is used for the status bar -->
11. <item name="colorPrimaryDark">#3a1972 </item>
12. <!-- colorAccent is used as the default value for colorControlActivated
13. which is used to tint widgets -->
14. <item name="colorAccent">#FF4081</item>
15. <!-- You can also set colorControlNormal, colorControlActivated
16. colorControlHighlight and colorSwitchThumbNormal. -->
17. </style>
18.</resources>
And set style in AndroidMainest.xml
1.<application android:allowBackup="true" android:icon="@mipmap/icon" android:label="@string/app_name" android:theme="@style/MyTheme">
1. Floating Action Button
We can place a floating action button using design support widget
01.<?xml version="1.0" encoding="utf-8"?>
02.<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
03. android:orientation="vertical"
04. android:layout_width="match_parent"
05. android:layout_height="match_parent">
06.
07. <android.support.design.widget.FloatingActionButton
08.
09. android:id="@+id/floatMessageButton"
10. android:layout_width="wrap_content"
11. android:layout_height="wrap_content"
12. android:layout_gravity="center"
13. android:src="@drawable/message24"
14.
15. />
16.
17.
18.
19.
20.</FrameLayout>
Now if we run the app, we can see the floating action button displayed at the center of the layout.
2. DialogFragment
DialogFragment is like other fragments. Now we have to override OnCreateView method to attach the layout to view.
The layout for a fragment.
01.<?xml version="1.0" encoding="utf-8"?>
02.<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
03. android:orientation="vertical"
04. android:layout_width="match_parent"
05. android:layout_height="match_parent"
06. >
07.
08.
09. <TextView android:layout_width="match_parent"
10. android:layout_height="wrap_content"
11. android:id="@+id/txt"
12. android:text="Be on-topic
13.
14.Our community is defined by a specific set of topics in the help center; please stick to those topics and avoid asking for opinions or open-ended discussion. If your question is about the site itself, ask on our meta-discussion site. If you’re looking for a different topic, it might be covered on another Stack Exchange site.
15.
16.Be specific
17.
18.If you ask a vague question, you’ll get a vague answer. But if you give us details and context, we can provide a useful, relevant answer.
19.
20.Make it relevant to others
21.
22.We like to help as many people at a time as we can. Make it clear how your question is relevant to more people than just you, and more of us will be interested in your question and willing to look into it.
23.
24.Keep an open mind
25.
26.The answer to your question may not always be the one you wanted, but that doesn’t mean it is wrong. A conclusive answer isn’t always possible. When in doubt, ask people to cite their sources, or to explain how/where they learned something. Even if we don’t agree with you, or tell you exactly what you wanted to hear, remember: we’re just trying to help."
27. />
28.
29.
30. <Button
31. android:text="Close"
32. android:layout_width="match_parent"
33. android:layout_height="wrap_content"
34. android:id="@+id/CloseButton"
35. android:layout_marginTop="10dp" />
36. </LinearLayout>
Now we inflate the layout from OnCreateView() method after creating a fragment name is DialogShowFragment.cs
01.using System;
02.using System.Collections.Generic;
03.using System.Linq;
04.using System.Text;
05.
06.using Android.App;
07.using Android.Content;
08.using Android.OS;
09.using Android.Runtime;
10.using Android.Util;
11.using Android.Views;
12.using Android.Widget;
13.
14.namespace FloadingButton
15.{
16. public class DialogShowFragment : DialogFragment
17. {
18. public override void OnCreate(Bundle savedInstanceState)
19. {
20. base.OnCreate(savedInstanceState);
21.
22. // Create your fragment here
23. }
24.
25. public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
26. {
27. // Use this to return your custom view for this Fragment
28. // return inflater.Inflate(Resource.Layout.YourFragment, container, false);
29.
30. //return base.OnCreateView(inflater, container, savedInstanceState);
31.
32. // Use this to return your custome view for this Fragment
33. View view = inflater.Inflate(Resource.Layout.MesseageLayout, container, false);
34. Button button = view.FindViewById<Button>(Resource.Id.CloseButton);
35. button.Click += (object sender, EventArgs e) =>
36. {
37. Dismiss();
38.
39. };
40.
41. return view;
42.
43. }
44.
45.
46. public static DialogShowFragment NewInstance(Bundle buncle)
47. {
48. DialogShowFragment fragment = new DialogShowFragment();
49. fragment.Arguments = buncle;
50. return fragment;
51. }
52. }
53.}
Adding dialogFragment to floating action button in MainActivity
01.public class MainActivity : AppCompatActivity
02. {
03.
04. private FloatingActionButton tab1;
05. //private FloatingActionButton tab2;
06.
07. protected override void OnCreate(Bundle savedInstanceState)
08. {
09. base.OnCreate(savedInstanceState);
10.
11. // Set our view from the "main" layout resource
12. SetContentView(Resource.Layout.Main);
13.
14. // Get our button from the layout resource,
15. // and attach an event to it
16. tab1 = (FloatingActionButton)FindViewById(Resource.Id.floatMessageButton);
17. //tab2 = (FloatingActionButton)FindViewById(Resource.Id.floatUserButton);
18.
19. tab1.Click += (object sender, System.EventArgs e) =>
20. {
21. FragmentTransaction ft = FragmentManager.BeginTransaction();
22. Fragment prev = FragmentManager.FindFragmentByTag("dialog");
23. if (prev != null)
24. {
25. ft.Remove(prev);
26. }
27.
28. ft.AddToBackStack(null);
29.
30. //Create and hsow the dialog
31. DialogShowFragment frag = DialogShowFragment.NewInstance(null);
32.
33. //Add fragment
34. frag.Show(ft, "dialog");
35. };
36.
37.
38. }
39. }
When we click floating action button and a fragment will show up.
