Spinner is not seen properly

Question

I have two spinner. They look like that. I don't know why dropdown menu icon is far away from texts.

(Chagned image after gravity attribute is set to "end")

In my activity_main.xml it is written:

<androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/map_root_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
android:background="@mipmap/map_bg"
android:orientation="vertical"
app:layoutDescription="@xml/map_scroll">

<FrameLayout
    android:id="@+id/map_top_panel_container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@mipmap/home_top"
    android:orientation="vertical"
    android:padding="20dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <Spinner
        android:id="@+id/map_spinner_sector"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="start|bottom"
        android:gravity="end"/>

    <Spinner
        android:id="@+id/map_spinner_sorting"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:gravity="end"/>


</FrameLayout>

...

</androidx.constraintlayout.motion.widget.MotionLayout>

SpinnerAdapter.java class:

public class SpinnerAdapter extends ArrayAdapter<String> {

public SpinnerAdapter(@NonNull Context context, ArrayList<String> items) {
    super(context,0, items);
}


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

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


private View initView(int position, View convertView, ViewGroup parent){
    if (convertView == null){
        convertView = LayoutInflater.from(getContext()).inflate(
                R.layout.spinner_item, parent, false
        );
    }

    TextView spinnerTextView = (TextView) convertView;
    spinnerTextView.setText(getItem(position));
    spinnerTextView.setGravity(Gravity.END); //This line is added later

    return convertView;
}
}

and spinner_item.xml file, which is the layout of spinner items:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<Spinner
    android:id="@+id/my_spinner"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

I am not experienced with Spinners. I am learning. I wonder why i encountered such a bug.

Not: I have EDITED the spinner_item.xml file :

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/spinner_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dp"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:background="@drawable/suggestions_bg"
android:textColor="@color/blue_popular" />

Answer 1

I just had a similar problem, to solve this I had to set the attribute gravity in spinner.
android:gravity="end" - this helps to display items next to the dropdown icon.

Next, I had to override getDropDownView in my adapter class in this way:

public View getDropDownView(int position, View convertView,ViewGroup parent) 
{
    View v = super.getDropDownView(position, convertView,parent);
    ((TextView) v).setGravity(Gravity.END);
    return v;
}

This helps to display items next to the dropdown icon when Spinner is expanded. Your spinner_item is also TextView so I think You can just copy and paste this function.

Answer 2

Your spinner_item.xml file shouldn't again contain Spinner, just a TextView would be enough but if you want a fancy layout, you can other widgets such ImageView. The following is the example of the simplest spinner_item.xml file.

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/custom_text_1"
    style="?android:attr/spinnerItemStyle"
    android:singleLine="true"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:ellipsize="marquee"
    android:textAlignment="inherit" />  

Now, get rid of implementation of SpinnerAdapter class.
We can use ArrayAdapter as adapter of Spinner like this :

// bind your spinner layout from file to a spinner object
Spinner spinner = findViewById(R.id.map_spinner_sector);

// string array which is the content of the spinner
// if you already have array or list object, then this 
// is not needed.
ArrayList<String> spinnerStringArray = ...; // populate the array backing your adapter

// if you have string array resources in file, 
// use ArrayAdapter.createFromResource() method to get your array adapter
ArrayAdapter<String> spinnerAdapter = new ArrayAdapter<String>(this,
                R.layout.spinner_item, spinnerStringArray);

spinner.setAdapter(spinnerAdapter);

// set listener to handle item selected event
spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
                Log.d("Item Selected : ", spinnerStringArray[position]);
            }

            public void onNothingSelected(AdapterView<?> parent) {
            }
        });