In the previous post, we learned about the Android Activity and Views. In this post, we’ll design our first Android Activity View for our MyBookStore App. This first view will be simple with an image control and three buttons. The View is an XML layout contained in a .axml file. Xamarin Android with Visual Studio allows you to view the layout in design mode as well.

In order to create the View, you need to add controls to the layout from the Tool Box. You can drag and drop the controls from the Android tool box on to the layout window. We’ll add only a few controls in this first view, but you can explore the Toolbox to see what other controls are available. Most of the controls are similar to the Windows development. Only a few are going to be different which are easy to understand and quite intuitive.

We have added one image control and three buttons. After adding controls to the layout, you can select each control and then set the properties from the properties window. This is also like any other .NET application you would have designed in the past. So this process is similar and any .NET developer is very familiar with this. I have set a few properties including layout_width, layout_height and text etc. For image control, I have set src (source) property to set the main image for my app. These properties can also be set using the XML i.e. .axml file.

In order to set the text for three buttons on the layout, I have added string values in the strings.xml file. The benefit of keeping the text values in the strings.xml file is that you can later change the text at one place, even if the same string is used at multiple locations in the application. This is also helpful when you translate your application into different language. I’ll guide you about that in some later post. This is how you can specify text values in the strings.xml file.

The final output of the layout looks something like below in the designer window.

The same design and layout can be viewed as XML and you can also add control, edit properties, and work with layout in the XML file which is known as Source.

Once you are all set, you can run your android application in an emulator. I have used the default emulator provided with Xamarin Android Visual Studio 2015. This is how the app looks like in the emulator.

I’m sure, after seeing the application running for the first time, you’re very excited to implement this and then follow up for future posts where we’ll add more functionality into our app. You’ll be able to view list of books, add the books to the cart, view the cart, and then buy those books. A lot more exciting stuff is coming up. 🙂