Friday, July 17, 2015

Creating Custom Views with a Spinner

The next step in my app was making a quick cosmetic change. If you recall my drop downs for Race and Character classes were left text aligned. This is due to the default Resource settings I was used at its creation. Creating spinners, there are two layout settings that I discovered you can play with.

Spinner races = FindViewById <Spinner> (Resource.Id.charRace);
var adapter = new ArrayAdapter<string> (this, Android.Resource.Layout.SimpleSpinnerItem1, items);
adapter.SetDropDownViewResource (Android.Resource.Layout.SimpleSpinnerDropDownItem );


When you create a Spinner control, you have to set its adapter, which basically determines how it displays the data added, and will tell the Spinner what type of data objects it should expect. The above was my original code.

The first line finds the Spinner in the Android Resources, the second initializes the Adapter to contain/expect an array of type string, and the third sets the display of the individual items when you click the spinner and dropdown. Digging around, I learned it should be as simple as overriding the default Android.Resource.Layout to use a custom layout instead of a default one. Pretty straightforward right? So I created a new android .axml called spinner_item with the following code:

xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="right" />


as all I needed was right aligned text. Problem was, when I tried to reference it, I was getting compile errors:

var adapter = new ArrayAdapter<string> (this, Android.Resource.Layout.spinner_item, items);

This was confusing as everything I read said this should work. It was then, digging through Xamarins documentation that I realized I was missing something:

http://developer.xamarin.com/guides/android/application_fundamentals/resources_in_android/part_1_-_android_resource_basics/ 

When referencing resources programmatically (in code), they can be accessed via the Resources class hierarchy which uses the following syntax:
@[.]Resource..

I noticed I was using Android.Resource.Layout, key word being "ANDROID", or the default resources. Since I was using resources local to my own project, I could just say

Resource.Layout.spinner_item and this would find my new custom layout. Adding that we get this:
var adapter = new ArrayAdapter<string> (this, Resource.Layout.spinner_item, items);  

 And we get the following:

This looks much better, and a lot cleaner due to how the combo boxes are displaying the data. I am still debating whether or not this falls in line with Material design but for now I am content with it, it looks clean. I have since decided that this is a first pass and so I will likely do a "good enough" approach to get my information visible and then do a full pass pater to get things better organized.






No comments:

Post a Comment