Android Spinner Custom Background Cross Version Behaviour

Question

I am attempting to implement a custom background on an android spinner, and I have done so successfully. However, a odd behaviour appears when testing this cross version. Both the left and right stroke disappear and appear "cut off" and the radius is non existent also.

Screenshots:

4.4.2 (i.e. intended)

enter image description here

4.4.4 (i.e. actual)

enter image description here

I would like to have both to display as 4.4.2. Help?

Code:

login.xml

        <Spinner
            android:id="@+id/login_domains"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:background="@drawable/bootstrap_group_edittext_top"
            android:paddingTop="12dp"
            android:paddingBottom="12dp"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:layout_marginTop="25dp"
            />

        <EditText
            android:id="@+id/login_username"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/bootstrap_group_edittext_middle"
            android:hint="@string/placeholder_username"
            android:paddingTop="12dp"
            android:paddingBottom="12dp"
            android:paddingLeft="18dp"
            android:paddingRight="18dp"
            android:maxWidth="300dp"
            android:minWidth="300dp"
            />

        <EditText
            android:id="@+id/login_password"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/bootstrap_group_edittext_bottom"
            android:hint="@string/placeholder_password"
            android:paddingTop="12dp"
            android:paddingBottom="12dp"
            android:paddingLeft="18dp"
            android:paddingRight="18dp"
            android:layout_marginBottom="10dp"
            android:inputType="textPassword"
            android:maxWidth="300dp"
            android:minWidth="300dp"
            />

        <Button
            android:id="@+id/login_action_button"
            android:background="@drawable/ee_yellow_button"
            android:text="@string/splash_login_btn_login"
            android:textColor="#000000"
            android:textStyle="normal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:maxWidth="300dp"
            android:minWidth="300dp" />

bootstrap_group_edittext_top.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <stroke android:width="1dp"
        android:color="#CCCCCC" />

    <corners
        android:bottomLeftRadius="0dp"
        android:bottomRightRadius="0dp"
        android:topLeftRadius="4dp"
        android:topRightRadius="4dp"/>

    <gradient
        android:type="linear"
        android:angle="-90"
        android:centerColor="#FFFFFFFF"
        android:startColor="#dddddd"
        android:endColor="#FFFFFF"
        android:centerY="2%"/>
</shape>

score 0 · Accepted Answer · edited May 23 '17 at 12:20

I managed to find why with the help of a colleague. Because I was using fixed width for the Spinner, the bounds of the background were being restricted. I was using this as I was attempting to achieve a "maxWidth" definition.

I solved this by creating a container similar to this answer and changing the child elements to have android:layout_width of match_parent and adding a margin of 10dp on the left and right to each to prevent clipping.

Full Code (I have removed package for security):

        <com.yourpackage.views.BoundedLinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:minWidth="300dp"
            app_name:bounded_width="300dp">

            <TextView
                android:id="@+id/login_error_msg"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:background="@drawable/bootstrap_alert_error"
                android:visibility="gone"
                android:textColor="#a94442"
                android:layout_marginRight="10dp"
                android:layout_marginLeft="10dp"
                />

            <Spinner
                android:id="@+id/login_domains"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/bootstrap_group_edittext_top"
                android:paddingTop="12dp"
                android:paddingBottom="12dp"
                android:paddingLeft="10dp"
                android:paddingRight="10dp"
                android:layout_marginTop="25dp"
                android:layout_marginRight="10dp"
                android:layout_marginLeft="10dp"
                />

            <EditText
                android:id="@+id/login_username"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/bootstrap_group_edittext_middle"
                android:hint="@string/placeholder_username"
                android:paddingTop="12dp"
                android:paddingBottom="12dp"
                android:paddingLeft="18dp"
                android:paddingRight="18dp"
                android:layout_marginRight="10dp"
                android:layout_marginLeft="10dp"
                />

            <EditText
                android:id="@+id/login_password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/bootstrap_group_edittext_bottom"
                android:hint="@string/placeholder_password"
                android:paddingTop="12dp"
                android:paddingBottom="12dp"
                android:paddingLeft="18dp"
                android:paddingRight="18dp"
                android:layout_marginRight="10dp"
                android:layout_marginLeft="10dp"
                android:layout_marginBottom="10dp"
                android:inputType="textPassword"
                />

            <Button
                android:id="@+id/login_action_button"
                android:background="@drawable/ee_yellow_button"
                android:text="@string/splash_login_btn_login"
                android:textColor="#000000"
                android:textStyle="normal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="15dp"
                android:layout_marginRight="10dp"
                android:layout_marginLeft="10dp" />

            <TextView
                android:id="@+id/login_need_access"
                android:gravity="center"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/mee_login_need_access"
                android:layout_marginTop="25dp"
                android:textColor="#FFFFFFFF"
                />
        </com.yourpackage.views.BoundedLinearLayout>

Android Spinner Custom Background Cross Version Behaviour

1 Answers1