LoginSignup
5
2

More than 5 years have passed since last update.

Android 4.4 (KitKat)でCardView内に余白が生まれてしまう問題

Posted at

AndroidアプリでCardViewを使うと、Android4.4(KitKat)以前の端末でカード内に余白が生まれてしまう問題に遭遇したのですが、解決できたので共有します。

起きたこと

CardViewを配置したアプリを動作確認していると、Android5.0(Lollipop)では問題なかったのですが、Android4.4(KitKat)ではCardViewの内側に、指定した角丸半径(cardCornerRadius)に合わせて余白が生まれてしまいました。

Android5.0 Android4.4
5.0-Lollipop.png 4.4-Kitkat.png

※わかりやすさのために背景色を黒にし、角丸半径も大きめにしています。

解決法

CardViewドキュメント(https://developer.android.com/reference/android/support/v7/widget/CardView
)を見ると、

Due to expensive nature of rounded corner clipping, on platforms before Lollipop, CardView does not clip its children that intersect with rounded corners. Instead, it adds padding to avoid such intersection (See setPreventCornerOverlap(boolean) to change this behavior).

とあります。「Lollipop未満だと子要素の角丸切り取りはコスト高いから代わりに余白入れますよ!」的な意味だと思います。
親切にもその挙動は変えられるようになっているようで、文中に登場するsetPreventCornerOverlapの説明を読んでみました。
すると、この問題を解決できそうだったのでxmlでの記述法も調べて1試してみたらこうなりました。

Android5.0 Android4.4
5.0-Lollipop-no-padding.png 4.4-KitKat-no-padding.png

※上がcardPreventCornerOverlap="true"、下がcardPreventCornerOverlap="false"です。

Android4.4では子要素のオーバーラップした部分が切り取られていないので、ヘッダー用に色をつけた部分は角が四角くなっていますが、これはヘッダー用のView自体も角丸になるようにshapeも指定すれば2解決するはずです(今回はやっていませんが…)。

GitHubリポジトリはこちらです。
https://github.com/remew/CardViewExample


  1. card_view:cardPreventCornerOverlap="false"でいけました 

  2. 参考:https://qiita.com/masaibar/items/3df3ebbb981cd274fe78 

5
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
2