태그 보관물: material-design

material-design

CardView가 Android L에서 Shadow를 표시하지 않음 android:id=”@+id/ivPicture”

Listview 내의 내 Cardview가 Android L (Nexus 5)에서 그림자를 표시하지 않습니다. 또한 둥근 모서리가 제대로 표시되지 않습니다. 다음은 Listview의 Adapter View 코드입니다.

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

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardBackgroundColor="@android:color/white"
    android:foreground="?android:attr/selectableItemBackground"
    app:cardCornerRadius="4dp"
    app:cardElevation="4dp" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingTop="@dimen/activity_vertical_margin" >

        <TextView
            android:id="@+id/tvName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_marginTop="@dimen/padding_small"
            android:paddingLeft="@dimen/activity_horizontal_margin"
            android:paddingRight="@dimen/activity_horizontal_margin"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        <ImageView
            android:id="@+id/ivPicture"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tvName"
            android:layout_centerHorizontal="true"
            android:scaleType="fitCenter" />

        <TextView
            android:id="@+id/tvDetail"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/ivPicture"
            android:layout_centerHorizontal="true"
            android:paddingLeft="@dimen/activity_horizontal_margin"
            android:paddingRight="@dimen/activity_horizontal_margin" />
    </RelativeLayout>
</android.support.v7.widget.CardView>

그리고 ListView xml :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res/com.example.myapp"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/app_bg" >

<ListView
    android:id="@android:id/list"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentTop="true"
    android:cacheColorHint="#00000000"
    android:divider="@android:color/transparent"
    android:drawSelectorOnTop="true"
    android:smoothScrollbar="true" />

<ProgressBar
    android:id="@+id/progressBarMain"
    style="?android:attr/progressBarStyleLarge"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:visibility="gone" /></RelativeLayout>

적절한 그림자와 둥근 모서리가있는 pre-L 장치에서 잘 작동합니다. 하지만 Android L 기기에서는 작동하지 않습니다. 내가 여기서 무엇을 놓치고 있는지 말할 수 있습니까?

답변

문서를 다시 살펴본 후 마침내 해결책을 찾았습니다.

추가 card_view:cardUseCompatPadding="true"하면 CardViewLollipop 장치에 그림자가 나타납니다.

무슨 일이 벌어지는 지, CardView롤리팝과 롤리팝 기기 에서 콘텐츠 영역의 크기가 달라집니다. 따라서 롤리팝 장치에서 그림자는 실제로 카드로 가려져 보이지 않습니다. 이 속성을 추가하면 콘텐츠 영역이 모든 장치에서 동일하게 유지되고 그림자가 표시됩니다.

내 XML 코드는 다음과 같습니다.

<android.support.v7.widget.CardView
    android:id="@+id/media_card_view"
    android:layout_width="match_parent"
    android:layout_height="130dp"
    card_view:cardBackgroundColor="@android:color/white"
    card_view:cardElevation="2dp"
    card_view:cardUseCompatPadding="true"
    >
...
</android.support.v7.widget.CardView>

답변

당신이 사용해야 그림자 그리는 것을 잊지 마세요 hardwareAccelerated도면을

hardwareAccelerated = true

여기에 이미지 설명 입력

hardwareAccelerated = false

하드웨어 가속 CardView

자세한 내용은 Android 하드웨어 가속 을 참조하십시오.

답변

app:cardUseCompatPadding="true"카드 뷰 내부에서 사용 하세요. 예를 들어

<android.support.v7.widget.CardView
        android:id="@+id/card_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginRight="@dimen/cardviewMarginRight"
        app:cardBackgroundColor="@color/menudetailsbgcolor"
        app:cardCornerRadius="@dimen/cardCornerRadius"
        app:cardUseCompatPadding="true"
        app:elevation="0dp">
    </android.support.v7.widget.CardView>

답변

확인 hardwareAccelerated를 매니페스트는 사실 확인에 거짓 그림자 전화의 XML 미리보기에 표시하지만,하지 않을 경우, 그것은 거짓 제거합니다 그림자 만들기.

답변

이 줄을 CardView에 추가합니다 ….

card_view:cardUseCompatPadding="true" //for enable shadow
card_view:cardElevation="9dp" // this for how much shadow you want to show

팁

shadow_marginTop 및 layout_marginBottom은 그림자 자체가 위아래로 약간의 공간을 차지하므로이를 피할 수 있습니다. card_view : cardElevation = “ndp”에서 사용할 양에 따라 정의되는 공간입니다.

해피 코딩 (:

답변

마지막으로 카드 뷰에 여백을 추가하여 Lollipop 장치에서 그림자를 얻을 수있었습니다. 최종 카드 뷰 레이아웃은 다음과 같습니다.

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

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardBackgroundColor="@android:color/white"
    android:foreground="?android:attr/selectableItemBackground"
    android:layout_marginLeft="@dimen/activity_horizontal_margin"
    android:layout_marginRight="@dimen/activity_horizontal_margin"
    android:layout_marginTop="@dimen/padding_small"
    android:layout_marginBottom="@dimen/padding_small"
    app:cardCornerRadius="4dp"
    app:cardElevation="4dp" >

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingTop="@dimen/activity_vertical_margin" >

    <TextView
        android:id="@+id/tvName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginTop="@dimen/padding_small"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <ImageView
        android:id="@+id/ivPicture"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tvName"
        android:layout_centerHorizontal="true"
        android:scaleType="fitCenter" />

    <TextView
        android:id="@+id/tvDetail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/ivPicture"
        android:layout_centerHorizontal="true"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin" />
</RelativeLayout>

답변

다음 태그를 추가하기 만하면됩니다.

app:cardElevation="2dp"
app:cardUseCompatPadding="true"

따라서 다음과 같이됩니다.

<android.support.v7.widget.CardView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:cardBackgroundColor="?colorPrimary"
    app:cardCornerRadius="3dp"
    app:cardElevation="2dp"
    app:cardUseCompatPadding="true"
    app:contentPadding="1dp" />