Creating a setError() for the Spinner
Similar to @Gábor's solution, but I didn't need to create my own adapter. I just call the following code in my validate function (i.e. on submit button clicked)
TextView errorText = (TextView)mySpinner.getSelectedView();
errorText.setError("anything here, just to add the icon");
errorText.setTextColor(Color.RED);//just to highlight that this is an error
errorText.setText("my actual error text");//changes the selected item text to this
I have a solution that doesn't involve creating an extra edit field but you need your own SpinnerAdapter
, as usual.
Make sure you have at least one TextView
in the layout you use in your adapter's getView()
(you normally have that, anyway).
Add the following function to your adapter (change name
to the ID of your TextView
):
public void setError(View v, CharSequence s) {
TextView name = (TextView) v.findViewById(R.id.name);
name.setError(s);
}
Call the setError()
from your code this way:
YourAdapter adapter = (YourAdapter)spinner.getAdapter();
View view = spinner.getSelectedView();
adapter.setError(view, getActivity().getString(R.string.error_message));
Basically, as with any other control, only that you call it on your adapter and you have to provide the view as well.
This will display the error icon on the spinner as it is the case with other controls.
Using a hidden TextView to get a pop-up message to appear
This solution involves adding an additional hidden textbox just below the spinner just at the right position to allow the TextView's error dialog to show, whilst also using the TextView set on the spinner's layout XML to allow the red (!) icon to be displayed. So in effect, two textviews are used -- one for the icon, and another (hidden) one to allow the error dialog.
This is what it looks like when not in an error state (use SetError(null)
):
This is what it looks like when there is an error (use SetError("my error text, ideally from a resource!")
):
Here is the excerpt of the spinner's layout XML. There is a RelativeLayout used to ensure that the TextView is as close as possible to the spinner, and has just enough paddingRight to ensure that the arrow on the message dialog is aligned just under the red error (!) icon. The hidden (fake) TextView is positioned relative to the Spinner.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="top|left"
>
<Spinner
android:id="@+id/spnMySpinner"
android:layout_width="400dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:dropDownSelector="@drawable/selector_listview"
android:background="@android:drawable/btn_dropdown"
android:paddingBottom="0dp"
android:layout_marginBottom="0dp"
/>
<!-- Fake TextView to use to set in an error state to allow an error to be shown for the TextView -->
<android.widget.TextView
android:id="@+id/tvInvisibleError"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_alignRight="@+id/spnMySpinner"
android:layout_alignBottom="@+id/spnMySpinner"
android:layout_marginTop="0dp"
android:paddingTop="0dp"
android:paddingRight="50dp"
android:focusable="true"
android:focusableInTouchMode="true"
/>
</RelativeLayout>
Note: @drawable/selector_listview
defined outside the scope of this solution. See example here of how to get this to work, as it's off topic for this answer.
Here is the code to make it work. Just call the SetError(errMsg)
either with null
to clear the error, or with text to set it in an error state.
/**
* When a <code>errorMessage</code> is specified, pops up an error window with the message
* text, and creates an error icon in the secondary unit spinner. Error cleared through passing
* in a null string.
* @param errorMessage Error message to display, or null to clear.
*/
public void SetError(String errorMessage)
{
View view = spnMySpinner.getSelectedView();
// Set TextView in Secondary Unit spinner to be in error so that red (!) icon
// appears, and then shake control if in error
TextView tvListItem = (TextView)view;
// Set fake TextView to be in error so that the error message appears
TextView tvInvisibleError = (TextView)findViewById(R.id.tvInvisibleError);
// Shake and set error if in error state, otherwise clear error
if(errorMessage != null)
{
tvListItem.setError(errorMessage);
tvListItem.requestFocus();
// Shake the spinner to highlight that current selection
// is invalid -- SEE COMMENT BELOW
Animation shake = AnimationUtils.loadAnimation(this, R.anim.shake);
spnMySpinner.startAnimation(shake);
tvInvisibleError.requestFocus();
tvInvisibleError.setError(errorMessage);
}
else
{
tvListItem.setError(null);
tvInvisibleError.setError(null);
}
}
In the SetError
function above, example there is some additional code that causes the text in the Spinner to shake when the error is set. This is not required to make the solution work, but is a nice addition. See here for the inspiration for this approach.
Kudos to @Gábor for his solution which makes use of the TextView on the Spinner's item layout XML. The code View view = spnMySpinner.getSelectedView();
(based on @Gábor's solution) is necessary, because it gets the currently displayed TextView, rather than using a findViewById
, which would just get the first TextView in the list (based on the Resource ID provided), and hence would not work (to display the red (!) icon) if very first item in the list is not selected.
This can be done without using a custom layout or adapter.
((TextView)spinner.getChildAt(0)).setError("Message");
The only downside to this approach is that the little popup with the error text will not show when the icon is tapped.