Something's wrong in Corner radius Android

Question

I'm making my own search view for Android 2.3.

I have.

• LinearLayout (Horizontal)
• AutoCompleteTextView
• ImageButton

I added the button and AutoCompleteTextView to LinearLayout.

I want to put a corner radius in my own control like the image shown below.

I set this drawable to ImageButton

<selector xmlns:android="http://schemas.android.com/apk/res/android" >
 <item android:state_pressed="true" >
    <shape>
        <solid
            android:color="#27AFE0" />
        <stroke
            android:width="0.5dp"
            android:color="#000000" />
        <corners
            android:topRightRadius="10dp" android:bottomRightRadius="10dp"
android:topLeftRadius="0.1dp"
            android:bottomLeftRadius="0.1dp" />
        <padding
            android:left="10dp"
            android:top="10dp"
            android:right="10dp"
            android:bottom="10dp" />
    </shape>
</item>
<item>
    <shape>
        <solid android:color="#D3DBDE"/>
        <stroke
            android:width="0.5dp"
            android:color="#000000" />
        <corners
            android:topRightRadius="10dp" android:bottomRightRadius="10dp"
android:topLeftRadius="0.1dp"
            android:bottomLeftRadius="0.1dp" />
        <padding
            android:left="10dp"
            android:top="10dp"
            android:right="10dp"
            android:bottom="10dp" />
    </shape>
</item>

drawable to AutoCompleteText

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <solid android:color="#D3DBDE"/>
        <stroke android:width="0.5dp" android:color="#000000"/>
        <corners android:topLeftRadius="10dp"
            android:bottomLeftRadius="10dp"
            android:topRightRadius="0.1dp"
            android:bottomRightRadius="0.1dp"/>
    </shape>
</item>

But when I run this in android 2.3 this is the output (Emulator and Real Device)

If I run also in Android 4.0 . It works fine.

Question is, what's wrong in my code? Or There's bug in Android 2.3?

Answer 1

Ok so here is the deal this ticked me off as well. There are 2 things with this.

In your ImageButton Selector, you seemed to copy the attributes for the right corners twice in each corner tag.

The second is a bug in android up until version 3.0. When specifying the corners separately, the bottom left and right corners get flipped.

http://code.google.com/p/android/issues/detail?id=9161

I have extracted the values out to dimens and put them in two different files,

res/values/corners.xml - with the reversed stuff

res/values-v12/corners.xml - with the sane values in them.

Answer 2

There is a bug in earlier versions (earlier than ICS i.e. 4.0) of android, where they have incorrectly implemented 'corners' attribute of 'Shape' class. So, to get the correct kind of corners on all versions, you will have to write a condition which checks the target version and accordingly you can set the correct background. A method something like this will solve your problem -

/** * handling the bug in Pre ICS versions with corner element of Shape class * */

private void getPreICSButtonBackground() {
    if(Build.VERSION.SDK_INT >= 4.0){
        leftButton.setBackgroundDrawable(getResources().getDrawable(R.drawable.btn_rounded_left));
        rightButton.setBackgroundDrawable(getResources().getDrawable(R.drawable.btn_rounded_right));
    }
}

Where in 'R.drawable.btn_rounded_left' corners are implemented like

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

and if it is running on earlier versions, then set the background having corners as

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

Similarly do for the right side Button. Hope this solves your problem