31

Ich habe CardView in meiner App implementiert und alles funktioniert gut, außer es gibt ein wenig Polsterung um das Bild, wenn ich Radius auf die Karte setzen.Unnötige Auffüllung in CardView?

Es scheint wie folgt: screenshot_2014-12-27-20-31-55

Aber in android docs und in this article das Bild, um das gesamte cardview nimmt, so kann u mir helfen, das zu erreichen.

Meine Layout-Datei ist wie:

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
      xmlns:card_view="http://schemas.android.com/apk/res-auto" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:orientation="vertical" 
      android:padding="8dp"> 

<android.support.v7.widget.CardView 
    android:layout_width="match_parent" 
    android:layout_height="200dp" 
    card_view:cardBackgroundColor="@android:color/white" 
    card_view:cardCornerRadius="4dp"> 

    <ImageView 
     android:id="@+id/media_image_view" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:scaleType="centerCrop"/> 

     <RelativeLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_gravity="bottom" 
      android:alpha="0.8" 
      android:background="?attr/colorPrimary" 
      android:padding="4dp"> 

      <TextView 
       android:id="@+id/media_download" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_alignParentRight="true" 
       android:textSize="11sp"/> 

      <TextView 
       android:id="@+id/category_name" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_alignParentLeft="true" 
       android:textColor="@color/primary_text" 
       android:textSize="12sp"/> 

     </RelativeLayout> 

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

</LinearLayout> 

HINWEIS: Der Screenshot auf einem Pre-Lutscher Gerät erfasst wird.

+0

Können Sie bitte versuchen Sie es erneut ohne die 'android: padding = "4DP"' auf RelativeLayout? –

Antwort

62

Ich ging die durch developer docs wieder und stellte fest, dass:

Auf API 20 und vor CardView nicht für die abgerundeten Ecken und die Grenzen der Karte nicht stutzen. Stattdessen wird dem Inhalt Inhalt hinzugefügt, sodass er sich nicht mit den abgerundeten Ecken überschneidet.

Also für Pre-Lollipop-Geräte muss ich setPreventCornerOverlap (false); auf dem Cardview aufrufen.

Aktualisierung: Das gleiche kann durch XML-Code durch Hinzufügen von app:cardPreventCornerOverlap="false" in Kartenansicht erfolgen.

+1

Dies ist der Weg zu gehen. –

+1

Sie sind fantastisch! das ist was ich gerade brauche. – Krit

+1

Danke! Es klappt. Aber es gibt ein Problem. Nach dem Hinzufügen dieses Tags wird der Eckenradius ausgeblendet. Wie kann ich das lösen? –

1

Einstellung app:cardPreventCornerOverlap="false" löst das Problem, aber entfernen Sie auch alle Pre-Lollipop-Geräte Ecke. Wenn Sie auf allen Geräten runde Ecke wollen, fügen Sie es manuell:

card_view_round_corner_background.xml

<?xml version="1.0" encoding="utf-8"?>  
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">   
    <item>  
    <shape android:shape="rectangle">     
     <solid android:color="@color/transparent"/>     
     <stroke android:width="2dp" android:color="@color/Black"/> 
     </shape> 
     </item> 
     <item>    
    <shape android:shape="rectangle"> 
    <solid android:color="@color/transparent"/>    
    <corners android:radius="6dp"/>    
    <stroke android:width="2dp" android:color="@color/Black"/>   
    </shape> 
    </item> 
    </layer-list> 

In cardview

<android.support.v7.widget.CardView android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:focusable="true" 
    android:clickable="true" 
    android:foreground="?android:attr/selectableItemBackground"card_view:cardCornerRadius="@dimen/conner_radius" 
    card_view:cardBackgroundColor="@color/Black" 
    card_view:cardElevation="@dimen/z_card"> 

    <!-- Put your card contain here --> 

    <View 
    android:background="@drawable/card_view_round_corner_border" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    /> 

Aber diese Lösung funktioniert nur auf einem soliden Hintergrund wie schwarz oder weiß.

0

Nur FrameLayout anstelle von Linearlayout, es funktioniert

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_marginBottom="-4dp"> 

    <android.support.v7.widget.CardView 
     android:id="@+id/card_view" 
     xmlns:card_view="http://schemas.android.com/apk/res-auto" 
     android:layout_width="fill_parent" 
     android:layout_height="100dp" 
     android:layout_gravity="center" 
     android:layout_margin="5dp" 
     card_view:cardCornerRadius="4dp" 
     card_view:cardPreventCornerOverlap="false" 
     card_view:cardUseCompatPadding="true" 

     > 

     <FrameLayout 
      android:layout_width="fill_parent" 
      android:layout_height="fill_parent" 
      android:orientation="horizontal" 
      > 

      <ImageView 
       android:id="@+id/imageView" 
       android:tag="image_tag" 
       android:layout_width="0dp" 
       android:layout_height="wrap_content" 
       android:layout_margin="5dp" 
       android:layout_weight="1" 
       android:src="@drawable/ic_launcher"/> 

      <LinearLayout 
       android:layout_width="0dp" 
       android:layout_height="wrap_content" 
       android:layout_marginTop="5dp" 
       android:layout_weight="2" 
       android:orientation="vertical" 
       > 

       <TextView 
        android:id="@+id/textViewName" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_gravity="center_horizontal" 
        android:layout_marginTop="5dp" 
        android:text="Android Name" 
        android:textAppearance="?android:attr/textAppearanceLarge"/> 

       <TextView 
        android:id="@+id/textViewVersion" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_gravity="center_horizontal" 
        android:layout_marginTop="5dp" 

        android:text="Android Version" 
        android:textAppearance="?android:attr/textAppearanceMedium"/> 

      </LinearLayout> 
     </FrameLayout> 

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

</FrameLayout>