Give spinner items the width of its dropdown

Question

I am having an issue with a spinner in my layout.

The issue is that my items have very small width and on a small screen it is pretty hard do click them.

Check the picture for idea.

Is there no easy way of setting the item width to the actual dropdownmenue width?

<android.support.v7.widget.AppCompatSpinner
    android:id="@+id/spellSpinner"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:layout_marginStart="10dp"
    android:layout_marginEnd="10dp"
    android:dropDownWidth="match_parent"
    android:spinnerMode="dropdown"
    android:popupBackground="#fff"
    android:background="#8A8A8A"/>

My Java Code:

spinnerSpells = findViewById(R.id.spellSpinner);
ArrayAdapter < CharSequence > adapter = ArrayAdapter.createFromResource(spellActivity.this, R.array.dropdownCategory, android.R.layout.simple_spinner_item);
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
spinnerSpells.setAdapter(adapter);

spinnerSpells.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
  @Override
  public void onItemSelected(AdapterView << ? > adapterView, View view, int i, long l) {
    getSpellList(spinnerSpells.getSelectedItem().toString(), switchSpells.isChecked());
    // do some other stuff [...]
  }

  @Override
  public void onNothingSelected(AdapterView << ? > adapterView) {
    getSpellList(spinnerSpells.getSelectedItem().toString(), switchSpells.isChecked());
   // do some other stuff [...]
  }
});

With best regards CG

P.S. I really did not find any post in the forum about that matter.

it depends on layout you are setting in your spinner adapter. can you post java code where you are setting adapter to spinner? — V-rund Puro-hit, Oct 05 '18 at 05:12
@DiwakarSingh it is not about the width of the dropdown.. it is about the width of the label where which you can click in the dropdown menu. — mrmeaaan, Oct 08 '18 at 01:09

score 1 · Accepted Answer · answered Oct 08 '18 at 02:27

To be honest they answer did not really help me, gave me good hint though. I found a way how to solve my problem on my own (also implemented images infront of the labels).

Basically it is the right call to inflate the spinner with a dedicated xml file. I post my code:

Created a new Class for my adater:

package edmt.dev.androidgridlayout;

import android.content.Context;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class xCustomSpinnerAdapater extends ArrayAdapter<String> {

    Context mContext;
    String[] spinnerNames;
    int[] spinnerImages;

    public xCustomSpinnerAdapater( Context mContext, String[] spinnerNames, int[] spinnerImages) {
        super(mContext, R.layout.x_custom_spinner, spinnerNames);
        this.mContext = mContext;
        this.spinnerNames = spinnerNames;
        this.spinnerImages = spinnerImages;
    }


    @Override
    public View getDropDownView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {

            LayoutInflater inflater = (LayoutInflater)mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            View row = inflater.inflate(R.layout.x_custom_spinner,null);
            TextView tvSpinnerText = row.findViewById(R.id.tvSpinnerText);
            ImageView ivSpinnerImage = row.findViewById(R.id.ivSpinnerImage);

            tvSpinnerText.setText(spinnerNames[position]);
            ivSpinnerImage.setImageResource(spinnerImages[position]);

        return row;
    }

    @NonNull
    @Override
    public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {

        LayoutInflater inflater = (LayoutInflater)mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View row = inflater.inflate(R.layout.x_custom_spinner,null);
        TextView tvSpinnerText = row.findViewById(R.id.tvSpinnerText);
        ImageView ivSpinnerImage = row.findViewById(R.id.ivSpinnerImage);

        tvSpinnerText.setText(spinnerNames[position]);
        ivSpinnerImage.setImageResource(spinnerImages[position]);

        return row;
    }
}

Added a xml file accordingly:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:orientation="horizontal"
    >

    <ImageView
        android:id="@+id/ivSpinnerImage"

        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="3"

        android:padding="5dp"
        android:src="@drawable/artifact"
        />
    <TextView
        android:id="@+id/tvSpinnerText"

        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="7"
        android:gravity="center"

        android:text="Accessory"
        android:textSize="18sp"

        />

</LinearLayout>

And after that I edited my mainActivity as follows:

[..]

  private xCustomSpinnerAdapater spinnerAdapter;
    private String[] spinnerNames = {"All", "Black", "Blue", "Green", "Red"};
    private  int[] spinnerImages = {R.drawable.artifact, R.drawable.black, R.drawable.blue, R.drawable.green, R.drawable.red};


[..]

protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_spell);
        
        spinnerSpells = findViewById(R.id.spellSpinner);
        spinnerAdapter = new xCustomSpinnerAdapater(this, spinnerNames,spinnerImages);
        spinnerSpells.setAdapter(spinnerAdapter);


        spinnerSpells.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> adapterView, View view, int i, long l) {
                Toast.makeText(getApplicationContext(),spinnerNames[i],Toast.LENGTH_LONG).show();
               [...]
            }

            @Override
            public void onNothingSelected(AdapterView<?> adapterView) {
                [...]
        });

The useage of layout_width = "match_parent" in the xml file within in the Linearlayout solved my problem pretty much.

With best regards CG

score 0 · Answer 2 · edited Oct 05 '18 at 08:04

0

Use attribute in xml

    android:dropDownWidth="fill_parent| match_parent| wrap_content"
    android:spinnerMode="dropdown"

For More Click : https://developer.android.com/reference/android/widget/Spinner.html#setDropDownWidth(int)

edited Oct 05 '18 at 08:04

Gowthaman M

8,057
8
35
54

answered Oct 05 '18 at 05:35

Pramila Shankar

396
4
10

Its not about making the dropdownWidth longer. Its about the items be clickable at any point of the dropdown, not just the text. Sorry this does not help me. – mrmeaaan Oct 05 '18 at 11:13
@Christian.gruener could you please just try changing "ArrayAdapter < CharSequence > adapter" to "ArrayAdapter < String > adapter" I guess the array file you have created those could be string array may be something like this " Under Graduate Post Graduate " could you please check this.. just a sec I will share my answer – Pramila Shankar Oct 05 '18 at 13:00
And using ArrayAdapter you don't need to convert array item to string after it is selected as you are using '' spinnerSpells.getSelectedItem().toString() " – Pramila Shankar Oct 05 '18 at 13:36
Chainging it to did give me an error since It expects to get a CharSequence. Honestly, I am really confused by that and did not figure out what the problem is or why the arraystring has to be CharSequence. – mrmeaaan Oct 07 '18 at 16:05
Is it possible to reach you through mail.. So that i can share you some similar code which i have used in most applications i have done. And you might have got any errors in logs please if its available please share those also. – Pramila Shankar Oct 07 '18 at 18:46
Sure. give me your e-mail and I will hit you up with the logs. – mrmeaaan Oct 08 '18 at 01:17
pramila.shankar99@gmail.com – Pramila Shankar Oct 08 '18 at 11:34
@christian.gruener that's great !! – Pramila Shankar Oct 13 '18 at 04:56

score 0 · Answer 3 · answered Oct 05 '18 at 05:36

use a custom XML file for your spinner item.

say spinner_item.xml and give the customized text size and color if u want

<?xml version="1.0" encoding="utf-8"?>

<TextView  
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" 
android:layout_height="wrap_content"
android:textSize="20sp"
android:gravity="left"  
android:textColor="#FF0000"         
android:padding="5dip"
/>

use this file to show your spinner items like:

ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, 
R.layout.spinner_item,list);

This is not working aswell. As I said before It is not about getting the spinner to work. It is about the ability to click on the labels which at the moment (see picture) is just the small width of the words and not the whole width. — mrmeaaan, Oct 08 '18 at 01:16

score 0 · Answer 4 · answered Oct 05 '18 at 05:36

0

Create a separate layout for spinner textview

R.layout.spinner_text

<TextView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@android:id/text1"
    android:maxLines="1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textSize="your_size_in_dp" />

and set your adapter as follows

ArrayAdapter < CharSequence > adapter = ArrayAdapter.createFromResource(spellActivity.this, R.array.dropdownCategory, R.layout.spinner_text);

answered Oct 05 '18 at 05:36

karan

8,637
3
41
78

This is not working aswell. As I said before It is not about getting the spinner to work. It is about the ability to click on the labels which at the moment (see picture) is just the small width of the words and not the whole width. Thanks for your help though. – mrmeaaan Oct 08 '18 at 01:17

score 0 · Answer 5 · answered Oct 05 '18 at 13:41

spinner array list Let it be 'dropdownCategory.xml'

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="dropdownCategory">
        <item>All</item>
        <item>Black</item>
        <item>Blue</item>
        <item>Green</item>
        <item>Red</item>
    </string-array>
</resources>

layout having a spinner

<android.support.v7.widget.AppCompatSpinner
 android:id="@+id/spellSpinner"
 android:layout_width="0dp"
 android:layout_height="match_parent"
 android:layout_weight="1"
 android:layout_marginStart="10dp"
 android:layout_marginEnd="10dp"
 android:dropDownWidth="wrap_content"
 android:spinnerMode="dropdown"
 android:popupBackground="#fff"
 android:background="#8A8A8A"/>

In activity.java class within onCreate

Spinner spinnerSpells = findViewById(R.id.spellSpinner);
ArrayAdapter<String> adapter = new ArrayAdapter<String>(spellActivity.this, R.array.dropdownCategory, android.R.layout.simple_spinner_item);
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
spinnerSpells.setAdapter(adapter);

spinnerSpells.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
@Override
public void onItemSelected(AdapterView<?> adapterView, View view, int i, long l) {
 // do something [...]
 }

@Override
public void onNothingSelected(AdapterView<?> adapterView) {
   // do something [...]
});

I wish this will help you out

Sadly this did not help. " new ArrayAdapter(spellActivity.this, *R.array.dropdownCategory, android.R.layout.simple_spinner_item*);" The fat one just give me errors since Java "expect resources of type layout.." — mrmeaaan, Oct 07 '18 at 16:08

Give spinner items the width of its dropdown

5 Answers5

Linked