• Design First Android Activity View in Xamarin Android with Visual Studio and C#

    by  • December 20, 2016 • Android with C# and .NET, Xamarin Mobile App Development • 0 Comments

    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.

    xamarin-android-visual-studio-tool-box

    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.

    xamarin-android-visual-studio-properties-window

    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.

    specify-string-values-xamarin-android-visual-studio

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

    main-android-view-screen-in-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.

    main-android-view-screen-in-source-window-as-xml

     

    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.

    app-with-first-screen-running-on-android-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. 🙂

     




    Namecheap.com
    Avatar of admin

    About

    GetCodeSnippet.com provides you high quality Microsoft .NET development related articles, tutorials and sample code for ASP.NET, C#, VB.NET, AJAX, WCF, WPF, Web Services, Windows Services, SQL Server and other technologies.

    Leave a Reply