How to Customize a Spinner in Android

How to customize a Spinner in Android

Create a custom adapter with a custom layout for your spinner.

Spinner spinner = (Spinner) findViewById(R.id.pioedittxt5);
ArrayAdapter adapter = ArrayAdapter.createFromResource(this,
R.array.travelreasons, R.layout.simple_spinner_item);
adapter.setDropDownViewResource(R.layout.simple_spinner_dropdown_item);
spinner.setAdapter(adapter);

R.layout.simple_spinner_item

    android:id="@android:id/text1"
style="@style/spinnerItemStyle"
android:maxLines="1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="marquee" />

R.layout.simple_spinner_dropdown_item

    android:id="@android:id/text1"
style="@style/spinnerDropDownItemStyle"
android:maxLines="1"
android:layout_width="match_parent"
android:layout_height="?android:attr/dropdownListPreferredItemHeight"
android:ellipsize="marquee" />

In styles add your custom dimensions and height as per your requirement.

 


How to customize drop down menu for spinner?

When you create a spinner, you can assign two different templates to the display. One is for the selection and one is for the dropdown.

It's set in the data adapter for the spinner. Here is actual code we use:

    _spinDestination = (Spinner) findViewById(R.id.spinDestination);
ArrayAdapter adapter = new ArrayAdapter<>(this, R.layout.custom_spinner
, OrderDestRerouteDao.getList(_OrderDAO.getID(), _OrderDAO.getDestinationId()));
adapter.setDropDownViewResource(R.layout.support_simple_spinner_dropdown_item);
_spinDestination.setAdapter(adapter);

The dropdownviewresource is what you want to pay attention to here. It controls what the dropdown looks like.

Now inside your layout for the page, add these tags to your spinner:

android:dropDownHorizontalOffset = "?" 
android:dropDownVerticalOffset = "?"

where ? = an offset number (example: 50dp)

The layout change will offset your dropdown. To get any other styling of it (such as width) you'll require the custom template for it.

moved_the_dropdown

As per request, here's the complete xml for my spinner.

                
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="5dp">

android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/corner_shape"
android:orientation="vertical">

android:id="@+id/tvCaption"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginBottom="-5dp"
android:background="@drawable/upper_corner"
android:gravity="center"
android:text="@string/heading_order_reroute_page_title"
android:textColor="@android:color/white"
android:textSize="@dimen/heading_text_size"
android:textStyle="bold" />

android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/rectangle"
android:gravity="center_vertical"
android:orientation="horizontal" >

android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_weight="1"
android:orientation="horizontal">

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="@string/label_current_destination"
android:textSize="@dimen/caption_text_size"/>

android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginStart="5dp"
android:layout_weight="0.1"
android:contentDescription="@drawable/star"
android:src="@drawable/star"
android:visibility="invisible"/>



android:layout_width="0dp"
android:layout_weight="2"
android:orientation="vertical"
android:layout_height="wrap_content">

android:id="@+id/tvCurrentDestination"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_margin="5dp"
android:layout_weight="3"
android:focusable="false"
android:gravity="start|center_vertical"
android:paddingStart="10dp"
android:textSize="@dimen/caption_text_size"/>





android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/rectangle"
android:gravity="center_vertical"
android:orientation="horizontal" >

android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_weight="1"
android:orientation="horizontal">

android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.9"
android:gravity="center_vertical"
android:text="@string/label_new_destination"
android:textSize="@dimen/caption_text_size" />

android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginStart="5dp"
android:layout_weight="0.1"
android:contentDescription="@drawable/star"
android:src="@drawable/star" />



android:layout_width="0dp"
android:layout_weight="2"
android:orientation="vertical"
android:layout_height="wrap_content">

android:id="@+id/spinDestination"
style="@android:style/Widget.Spinner"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_margin="5dp"
android:dropDownHorizontalOffset = "?"
android:dropDownVerticalOffset = "?"
android:background="@drawable/bg_edit_text"
android:gravity="start|center_vertical"
android:paddingStart="10dp"
android:spinnerMode="dropdown" />





android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/divider_color" />

android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/rectangle"
android:gravity="center_vertical"
android:orientation="horizontal" >

android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_weight="1"
android:orientation="horizontal">

android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.9"
android:gravity="center_vertical"
android:text="@string/label_reroute_notes"
android:textSize="@dimen/caption_text_size" />

android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginStart="5dp"
android:layout_weight="0.1"
android:contentDescription="@drawable/star"
android:src="@drawable/star" />



android:layout_width="0dp"
android:layout_weight="2"
android:orientation="vertical"
android:layout_height="wrap_content">

android:id="@+id/etRerouteNotes"
android:layout_width="match_parent"
android:layout_height="120dp"
android:layout_margin="5dp"
android:background="@drawable/bg_edit_text"
android:gravity="top|start"
android:paddingStart="10dp"
android:inputType="textMultiLine"
android:scrollbars="vertical"
android:fadeScrollbars="false"
android:textSize="@dimen/edit_text_size" />





android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/divider_color" />

android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >

android:id="@+id/btnReroute"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="10dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="10dp"
android:layout_weight="1"
android:background="@drawable/btn_forward"
android:gravity="center"
android:paddingBottom="10dp"
android:paddingTop="10dp"
android:text="@string/btn_complete_order_reroute_caption"
android:textColor="@android:color/white"
android:textSize="@dimen/button_text_size"
android:textStyle="bold" />

android:id="@+id/btnCancel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="10dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="10dp"
android:layout_weight="1"
android:background="@drawable/btn_reject"
android:gravity="center"
android:paddingBottom="10dp"
android:paddingTop="10dp"
android:text="@string/btn_cancel_caption"
android:textColor="@android:color/white"
android:textSize="@dimen/button_text_size"
android:textStyle="bold" />






Android custom spinner SelectedItem

You can get the selected spinner item's text in the following way:

spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
@Override
public void onItemSelected(AdapterView adapterView, View view, int pos, long l) {
String selectedText=list.get(pos).getPlanCategorytext();
}

@Override
public void onNothingSelected(AdapterView adapterView) {

}
});

OR

String selectedItemText=list.get(spinner.getSelectedItemPosition()).getPlanCategorytext();

Where list is the arraylist with ItemData which you used above to populate the data in spinner.

Also about this:

String spinnerselection = categorySpinnerjava.getSelectedItem().toString();

You have to replace categorySpinnerjava.getSelectedItem().toString(); with list.get(spinner.getSelectedItemPosition()).getPlanCategorytext();

How to customize spinner box?

Try this:
I changed your background to style.
You can also extend this style and add your own elements https://developer.android.com/guide/topics/ui/look-and-feel/themes.html

    android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="20dp"
style="@android:style/Widget.Holo.Light.Spinner"
android:padding="10dp"
android:paddingLeft="4dp"
android:id="@+id/rol_type"
android:layout_marginBottom="2dp">

Android: Custom Spinner Layout

row.xml to set up the layout on each row (in this case: one image and text each row):


android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

android:id="@+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/icon"/>

android:id="@+id/weekofday"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

Java:

public class AndroidCustomSpinner extends Activity {

String[] DayOfWeek = {"Sunday", "Monday", "Tuesday",
"Wednesday", "Thursday", "Friday", "Saturday"};

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

Spinner mySpinner = (Spinner)findViewById(R.id.spinner);
ArrayAdapter adapter = new ArrayAdapter(this,
R.layout.row, R.id.weekofday, DayOfWeek);
mySpinner.setAdapter(adapter);
}
}


Related Topics



Leave a reply



Submit