CardView Corner Radius

95

Adakah cara agar CardView hanya memiliki radius sudut di bagian atas?

<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 
— meremas
sumber

Jawaban:

119

Kecuali jika Anda mencoba memperluas CardViewkelas Android , Anda tidak dapat menyesuaikan atribut itu dari XML.

Meskipun demikian, ada cara untuk mendapatkan efek tersebut.

Tempatkan bagian CardViewdalam yang lain CardViewdan terapkan latar belakang transparan ke bagian luar Anda CardViewdan hapus radius sudutnya ( "cornerRadios = 0dp"). Bagian dalam Anda CardViewakan memiliki nilai cornerRadius 3dp, misalnya. Kemudian terapkan marginTop ke bagian dalam Anda CardView, sehingga batas bawahnya akan terpotong oleh bagian luarnya CardView. Dengan cara ini, radius sudut bawah bagian dalam Anda CardViewakan disembunyikan.

Kode XML adalah sebagai berikut:

 <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>

Dan efek visualnya adalah sebagai berikut:

CardView dengan sudut membulat hanya di bagian atas

Selalu letakkan konten Anda di Batin Anda CardView. CardView luar Anda hanya berfungsi untuk "menyembunyikan" bagian bawah Rounded Corners bagian dalam CardView.

— joao2fast4u
sumber
8
Perhatikan bahwa bayangannya salah (bayangan sudut bawah masih membulat), dan pemilih latar depan akan lebih jelas salah.
— ataulm
Saya pikir cara mudah yang dijelaskan @shreedhar bhat lebih baik
— Matei Suica
Katakanlah, tahu apa nilai default untuk cardCornerRadius? apakah itu 4dp?
— Pengembang android
Saya tidak yakin mengapa semua orang menandai ini sebagai jawabannya. Ini bukanlah jawaban yang benar. Saya mencoba ini, tetapi tidak berfungsi sebagaimana mestinya.
— 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
sumber
8
Bisakah Anda menjelaskan apa yang dilakukan blok kode ini? Saya tidak bisa menemukan sumber yang menjelaskan tentang properti XML innerRadius, shapedanthicknessRatio
— atjua
2
Hanya app:cardCornerRadius="40dp"akan berhasil juga.
— Rumit Patel
28

Anda dapat menggunakan standar yang MaterialCarddisertakan dalam pustaka Komponen Material resmi .

Gunakan dalam tata letak Anda:

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

Dalam gaya Anda, gunakan shapeAppearanceOverlayatribut untuk menyesuaikan bentuk (radius sudut default adalah 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>

Anda juga bisa menggunakan:

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

Hasilnya:

masukkan deskripsi gambar di sini

— Gabriele Mariotti
sumber
ini tidak berfungsi dengan TabLayout. Tab pojok saya tidak membulat. Persyaratan saya adalah hanya sudut atas tab harus dibulatkan di mana bagian bawah harus tetap seperti persegi. bisakah kamu membantuku dalam hal ini?
— Tara
2
Jika Anda hanya menerapkan ini ke satu komponen, Anda dapat menerapkan overlay tampilan bentuk secara langsung dalam XML tanpa memerlukan gaya kustom. app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MaterialCardView.Cut"
— Affian
8

Ada contoh bagaimana mencapainya, ketika kartu berada di bagian paling bawah layar. Jika seseorang memiliki masalah seperti ini lakukan sesuatu seperti itu:

<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>

Tampilan Kartu memiliki margin bawah negatif. Tampilan di dalam Tampilan Kartu memiliki margin bawah yang sama, tetapi positif. Dengan cara ini, bagian yang membulat disembunyikan di bawah layar, tetapi semuanya terlihat persis sama, karena tampilan dalam memiliki margin penghitung.

— koras
sumber
6

Anda dapat menggunakan xml drawable ini dan menyetelnya sebagai latar belakang 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>
— Menyerah Kumar
sumber
Ini tidak akan bekerja dengan cardView yang Anda butuhkan untuk mengambil Layout, mis. Linear atau Relatif dan setel latar belakangnya. maka itu akan berhasil.
— Surender Kumar
1
tapi lalu bagaimana dengan efek bayangan?
— Ravi Rajput
Untuk itu Anda bisa menggunakan daftar lapisan. Cek link ini .
— Surender Kumar
@SurenderKumar aree bhaii bhaii bhaaiii: D: D
— Abhishek
2

Anda perlu melakukan 2 hal:

1) Hubungi setPreventCornerOverlap(false)CardView Anda.

2) Letakkan Imageview bulat di dalam CardView

Tentang pembulatan imageview Anda, saya memiliki masalah yang sama jadi saya membuat perpustakaan yang Anda dapat mengatur radius yang berbeda di setiap sudut . Akhirnya saya mendapatkan hasil yang saya inginkan seperti di bawah ini.

https://github.com/pungrue26/SelectableRoundedImageView

ImageView bulat di dalam CardView

— 김준호
sumber
1
Dan itulah cara Anda mengubah aplikasi android Anda menjadi ios :)
— AmeyaB
0

Anda bisa meletakkan ImageView Anda di dalam CardView, dan menambahkan properti tersebut ke ImageView:

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

Dengan cara itu Anda akan menghilangkan sudut bawah yang membulat, tetapi perlu diingat bahwa ini harus dibayar karena sebagian kecil gambar Anda terpotong.

— omzer
sumber
0

CATATAN: Ini adalah solusi jika Anda ingin mendapatkan sudut membulat di bagian bawah saja dan sudut biasa di bagian atas. Ini tidak akan berfungsi jika Anda ingin memiliki radius yang berbeda untuk keempat sudut tampilan kartu. Anda harus menggunakan cardview material untuk itu atau menggunakan beberapa perpustakaan pihak ketiga.

Inilah yang tampaknya berhasil untuk saya:

<?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>

Ada dua tampilan kartu. Tampilan kartu kedua adalah yang akan memiliki sudut membulat (di semua sisi seperti biasa) dan akan menampung semua subview lainnya di bawahnya. Tampilan kartu pertama di atasnya juga pada level yang sama (elevasi), dan memiliki latar belakang yang sama tetapi hanya sekitar setengah dari tinggi tampilan kartu kedua dan tidak memiliki sudut membulat (hanya sudut tajam biasa). Dengan cara ini saya dapat mencapai sebagian sudut membulat di bagian bawah dan sudut normal di bagian atas. Tapi untuk keempat sisinya, Anda mungkin harus menggunakan material cardview.

Anda dapat melakukan kebalikannya untuk mendapatkan sudut membulat di bagian atas dan yang biasa di bagian bawah, misalnya tampilan kartu pertama memiliki sudut membulat dan tampilan kartu kedua memiliki sudut biasa.

— Max
sumber
-1

Cara termudah untuk mencapainya di Android Studio dijelaskan di bawah ini:

Langkah 1:
Tulis baris di bawah ini dalam dependensi di build.gradle:

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

Langkah 2:
Salin kode di bawah ini ke dalam file xml Anda untuk mengintegrasikan file CardView.

Agar cardCornerRadiusberfungsi, pastikan untuk menyertakan baris di bawah ini dalam tata letak induk: xmlns:card_view="http://schemas.android.com/apk/res-auto"

Dan ingat untuk menggunakan card_viewnamespace untuk menggunakan cardCornerRadiusproperti.

Sebagai contoh : card_view:cardCornerRadius="4dp"

Kode 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>
— Mitos
sumber
4
Dia hanya menginginkannya di atas.
— Heisenberg
2
Padahal, ini bukan jawaban untuk pertanyaan ini, ini sangat membantu saya, untuk menemukan masalah luar biasa dengan namespace! :)
— Fragmen
1
Ini bukan jawaban untuk pertanyaan spesifik tetapi telah membantu banyak pengguna.
— Mitos
-1

Cara mudah untuk mencapainya adalah:

1. Buat sumber daya latar belakang khusus (seperti bentuk persegi panjang) dengan sudut membulat.

2. setel latar belakang kustom ini menggunakan perintah -

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

ini berhasil untuk saya.

The XMLtata letak Aku dibuat dengan atas kiri dan jari-jari kanan bawah.

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

Dalam kasus Anda, Anda hanya perlu mengubah topLeftRadius serta topRightRadius.

Jika Anda memiliki tata letak yang tumpang tindih dengan sudut tampilan kartu dan mungkin memiliki warna yang berbeda, Anda mungkin memerlukan file sumber daya latar belakang yang berbeda untuk tata letak dan di xml setel sumber daya latar belakang ini ke tata letak Anda.

Saya mencoba dan menguji metode di atas. Semoga ini bisa membantu Anda.

— Ankit Deshmukh
sumber
-2

Jika Anda menyetel latar belakang kartu secara terprogram, manfaatkan yang Anda gunakan cardView.setCardBackgroundColor()dan bukan, cardView.setBackgroundColor()dan pastikan Anda menggunakannya app:cardPreventCornerOverlap="true"di cardView.xml. Itu memperbaikinya untuk saya.

Btw, kode di atas (dalam kutipan) ada di Kotlin dan bukan Java. Gunakan padanan java jika Anda menggunakan Java.

— Joseph Magara
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.