Edited at

Androidバージョン17(JB-MR1)での「Custom RadioButton with Padding」の扱い

More than 1 year has passed since last update.

ナムです。自社アプリの実装するとき、RadioButtonをカスタマイズすることになり、そこでSamsung Galaxy S2 (4.0.4)での動き・表示がおかしくなったこと、とその対策について話したいと思うます。


前書き

利用したAppCompatバージョンは最新です。

compile 'com.android.support:appcompat-v7:22.1.1'

そこで、おかしい表示の例(ただし、オリジナルRadioButtonの使用例とカスタマイズRadioButtonを両方あげます。なんかオリジナルの場合は無事ですね。アヤシイ):

sample_1

一応Genymotionでのテスト画面もあげます。VMのAndroidバージョンを確認忘れないでください

sample_2

XMLとCustomRadioButtonのソースコードもあげます


  • CustomRadioButton.java

/**

* Created by eneim on 5/26/15.
*/

public class CustomRadioButton extends RadioButton {
public CustomRadioButton(Context context) {
super(context);
}

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

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

@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public CustomRadioButton(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
}
}


  • activity_radio_sample.xml

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

xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="horizontal"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="im.ene.lab.zzz.RadioSampleActivity">

<RadioGroup
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/activity_vertical_margin"
android:text="Test RadioGroup"/>

<im.ene.lab.zzz.widgets.CustomRadioButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="4dp"
android:layout_margin="@dimen/activity_vertical_margin"
android:text="RadioButton 1" />

<RadioButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="4dp"
android:layout_margin="@dimen/activity_vertical_margin"
android:text="RadioButton 2" />

<RadioButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="4dp"
android:layout_margin="@dimen/activity_vertical_margin"
android:text="RadioButton 3" />
</RadioGroup>

</FrameLayout>

styleなど何も触っていない


原因

ま〜、時間がないのでまた今度入れますが、今以下の記事から参考できると思います。

https://code.google.com/p/android/issues/detail?id=81495

AppCompatバージョンの違いに注意してください。


対策


tl,dr

Gistを作りました、参考になれると嬉しいです。

https://gist.github.com/eneim/54e38b400927ede077f0


詳細


なぜ?(WHY)

具体的な原因はまだですが、JB-MR1以前でのカスタマイズRadioButtonにはPaddingがあるとき、Buttonとテキスト間のパッディングが反映しないという問題があるはずです。


どうする?(HOW)

それに対する対策は、まず親クラス(CompoundButton)でセットしたDrawableを習得します。そこで習得したDrawableのサイズを利用して適切なpadding値を返すこと。(CompoundButton#setButtonDrawable(Drawable d)とCompoundButton#getCompoundPaddingLeft()を継承することの目的)

次に、xmlにpaddingを定義するかしないかの判定で、適切なpadding値を指定します(init() methodの目的)。


カスタマイズRadioButtonの形式がどうなります?(WHAT)

Gistをあげます

https://gist.github.com/eneim/54e38b400927ede077f0


結果

結果の画面だけをあげます


  • Samsung Galaxy S2

sample_3


  • Genymotion

sample_4


まとめ、今度の課題、追加など

xmlにpaddingを入れないと問題ないはずです。

実際にRadioButtonをカスタマイズすることがあるかどうか



そこでpaddingがあるかどうか

によって、この対策を検討することになると思います。

原因はさらに調査しなきゃ〜

パーフォマンスへの影響なども考えられますが、ないと思います。

カスタマイズすると、デフォルトのbuttonの色が変わりますね。僕の場合、RadioGroupに全てカスタマイズRadioButtonを使用するから、色が変わっても同じ色になりますので、大丈夫ですが、この点も注意する必要があります。

2.3の端末はもういい、最低の対応するバージョンをアップしましょう、最低でも4.1~は検討しています。

以上となります。参考になれると嬉しいです。