How to customize spinner box?

Question

I want spinner as dropdown like below images,

I created below like this

xml layout:

<Spinner
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="20dp"
        android:background="@drawable/edittext_shape"
        android:padding="10dp"
          android:paddingLeft="4dp"
        android:id="@+id/rol_type"
        android:layout_marginBottom="2dp">

Spinner shape

 <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item><layer-list>
            <item><shape>
                <gradient android:angle="90" android:startColor="@color/white" android:endColor="@color/appblue" />

                <stroke android:width="1dp" android:color="@color/block"  />

                <corners android:radius="4dp" />

               <!-- <padding android:bottom="3dp" android:left="3dp" android:right="3dp" android:top="3dp" />-->
            </shape></item>
            <item ><bitmap android:gravity="right|bottom|end" android:src="@drawable/drop_arrow"  android:tint="@color/red" />
            </item>
        </layer-list></item>

    </selector>

My output:

I want below like this please help me in this case:

Answer 1

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

<Spinner
    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">