SAP and Xamarin

Overview

In the previous post, we finished the complete wireframe of our app. In this post, we are going to open up our Xamarin Studio or Visual Studio, and start implementing the pages using Xamarin.Forms. During the tutorials, I'm going to use Visual Studio, but you can follow me using Xamarin Studio as well.

Alright! Let's get started!

Create a Solution

First, we are going to create a new solution, named SAPGoodsReceipt, using the template Templates >> Visual C# >> Mobile Apps >> Blank App (Xamarin.Forms Portable).

If everything went well, you should see something like this within your solution:

• a portable class library (PCL) project, named SAPGoodsReceipt that will contain our shared code,
  
• an Android, named SAPGoodsReceipt.Droid and
  
• an iOS, named SAPGoodsReceipt.iOS specific application project
  

Create a Login Page

To keep transparent our projects, we are going to organize our files into separate folders. For this, let's create a new folder, named Pages under our PCL project (by right clicking on the project >> Add >> New Folder), where we are going to place the different pages of our app.

Then our task is to create the Login Page itself, by right clicking on the folder, Pages >> Add >> New Item. Here let's choose the template Visual C# >> Code >> Forms Xaml Page, and name it as LoginPage.

Specify the Root Page of the Application

As we have the LoginPage, we can set it as a root page for our app, since we want to start our app with this page. To do this, we have to modify our App.cs file in the PCL project as like this:

namespace SAPGoodsReceipt
{
    public class App : Application
    {
        public App()
        {
            // The root page of your application
            MainPage = new LoginPage();
        }
        ...
    }
}

Construct the Login Page in XAML

Now comes the magic, namely we are going to build our Login page using XAML. To do this, let's open the file LoginPage.xaml, and modify its generated code as the followings!

First we are going to add a StackLayout to our XAML that is going to be our main container. Then let's align it to center, and give let's say 30 dip padding to it (for ensuring that its content is going to be enough away from the edge of the screen)

Next, we are going to add a sub StackLayout (for holding the title: "SAP Goods Receipt on Mobile") that we align to center, and place 60 dip away from the entry fields below.

Then we place two Entry fields, one for the username, and another for the password at which we set the property IsPassword to true.

At last, we add a Login Button into our main StackLayout.

Now, there is nothing left, then placing two Labels into our sub StackLayout, one for the main title, named "SAP Goods Receipt", with aligned to the end and with bold, 35 font size, and another for the subtitle, named "on Mobile", with aligned to the end and with medium font size.

That's it!

Run Your Android and iOS Apps

Now comes the best part of building native mobile apps, namely let's BUILD and RUN it! :) I attached two screenshots about the running apps, one for the Android, and another for the iOS app.

Yes, I know, it won't be my best design ever, but we are not done yet. Now, we only implemented the wireframe that we planned in the previous post.

What's next?

In the next few posts, we are going to implement the other pages as well with implementing the navigation between them, and then we are going to perform a complete redesign (using consistent primary and accent colors, font sizes, so on ...), in order to get a nice looking app with a nice minimal design!

Stay tuned, keep reading! If you want to get notification about the newest posts, follow us or subscribe to our newsletter!

If you liked it, please share it! Thanks!