Spinner floating label?

Question

After using the Android TextInputLayout design support library, put a floating label above the EditText , I was wondering if there is a way to add a floating label to the Spinner component (not necessarily using the design library).

By this I mean something like a TextView located above the Spinner (obviously no animations like TextInputLayout ), but I want the text size, font and color to match the floating label TextInputLayout .

For example, it will look something like this (see the inscriptions above Spinner s):

As I mentioned earlier, my main goal is to have Spinner inscription, as in TextInputLayout , so the text size, font, color and distance between the label and the component will be the same.

The Google Design page about floating text boxes with labels displays a chart showing the label’s dimensions relative to the component, but there’s no pointer to the label text color or size:

So, in summary, I ask:
- If there is a special component to achieve what I ask, or a custom view that I can use, what would it be and how can I use it.
- If not, what is the size of the text, color, and font with the floating label so that I can place the TextView above my Spinner with the layout sizes shown in the image above.

---

EDIT:

In the Google Design Guide for Text Boxes for Floating Labels, it has the following meanings:

Tooltip and input font: Roboto Regular 16sp
Label labeled Roboto Regular 12sp
Tile Height: 72dp
Text top and bottom padding: 16dp
Text Field Separator Fill: 8dp

as well as the images shown above.

Thus, the font of the floating label: Roboto Regular 12sp . Therefore, you can use TextView to display the Spinner label, as I do not know of any custom View or special components that you could use.

However , after checking, this does not look as good as the example shown in the image. a custom look might be better for this , as it might look better, but the solution above is just one way to achieve something close to what I originally wanted.

Answer 1

I want the size, font, and color of the text to match the size of the TextInputLayout floating label .

This can be easily achieved without any external libraries. After trying to hack into TextInputLayout and even creating my own custom view, I realized that using a simple TextView takes much less code and is probably more efficient.

The text style can be copied from the AppCompat library.

Style

In the Material Design Guide, we get the following information:

• label must have a lower field of 8dp
• the label should be aligned vertically with the input text

This guide does not mention EditText materials:

• he has a 4dp left 4dp
• There is actually no 16dp space on his label, this remains for the interface designer: it makes sense, because if you put it under another EditText , you only need an extra 8dp space

In addition, the design support library contains this style for the focus element label:

 <style name="TextAppearance.Design.Hint" parent="TextAppearance.AppCompat.Caption"> <item name="android:textColor">?attr/colorControlActivated</item> </style> 

Inactive elements simply use TextAppearance.AppCompat.Caption .

Implementation

Add the following to your dimens.xml :

 <dimen name="input_label_vertical_spacing">8dp</dimen> <dimen name="input_label_horizontal_spacing">4dp</dimen> 

Then add this to styles.xml :

 <style name="InputLabel" parent="TextAppearance.AppCompat.Caption"> <item name="android:paddingBottom">@dimen/input_label_vertical_spacing</item> <item name="android:paddingLeft">@dimen/input_label_horizontal_spacing</item> <item name="android:paddingRight">@dimen/input_label_horizontal_spacing</item> </style> 

If you want the label to always have a highlighted (accent) color, replace TextAppearance.AppCompat.Caption with TextAppearance.Design.Hint in the Google Design Support Library. However, this is likely to be a little strange if you also marked EditText views on the same screen.

Finally, you can put a TextView over your Spinner (or any other element) with the applicable style:

 <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/category" style="@style/InputLabel" /> 

Result

The following screenshot shows a simple example with two normal TextInputLayout views, followed by a label, and Spinner . I did not use the extra 8dp spacing to separate them further, but this shows that the size, font and color are reflected.

The elements inside Spinner have different additions, however, I prefer to maintain vertical alignment with all other labels to get a more even look.

Answer 2

I have an entity made by me to solve the same problem as you.

Check:

https://gist.github.com/rodrigohenriques/77398a81b5d01ac71c3b

Now I don’t need spinners. You will still have a floating label effect with animations enabled.

Answer 3

I achieved this using an AutoCompleteTextView by disabling the keyboard and showing options when touched.

 ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, getResources().getStringArray(R.array.locations)); AutoCompleteTextView mTextView = (AutoCompleteTextView) findViewById(R.id.location); mTextView.setAdapter(adapter); mTextView.setKeyListener(null); mTextView.setOnTouchListener(new View.OnTouchListener(){ @Override public boolean onTouch(View v, MotionEvent event){ ((AutoCompleteTextView) v).showDropDown(); return false; } }); 

Answer 4

I created a composite component View that displays a label above the Spinner . Label text can be specified using XML or Java.

The component has the key Spinner functions (not all of them), and is also similar to the TextInputLayout component.

I named it LabelledSpinner and it is available as part of my Useful Screens Android Library on GitHub under the Apache 2.0 License .

To use it, add the library dependency to your build.gradle file:

 compile 'com.satsuware.lib:usefulviews:+' 

Examples of its use are available in the GitHub repository (both an example application and a usage guide).

Answer 5

I changed Rodrigo's solution to use the adapter, i.e. more like the standard Spinner https://gist.github.com/smithaaron/d2acd57937d7a4201a79

Answer 6

I have an alternative solution that uses the TextInputLayout behavior and the DialogFragment (AlertDialog) custom dialog to emulate a spinner popup dialog.

layout.xml:

 <android.support.design.widget.TextInputLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <EditText android:id="@+id/your_et" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/your_label" android:maxLines="1" android:inputType="textNoSuggestions" android:textAppearance="@style/TextAppearance.AppCompat.Medium" android:focusable="false" style="@style/Base.Widget.AppCompat.Spinner.Underlined"/> </android.support.design.widget.TextInputLayout> 

Create a custom counter using the dialog box (AlertDialog)

SpinnerFragment.java:

 public class SpinnerFragment extends DialogFragment { private static final String TITLEID = "titleId"; private static final String LISTID = "listId"; private static final String EDITTEXTID = "editTextId"; public static SpinnerFragment newInstance(int titleId, int listId, int editTextId) { Bundle bundle = new Bundle(); bundle.putInt(TITLEID, titleId); bundle.putInt(LISTID, listId); bundle.putInt(EDITTEXTID, editTextId); SpinnerFragment spinnerFragment = new SpinnerFragment(); spinnerFragment.setArguments(bundle); return spinnerFragment; } @Override public Dialog onCreateDialog(Bundle savedInstanceState) { final int titleId = getArguments().getInt(TITLEID); final int listId = getArguments().getInt(LISTID); final int editTextId = getArguments().getInt(EDITTEXTID); AlertDialog.Builder builder = new AlertDialog.Builder(getActivity()); try { final String[] items = getResources().getStringArray(listId); builder.setTitle(titleId) .setItems(listId, new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int pos) { EditText et = (EditText) getActivity().findViewById(editTextId); String selectedText = items[pos]; if (!TextUtils.isEmpty(selectedText)) { et.setText(selectedText); } else { et.getText().clear(); } } }); } catch (NullPointerException e) { Log.e(getClass().toString(), "Failed to select option in " + getActivity().toString() + " as there are no references for passed in resource Ids in Bundle", e); Toast.makeText(getActivity(), getString(R.string.error_failed_to_select), Toast.LENGTH_LONG).show(); } return builder.create(); } 

}

Activity.java:

 private void addCustomSpinner() { EditText yourEt = (EditText) findViewById(R.id.your_et); yourEt.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { showCustomSpinnerDialog(view); } }); } private void showCustomSpinnerDialog(View v) { int titleId = R.string.your_label; int listId = R.array.spinner_selections; int editTextId = R.id.your_et; SpinnerFragment spinnerFragment = SpinnerFragment.newInstance(titleId, listId, editTextId); spinnerFragment.show(getFragmentManager(), "customSpinner"); } 

Result

When you click on a Spinner-style TextInputLayout, it will launch a warning dialog box containing your list of selected ones. After making your selection, the EditText will be filled with your selection, and the label will float the way you want.

Answer 7

Here is my trick

It’s good that everything will work the way you want,

but the bad thing is that it increases the layout hierarchy, and you have to process the functionality in the code, and this is an ugly solution:

  <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.design.widget.TextInputLayout android:id="@+id/til" android:layout_width="match_parent" android:layout_height="wrap_content"> <EditText android:id="@+id/edt" android:layout_width="match_parent" android:layout_height="@dimen/edt_height" android:hint="@string/create_gcc_visa_txt_step" /> </android.support.design.widget.TextInputLayout> <Spinner android:id="@+id/spn" style="@style/MyAppTheme.Base.Spinner" android:layout_height="@dimen/edt_height" android:layout_alignBottom="@id/til" /> </RelativeLayout> 

and override the adapter for the counter to make the selected values ​​transparent

 public class MySpinnerAdapter extends SimpleAdapter { Context mContext; public MySpinnerAdapter(Context context, List<String> data, int resource, String[] from, int[] to) { super(context, data, resource, from, to); mContext = context; } @Override public View getView(int position, View convertView, ViewGroup parent) { convertView = super.getView(position, convertView, parent); TextView tv = (TextView) convertView.findViewById(android.R.id.text1); tv.setTextColor(ContextCompat.getColor(mContext, R.color.transparent)); return convertView; } } 

and after selecting in spinner just select the selected text and set it to EditText and it will have the same effect with the animation

 yourSpinnerView.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() { @Override public void onItemSelected(AdapterView<String> adapterView, View view, int i, long l) { //get your selected text from adapter or from where you want String selectedText = adapterView.getItemAtPosition(i)); if (i != 0) { edt.setText(selectedText); } else { // if in case your spinner have first empty text, // then when spinner selected, just empty EditText. edt.setText(""); } } @Override public void onNothingSelected(AdapterView<?> adapterView) { } }); 

if you have questions ask me

Answer 8

Here is the library that I use for the Spinner rey5137 floating label

In addition, a list of some large libraries is provided here for future reference. User Interface Libraries Core Libraries

Answer 9

SpinnerCustom.java

 package com.pozitron.tfkb.customviews; import android.content.Context; import android.content.res.TypedArray; import android.support.annotation.Nullable; import android.text.SpannableString; import android.util.AttributeSet; import android.view.LayoutInflater; import android.view.View; import android.widget.LinearLayout; import com.pozitron.commons.customviews.TextViewFont; import com.pozitron.tfkb.R; import butterknife.BindView; import butterknife.ButterKnife; /** * Created by so12607 on 31/01/2018. */ public class SpinnerCustom extends LinearLayout { @BindView(R.id.layoutSpinnerCustomLabel) TextViewFont layoutSpinnerCustomLabel; @BindView(R.id.layoutSpinnerCustomSpinner) TextViewFont layoutSpinnerCustomSpinner; @BindView(R.id.layoutSpinner) LinearLayout layoutSpinner; private View v; public SpinnerCustom(Context context) { this(context, null); } public SpinnerCustom(Context context, @Nullable AttributeSet attrs) { this(context, attrs, 0); } public SpinnerCustom(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); v = LayoutInflater.from(context).inflate(R.layout.layout_spinner_custom, this, true); ButterKnife.bind(this); if (!isInEditMode()) { TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.SpinnerCustom, 0, 0); final String label = array.getString(R.styleable.SpinnerCustom_label); final boolean enable = array.getBoolean(R.styleable.SpinnerCustom_enabled, true); layoutSpinnerCustomLabel.setText(label); layoutSpinnerCustomLabel.setEnabled(enable); layoutSpinnerCustomSpinner.setEnabled(enable); layoutSpinner.setEnabled(enable); layoutSpinner.setClickable(enable); v.setEnabled(enable); v.setClickable(enable); array.recycle(); } } public void setText(String text) { layoutSpinnerCustomSpinner.setText(text); } public void setText(SpannableString text) { layoutSpinnerCustomSpinner.setText(text); } public void setText(CharSequence text) { layoutSpinnerCustomSpinner.setText(text); } public void setLabel(String text) { layoutSpinnerCustomLabel.setText(text); } public void setError(SpannableString text) { layoutSpinnerCustomSpinner.setError(text); } public void setEnabled(boolean enable) { layoutSpinnerCustomLabel.setEnabled(enable); layoutSpinnerCustomSpinner.setEnabled(enable); layoutSpinner.setEnabled(!enable); layoutSpinner.setClickable(!enable); } } 

layout_spinner_custom.xml

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/layoutSpinner" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <com.pozitron.commons.customviews.TextViewFont android:id="@+id/layoutSpinnerCustomLabel" style="@style/TextLabel" tools:text="label" /> <com.pozitron.commons.customviews.TextViewFont android:id="@+id/layoutSpinnerCustomSpinner" style="@style/SpinnerText" android:clickable="false" /> </LinearLayout> 

style.xml

 <style name="TextLabel" parent="android:Widget.TextView"> <item name="font">@integer/font_GTEestiDisplay_Regular</item> <item name="android:layout_width">match_parent</item> <item name="android:textSize">14sp</item> <item name="android:layout_height">wrap_content</item> <item name="android:gravity">bottom</item> <item name="android:textColor">@color/greyLabel</item> </style> <style name="SpinnerText" parent="EditText"> <item name="font">@integer/font_GTEestiDisplay_Medium</item> <item name="android:gravity">bottom</item> <item name="android:textSize">17sp</item> <item name="android:minHeight">35dp</item> <item name="android:focusable">false</item> <item name="android:background">@drawable/spinner_selector</item> <item name="android:text">@string/select</item> <item name="android:textColor">@color/selector_spinner_text</item> </style> 

Answer 10

You can achieve this:

With new styles of material library such as this:

 <com.google.android.material.textfield.TextInputLayout android:id="@+id/fullNameLay" style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu" android:layout_width="wrap_content" android:layout_height="wrap_content"> <androidx.appcompat.widget.AppCompatAutoCompleteTextView android:id="@+id/fullNameEt" android:layout_width="match_parent" android:layout_height="wrap_content"/> </com.google.android.material.textfield.TextInputLayout> 

for more information: https://material.io/develop/android/components/menu/