Create main screen, Master-Detail Page (Part 3)

In this part, I’m going to create a main screen for the app and it’s going to be skeleton as some kind of blue·print so we can fill these pages later on with controls and contents.
First of all, you should ask yourself a question:

What is Master-Details page?

According to xamarin.com, MasterDetailPage is a page that manages two related pages of information – a master page that presents items, and a detail page that presents details about items on the master page.
it looks like as shown below:

master-detail

So, what am willing to do is to have the main screen where I can show all the promoted products and any news or trends in the detail page and on the master page i will list all the menu items, and so far am adding these:

  • Home
  • Products
  • Contact us

In summary, the list pages will be like this:

  • MainPage.xaml: MasterDetailPage, is the main container which has the menu (Hamburger menu) and contains Master and Detail properties that are both of type Page and used to get and set the master and detail pages respectively.
  • MasterPage.xaml: page where we will list all the menu items in, and once a user taps on one of these menu items, we will load this page in the detail page.
  • HomePage.xaml: page where I’ll show all the promoted products and any news or trends as mentioned above – this page will be loaded initially in MainPage.
  • ProductsPage.xaml: page where we will show products to be purchased, might contain search functionality and some filtrations.
  • ContactUsPage.xaml: Regular contact us page.

Before we get started on making pages, I would like to make a new folder name it Pages and after that, we shall create page by page (in the part, we will cover main, master and home pages).

MainPage

So on the Pages folder, we right click -> Add -> New file… and then from the forms menu choose Forms ContentPage Xaml, let’s name it MainPage.xaml
In this page, you can write the following XAML code:

<?xml version=1.0 encoding=UTF8?>
<MasterDetailPage
        xmlns=http://xamarin.com/schemas/2014/forms
        xmlns:x=http://schemas.microsoft.com/winfx/2009/xaml
        x:Class=PuzzlersJordan.MainPage
        xmlns:local=clrnamespace:PuzzlersJordan;assembly=PuzzlersJordan
        Title=Main>
    <MasterDetailPage.Master>
        <local:MasterPage x:Name=masterPage>
        </local:MasterPage>
    </MasterDetailPage.Master>
    <MasterDetailPage.Detail>
        <NavigationPage>
            <x:Arguments>
                <local:HomePage />
            </x:Arguments>
        </NavigationPage>
    </MasterDetailPage.Detail>
</MasterDetailPage>

you can find in this XAML code that there is unusual declaration shown in below line:

xmlns:local=clrnamespace:PuzzlersJordan;assembly=PuzzlersJordan

This line is a reference declaration to the current assembly in order to reference any class found in the assembly, to reference any class you should use the local keyword as shown below:

  <local:MasterPage x:Name=masterPage>
  </local:MasterPage>

Or in:

<local:HomePage />

So to set MasterDetailPage.Master property we assign MasterPage to it and we gave it a name which is masterPage (so we can call it from the code behind).
On the other hand, for the detail property, we set a navigation page with a root page Home page.

So for the code behind, open MainPage.xaml.cs and the code should look like below:

using System;
using System.Collections.Generic;

using Xamarin.Forms;

namespace PuzzlersJordan
{
    public partial class MainPage : MasterDetailPage
    {
        public MainPage()
        {
            InitializeComponent();
            masterPage.masterMenuList.ItemSelected += OnItemSelected;
        }

        void OnItemSelected(object sender, SelectedItemChangedEventArgs e)
        {
            var item = e.SelectedItem as MasterPageItem;
            if (item != null)
            {
                Detail = new NavigationPage((Page)Activator.CreateInstance(item.TargetType));
                masterPage.masterMenuList.SelectedItem = null;
                IsPresented = false;
            }
        }
    }
}

In the constructor, we accessed masterPage and then an instance of the masterMenuList (which is a listView that we will talk about later) to assign an event handler whenever a user taps on any of the menu items (item get selected).
So what we’re going to do is when the user taps on the menu item we will take the corresponding page and load it on the detail property and set selectedItem to null so it won’t be highlighted.

MasterPage

It’s the left menu that has all the menu items, UI wise it’s just a contentPage that has a simple StackLayout with some decoration properties shown below:

<?xml version=1.0 encoding=UTF8?>
<ContentPage xmlns=http://xamarin.com/schemas/2014/forms xmlns:x=http://schemas.microsoft.com/winfx/2009/xaml x:Class=PuzzlersJordan.MasterPage Padding=0,40,0,0 Icon=Hamburger Title=Menu>
    <ContentPage.Content>
        <StackLayout VerticalOptions=FillAndExpand>
            <ListView x:Name=MenuListView VerticalOptions=FillAndExpand SeparatorVisibility=None>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <TextCell Text={Binding Title} TextColor=#a9d300 />
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Let’s talk a little bit about the code above:

  • Content page with padding of 40 points from the top and a must have title.
  • Set the icon of Hamburger which comes for free with android but we have to set it manually on iOS (follow this tutorial in order to do that).
  • We have ListView control with a data template to bind data from item class.

As for the code behind:

using System;
using System.Collections.Generic;

using Xamarin.Forms;

namespace PuzzlersJordan
{
    public class MasterPageItem
    {
        public string Title { get; set;}
        public Type TargetType { get; set; }

    }

    public partial class MasterPage : ContentPage
    {

        public ListView masterMenuList
        {
            get
            {
                return MenuListView;
            }
        }

        public MasterPage()
        {
            InitializeComponent();
            var masterPageItems = new List<MasterPageItem>();

            masterPageItems.Add(new MasterPageItem
            {
                Title = Home,
                TargetType = typeof(HomePage)
            });

            masterPageItems.Add(new MasterPageItem
            {
                Title = Products,
                TargetType = typeof(ProductsPage)
            });

            masterPageItems.Add(new MasterPageItem
            {
                Title = Contact us,
                TargetType = typeof(ContactUsPage)
            });

            MenuListView.ItemsSource = masterPageItems;
        }
    }
}

I declared a simple class (MasterPageItem) with two properties Title and TargetType. On the constructor, filled out a list of menu items in the new instance of a list of MasterPageItem and assigned it to the ItemSource.

HomePage

Just an empty content page that we will work on it later, but we need it here just to not break the detail page on MainPage.

Adding Splash screen (Part 2)

Adding Splash screen (Part 2)

The splash screen is very important to any mobile application it gets users attention from first sight.

What is Splash screen?

A splash screen is a graphical control element consisting of a window containing an image, a logo and the current version of the software. A splash screen usually appears while a game or program is launching.

Since Xamarin.Forms doesn’t support adding splash screen from one place like it does for pages, you need to go to each platform project – in our case iOS and Android – and add splash screen for each one.

iOS:

In our solution, you go to PuzzlersJordan.iOS project and follow this simple steps:

  1. In the Solution Explorer, double-click LaunchScreen.storyboard to open it for editing.
  2. Ensure that the Size Class is set to any:any and the View As is Generic.
    storyboard05.png
  3. Set the background colour of the main View by opening the properties panel – widget tab then background property.
    screen-shot-2017-02-20-at-11-36-24-pm
  4. Drag an Image View from the Toolbox into the design surface and set it at the centre of the screen.
    screen-shot-2017-02-20-at-11-48-12-pm
  5. Set the source of the Image (as an Image added to the project as an Asset Catalog) in the Property Explorer and reposition and size the image as required.
  6. Add the required constraints in order to keep image placed at the centre of the screen, constraints are:
    Vertical Alignment
    Horizontal Alignment
    screen-shot-2017-02-20-at-11-54-00-pm.png
  7. Save the changes to the Storyboard.

Am using this method because I have only the logo (not the whole images), In case you have a whole image you can follow these instructions provided by xamarinhelp.com:

  1. Create a splash screen image in the following sizes:
    320×480
    640×960
    640×1136
  2. Go to Properties > iOS Application > iPhone Launch Images and import the images. It will automatically add them to the Resources folder in your iOS Project.
    ios_splashscreen_settings
  3. Move down the properties page to add an image for iPad apps.
  4. If you are having issues with your images still displaying there are a few possible causes. The LaunchScreen.storyboard could be the issue. You can open it and correct it, or even try deleting it. Once you have done this, rebuild your application and reset your iOS Simulator or delete from your iPhone as iOS has a tendency to cache extensively in this area.

Android:

For Android, things are different. there are different ways to implement a splash screen. I have come across one of the easiest and quickest ways to do so.

All we need to do is we create a custom theme and apply it to an Activity that exhibits the splash screen. When the Activity is rendered, it loads the theme and applies the drawable resource (referenced by the theme) to the background of the activity. This approach avoids the need for creating a layout file.

Once the app has bootstrapped, the splash screen Activity starts the main Activity and removes itself from the application back-stack.

Follow along to make a fabulous splash screen for Android:

  1. Create a drawable resource for the splash screen to cater for the below resolutions (personally, I ask the designer to do so), this drawable is just the logo that we want to show in the center of the screen, name it ‘splash_logo’ since we’re going to refer to it later on:
    drawable-hdpi
    drawable-ldpi
    drawable-mdpi
    drawable-xhdpi
    drawable-xxhdpi
    drawable-xxxhdpi
    Note: It is necessary to use a bitmapped image (such as a PNG or JPG) for the image to display.
  2. In this step, we create two files:
    a. In order to reference colours in the following step, we need to create a new resource XML file inside values folder called colors.xml

    <?xml version=1.0 encoding=utf8?>
    <resources>
      <color name=splash_background>#A7CD38</color>
    </resources>

    b. To centre the splash screen image in the application, I’ll use a Layer List. The following snippet is an example of a drawable resource using a layer-list:

    <?xml version=1.0 encoding=utf8?>
    <layer-list xmlns:android=http://schemas.android.com/apk/res/android>
      <item>
        <color android:color=@color/splash_background/>
      </item>
      <item>
        <bitmap
            android:src=@drawable/splash_logo
            android:tileMode=disabled
            android:gravity=center/>
      </item>
    </layerlist>

    This layer-list will centre the splash screen image splash_logo.png on a background specified by the @color/splash_background resource as we created in step a.

  3. Create a custom theme for the splash screen Activity, edit (or add) the file values/styles.xml and create a new style element for the splash screen. A sample values/style.xml file is shown below with a style named splashscreen:

    <?xml version=1.0 encoding=UTF8?>
    <resources>
        <style name=splashscreen parent=MyTheme.Base>
            <item name=android:windowBackground>@drawable/splash_screen</item>
            <item name=android:windowNoTitle>true</item>
            <item name=android:windowIsTranslucent>false</item>
            <item name=android:windowIsFloating>false</item>
            <item name=android:backgroundDimEnabled>true</item>
            <item name=android:colorPrimaryDark>#85A42C</item>
        </style>


    </resources>

  4. We need a new Activity called SplashActivity to launch that has our splash image and performs any startup tasks. The following code is an example of a complete splash screen implementation:

    using Android.App;
    using Android.OS;
    using Android.Support.V7.App;

    namespace PuzzlersJordan.Droid
    {
        [Activity(Label = Puzzlers Jordan, Icon = @drawable/icon, Theme = @style/splashscreen, MainLauncher = true, NoHistory = true)]
        public class SplashActivity : AppCompatActivity
        {
            protected override void OnCreate(Bundle savedInstanceState)
            {
                base.OnCreate(savedInstanceState);
                this.StartActivity(typeof(MainActivity));
            }
        }
    }

    As noticed from the above implementation, we’re assigning splashscreen theme created previously to this activity and made sure to set this activity as the Main Launcher so when the app get launched it should trigger this activity at first.

    Also, note that we attributed this activity to have NoHistory set to true so it means that the activity will not leave a historical trace. It will not remain in the activity stack for the task so the user will not be able to return to it.

    Note: You most remove the MainLauncher attribute from MainActivity.

Let’s create a project, shall we? (Part 1)

Let’s create a project, shall we? (Part 1)

In order to get started, we need do the setup for our solution (the base block) and start from there.

Project Setup:

This is a trivial part, you need to launch your preferred IDE (as mentioned before am using Xamarin Studio) and follow these instructions:

  1. From the menu go to File, click New Solution. from the left panel under Multiplatform section choose App and from the middle panel choose Forms App with C# then press Next button.
    screen-shot-2017-02-22-at-7-56-05-pm
  2. On the second screen, Write the name of the app you’re intending to create in the App Name field (In my case the name will be PuzzlersJordan), and then write the Organization identifier.

    What is Organization identifier?

    It’s that identifier that is being used in your app to be distinguished among other apps, it comes with the form ‘com.yourcompanyname.productname’.
    For Android, it will be the package name and for iOS, it’s the bundle identifier.

    Next, make sure to check Android and iOS as Target Platforms and for the Shared Code choose ‘Use portable Class library’ and check XAML for user interface files.

    What is the difference between Shared Library and portable class library?

    To answer this question it will take me a whole blog post just to explain it. so instead I recommend reading this Xamarin Help blog post by Adam Pedley.

    screen-shot-2017-02-22-at-9-25-29-pm.png

  3. The last step, you need to specify the name of the project and solution, where should it be located on your machine and if you want to create a git repository for it.
  4. Press Create and you will be ready to develop the solution.

What are we going to build? (Part 0)

What are we going to build? (Part 0)

Previously, we talked about what is Xamarin, it’s pros/cons and Xamarin family members, It’s highly recommended to be familiar with Xamarin before kicking off with this series. if you haven’t checked it before you can click on this link.
In this series, we will be building up an application for a friend of mine, owner of Puzzlers Jordan in order to grow his business up and reach a better amount of customers/puzzle lovers.
At the moment of writing this post, the app hasn’t been created. so I’ll be building a simple functional mobile app with little to no complications for the two dominant platforms in the market (Android and iOS), I’ll be using Xamarin.Forms.
I made this decision after checking Xamarin’s site Is Xamarin.Forms right for your project? plus considering it as a challenge 😊

screen-shot-2017-02-20-at-9-17-51-pm

Finally, before we start we need to know what are the environments prior starting building the application:
This screenshot demonstrates windows and mac operating systems

screen-shot-2017-02-20-at-9-52-04-pm

So choose your preferred IDE and OS. As for me am going to use Xamarin Studio for MacOS as my IDE, feel free to follow along with any other IDE.

Before we start, note the below:

  • You have to be familiar with C# and little XAML.
  • Have a mac machine or at least connected to one since iOS platform is part of our solution.

Enjoy 🙂

Introduction to Xamarin

Introduction to Xamarin

At the time i’m writing this post, there are two popular platforms taking over the market, a two-horse race between iOS and Android. The two mobile operating systems combined for 98.4 percent worldwide market share in the fourth calendar quarter of 2015, compared to 96.4 percent in the year-ago quarter according to research firm Gartner.

For instance, when I want to check my Facebook or twitter account, I personally prefer checking it from their official mobile app rather than navigating to the site, yes believe it or not mobile applications are taking over the web world.

Cool, As a technology enthusiastic or even as a company that would like to promote itself  or a product/service in the market we have to follow this trend, but we have to play it smart, how?

Think about it, if a company would like to build an app for the three platforms: Android, iOS and Windows phone. the company has to hire resources/teams with knowledge of three programming languages: Java for Android, Objective-C or Swift for iOS and C# and XAML for Windows phone. this approach is called Siloed approach

screen-shot-2016-10-09-at-9-49-30-pm

Now following this approach they will end up with the following cons:

  • No code sharing between the three platforms.
  •  High maintenance level, since we have three platforms, resources or programming languages.
  • Expensive 💰💰.

On the other hand, we cannot deny how awesome the app going to look like, it’s because:

  • You get best of class performance wise.
  • Ability to access hardware easily.
  • Native user experience.

Some companies are frustrated by the high cost of this approach, so they follow anther approach which is Web-based app. You can reuse the code across different platforms by writing HTML, CSS and Javascript (could be an excellent idea if you came from web development background).

You can consider the benefits of going with this approach to be:

  • Write code once for all.
  • Saving money $$$.

What are the disadvantages of this approach?

  • Performance isn’t always perfect (Remember we’re running a web app).
  • it’s not always easy to access all native features of the platform.

Two of the most popular web-based frameworks are Cordova and Ionic

The good news! we’ve got 🎉 Xamarin 🎉 which tries to give us the best of the two approaches, Code sharing with C# and you end up getting a native app.

What is Xamarin?

It’s a fantastic tool that has done all the work to allow us to be able to write a mobile application in C# and run it on just about any mobile platform.

  • Native UI, native API access, and native performance
  • Anything you can do in Objective-C, Swift, or Java you can do in C# with Xamarin.
  • Ship cutting-edge apps with same-day support for new OS releases

Meet the Xamarin family

screen-shot-2016-10-09-at-11-14-28-pm

So what’s the difference between Xamarin.iOS, Xamarin.Android and Xamarin.Forms?

Xamarin.iOS and Xamarin.Android as from their names indicate, they’re the UI toolkits for building an app with the help of each platform’s APIs and the Mono .Net framework. if you choose to build an app using these two products you get the benefit of customising UI for each one but there is a trade-off is to have less code sharing.

On the other hand, if you choose to build an app with Xamarin.Forms you will write code only once and this code gets to be translated at runtime to each platform native, the good thing about this is you might get code sharing percentage up to 90%.

I’m confused, which product shall I choose to build my app?

Xamarin.Forms is best for:

  • Apps that require little platform-specific functionality.
  • Apps where code sharing is more important than custom UI. • Developers comfortable with XAML.

Xamarin.iOS & Xamarin.Android are best for:

  • Apps with interactions that require native behaviour.
  • Apps that use many platform-specific APIs.
  • Apps where custom UI is more important than code sharing.

Advantages of Xamarin:

  1. Leverage your .NET and C# knowledge
  2. Native user interface.
  3. Native performance.
  4. Code sharing.

Disadvantages of Xamarin (Xamarin.iOS and Xamarin.Android):

  1. Not a Shared UI platform:
    Following these two products will make you write more customised UI code for each platform but at the same time, you will get the opportunity to share 60% of the code as shown below.
    screen-shot-2016-10-11-at-9-03-32-pm
  2. Hardware requirements:
    If you would you like to run/compile your iOS app using Xamarin studio or visual studio, you must have a mac machine to compile it for you. you can get yourself a mac machine (like me), connect one on the same network that you’re using or you can rent a mac in the cloud such as MacinCloud services.

    You can find the option that suits you well by checking Xamarin.iOS requirement & installation.

  3. Minor learning curve:
    Sure there is a learning curve to know how are you going to deal with Xamarin.Android and Xamarin.iOS APIs, and even how are you going to build UI and so on.

Did someone say anything about IDEs?

Visual Studio:

xamarin2x-yuj5jk33

To get all the benefits such as Team explorer or Resharper using visual studio is the one for you.

 

Xamarin Studio:

ios-designer

If you’re a mac user, you can’t install visual studio on your machine that’s why Xamarin studio comes in hand. Xamarin studio is also available for PC users but personally, I prefer using Visual studio if am running a windows machine.

You can find all the installation instructions by checking this link.
Update (6/1/2017) Visual Studio for mac:

At Connect(); 16 in November, Microsoft is launching a preview of Visual Studio for Mac i couldn’t believe that i can use visual studio on my mac machine without the need for Bootcamp partition on my machine.
But no, after reading this amazing blog post By Mikayla Hutchinson, i realized that visual studio for mac is somehow similar to Xamarin studio but with the ability to build ASP.NET Core apps.

Note they all share the same functionalities such as the drag and drop support and build your interfaces.

Now in my series, I’m going to use Xamarin studio since am a mac user.

Enough talking about theoretical stuff, I like to get my hands dirty with C# code, so let’s get started and build our first Xamarin app. We will have a series of posts each post going to build part of the app till we end up with a good solid app.
Let’s get started 🎉
What are we going to build? (Part 0)