Lesson 4 - Styling and Debugging Xamarin Apps on Android Devices

Welcome to the next lesson of the course on programming cross-platform smartphone apps in Xamarin and C# .NET. In the previous lesson, First Cross-Platform Application in Xamarin and C# .NET, we created our first simple app that can greet us by a name entered by the user. Today, we're going to debug our application directly on the connected device (our phone) and show the basics of positioning on individual components.

As always, I'll write this tutorial for Android devices and Windows 10. Debugging the iOS version on an iPhone is very similar and I'm sure every Apple programmer can easily handle it.

Enabling Developer Options

First of all, we need to activate the hidden "Developer Options" menu on our phone. To do this, we go to Settings -> System -> About Phone and tap on the Build number seven to ten times (the number of taps may vary depending on the Android version). The system will warn us that we've become developers. Now, let's go back to Settings -> System where we now can see the Developer Options entry. Let's open it. For now, just skip the other settings and only enable USB debugging in the Debugging section.

Launching the Application

Let's move to Visual Studio, where we've our project opened. We connect our phone via a USB cable to the computer. Some phones automatically turn off USB debugging when connected and only activate charging or transferring files. So, check once again that USB debugging is enabled on your phone. When everything is running, Visual Studio will offer our connected device immediately instead of the emulator. Then we'll just start the application using the green Play button same as with the emulator.

If you can't see your phone in Visual Studio, you probably don't have USB drivers for your device installed on your computer. Get the drivers from the phone manufacturer's website and install them. Then everything will work.

Styling the Application

Since our application looks very humble, it'd be nice to set some margins, center the welcome text, make the font larger, and do some other design adjustments.

<Label>

Let's open the MainPage.xaml file and edit the <Label> element as follows:

<Label
    Text="Welcome to the first application!"
    FontSize="Large"
    TextColor="#666666"
    FontAttributes="Bold"
    HorizontalOptions="Center"
    HorizontalTextAlignment="Center" Margin="0,20,0,0"
/>

As you can see, the code is quite simple. We centered <Label>, changed the font size to large, set its attributes to bold and the text color to gray with the code #666666. The Margin property as it's defined here sets the top margin of the <Label> to 20 units. Again, we don't need to memorize anything, because we can set all the values in the Properties window and the corresponding code will be generated.

<Entry>

We'll continue with <Entry>. We'll set the margin again, center it, and add the Placeholder attribute that displays the placeholder text before the user has typed anything. We'll also limit the maximum length of the entered text:

<Entry
    x:Name="name"
    HorizontalTextAlignment="Center"
    HorizontalOptions="Center"
    Margin="20,20"
    MaxLength="255"
    Placeholder="Enter your name"
/>

<Button>

Now, we just have to adjust the button. Besides the margins, we'll also set the background and text color:

<Button
    x:Name="button"
    Text="Say hello!"
    Margin="20,10"
    BackgroundColor="#26940F"
    TextColor="#FFFFFF"
/>

There is probably no need to explain it. You can run the application in the emulator or directly on your phone.

<Image>

As we can see, it looks a bit better, but a logo or an image would help. So let's introduce another component - <Image>. This component logically serves for inserting images into the application. Since we don't know how to work properly with files yet, we'll learn the easiest way how to do which is loading an image from a URL. We'll find any image on Google, right-click on it and select the option to copy the URL. I won't go far and use the ICT.social logo from the URL https://www.ict.social/…t_social.png

Since it'd be nice to place the logo in the header, we'll add our <Image> as the first child of <StackLayout>, above the <Label>. The code will look like this:

<Image
    Source="https://www.itnetwork.cz/images/5/itnetwork_big.png"
    Aspect="AspectFill"
    Margin="0,20"
/>

Source determines from what source (in our case, it's the URL) the image is loaded and Aspect how the image is scaled. Aspect can have the following 3 values:

• Fill - Fills the area with the image without preserving the aspect ratio
• AspectFill - Fills the area horizontally with the image and preserves the image aspect ratio.
• AspectFit - Scales the image to the area size but the image may overflow into other elements.

Thus, in most cases, it's best to use AspectFill. For the sake of completeness, let's look at the whole MainPage.xaml code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="DialogApp.MainPage">

    <StackLayout>
        <Image
            Source="https://www.itnetwork.cz/images/5/itnetwork_big.png"
            Aspect="AspectFill"
            Margin="0,20"
         />
        <Label
            Text="Welcome to the first application!"
            FontSize="Large"
            TextColor="#666666"
            FontAttributes="Bold"
            HorizontalOptions="Center"
            HorizontalTextAlignment="Center" Margin="0,20,0,0"
         />
        <Entry
            x:Name="name"
            HorizontalTextAlignment="Center"
            HorizontalOptions="Center"
            Margin="20,20"
            MaxLength="255"
            Placeholder="Enter your name"
         />
        <Button
            x:Name="button"
            Text="Say hello!"
            Margin="20,10"
            BackgroundColor="#26940F"
            TextColor="#FFFFFF"
         />
    </StackLayout>

</ContentPage>

If you have everything right, the result should look like this:

Conclusion

Today, we learned to style basic components of our application. It certainly looks better than last time, but its value added equals zero We'll change this in the next lesson, Saving and Loading Data in Xamarin Using Text Files, where we'll start working on a notepad. We'll also show how to work with date and time and in later lessons we'll even extend the app to help us with our shopping lists or appointment reminders.