31

Ho implementato CardView nella mia app e tutto funziona bene, tranne che c'è un po 'di padding intorno all'immagine se metto il raggio sulla carta.Riempimento non necessario in CardView?

Si presenta come tale: screenshot_2014-12-27-20-31-55

Ma in android docs e this article l'immagine assume l'intero CardView, in modo da u può aiutarmi a raggiungere questo obiettivo.

mio file di layout è simile:

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

NOTA: L'immagine è catturata su un dispositivo di pre-lecca-lecca.

+0

Potete per favore riprovare senza l'androide ': padding = "4DP"' sul vostro RelativeLayout? –

risposta

62

ho passato il developer docs di nuovo e ha scoperto che:

Su API 20 e prima, a schede non significa tarpare le limiti della Card per gli angoli arrotondati. Invece, aggiunge padding al contenuto in modo che non si sovrapponga con gli angoli arrotondati.

Quindi per i dispositivi pre-lollipop devo chiamare setPreventCornerOverlap (false); sul cardview.

Aggiornamento: Lo stesso può essere fatto tramite il codice xml aggiungendo app:cardPreventCornerOverlap="false" in visualizzazione tessera.

+1

Questa è la strada da percorrere. –

+1

sei fantastico! questo è quello di cui ho bisogno. – Krit

+1

Grazie! Funziona. Ma c'è un problema. Dopo aver aggiunto questo tag, elimina il raggio dell'angolo. Come posso risolvere questo? –

1

L'impostazione app:cardPreventCornerOverlap="false" risolverà il problema ma rimuoverà anche tutti i dispositivi pre-lecca-lecca. Se volete angolo rotondo su tutti i dispositivi, aggiungerlo manualmente:

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

Ma questa soluzione funziona solo su un solido background come il nero o bianco.

0

Basta usare FrameLayout invece di LinearLayout, funziona

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