Posted on 4 Comments

Bottom Navigation Bar with Control – Xamarin.Forms

Ever wondered how to create a Bottom Navigation Bar for Xamarin.Forms as it is in the latest Android sdk version? As there is no native control for Xamarin.Forms you could create a custom one with a Control.

First create a Folder and name it Controls and create the control in there.

In your portable class library -> Add New Item -> Content View and name it NavigationBar or something else.

 

For my purposes I used the following code:

 <Grid   BackgroundColor="Blue" >

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <StackLayout Orientation="Vertical" Grid.Column="0" HorizontalOptions="CenterAndExpand" VerticalOptions="End">
                <Image  Source="Home.png"  WidthRequest="30" HeightRequest="30" />
                <Label Text="Home" TextColor="White"  />
            </StackLayout>

            <StackLayout Orientation="Vertical"  Grid.Column="1"  HorizontalOptions="CenterAndExpand" VerticalOptions="End">
                <Image Source="Pages.png" WidthRequest="30" HeightRequest="30"  />
                <Label Text="Pages" TextColor="White"  />
            </StackLayout>

            <StackLayout Orientation="Vertical"  Grid.Column="2"  HorizontalOptions="CenterAndExpand" VerticalOptions="End">
                <Image  Source="Settings.png"  WidthRequest="30" HeightRequest="30" />
                <Label Text="Settings" TextColor="White" />
            </StackLayout>
        </Grid>

In order to use it in your code reference it in your xaml

xmlns:controls="clr-namespace:project.Controls"

And then just use

<controls:NavigationBar />

Finally you can use your control and it will look the same in all platforms.

Posted on Leave a comment

Local Database with Realm – Xamarin.Forms

Realm is a very popular solution for mobile databases as it includes very nice features, it’s very quick and easy to use. It supports many platforms as well as Xamarin.

You can use realm with Xamarin.Forms after installing the nuget package. Be careful to install nuget package to Android, iOS and UWP seperate project.

Current realm version is 1.5. After choosing Realm package, nuget will also install all available requirements.

First of all in order to store items in the database, you should create a model which will represent the identity that you want to save. For example lets say that we want a Person identity so we will store Persons.

Lets create the necessary model for this case:

public class Person
{
public string Name { get; set; }
public int Age { get; set; }
}

After that we  will create a test interface in which we can add some users and interact with realm.

  <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
        <Entry  x:Name="name" Placeholder="Enter Name" Margin="0,20,0,0" WidthRequest="200"  />
        <Entry x:Name="age" Placeholder="Enter Age" Margin="0,20,0,0"  WidthRequest="200" />
        <Button Text="Add a new Item" Margin="0,20,0,0" Clicked="addperson" />
        <Button Text="Load all items" Margin="0,20,0,0" Clicked="loadpersons" />
    </StackLayout>

 

To interact with the database lets create a RealHelper class which we will use to add persons and load.

public class RealmHelper
    {
        Realm realm;
        Transaction transaction;

        public RealmHelper()
        {
            realm = Realm.GetInstance();
        }


        public void AddItem(Person person)
        {

            transaction = realm.BeginWrite();
            var entry = realm.Add(person);
            transaction.Commit();
        }

        public IEnumerable<Person> GetItems()
        {
            return realm.All<Person>();
        }
    }

 

In order to make a write operation we use a transaction and we do that by creating a write with beginWrite(). More information for the functions and how they operation can be found on the documentation.

 

 

 RealmHelper rh;
        
public MainPage()
	{
	    InitializeComponent();
            rh = new RealmHelper();
        }

 

The main logic comes from the two buttons:

private async void addperson(object sender, EventArgs e)
        {
            var person = new Person();
            person.Name = name.Text;
            person.Age = age.Text;
            rh.AddItem(person);
            await DisplayAlert("Ok", "A new person was added", "OK");
        }

        private void loadpersons(object sender, EventArgs e)
        {
            IEnumerable<Person> collection = rh.GetItems();

        }

 

Putting a breakpoint in the loadPersons button we can see the stored persons.

 

initialization issues I found:

  • In the UWP project you must install realm database nuget package and not realm nuget package. That’s because some functions don’t exist in the uwp apis so if you install realm package some exceptions will occur during the opening of the app.
  • Check if fody file exists in both iOS, Android and UWP projects and the its content should be
<?xml version="1.0" encoding="utf-8"?>
<Weavers>
<RealmWeaver/>
</Weavers>
  • Be sure that all packages are updated across all projects and are the same version.