CODEWITHSUNDEEP
androidimageviewcardview
Berlin
Berlin

Reputation: 65

Image not show when it is in Cardvew

Below is my code:

<androidx.cardview.widget.CardView
        android:id="@+id/cv_back"
        android:layout_width="@dimen/walletFuncFrameSize"
        android:layout_height="@dimen/walletFuncFrameSize"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_marginTop="24dp"
        android:layout_marginStart="24dp"
        app:cardCornerRadius="250dp">

        <androidx.cardview.widget.CardView
            android:layout_width="@dimen/walletFuncSize"
            android:layout_height="@dimen/walletFuncSize"
            app:cardCornerRadius="250dp"
            android:layout_gravity="center">

            <ImageView
                android:layout_width="@dimen/walletFuncImageSize"
                android:layout_height="@dimen/walletFuncImageSize"
                android:background="@drawable/back"
                android:scaleType="centerCrop"
                android:layout_gravity="center" />

        </androidx.cardview.widget.CardView>
    </androidx.cardview.widget.CardView>

When I test with my Android 10 phone, it works and no problem. But when I test with my Android 8.0 phone, then the image doesn't show.

I tried to remove all cardview but keep imageView only, and the image finally show.

Does anyone know how to fix this problem?

I also tried:

  1. src and srcCompat and background of ImageView
  2. Change both androidx.cardview.widget.CardView to com.google.android.material.card.MaterialCardView
  3. Remove one CardView

Upvotes: 1

Views: 485

Answers (3)

chand mohd
chand mohd

Reputation: 2550

If you want show image in circle shape

Material Design lib provide ShapeableImageView to crate any shap you want wihout any custom shape

ex:

<com.google.android.material.imageview.ShapeableImageView
                android:id="@+id/ivSchoolIcon"
                android:layout_width="56dp"
                android:layout_height="56dp"
                android:adjustViewBounds="true"
                android:padding="2dp"
                android:scaleType="centerCrop"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:shapeAppearanceOverlay="@style/circleImageView"
                app:srcCompat="@drawable/ic_kid_placeholder" />

Define your style in your style.xml:

 <style name="circleImageView" parent="">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">50%</item>
        <item name="android:shadowRadius">100</item>
        <item name="android:shadowColor">@color/gray</item>
        <item name="backgroundOverlayColorAlpha">12</item>
    </style>

Dependencies:

implementation 'com.google.android.material:material:1.3.0-alpha01'

Upvotes: 0

tahaak67
tahaak67

Reputation: 161

Try removing the radius from the inner card view and/or both. if you see the image then u need to decrease the radius or increase the card view size.

the ImageView is not showing because you have too much radius in both of your card views and the card views are probably not big enough so radius overlaps your image.

Upvotes: 1

Jagar
Jagar

Reputation: 872

Put a layout inside your card view and make the image view a child of it:

<androidx.cardview.widget.CardView
        android:id="@+id/cv_back"
        android:layout_width="@dimen/walletFuncFrameSize"
        android:layout_height="@dimen/walletFuncFrameSize"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_marginTop="24dp"
        android:layout_marginStart="24dp"
        app:cardCornerRadius="250dp">

        <LinearLayout
            android:layout_width="@dimen/walletFuncSize"
            android:layout_height="@dimen/walletFuncSize"
            android:background="@drawable/oval"
            android:orientation=vertical
            android:layout_gravity="center">

            <ImageView
                android:layout_width="@dimen/walletFuncImageSize"
                android:layout_height="@dimen/walletFuncImageSize"
                android:background="@drawable/back"
                android:scaleType="centerCrop"
                android:layout_gravity="center" />

        </LinearLayout>
    </androidx.cardview.widget.CardView>

@drawable/oval: 

<shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="@color/colorPrimary" />
</shape>

Upvotes: 0

Related Questions