CardViewコーナー半径

95

CardViewの上部にコーナー半径のみを持たせる方法はありますか？

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="10dp"
    >
android  android-appcompat  android-cardview 
— スクイーズ
ソース

回答:

119

AndroidCardViewクラスを拡張しようとしない限り、からその属性をカスタマイズすることはできませんXML。

それにもかかわらず、その効果を得る方法があります。

CardView内側を別の内側に配置CardViewし、外側に透明な背景を適用して、CardViewその角の半径（"cornerRadios = 0dp"）を削除します。CardViewたとえば、インナーのcornerRadius値は3dpになります。次に、marginTopを内側に適用して、CardViewその下限が外側によってカットされるようにしますCardView。このようにして、インナーの下隅の半径CardViewが非表示になります。

XMLコードは次のとおりです。

 <android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view_outer"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:layout_gravity="center"
    card_view:cardBackgroundColor="@android:color/transparent"
    card_view:cardCornerRadius="0dp"
    card_view:cardElevation="3dp" >

    <android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view_inner"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:layout_marginTop="3dp"
        card_view:cardBackgroundColor="@color/green"
        card_view:cardCornerRadius="4dp"
        card_view:cardElevation="0dp" >
    </android.support.v7.widget.CardView>
</android.support.v7.widget.CardView>

そして、視覚効果は次のとおりです。

上部にのみ角が丸いCardView

常にコンテンツをインナーに入れてくださいCardView。外側のCardViewは、内側の下部の丸い角を「隠す」目的でのみ機能しますCardView。

— joao2fast4u
ソース
8
影が正しくないことに注意してください（下隅の影はまだ丸みを帯びています）。また、前景セレクターはより顕著に正しくありません。
— ataulm 2015年
@shreedhar bhatが説明した簡単な方法の方が良いと思います
— Matei Suica
たとえば、cardCornerRadiusのデフォルト値は何ですか？それは4dpですか？
— Androidの開発者
なぜみんながこれを答えとしてマークしたのかわかりません。これは正しい答えではありません。これを試しましたが、本来の動作をしていません。
— Visal Varghese
42 
dependencies: compile 'com.android.support:cardview-v7:23.1.1'

<android.support.v7.widget.CardView
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:elevation="12dp"
    android:id="@+id/view2"
    app:cardCornerRadius="40dp"
    android:layout_centerHorizontal="true"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thicknessRatio="1.9">
    <ImageView
        android:layout_height="80dp"
        android:layout_width="match_parent"
        android:id="@+id/imageView1"
        android:src="@drawable/Your_image"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true">
    </ImageView>
</android.support.v7.widget.CardView>
— shreedhar bhat
ソース
8
このコードブロックが何をするのか説明していただけますか？私は、XMLプロパティについて説明するすべてのリソースを見つけることができないようinnerRadius、shapeとthicknessRatio
— atjua
2
のみ app:cardCornerRadius="40dp"機能します。
— RumitPatel19年
27

MaterialCard公式のマテリアルコンポーネントライブラリに含まれている標準を使用できます。

レイアウトでの使用：

<com.google.android.material.card.MaterialCardView
        style="@style/MyCardView"
        ...>

スタイルでshapeAppearanceOverlay属性を使用して形状をカスタマイズします（デフォルトのコーナー半径は4dp）

  <style name="MyCardView" parent="@style/Widget.MaterialComponents.CardView">
    <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.MaterialCardView.Cut</item>
  </style>


  <style name="ShapeAppearanceOverlay.MaterialCardView.Cut" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSizeTopRight">8dp</item>
    <item name="cornerSizeTopLeft">8dp</item>
    <item name="cornerSizeBottomRight">0dp</item>
    <item name="cornerSizeBottomLeft">0dp</item>
  </style>

次のものも使用できます。

<com.google.android.material.card.MaterialCardView
     app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MaterialCardView.Cut"
     ...>

結果は次のとおりです。

ここに画像の説明を入力してください

— ガブリエレマリオッティ
ソース
これはTabLayoutでは機能しません。コーナータブが丸くない。私の要件は、タブの上部の角だけを丸くし、下部を正方形のままにすることです。これで私を助けてくれませんか？
— タラ
2
これを単一のコンポーネントにのみ適用する場合は、カスタムスタイルを必要とせずに、形状の外観オーバーレイをXMLで直接適用できます。 app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MaterialCardView.Cut"
— アフィアン
8

カードが画面の一番下にあるときに、それを実現する方法の例があります。誰かがこの種の問題を抱えている場合は、次のようなことをしてください。

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="-5dp"
    card_view:cardCornerRadius="4dp">

    <SomeView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp">

    </SomeView>

</android.support.v7.widget.CardView>

カードビューの下部マージンは負です。カードビュー内のビューは同じですが、下マージンは正です。このように、丸みを帯びた部分は画面の下に隠されますが、内側のビューにはカウンターマージンがあるため、すべてがまったく同じに見えます。

— コラ
ソース
6

このドローアブルxmlを使用して、cardviewの背景として設定できます。 

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ffffffff"/>

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

    <padding android:left="1dp"
        android:top="1dp"
        android:right="1dp"
        android:bottom="1dp"
        />

    <corners 
        android:topLeftRadius="7dp"
        android:topRightRadius="7dp"/>
</shape>
— スレンダークマール
ソース
これは、レイアウトを取る必要があるcardViewでは機能しません。線形または相対的で、背景を設定します。その後、それは動作します。
— サレンダークマール2017
1
しかし、シャドウ効果はどうですか？
— Ravi Rajput 2017
そのためには、レイヤーリストを使用できます。このリンクを確認してください。
— サレンダークマール2017
@SurenderKumar aree bhaii bhaii bhaaiii：D：D
— Abhishek
6

私はカスタムの丸い角の位置にドローアブルライブラリを書きました、それはこのように見えます：

example.png

このlibはここで入手できます：

https://github.com/mthli/Slice

— mthli
ソース
2

あなたは2つのことをする必要があります：

1）電話 setPreventCornerOverlap(false) CardViewをます。

2）丸めて置くImageviewをCardView内に配置します

イメージビューの丸めについても同じ問題があったので、コーナーごとに異なる半径を設定できるライブラリを作成しました。ようやく、以下のような結果が得られました。

https://github.com/pungrue26/SelectableRoundedImageView

CardView内の丸められたImageView

— 김준호
ソース
1
そして、それはあなたがあなたのアンドロイドアプリをiosに変える方法です:)
— AmeyaB 2017年
0

ライブラリを使用できます：OptionRoundCardview

ここに画像の説明を入力してください

— qinmiao
ソース
これは丸みを帯びた角を示していません...私はAPI> 23を使用しています
— Ravi Rajput 2017
十分なマージンスペースを追加しますか？
— qinmiao 2017
親と一致する子ビューはありません
— Ravi Rajput 2017
マージンはそこにあります
— Ravi Rajput 2017
このライブラリはbackground-colorapp：optRoundCardBackgroundColor = "@ color / gray"で機能しません。コーナー半径の影響が削除されます
— Kishan Donga
0

ImageViewをCardView内に配置し、それらのプロパティをImageViewに追加できます。

android:cropToPadding="true"
android:paddingBottom="15dp"

そうすれば、丸みを帯びた下隅を取り除くことができますが、これには画像のごく一部を切り落とすという代償が伴うことに注意してください。

— omzer
ソース
0

注：これは、下部のみで丸みを帯びたコーナーを実現し、上部で通常のコーナーを実現する場合の回避策です。カードビューの四隅すべてに異なる半径を設定する場合、これは機能しません。そのためにマテリアルカードビューを使用するか、サードパーティのライブラリを使用する必要があります。

これが私にとってうまくいったように見えたものです：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="#F9F9F9">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="@drawable/profile_bg"/>

    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/cvProfileHeader"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardCornerRadius="32dp">
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="280dp"
            android:orientation="vertical"
            android:background="@drawable/profile_bg"
            android:id="@+id/llProfileHeader"
            android:gravity="center_horizontal">

            <!--Enter your code here-->

        </LinearLayout>
    
    </androidx.cardview.widget.CardView>

</RelativeLayout>

全部で2つのカードビューがあります。2番目のカードビューは、角が丸く（通常どおりすべての側面に）、その下に他のすべてのサブビューを保持するカードビューです。その上の最初のカードビューも同じレベル（標高）にあり、同じ背景を持っていますが、2番目のカードビューの高さの約半分であり、丸い角はありません（通常の鋭い角だけです）。このようにして、下部の部分的に丸みを帯びたコーナーと上部の通常のコーナーを実現することができました。ただし、4つの側面すべてについて、マテリアルカードビューを使用する必要がある場合があります。

これを逆にして、上部の角を丸くし、下部の角を通常にすることができます。つまり、最初のカードビューの角を丸くし、2番目のカードビューの角を通常にします。

— マックス
ソース
-1

AndroidStudioでそれを実現する最も簡単な方法を以下に説明します。

ステップ1：
で依存関係にある行の下に書き込みbuild.gradle：

compile 'com.android.support:cardview-v7:+'

ステップ2：
を統合するために、xmlファイルに以下のコードをコピーしますCardView。

以下のためにcardCornerRadius仕事に、親のレイアウトに線の下に含めるようにしておいてください。 xmlns:card_view="http://schemas.android.com/apk/res-auto"

また、プロパティを使用するcard_viewための名前空間として使用することを忘れないでくださいcardCornerRadius。

例えば ​​： card_view:cardCornerRadius="4dp"

XMLコード：

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view_outer"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:layout_gravity="center"
    card_view:cardBackgroundColor="@android:color/transparent"
    card_view:cardCornerRadius="0dp"
    card_view:cardElevation="3dp" >

    <android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view_inner"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:layout_marginTop="3dp"
        card_view:cardBackgroundColor="@color/green"
        card_view:cardCornerRadius="4dp"
        card_view:cardElevation="0dp" >
    </android.support.v7.widget.CardView>

</android.support.v7.widget.CardView>
— 神話
ソース
4
彼はそれを一番上に置きたいだけです。
— ハイゼンベルク
2
これはこの質問への答えではありませんが、名前空間に関する驚くべき問題を見つけるのに大いに役立ちました！:)
— フラグメント
1
これは特定の質問に対する答えではありませんが、多くのユーザーに役立ちました。
— 神話
-1

これを実現する簡単な方法は次のとおりです。

1.角が丸いカスタム背景リソース（長方形など）を作成します。

2.コマンドを使用してこのカスタム背景を設定します-

cardView = view.findViewById(R.id.card_view2);
cardView.setBackgroundResource(R.drawable.card_view_bg);

これは私のために働いた。

XML私は左上と右下の半径で作られたレイアウト。

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/white" />
<corners android:topLeftRadius="18dp" android:bottomRightRadius="18dp" />
</shape>

あなたの場合、topLeftRadiusとtopRightRadiusだけを変更する必要があります。

カードビューの隅と重なって色が異なるレイアウトがある場合は、レイアウトに別の背景リソースファイルが必要になる可能性があり、xmlでこの背景リソースをレイアウトに設定します。

上記の方法を試してテストしました。これがお役に立てば幸いです。

— アンキット・デシュムク
ソース
-2

プログラムでカードの背景を設定する場合はcardView.setCardBackgroundColor()、使用するのではなくcardView.setBackgroundColor()使用するようにapp:cardPreventCornerOverlap="true"し、cardView.xmlで使用するようにしてください。それは私のためにそれを修正しました。

ところで、上記のコード（引用符で囲まれている）はKotlinであり、Javaではありません。Javaを使用している場合は、同等のJavaを使用してください。

— ジョセフマガラ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.