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.
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
Margin property as it's defined here sets the top margin of the
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.
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" />
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.
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
<?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:
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.