Xamarin.Android - Working With Firebase Database - Part Two

Ahsan Siddique
7y
1.9k
0
2

100

Article

FirebaseDatabase.zip|Icons.zip

Introduction

In this part, I will be completing the remaining process of Firebase Database.

Refer to part one.

Xamarin.Android - Working with Firebase Database - 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

<?xml version="1.0" encoding="utf-8" ?>
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<style name="CircularProgress" parent="Theme.AppCompat.Light">
<item name="colorAccent">@color/circularColor</item>
</style>
</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

<?xml version="1.0" encoding="utf-8" ?>
<resources>
<color name="colorPrimary">#009688</color>
<color name="colorPrimaryDark">#00695C</color>
<color name="colorAccent">#64FFDA</color>
<color name="circularColor">#9F489B</color>
</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)

<?xml version="1.0" encoding="utf-8" ?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="@+id/menu_add"
android:title="Add"
android:icon="@drawable/Add_icon"
app:showAsAction="always"/>
<item android:id="@+id/menu_save"
android:title="Save"
android:icon="@drawable/Save_icon"
app:showAsAction="always"/>
<item android:id="@+id/menu_delete"
android:title="Delete"
android:icon="@drawable/Delete_icon"
app:showAsAction="always"/>
</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

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
namespace FirebaseDatabase.Model
{
public class Account
{
public string uid { get; set; }
public string name { get; set; }
public string email { get; set; }
}
}

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/list_name"
android:text="User"
android:textSize="30sp"
android:textStyle="bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/list_email"
android:text="Email"
android:textSize="20sp"
android:textStyle="italic"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</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

using Android.App;
using Android.Content;
using Android.Views;
using Android.Widget;
using FirebaseDatabase.Model;
using System.Collections.Generic;
namespace FirebaseDatabase
{
public class ListViewAdapter : BaseAdapter
{
Activity activity;
List<Account> lstAccounts;
LayoutInflater inflater;
public ListViewAdapter(Activity activity, List<Account> lstAccounts)
{
this.activity = activity;
this.lstAccounts = lstAccounts;
}
public override int Count
{
get { return lstAccounts.Count; }
}
public override Java.Lang.Object GetItem(int position)
{
return position;
}
public override long GetItemId(int position)
{
return position;
}
public override View GetView(int position, View convertView, ViewGroup parent)
{
inflater = (LayoutInflater)activity.BaseContext.GetSystemService(Context.LayoutInflaterService);
View itemView = inflater.Inflate(Resource.Layout.list_Item, null);
var txtuser = itemView.FindViewById<TextView>(Resource.Id.list_name);
var txtemail = itemView.FindViewById<TextView>(Resource.Id.list_email);
if(lstAccounts.Count > 0)
{
txtuser.Text = lstAccounts[position].name;
txtemail.Text = lstAccounts[position].email;
}
return itemView;
}
}
}

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

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:titleTextColor="@android:color/white"/>
<android.support.design.widget.TextInputLayout
android:layout_below="@+id/toolbar"
android:id="@+id/txtName"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/name"
android:hint="Enter Your Name"
android:inputType="textCapWords"
android:maxLines="1"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_below="@+id/txtName"
android:id="@+id/txtEmail"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/email"
android:hint="Enter Your Email"
android:inputType="textCapWords"
android:maxLines="1"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.TextInputLayout>
<ListView
android:id="@+id/list_data"
android:layout_below="@+id/txtEmail"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<ProgressBar
android:id="@+id/circularProgress"
android:visibility="invisible"
android:layout_centerInParent="true"
android:theme="@style/CircularProgress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/Widget.AppCompat.ProgressBar"/>
</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

using Android.App;
using Android.Widget;
using Android.OS;
using Android.Support.V7.App;
using Android.Views;
using System.Collections.Generic;
using FirebaseDatabase.Model;
using System;
using System.Threading.Tasks;
using Firebase.Xamarin.Database;
using Firebase.Xamarin.Database.Query;
namespace FirebaseDatabase
{
[Activity(Label = "FirebaseDatabase", MainLauncher = true , Theme ="@style/AppTheme")]
public class MainActivity : AppCompatActivity
{
private EditText input_name, input_email;
private ListView list_data;
private ProgressBar circular_progress;
private List<Account> list_users = new List<Account>();
private ListViewAdapter adapter;
private Account selectedAccount;
private const string FirebaseURL = "https://fir-database-33529.firebaseio.com/"; //Firebase Database URL
protected override async void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.Main);
//Add Toolbar
Android.Support.V7.Widget.Toolbar toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);
toolbar.Title = "Firebase Database";
SetSupportActionBar(toolbar);
//View
circular_progress = FindViewById<ProgressBar>(Resource.Id.circularProgress);
input_name = FindViewById<EditText>(Resource.Id.name);
input_email = FindViewById<EditText>(Resource.Id.email);
list_data = FindViewById<ListView>(Resource.Id.list_data);
list_data.ItemClick += (s, e) =>
{
Account account = list_users[e.Position];
selectedAccount = account;
input_name.Text = account.name;
input_email.Text = account.email;
};
await LoadData();
}
private async Task LoadData()
{
circular_progress.Visibility = ViewStates.Visible;
list_data.Visibility = ViewStates.Invisible;
var firebase =new FirebaseClient(FirebaseURL);
var items = await firebase
.Child("users")
.OnceAsync<Account>();
list_users.Clear();
adapter = null;
foreach (var item in items)
{
Account account = new Account();
account.uid = item.Key;
account.name = item.Object.name;
account.email = item.Object.email;
list_users.Add(account);
}
adapter = new ListViewAdapter(this, list_users);
adapter.NotifyDataSetChanged();
list_data.Adapter = adapter;
circular_progress.Visibility = ViewStates.Invisible;
list_data.Visibility = ViewStates.Visible;
}
public override bool OnCreateOptionsMenu(IMenu menu)
{
MenuInflater.Inflate(Resource.Menu.menu_main, menu);
return base.OnCreateOptionsMenu(menu);
}
public override bool OnOptionsItemSelected(IMenuItem item)
{
int id = item.ItemId;
if(id == Resource.Id.menu_add)
{
CreateUser();
}
else
if(id == Resource.Id.menu_save) //Update
{
UpdateUser(selectedAccount.uid, input_name.Text, input_email.Text);
}
else
if (id == Resource.Id.menu_delete) //Delete
{
DeleteUser(selectedAccount.uid);
}
return base.OnOptionsItemSelected(item);
}
private async void DeleteUser(string uid)
{
var firebase = new FirebaseClient(FirebaseURL);
await firebase.Child("users").Child(uid).DeleteAsync();
await LoadData();
}
private async void UpdateUser(string uid, string name, string email)
{
var firebase = new FirebaseClient(FirebaseURL);
await firebase.Child("users").Child(uid).Child("name").PutAsync(name);
await firebase.Child("users").Child(uid).Child("email").PutAsync(email);
await LoadData();
}
private async void CreateUser()
{
Account user = new Account();
user.uid = String.Empty;
user.name = input_name.Text;
user.email = input_email.Text;
var firebase = new FirebaseClient(FirebaseURL);
//Add Item
var item = await firebase.Child("users").PostAsync<Account>(user);
await LoadData();
}
}
}