Post
Ask Question

Xamarin.Android - Working With Firebase Database - Part Two

Introduction
 
In this part, I will be completing the remaining process of Firebase Database.
 
Refer to part one.
Step 1
 
Add a new XML file. For that, go to Solution Explorer-> Project Name-> Resources-> Values-> Right-click to add a new item, select XML, and give it a name such as styles.xml. Open this XML file and add the following code.
 
(Folder Name: values, File Name: styles.xml)
 
XML Code
  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <resources>  
  3.   <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">  
  4.     <item name="colorPrimary">@color/colorPrimary</item>  
  5.     <item name="colorPrimaryDark">@color/colorPrimaryDark</item>  
  6.     <item name="colorAccent">@color/colorAccent</item>  
  7.   </style>  
  8.   <style name="CircularProgress" parent="Theme.AppCompat.Light">  
  9.     <item name="colorAccent">@color/circularColor</item>  
  10.   </style>  
  11. </resources>  
Step 2
 
Similarly, add a new XML file - colors.xml and add the following code.
 
(Folder Name: values, File Name: colors.xml)
 
XML Code
  1. <?xml version="1.0" encoding="utf-8" ?>   
  2. <resources>  
  3.    <color name="colorPrimary">#009688</color>    
  4.    <color name="colorPrimaryDark">#00695C</color>  
  5.    <color name="colorAccent">#64FFDA</color>  
  6.    <color name="circularColor">#9F489B</color>  
  7. </resources>  
Step 3 - Create Menu
 
Open Solution Explorer-> Project Name-> Resources-> Right-click to add a new folder with the name Menu. Right-click to Menu folder to add a new XML file name as, menu_main. Open this main XML file and add the following code.
 
(File Name: menu_main , Folder Name: Menu)
  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <menu xmlns:android="http://schemas.android.com/apk/res/android"  
  3.       xmlns:app="http://schemas.android.com/apk/res-auto">  
  4.   <item android:id="@+id/menu_add"  
  5.         android:title="Add"  
  6.         android:icon="@drawable/Add_icon"  
  7.         app:showAsAction="always"/>  
  8.   <item android:id="@+id/menu_save"  
  9.         android:title="Save"  
  10.         android:icon="@drawable/Save_icon"  
  11.         app:showAsAction="always"/>  
  12.   <item android:id="@+id/menu_delete"  
  13.         android:title="Delete"  
  14.         android:icon="@drawable/Delete_icon"  
  15.         app:showAsAction="always"/>  
  16. </menu>  
Step 4 - Writing Account Class
 
Before you go further, you need to write your Account class with all the getter and setter methods. For this, go to Solution Explorer-> Project Name and right-click. Select Add -> New Item-> Class. Give it a name like Account.cs and write the following code.
 
(File Name: Account.cs)
 
C# Code
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Text;  
  5. using Android.App;  
  6. using Android.Content;  
  7. using Android.OS;  
  8. using Android.Runtime;  
  9. using Android.Views;  
  10. using Android.Widget;  
  11. namespace FirebaseDatabase.Model  
  12. {  
  13.     public class Account  
  14.     {  
  15.         public string uid { get; set; }  
  16.         public string name { get; set; }  
  17.         public string email { get; set; }  
  18.     }  
  19. }  
Step 5 - Add Layout For List Item
 
Next, add a new Layout by going to Solution Explorer-> Project Name-> Resources-> Layout. Right-click to add a new item, select Layout, give it a name as list_Item.axml. Open this layout file and add the following code.
 
(Folder Name: Layout , File Name: list_Item.axml)
 
XML Code
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:orientation="vertical"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent">  
  6.     <TextView  
  7.         android:id="@+id/list_name"  
  8.         android:text="User"  
  9.         android:textSize="30sp"  
  10.         android:textStyle="bold"  
  11.         android:layout_width="wrap_content"  
  12.         android:layout_height="wrap_content" />  
  13.     <TextView  
  14.         android:id="@+id/list_email"  
  15.         android:text="Email"  
  16.         android:textSize="20sp"  
  17.         android:textStyle="italic"  
  18.         android:layout_width="wrap_content"  
  19.         android:layout_height="wrap_content" />  
  20. </LinearLayout>  
Step 5 - Writing List View Adapter Class
 
We need to write our own class to make a custom adapter inherited from the base adapter. Go to Solution Explorer-> Project name and right-click. Select Add -> New Item-> Class. Give it a name as ListViewAdapter.cs and write the following code.
 
(File Name: ListViewAdapter.cs)
 
C# Code
  1. using Android.App;  
  2. using Android.Content;  
  3. using Android.Views;  
  4. using Android.Widget;  
  5. using FirebaseDatabase.Model;  
  6. using System.Collections.Generic;  
  7. namespace FirebaseDatabase  
  8. {  
  9.     public class ListViewAdapter : BaseAdapter  
  10.     {  
  11.         Activity activity;  
  12.         List<Account> lstAccounts;  
  13.         LayoutInflater inflater;  
  14.         public ListViewAdapter(Activity activity, List<Account> lstAccounts)  
  15.         {  
  16.             this.activity = activity;  
  17.             this.lstAccounts = lstAccounts;  
  18.         }  
  19.         public override int Count  
  20.         {  
  21.             get { return lstAccounts.Count; }  
  22.         }  
  23.         public override Java.Lang.Object GetItem(int position)  
  24.         {  
  25.             return position;  
  26.         }  
  27.         public override long GetItemId(int position)  
  28.         {  
  29.             return position;  
  30.         }  
  31.         public override View GetView(int position, View convertView, ViewGroup parent)  
  32.         {  
  33.             inflater = (LayoutInflater)activity.BaseContext.GetSystemService(Context.LayoutInflaterService);  
  34.             View itemView = inflater.Inflate(Resource.Layout.list_Item, null);  
  35.             var txtuser = itemView.FindViewById<TextView>(Resource.Id.list_name);  
  36.             var txtemail = itemView.FindViewById<TextView>(Resource.Id.list_email);  
  37.             if(lstAccounts.Count > 0)  
  38.             {  
  39.                 txtuser.Text = lstAccounts[position].name;  
  40.                 txtemail.Text = lstAccounts[position].email;  
  41.             }  
  42.             return itemView;  
  43.         }  
  44.     }  
  45. }  
Step 6 - Main Layout
 
Open Solution Explorer-> Project Name-> Resources-> Layout-> Main.axml. Open this main layout file and add the following code.
 
(File Name: Main.axml , Folder Name: Layout)
 
XML Code 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.                 xmlns:app="http://schemas.android.com/apk/res-auto"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent">  
  6.   <android.support.v7.widget.Toolbar  
  7.     android:id="@+id/toolbar"  
  8.     android:minHeight="?attr/actionBarSize"  
  9.     android:layout_width="match_parent"  
  10.     android:layout_height="wrap_content"  
  11.     android:background="?attr/colorPrimary"  
  12.     app:titleTextColor="@android:color/white"/>  
  13.   <android.support.design.widget.TextInputLayout  
  14.     android:layout_below="@+id/toolbar"  
  15.     android:id="@+id/txtName"  
  16.     android:layout_width="match_parent"  
  17.     android:layout_height="wrap_content">  
  18.     <EditText  
  19.       android:id="@+id/name"  
  20.       android:hint="Enter Your Name"  
  21.       android:inputType="textCapWords"  
  22.       android:maxLines="1"  
  23.       android:layout_width="match_parent"  
  24.       android:layout_height="wrap_content"/>  
  25.   </android.support.design.widget.TextInputLayout>  
  26.   <android.support.design.widget.TextInputLayout  
  27.     android:layout_below="@+id/txtName"  
  28.     android:id="@+id/txtEmail"  
  29.     android:layout_width="match_parent"  
  30.     android:layout_height="wrap_content">  
  31.     <EditText  
  32.       android:id="@+id/email"  
  33.       android:hint="Enter Your Email"  
  34.       android:inputType="textCapWords"  
  35.       android:maxLines="1"  
  36.       android:layout_width="match_parent"  
  37.       android:layout_height="wrap_content"/>  
  38.   </android.support.design.widget.TextInputLayout>  
  39.   <ListView  
  40.     android:id="@+id/list_data"  
  41.     android:layout_below="@+id/txtEmail"  
  42.     android:layout_width="match_parent"  
  43.     android:layout_height="wrap_content"/>  
  44.   <ProgressBar  
  45.     android:id="@+id/circularProgress"  
  46.     android:visibility="invisible"  
  47.     android:layout_centerInParent="true"  
  48.     android:theme="@style/CircularProgress"  
  49.     android:layout_width="match_parent"  
  50.     android:layout_height="wrap_content"  
  51.     style="@style/Widget.AppCompat.ProgressBar"/>  
  52. </RelativeLayout>  
 
Step 7 - Main Activity Class
 
Note - Must change your Firebase Database URL in Main activity class before building the project.
 
Now, go to Solution Explorer-> Project Name-> MainActivity and add the following code to main activity with appropriate namespaces.
 
(FileName: MainActivity)
 
C# Code
  1. using Android.App;  
  2. using Android.Widget;  
  3. using Android.OS;  
  4. using Android.Support.V7.App;  
  5. using Android.Views;  
  6. using System.Collections.Generic;  
  7. using FirebaseDatabase.Model;  
  8. using System;  
  9. using System.Threading.Tasks;  
  10. using Firebase.Xamarin.Database;  
  11. using Firebase.Xamarin.Database.Query;  
  12. namespace FirebaseDatabase  
  13. {  
  14.     [Activity(Label = "FirebaseDatabase", MainLauncher = true , Theme ="@style/AppTheme")]  
  15.     public class MainActivity : AppCompatActivity  
  16.     {  
  17.         private EditText input_name, input_email;  
  18.         private ListView list_data;  
  19.         private ProgressBar circular_progress;  
  20.         private List<Account> list_users = new List<Account>();  
  21.         private ListViewAdapter adapter;  
  22.         private Account selectedAccount;  
  23.         private const string FirebaseURL = "https://fir-database-33529.firebaseio.com/"; //Firebase Database URL  
  24.         protected override async void OnCreate(Bundle savedInstanceState)  
  25.         {  
  26.             base.OnCreate(savedInstanceState);  
  27.             // Set our view from the "main" layout resource  
  28.             SetContentView(Resource.Layout.Main);  
  29.             //Add Toolbar  
  30.             Android.Support.V7.Widget.Toolbar toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);  
  31.             toolbar.Title = "Firebase Database";  
  32.             SetSupportActionBar(toolbar);  
  33.             //View   
  34.             circular_progress = FindViewById<ProgressBar>(Resource.Id.circularProgress);  
  35.             input_name = FindViewById<EditText>(Resource.Id.name);  
  36.             input_email = FindViewById<EditText>(Resource.Id.email);  
  37.             list_data = FindViewById<ListView>(Resource.Id.list_data);  
  38.             list_data.ItemClick += (s, e) =>  
  39.             {  
  40.                 Account account = list_users[e.Position];  
  41.                 selectedAccount = account;  
  42.                 input_name.Text = account.name;  
  43.                 input_email.Text = account.email;  
  44.             };  
  45.             await LoadData();  
  46.         }  
  47.         private async Task LoadData()  
  48.         {  
  49.             circular_progress.Visibility = ViewStates.Visible;  
  50.             list_data.Visibility = ViewStates.Invisible;  
  51.             var firebase =new FirebaseClient(FirebaseURL);  
  52.             var items = await firebase  
  53.                 .Child("users")  
  54.                 .OnceAsync<Account>();  
  55.             list_users.Clear();  
  56.             adapter = null;  
  57.             foreach (var item in items)  
  58.             {  
  59.                 Account account = new Account();  
  60.                 account.uid = item.Key;  
  61.                 account.name = item.Object.name;  
  62.                 account.email = item.Object.email;  
  63.                 list_users.Add(account);  
  64.             }  
  65.             adapter = new ListViewAdapter(this, list_users);  
  66.             adapter.NotifyDataSetChanged();  
  67.             list_data.Adapter = adapter;  
  68.             circular_progress.Visibility = ViewStates.Invisible;  
  69.             list_data.Visibility = ViewStates.Visible;  
  70.         }  
  71.         public override bool OnCreateOptionsMenu(IMenu menu)  
  72.         {  
  73.             MenuInflater.Inflate(Resource.Menu.menu_main, menu);  
  74.             return base.OnCreateOptionsMenu(menu);  
  75.         }  
  76.         public override bool OnOptionsItemSelected(IMenuItem item)  
  77.         {  
  78.             int id = item.ItemId;  
  79.             if(id == Resource.Id.menu_add)  
  80.             {  
  81.                 CreateUser();  
  82.             }  
  83.             else  
  84.             if(id == Resource.Id.menu_save) //Update  
  85.             {  
  86.                 UpdateUser(selectedAccount.uid, input_name.Text, input_email.Text);  
  87.             }  
  88.             else  
  89.             if (id == Resource.Id.menu_delete) //Delete  
  90.             {  
  91.                 DeleteUser(selectedAccount.uid);  
  92.             }  
  93.             return base.OnOptionsItemSelected(item);  
  94.         }  
  95.         private async void DeleteUser(string uid)  
  96.         {  
  97.             var firebase = new FirebaseClient(FirebaseURL);  
  98.             await firebase.Child("users").Child(uid).DeleteAsync();  
  99.             await LoadData();  
  100.         }  
  101.         private async void UpdateUser(string uid, string name, string email)  
  102.         {  
  103.             var firebase = new FirebaseClient(FirebaseURL);  
  104.             await firebase.Child("users").Child(uid).Child("name").PutAsync(name);  
  105.             await firebase.Child("users").Child(uid).Child("email").PutAsync(email);  
  106.             await LoadData();  
  107.         }  
  108.         private async void CreateUser()  
  109.         {  
  110.             Account user = new Account();  
  111.             user.uid = String.Empty;  
  112.             user.name = input_name.Text;  
  113.             user.email = input_email.Text;  
  114.             var firebase = new FirebaseClient(FirebaseURL);  
  115.             //Add Item  
  116.             var item = await firebase.Child("users").PostAsync<Account>(user);  
  117.             await LoadData();  
  118.         }  
  119.     }  
  120. }  
Step 8 - Add Icons into Drawable
 
Open Solution Explorer -> Project Name -> Resources-> Drawable. Paste "Add, Save, Delete"  icons into the drawable folder.
 
  
Output
 
 
  
Please share your comments and feedback.


Similar Articles