Opening spinner by clicking on EditText

Question

Sorry to bother you guys, but I've been strangling to get this to work.

What I want it to do:

EditText to display hint.

User clicks on EditText, opens spinner and selects their sex. That then get's turned into a string and put inside the EditText(gender)

---

What it is actually doing: "Male" the first element in my spinner is already put inside my EditText before the user even clicks on it.(I never see my hint: "Sex")....and the spinner won't open at all when I try clicking on the EditText(gender)

What's going on?

My code:

    private Spinner sexSpinner;
    String[] arrayForSpinner = {"Male", "Female"};


    //Inside OnCreate method:
    sexSpinner = (Spinner)findViewById(R.id.spinner);
    adapter = new ArrayAdapter<String>(this, R.layout.spinner_row, arrayForSpinner);
    sexSpinner.setAdapter(adapter);


sexSpinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {

        @Override
        public void onItemSelected(AdapterView<?> parent, View view,int position, long id) {
            gender.setText(sexSpinner.getSelectedItem().toString());

        }

gender.setOnFocusChangeListener(new View.OnFocusChangeListener() {

        @Override
        public void onFocusChange(View arg0, boolean hasFocus) {
            // TODO Auto-generated method stub
            if(hasFocus){
                sexSpinner.performClick();
            }
        }
    });

Layout:

<EditText
        android:layout_width="75dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="12dp"
        android:focusable="false"
        android:longClickable="false"
        android:clickable="true"
        android:inputType="date"
        android:maxLines="1"
        android:singleLine="true"
        android:hint="Gender"
        android:textColorHint="@color/white"
        android:textColor="@color/white"
        android:ems="10"
        android:id="@+id/signup_input_gender"
        android:layout_below="@+id/signup_input_birthday"
        android:layout_centerHorizontal="true"
        android:backgroundTint="@android:color/white"/>

<Spinner
        android:background="@color/Blue"
        android:id="@+id/spinner"
        android:paddingLeft="0dp"
        android:layout_width="75dp"
        android:layout_height="40dp"
        android:layout_marginRight="40dp"
        android:layout_marginBottom="6dp"
        android:layout_below="@+id/linearlayout"
        android:visibility="invisible" />

Solution 1

Here, I'm showing how to use an AutoCompleteTextView for this. Additionally, as I'm copying all the code from my project, I'm also adding the Imageview (delete button) I use to reset the AutoCompleteTextView.

First the XML code (Working with ConstraintLayout):

<AutoCompleteTextView
        android:layout_width="200dp"
        android:layout_height="30dp"
        android:hint="Select Gender"
        android:id="@+id/acT1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:background="#ffffff"
        android:textAlignment="center"            
        android:dropDownHeight="155dp"
        android:cursorVisible="false"
        android:maxLines="1"
        android:focusable="false"
        android:clickable="true"
        android:inputType="none"
        />
    <ImageView
        android:src="@drawable/clear"
        android:layout_width="wrap_content"
        android:layout_height="20dp"
        app:layout_constraintRight_toRightOf="@+id/acT1"
        app:layout_constraintBottom_toBottomOf="@+id/acT1"
        app:layout_constraintTop_toTopOf="@+id/acT1"
        android:alpha=".2"
        android:id="@+id/delButton"
        android:contentDescription="Delete Button" />

Now the Java Code:

        AutoCompleteTextView acTV1 = findViewById(R.id.acT1);
        ImageView delButton = findViewById(R.id.delButton);
        final ArrayAdapter<String> arrayAdapter = new ArrayAdapter<>(
            this, android.R.layout.simple_list_item_1, getResources()
            .getStringArray(R.array.Gender_Names));
        String selection;
        acTV1.setAdapter(arrayAdapter);
        acTV1.setCursorVisible(false);
        acTV1.setOnItemClickListener(new AdapterView.OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                acTV1.showDropDown();              
                selection = (String) parent.getItemAtPosition(position);
                Toast.makeText(getApplicationContext(), selection,
                Toast.LENGTH_SHORT);
                delButton.setAlpha(.8f);
            }
        });

        acTV1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(final View arg0) {
                acTV1.showDropDown();
            }
        });

        delButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                acTV1.setText(null);
                delButton.setAlpha(.2f);
                selection = null;                               
            }
        });

And the Gender_Names Array, define it in strings.xml:

 <string-array name="Gender_Names">
    <item>Male</item>
    <item>Female</item>  
    <item>Other</item>      
</string-array>

This is how it looks:

1. Empty

2. With some data selected

The whole thing is a copy-paste unless you're not using ConstraintLayout.

Solution 2

You can achieve what you want by this:

Add this in your xml instead of edittext and spinner

<AutoCompleteTextView
   android:id="@+id/gender_list"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_alignParentTop="true"
   android:layout_centerHorizontal="true"
   android:layout_marginTop="65dp"
   android:ems="10"
   android:editable="false" >

and this in your java code

ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
                 android.R.layout.simple_dropdown_item_1line, GENDERLIST);
         AutoCompleteTextView textView = (AutoCompleteTextView)
                 findViewById(R.id.gender_list);
         textView.setAdapter(adapter);
textView.setOnTouchListener(new OnTouchListener() {

        @SuppressLint("ClickableViewAccessibility")
        @Override
        public boolean onTouch(View paramView, MotionEvent paramMotionEvent) {
            // TODO Auto-generated method stub
            textView.showDropDown();
            textView.requestFocus();
            return false;
        }
    });

Solution 3

To show Spinner ( use gender.setOnClickListener()),

gender.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                flag = true;              
                sexSpinner.performClick();
            }
        });

To show hint first time as a 'Sex' define boolean globle variable 'flag',

    boolean flag = false;        // Here
.
.
.
sexSpinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {

            @Override
            public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
                if (flag)        // Here
                    gender.setText(sexSpinner.getSelectedItem().toString());
            }
        });
.
.
.
gender.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                flag = true;        // Here
                sexSpinner.performClick();
            }
        });

Comments

[ngx311]

Thanks for the input. But my spinner is still not showing up.

[Dhruv]

You can Accept my answer if that helps by clicking on tick mark... :)

[ngx311]

Thanks allot man, I'm implementing it right now. I'll get back to you in a few minutes and let you know.

[Lalit Fauzdar]

@ngx311 No problem mate.

[Parth Patel]

The best solution is to replace native Spinner control.