Extend spinner with same design

I would like to extend the spinner class, but preserve the same look. If I just create a custom spinner class like (nothing special happening):

public class MySpinner extends Spinner {

    public MySpinner(Context context)
    { super(context); }

    public MySpinner(Context context, int mode)
    { super(context,mode); }

    public MySpinner(Context context, AttributeSet attrs)
    { super(context, attrs); }

    public MySpinner(Context context, AttributeSet attrs, int defStyle)
    { super(context, attrs, defStyle); }

    public MySpinner(Context context, AttributeSet attrs, int defStyleAttr, int mode)
    { super(context,attrs,defStyleAttr,mode); }
}

with XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"   android:layout_width="match_parent"
    android:layout_height="match_parent"     android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_main" tools:context=".MainActivity">

    <TextView android:text="Hello World!" android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

    <com.example.abc.testapplication.MySpinner android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/spinner1"/>
    <Spinner android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/spinner2"/>
</LinearLayout>

and in the onCreate of my activity I have (also nothing special I believe):

MySpinner spinner1 = (MySpinner) findViewById(R.id.spinner1);
Spinner spinner2 = (Spinner) findViewById(R.id.spinner2);
String[] itemList = new String[]{ "item1", "item2", "item3" };
ArrayAdapter<String> itemArray= new ArrayAdapter<String>(MainActivity.this,android.R.layout.simple_spinner_item, itemList);
itemArray.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);

spinner1.setAdapter(itemArray);
spinner2.setAdapter(itemArray);

then I end up with two different looking spinners:

Also, when clicking on the first (custom) spinner, a light-blue transparent rectangle appears shortly (like when clicking on a listview). When clicking on the second (not custom) spinner, the small triangle shortly turns red.

What am I missing to make these two spinners look the same?

That's tested on Sony Xperia SP, Android 4.3, API 18.

I had to extend from AppCompatSpinner not from Spinner and the two spinners look the same (same as the second spinner in the image).