How to customize a Spinner in Android
I want to add a custom height to the dropdown of a Spinner
, say 30dp, and I want to hide the dividers of the dropdown list of Spinner
.
So far I tried to implement following style to the Spinner
:
<style name="spinner_style">
<item name="android:paddingLeft">0dp</item>
<item name="android:dropDownWidth">533dp</item>
<item name="android:showDividers">none</item>
<item name="android:dividerHeight">0dp</item>
<item name="android:popupBackground">@drawable/new_bg</item>
<item name="android:dropDownHeight">70dp</item>
<item name="android:scrollbarAlwaysDrawVerticalTrack">true</item>
<item name="android:dropDownSelector">@android:color/white</item>
</style>
and the code of my spinner is :
<Spinner
android:id="@+id/pioedittxt5"
android:layout_width="543dp"
android:layout_height="63dp"
android:layout_toRightOf="@+id/piotxt5"
android:background="@drawable/spinner"
style="@style/spinner_style"
android:dropDownVerticalOffset="-53dp"
android:spinnerMode="dropdown"
android:drawSelectorOnTop="true"
android:entries="@array/travelreasons"
android:prompt="@string/prompt" />
But nothing seems to be working.
Create a custom adapter with a custom layout for your spinner.
Spinner spinner = (Spinner) findViewById(R.id.pioedittxt5);
ArrayAdapter<CharSequence> 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
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
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
<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
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.
<style name="spinnerItemStyle" parent="android:Widget.TextView.SpinnerItem">
</style>
<style name="spinnerDropDownItemStyle" parent="android:TextAppearance.Widget.TextView.SpinnerItem">
</style>
You can create fully custom spinner design like as
Step1: In drawable folder make background.xml for a border of the spinner.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@android:color/transparent" />
<corners android:radius="5dp" />
<stroke
android:width="1dp"
android:color="@android:color/darker_gray" />
</shape>
Step2: for layout design of spinner use this drop-down icon or any image drop.png
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="3dp"
android:layout_weight=".28"
android:background="@drawable/spinner_border"
android:orientation="horizontal">
<Spinner
android:id="@+id/spinner2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:background="@android:color/transparent"
android:gravity="center"
android:layout_marginLeft="5dp"
android:spinnerMode="dropdown" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:src="@mipmap/drop" />
</RelativeLayout>
Finally looks like below image and it is everywhere clickable in round area and no need to write click Lister for imageView.
Step3: For drop-down design, remove the line from Dropdown ListView and change the background color, Create custom adapter like as
Spinner spinner = (Spinner) findViewById(R.id.spinner1);
String[] years = {"1996","1997","1998","1998"};
ArrayAdapter<CharSequence> langAdapter = new ArrayAdapter<CharSequence>(getActivity(), R.layout.spinner_text, years );
langAdapter.setDropDownViewResource(R.layout.simple_spinner_dropdown);
mSpinner5.setAdapter(langAdapter);
In layout folder create R.layout.spinner_text.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layoutDirection="ltr"
android:id="@android:id/text1"
style="@style/spinnerItemStyle"
android:singleLine="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="marquee"
android:paddingLeft="2dp"
/>
In layout folder create simple_spinner_dropdown.xml
<?xml version="1.0" encoding="utf-8"?>
<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/text1"
style="@style/spinnerDropDownItemStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="marquee"
android:paddingBottom="5dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="5dp"
android:singleLine="true" />
In styles, you can add custom dimensions and height as per your requirement.
<style name="spinnerItemStyle" parent="android:Widget.TextView.SpinnerItem">
</style>
<style name="spinnerDropDownItemStyle" parent="android:TextAppearance.Widget.TextView.SpinnerItem">
</style>
Finally looks like as
According to the requirement, you can change background color and text of drop-down color by changing the background color or text color of simple_spinner_dropdown.xml