कार्ड व्यू कॉर्नर रेडियस

Question

क्या 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"
    >

Answer 1

जब तक आप Android CardViewवर्ग का विस्तार करने का प्रयास नहीं करते, आप उस विशेषता को अनुकूलित नहीं कर सकते XML।

बहरहाल, उस प्रभाव को प्राप्त करने का एक तरीका है।

एक CardViewदूसरे के अंदर रखें CardViewऔर अपने बाहरी CardViewहिस्से में एक पारदर्शी पृष्ठभूमि लागू करें और इसके कोने की त्रिज्या ( "cornerRadios = 0dp") को हटा दें । CardViewउदाहरण के लिए आपके आंतरिक में 3Dp का एक कोनाडियस मान होगा। फिर अपने भीतर के लिए एक मार्जिन लागू करें 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।

Comments

ध्यान दें कि छाया गलत है (नीचे कोने की छाया अभी भी गोल है), और अग्रभूमि चयनकर्ता अधिक स्पष्ट रूप से गलत होगा।

— अताउल्म

मुझे लगता है कि भट्ट वर्णित आसान तरीका @shreedhar बेहतर है

— मातेई सुइसा

कहो, किसी भी विचार cardCornerRadius के लिए डिफ़ॉल्ट मान क्या है? क्या यह 4dp है?

— एंड्रॉइड डेवलपर

मुझे यकीन नहीं है कि हर किसी ने इसे उत्तर के रूप में चिह्नित किया है। यह सही उत्तर नहीं है। मैंने यह कोशिश की, लेकिन यह उस तरह से काम नहीं कर रहा है जैसा होना चाहिए।

— विसाल वर्गीज

Answer 2

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>

Comments

क्या आप बता सकते हैं कि कोड का यह ब्लॉक क्या करता है? मैं एक्सएमएल संपत्ति के बारे में समझा किसी भी संसाधन प्राप्त नहीं कर पा रहे innerRadius, shapeऔरthicknessRatio

— atjua

केवल app:cardCornerRadius="40dp"काम भी करेगा।

— रमित पटेल

Answer 3

आप 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"
     ...>

यह परिणाम है:

Comments

यह TabLayout के साथ काम नहीं कर रहा है। मेरा कॉर्नर टैब राउंडेड नहीं है। मेरी आवश्यकता केवल टैब के शीर्ष कोनों को गोल किया जाना चाहिए जहां नीचे की तरह वर्गीय रहना चाहिए। क्या आप इसमें मेरी मदद कर सकते हैं?

— तारा

यदि आप इसे केवल एक ही घटक पर लागू कर रहे हैं, तो आप कस्टम शैली की आवश्यकता के बिना XML में सीधे आकृति उपस्थिति ओवरले लागू कर सकते हैं। app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MaterialCardView.Cut"

— अफ्फिन

Answer 4

एक उदाहरण है कि इसे कैसे प्राप्त किया जाए, जब कार्ड स्क्रीन के बहुत नीचे है। अगर किसी को इस तरह की समस्या है तो बस कुछ ऐसा करें:

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

कार्ड व्यू में निगेटिव बॉटम मार्जिन है। कार्ड व्यू के अंदर का दृश्य समान है, लेकिन सकारात्मक तल मार्जिन है। इस तरह गोल भाग स्क्रीन के नीचे छिपे होते हैं, लेकिन सब कुछ ठीक वैसा ही दिखता है, क्योंकि आंतरिक दृश्य में काउंटर मार्जिन होता है।

Answer 5

आप इस योग्य xml का उपयोग कर सकते हैं और कार्डव्यू के लिए पृष्ठभूमि के रूप में सेट कर सकते हैं:

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

Comments

यह आप एक लेआउट यानी लेने की जरूरत है cardView के साथ काम नहीं करेगा। रैखिक या सापेक्ष और इसके लिए पृष्ठभूमि सेट करें। तब यह काम करेगा।

— सुरेंद्र कुमार

लेकिन फिर छाया प्रभाव के बारे में क्या?

— रवि राजपूत

उसके लिए आप लेयर लिस्ट का उपयोग कर सकते हैं। इस लिंक को देखें ।

— सुरेंद्र कुमार

@ सुरेन्द्रकुमार हैं भई भई भई: डी: डी

— अभिषेक

Answer 6

मैंने कस्टम राउंड कॉर्नर स्थिति के लिए एक लिखने योग्य काम लिखा है, यह इस तरह दिखता है:

आप यहाँ पर यह शुल्क प्राप्त कर सकते हैं:

https://github.com/mthli/Slice

Answer 7

आपको 2 काम करने होंगे:

1) setPreventCornerOverlap(false)अपने CardView पर कॉल करें।

2) CardView के अंदर गोल छवि रखो

आपकी छवि को गोल करने के बारे में, मेरे पास एक ही समस्या थी इसलिए मैंने एक पुस्तकालय बनाया जिसमें आप प्रत्येक कोने पर अलग-अलग राडिए सेट कर सकते हैं । अंत में मुझे वह परिणाम मिला जो मुझे नीचे की तरह चाहिए था।

https://github.com/pungrue26/SelectableRoundedImageView

Comments

और इसी तरह से आप अपने एंड्रॉइड ऐप को ios में बदल दें :)

— अमेयबी

Answer 8

आप लाइब्रेरी का उपयोग कर सकते हैं: OptionRoundCardview

Comments

यह डेडिकेटेड राउंडेड कॉर्नर दिखाता है ... आई ऍम

— रवि राजपूत

पर्याप्त मार्जिन स्पेस जोड़ें?

— qinmiao

किसी भी बच्चे के विचार माता

— रवि राजपूत

मार्जिन है

— रवि राजपूत

यह लाइब्रेरी पृष्ठभूमि-रंग ऐप के साथ काम नहीं कर रही है: OptRoundCardBackgroundColor = "@ color / ग्रे" यह कोने के त्रिज्या प्रभाव को दूर करता है

— किशन डोंगा

Answer 9

आप अपना ImageView एक CardView के अंदर रख सकते हैं, और उन गुणों को ImageView में जोड़ सकते हैं:

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

इस तरह से आपको गोल तल वाले कोने से छुटकारा मिल जाएगा, लेकिन ध्यान रखें कि यह आपकी छवि के एक छोटे हिस्से के बंद होने की कीमत में आता है।

Answer 10

नोट: यह यहाँ एक समाधान है यदि आप केवल निचले कोने पर गोल कोनों को प्राप्त करना चाहते हैं और शीर्ष पर नियमित कोनों को। यदि आप कार्डव्यू के सभी चार कोनों के लिए अलग-अलग दायरा बनाना चाहते हैं तो यह काम नहीं करेगा। आपको इसके लिए सामग्री कार्डव्यू का उपयोग करना होगा या किसी तीसरे पक्ष के पुस्तकालय का उपयोग करना होगा।

यहाँ मेरे लिए काम करना प्रतीत होता है:

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

सभी में दो कार्डव्यू हैं। दूसरा कार्डव्यू वह है जिसमें गोल कोने होंगे (हमेशा की तरह सभी तरफ) और इसके नीचे अन्य सभी साक्षात्कार होंगे। इसके ऊपर का पहला कार्डव्यू भी उसी स्तर (ऊंचाई का) पर है, और इसकी पृष्ठभूमि समान है लेकिन दूसरे कार्डव्यू की लगभग आधी ऊंचाई है और इसमें कोई गोल कोने (सिर्फ सामान्य तेज कोने) नहीं हैं। इस तरह मैं नीचे की तरफ आंशिक रूप से गोल कोनों और शीर्ष पर सामान्य कोनों को प्राप्त करने में सक्षम था। लेकिन सभी चार पक्षों के लिए, आपको सामग्री कार्डव्यू का उपयोग करना पड़ सकता है।

आप इसे उल्टा कर सकते हैं, सबसे ऊपर और नियमित रूप से गोल कोने पाने के लिए, यानी पहले कार्डव्यू में गोल कोने और दूसरे कार्डव्यू में नियमित कोने होते हैं।

Answer 11

एंड्रॉइड स्टूडियो में इसे प्राप्त करने का सबसे आसान तरीका नीचे दिया गया है:

चरण 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>

Comments

वह केवल इसे सबसे ऊपर चाहता है।

— हाइजेनबर्ग

हालांकि, यह इस सवाल का जवाब नहीं है, इसने मुझे बहुत मदद की, नेमस्पेस के साथ एक माइंडब्लोइंग मुद्दा खोजने के लिए! :)

— टुकड़ा

यह विशिष्ट प्रश्न का उत्तर नहीं है, लेकिन इसने कई उपयोगकर्ताओं की मदद की है।

— मिथ

Answer 12

इसे प्राप्त करने का एक आसान तरीका होगा:

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 में इस पृष्ठभूमि संसाधन को अपने लेआउट में सेट करें।

मैंने उपरोक्त विधि की कोशिश की और परीक्षण किया। आशा है कि यह आपकी मदद करता है।

Answer 13

यदि आप कार्ड बैकग्राउंड को प्रोग्रामेटिक रूप से सेट कर रहे हैं, तो आप का उपयोग करें cardView.setCardBackgroundColor()और न करें cardView.setBackgroundColor()और app:cardPreventCornerOverlap="true"cardView.xml पर उपयोग सुनिश्चित करें । उसने मेरे लिए इसे हल कर दिया।

Btw, उपरोक्त कोड (कोटेशन में) कोटलिन में है न कि जावा में। जावा का उपयोग करने पर जावा बराबर का उपयोग करें।