Question

I have got CheckedTextView selector:

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

<item android:drawable="@drawable/checkbox_checked" android:state_checked="true"/>
<item android:drawable="@drawable/checkbox_unchecked" android:state_checked="false"/>

</selector>

When I have 2 such checked text views one below another, the first is unchecked, the other is checked, it looks like that:

You can notice, that border in unchecked state is wider as compared to checked state. As per my resources, these borders are of the same width, but checked resource is wider due to extra pixels required to draw orange checkmark.

How to make borders look same? Is there more efficient way than use RelativeLayout + TextView + Checkbox?

---

UPDATE 1, layout:

    <CheckedTextView
        android:id="@+id/saveVideoOnServer"
        style="@style/talCell.textView.checked"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/saveVideoOnServer" />
        android:background="@android:color/transparent"

    <CheckedTextView
        android:id="@+id/showMyPosition"
        style="@style/talCell.textView.checked"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:checked="true"
        android:text="@string/showMyPosition" />

They are inside vertical linear layout. I didnt post whole layout, cause it is 100+ lines.

Answer 1

You need to make the two images the same width. In your questions you mention, that the borders are the same width. If you now simply make the not checked image wider by adding transparent pixels everything should work.

To summarize: You need two images of the same size with same size and same position borders.

The Android Source does the same, have a look at the following two checkbox images: They have the same size (better visible on the github site: not checked, checked)