How to move the Android Spinner drop down arrow closer to it's emitting text

Question

I need to set the drop down arrow closer to its emitting text element in Spinner. How can achieve this?

<Spinner android:id="@+id/spinner"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content" />

Paramagnetic

Answer 1

You can fix this by defining a custom background in xml, and then setting the arrow's margin from the right side.

Start by defining a layer-list with a rectangle background and a bitmap object for your arrow. You can make the arrow align to the center on the right side by setting its gravity, and you can move it towards the center by setting its right margin via the android:"right" attribute. Note that this won't dynamically move the arrow based on the length of text, but it should be a helpful first step.

spinner_background.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/color_white" />
            <corners android:radius="2.5dp" />
        </shape>
    </item>
    <item android:right="64dp">
         <bitmap 
             android:gravity="right|center_vertical"  
             android:src="@drawable/ic_spinner" />
    </item>
</layer-list>

Birl

Following two aspects may be of interest: 1.There is a closed bracket (>) missing after android:src="@drawable/ic_spinner". 2. The spinner_background.xml needs to be created in the drawable folder. – Leucite

This leads to errors " Caused by: android.view.InflateException: Binary XML file line #277 " – Yolandoyolane

Answer 2

This can be achieved by creating a custom layout for the selected spinner item custom_spinner_item.xml. I have added a TextView which displays the currently selected spinner item. The arrow icon is added in an ImageView. You can use any icon. The arrow icon moves depending on the length of the text which is not achieved by TheoKanning's answer. In fact you can completely modify the look of your spinner in this layout.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:orientation="horizontal">
    <TextView
        android:id="@+id/spinner_item_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"/>
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:src="@mipmap/ic_arrow_down"/>
</LinearLayout>

Create a custom spinner adapter and inflate the above view. Also set the text of your selected spinner item from your list by overriding the default getView() method.

public class CustomSpinnerAdapter extends ArrayAdapter<String> {
    LayoutInflater inflater;
    List<String> spinnerItems;

    public CustomSpinnerAdapter(Context applicationContext, int resource, List<String> spinnerItems) {
        super(applicationContext, resource, spinnerItems);
        this.spinnerItems = spinnerItems;
        inflater = (LayoutInflater.from(applicationContext));
    }
    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {
        view = inflater.inflate(R.layout.custom_spinner_item, null);
        TextView type = (TextView) view.findViewById(R.id.spinner_item_text);
        type.setText(spinnerItems.get(i));
        return view;
    }
}

Then instantiate the CustomSpinnerAdapter class and set it as your spinner's adapter. spinnerList is the list of items to be shown in the spinner.

CustomSpinnerAdapter customSpinnerAdapter = new CustomSpinnerAdapter(getContext(), android.R.layout.simple_spinner_item, spinnerList);
spinner.setAdapter(customSpinnerAdapter);

Christiachristian

It is used in CustomSpinnerAdapter in the getView() method to create the view - "view = inflater.inflate(R.layout.custom_spinner_item, null);" – Christiachristian

What issue are you facing? @ParamjitSinghRana – Christiachristian

This worked for me. But there's some kind of padding or margin on the right side of the icon (dropdown arrow). i.imgur.com/IYRU35y.png How to get rid of it? – Noni

@LuckMan: Could be a problem with the parent layout. Try changing the background colour of the different layouts to identify which one is having the extra space. – Christiachristian

I managed to fix it by adding android:background attribute and make it transparent (other colors worked too). By the way, is there a way to customize the dropdown items style? I want to match it with my app theme. Currently, it's using the default style: i.imgur.com/sWN4B21.png EDIT: Never mind, setDropDownViewResource did the trick. :) – Noni

Answer 3

Please follow this code and this would fulfill your requirements. I also did too much research to fulfill my requirements which were the same as yours.

So, adjust padding according to your need:

<Spinner android:id="@+id/spinner"    
  android:layout_width="wrap_content"    
  android:layout_height="wrap_content"    
  android:gravity="end"    
  android:paddingEnd="30dp"    
/>

Canikin

Answer 4

This layout will help you perfectly.

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="@dimen/dp5"
    android:background="@drawable/squre_gray_bg"
    android:paddingRight="@dimen/dp10">

    <Spinner
        android:id="@+id/ed_project_start"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp40"
        android:layout_marginTop="@dimen/dp5"
        android:textColor="@color/colorDarkGray" />
</FrameLayout>

Consternation