I want to add custom floating spinner - xamarin.android

Question

I want to add custom floating spinner. How to add like this ??
I have tried with AutoComplete textview inside TextInputLayout but it's not properly worked.
http://prntscr.com/mm8ksc
//SocietySpinnerLayout.axml
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="50"
android:id="#+id/societySpinnerLayout"
app:errorTextAppearance="#style/ErrorText"
android:theme="#style/CommonTextStyleTheme">
<AutoCompleteTextView
android:id="#+id/societySpinner"
android:paddingBottom="#dimen/padding_20"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#4C5375"
android:textSize="#dimen/textSize_14"
android:hint="SOCIETY"
android:paddingEnd="60dp"
android:textCursorDrawable="#null"
android:inputType="textPhonetic" />
</android.support.design.widget.TextInputLayout>
//SocietySpinner.cs
private void BindToMySociety()
{
//String[] arraySociety = Resources.GetStringArray(Resource.Array.arraySociety);
ArrayAdapter adapter = new SpinnerSocietyAdapter(this, Resource.Layout.PublisherSpinnerItemLayout, HelperNavigation.LstSociety);
_societySpinner.Adapter = adapter;
if (_societySpinner.HasFocus)
{
InputMethodManager imm = (InputMethodManager)GetSystemService(Context.InputMethodService);
imm.HideSoftInputFromWindow(Window.CurrentFocus.WindowToken, 0);
}
_societySpinner.SetOnTouchListener(this);
_societySpinner.Focusable = false;
// _societySpinner.Click+=_societySpinner_Click;
_societySpinner.ItemClick += _societySpinner_ItemClick;
_societySpinner.SetOnDismissListener(this);
if(_selectedSociety!=null)
{
_societySpinner.Text = _selectedSociety.name;
}
}
private void _societySpinner_Click(object sender, EventArgs e)
{
try
{
// _societySpinner.Text = string.Empty;
if (!string.IsNullOrEmpty(_societySpinner.Text))
{
_societySpinner.Text = string.Empty;
_societySpinnerLayout.Typeface = ItalicFont;
_societySpinner.Typeface = ItalicFont;
}
((AutoCompleteTextView)_societySpinner).ShowDropDown();
}
catch (Exception ex)
{
}
}
public bool OnTouch(View v, MotionEvent e)
{
try
{
// _societySpinner.Text = string.Empty;
if (!string.IsNullOrEmpty(_societySpinner.Text))
{
_societySpinner.Text = string.Empty;
_societySpinnerLayout.Typeface = ItalicFont;
_societySpinner.Typeface = ItalicFont;
}
((AutoCompleteTextView)v).ShowDropDown();
return false;
}
catch (Exception ex)
{
return false;
}
}
public void OnDismiss()
{
if(_selectedSociety!=null)
{
if (!string.IsNullOrEmpty(_selectedSociety.name))
{
_societySpinner.Text = _selectedSociety.name;
_societySpinnerLayout.Typeface = RegularFont;
_societySpinner.Typeface = RegularFont;
}
}
else
{
_societySpinnerLayout.Typeface = ItalicFont;
_societySpinner.Typeface = ItalicFont;
}
}
I have tried with above code.But sometime it's throwing out of bound exception.and it's not properly worked.Please give me solution to how to create floating spinner.

Answer 1

I was thinking about this for a long while as I did a similar implementation in one of my earlier projects and then I remembered that I was using the Ganfra Material Spinner to achieve this:
There is a sample project available here
You can use it in XML like below:
<fr.ganfra.materialspinner.MaterialSpinner
android:id="#+id/spinner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
app:ms_multiline="false"
app:ms_hint="hint"
app:ms_enableFloatingLabel="false"
app:ms_enableErrorLabel="false"
app:ms_floatingLabelText="floating label"
app:ms_baseColor="#color/base"
app:ms_highlightColor="#color/highlight"
app:ms_errorColor="#color/error"
app:ms_typeface="typeface.ttf"
app:ms_thickness="2dp"
app:ms_hintColor="#color/hint"
app:ms_arrowColor="#color/arrow"
app:ms_arrowSize="16dp"
app:ms_alignLabels="false"
app:ms_floatingLabelColor="#color/floating_label"/>
You can set a hint and a floating label text. If no floating label text is provided, the hint will be set instead.
You use it like a regular spinner, setting an adapter to it:
string[] ITEMS = {"Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6"};
var adapter = new ArrayAdapter<String>(this, Android.Resource.Layout.SimpleSpinnerItem, ITEMS);
adapter.SetDropDownViewResource(Android.Resource.Layout.SimpleSpinnerDropDownItem);
var spinner = FindViewById<MaterialSpinner>(Resource.Id.spinner1);
spinner.Adapter = adapter;
If you need to set an error message, you can do it the same way as an EditText:
// Activate
spinner.Error = "Error";
// Deactivate
spinner.Error = null;
You can choose to have a scrolling animation or to set the error message on multiple lines with the ms_multiline attribute in XML (default is true).