Question

I have a custom spinner in my Xamarin Android app using MvvmCross. The only reason I'm using custom is because the model holds a class and I want the spinner to populate the values with a property on that class. However, the appearance of the drop down doesn't look like the rest of my app. It's missing radio buttons on the right and the spacing is off. How do I make this custom spinner look just like the rest?

    <Mvx.MvxSpinner
        style="@style/spinner_input"
        local:MvxItemTemplate="@layout/item_spinner"
        local:MvxDropDownItemTemplate="@layout/item_spinnerdropdown"
        local:MvxBind="ItemsSource ProductCategoryOptions; SelectedItem SelectedProductCategory" />

Item_Spinner.axml - this part seems to be just right, the appearance of the drop down once a value is selected looks just like others.

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:local="http://schemas.android.com/apk/res-auto"
          android:singleLine="true"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:textAppearance="?android:attr/textAppearanceMedium"
          android:textColor="@color/black"
          android:text="Test"
          local:MvxBind="Text Caption" />

Item_SpinnerDropDown.axml - I think this is the file that is wrong. The appearance of the drop-down doesn't match.

<?xml version="1.0" encoding="utf-8"?>
<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:singleLine="true"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:textColor="@color/black"
    android:text="Test"
    local:MvxBind="Text Caption" />
Was it helpful?

Solution

Checkable spinners and also supporting activated state indicators is something we've recently worked on within MvvmCross - for example, see this issue and associated commits https://github.com/MvvmCross/MvvmCross/issues/481

To make an MvxSpinner support the default styles then you should be able to simply specify no local:MvxItemTemplate and no local:MvxDropDownItemTemplate - in this case then the spinner uses resources of:

 global::Android.Resource.Layout.SimpleDropDownItem1Line
 global::Android.Resource.Layout.SimpleSpinnerDropDownItem

This will just use the standard Android layout templates, but will rely on your list item ToString() implementations, rather than using the Caption properties.

This is similar to what the spinner and adapter use within a "normal" Android app - e.g. see http://developer.android.com/guide/topics/ui/controls/spinner.html

Spinner spinner = (Spinner) findViewById(R.id.spinner);
// Create an ArrayAdapter using the string array and a default spinner layout
ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this,
        R.array.planets_array, android.R.layout.simple_spinner_item);
// Specify the layout to use when the list of choices appears
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
// Apply the adapter to the spinner
spinner.setAdapter(adapter);

If you instead wanted to write your own spinner layouts and to base them on the Android layouts then it's probably easiest to look into the Android source to find the original layouts - e.g. looking at: http://grepcode.com/file/repository.grepcode.com/java/ext/com.google.android/android/4.4_r1/frameworks/base/core/res/res/layout/simple_spinner_dropdown_item.xml/

One small advanced warning here is that the standard MvvmCross listitem will wrap these displayed list items in a framelayout before using it. This won't have an effect on many layouts - but might effect some. If it effects your's then you may need to write your own custom list item view (based on https://github.com/MvvmCross/MvvmCross/blob/v3.1/Cirrious/Cirrious.MvvmCross.Binding.Droid/Views/MvxBaseListItemView.cs)


One final note on this - please note that https://github.com/MvvmCross/MvvmCross/issues/481 is still open, plus there is a query on the framelayout wrapping of list items in https://github.com/MvvmCross/MvvmCross/issues/539 - so please do be aware that changes and updates may happen in this area - releases in the near future may change the default appearance here.

OTHER TIPS

The following works for Item_SpinnerDropDown.axml

<?xml version="1.0" encoding="utf-8"?>
<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    style="?android:attr/spinnerDropDownItemStyle"
    android:singleLine="true"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    local:MvxBind="Text Caption" />
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top