Using the Xamarin.Android Designer

Creating a new project

The first step is to create a new Xamarin.Android project. LaunchVisual Studio, click New Project..., and choosethe Visual C# > Android > Android App (Xamarin) template.Name the new app DesignerWalkthrough and click OK.

In the New Android App dialog, choose Blank App and click OK:

Adding a layout

The next step is to create a LinearLayout that will hold the userinterface elements. Right-click Resources/layout in the SolutionExplorer and select Add > New Item.... In the Add New Itemdialog, select Android Layout. Name the file list_item andclick Add:

The new list_item layout is displayed in the Designer. Notice thattwo panes are displayed – the Design Surface for thelist_item is visible in the left pane while its XML source is shownon the right pane. You can swap the positions of the Design Surfaceand Source panes by clicking the Swap Panes icon locatedbetween the two panes:

From the View menu, click Other Windows > Document Outline toopen the Document Outline. The Document Outline shows that thelayout currently contains a single LinearLayout widget:

The next step is to create the user interface for the color browserapp within this LinearLayout.

Creating the List Item user interface

If the Toolbox pane is not showing, click the Toolbox tab onthe left. In the Toolbox, scroll down to the Images & Mediasection and scroll down further until you locate an ImageView:

Alternately, you can enter ImageView into the search bar to locatethe ImageView:

Drag this ImageView onto the Design Surface (this ImageView will beused to display a color swatch in the color browser app):

Arranging the user interface

The next step is to modify the UI to display the ImageView on theleft, with the two TextView widgets stacked to the right of theImageView.

Select the ImageView.
In the Properties window, enter width in the search boxand locate Layout Width.
Change the Layout Width setting to wrap_content:

Another way to change the Width setting is to click the triangleon the right-hand side of the widget to toggle its width setting towrap_content:

Clicking the triangle again returns the Width setting tomatch_parent. Next, go to the Document Outline pane and selectthe root LinearLayout:

With the root LinearLayout selected, return to the Propertiespane, enter orientation into the search box and locate theOrientation setting. Change Orientation to horizontal:

At this point, the Designer surface should resemble the following screenshot.Notice that the TextView widgets have been moved to the right of the ImageView:

Modifying the spacing

The next step is to modify padding and margin settings in the UI toprovide more space between the widgets. Select the ImageView on theDesign surface. In the Properties pane, enter min in the searchbox. Enter 70dp for Min Height and 50dp for Min Width:

In the Properties pane, enter padding in the search box and enter10dp for Padding. These minHeight, minWidth and paddingsettings add padding around all sides of the ImageView and elongateit vertically. Notice that the layout XML changes as you enter thesevalues:

The bottom, left, right, and top padding settings can be setindependently by entering values into the Padding Bottom, PaddingLeft, Padding Right, and Padding Top fields, respectively.For example, set the Padding Left field to 5dp and the PaddingBottom, Padding Right, and Padding Top fields to 10dp:

Next, adjust the position of the LinearLayout widget that contains thetwo TextView widgets. In the Document Outline, selectlinearLayout1. In the Properties window, enter margin in thesearch box. Set Layout Margin Bottom, Layout Margin Left, andLayout Margin Top to 5dp. Set Layout Margin Right to 0dp:

Removing the default image

Because the ImageView is being used to display colors (rather thanimages), the next step is to remove the default image source added bythe template.

Select the ImageView on the Designer Surface.
In Properties, enter src in the search box.
Click the small square to the right of the Src property settingand select Reset:

This removes android:src="@android:drawable/ic_menu_gallery" from thesource XML for that ImageView.

Adding a ListView container

Now that the list_item layout is defined, the next step is to add aListView to the Main layout. This ListView will contain a list oflist_item.

In the Solution Explorer, openResources/layout/activity_main.axml. In the ToolBox, locate theListView widget and drag it onto the Design Surface. The ListViewin the Designer will be blank except for blue lines that outline itsborder when it is selected. You can view the Document Outline toverify that the ListView was added correctly:

By default, the ListView is given an Id value of @+id/listView1.While listView1 is still selected in the Document Outline, openthe Properties pane, click Arrange by, and select Category.Open Main, locate the Id property, and change its value to@+id/myListView:

At this point, the user interface is ready to use.

Running the application

Open MainActivity.cs and replace its code with the following:

using Android.App;using Android.Widget;using Android.Views;using Android.OS;using Android.Support.V7.App;using System.Collections.Generic;namespace DesignerWalkthrough{ [Activity(Label = "@string/app_name", Theme = "@style/AppTheme", MainLauncher = true)] public class MainActivity : AppCompatActivity { List<ColorItem> colorItems = new List<ColorItem>(); ListView listView; protected override void OnCreate(Bundle savedInstanceState) { base.OnCreate(savedInstanceState); // Set our view from the "main" layout resource SetContentView(Resource.Layout.activity_main); listView = FindViewById<ListView>(Resource.Id.myListView); colorItems.Add(new ColorItem() { Color = Android.Graphics.Color.DarkRed, ColorName = "Dark Red", Code = "8B0000" }); colorItems.Add(new ColorItem() { Color = Android.Graphics.Color.SlateBlue, ColorName = "Slate Blue", Code = "6A5ACD" }); colorItems.Add(new ColorItem() { Color = Android.Graphics.Color.ForestGreen, ColorName = "Forest Green", Code = "228B22" }); listView.Adapter = new ColorAdapter(this, colorItems); } } public class ColorAdapter : BaseAdapter<ColorItem> { List<ColorItem> items; Activity context; public ColorAdapter(Activity context, List<ColorItem> items) : base() { this.context = context; this.items = items; } public override long GetItemId(int position) { return position; } public override ColorItem this[int position] { get { return items[position]; } } public override int Count { get { return items.Count; } } public override View GetView(int position, View convertView, ViewGroup parent) { var item = items[position]; View view = convertView; if (view == null) // no view to re-use, create new view = context.LayoutInflater.Inflate(Resource.Layout.list_item, null); view.FindViewById<TextView>(Resource.Id.textView1).Text = item.ColorName; view.FindViewById<TextView>(Resource.Id.textView2).Text = item.Code; view.FindViewById<ImageView>(Resource.Id.imageView1).SetBackgroundColor(item.Color); return view; } } public class ColorItem { public string ColorName { get; set; } public string Code { get; set; } public Android.Graphics.Color Color { get; set; } }}

This code uses a custom ListView adapter to load color informationand to display this data in the UI that was just created. To keep thisexample short, the color information is hard-coded in a list, but theadapter could be modified to extract color information from a datasource or to calculate it on the fly. For more information aboutListView adapters, seeListView.

Build and run the application. The following screenshot is an example of how theapp appears when running on a device:

Using the Xamarin.Android Designer - Xamarin (2024)