How to fit the Image to the size of a CardView

1.4k views Asked by At

I have a cardview which has an ImageView inside it. I use it in a RecylerView with a GridLayout. I want the Image to scale to the whole size of the CardView. At the moment the Grid of the Cards looks good, however, there is a white background around each item (see Screenshot). enter image description here

If I set the background to transparent the white background disappears, but unfortunately now the margins between each cards are too big and I can't control them (see Screenshot). enter image description here

Here is the XML code of the cardview:

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:cardCornerRadius="5dp"
    app:cardElevation="0dp"
    app:cardPreventCornerOverlap="false"
    app:cardUseCompatPadding="true"
    app:contentPadding="2dp"
    card_view:cardBackgroundColor="@android:color/transparent"
    app:contentPaddingBottom="0dp">


        <ImageView
            android:id="@+id/imageView"
            android:layout_width="180dp"
            android:layout_height="150dp"
            android:padding="2dp" />



</androidx.cardview.widget.CardView>

Is there a way how I can have full Images while having small margins between the cards without a white background? I do not necessarily have to use a CardView. I'd appreciate every comment and would be thankful for your help.

Update: As demanded here is the XML layout file of the Fragment, in which the RecyclerView (with CardView) is embedded:

<?xml version="1.0" encoding="utf-8"?>


    <androidx.constraintlayout.widget.ConstraintLayout xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">



        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar_mainActivity"
            android:layout_width="432dp"
            android:layout_height="135dp"
            android:background="#435cb53f"
            android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.0"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:titleTextColor="@android:color/holo_green_light">

            <TextView
                android:id="@+id/textView_ToolBar_CocktailSelectionActivity"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                android:layout_marginEnd="8dp"
                android:layout_marginLeft="8dp"
                android:layout_marginRight="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                android:gravity="center"
                android:layout_gravity="center"
                android:textColor="@android:color/white"
                android:textSize="24sp"
                android:text="Softdrinks" />
        </androidx.appcompat.widget.Toolbar>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recylerViewMenuItems"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/toolbar_mainActivity"
        android:padding="4dp"
        android:scrollbars="vertical"
        android:layout_marginBottom="60dp"
        android:layout_marginTop="140dp"
        app:layout_constraintTop_toTopOf="@+id/toolbar_mainActivity" />





        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottom_navigation"
            app:labelVisibilityMode="labeled"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorGreen"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:menu="@menu/bottom_navigation"
            app:itemIconTint="@color/colorPrimaryDark"
            app:itemTextColor="@color/colorAccent"
            />

    </androidx.constraintlayout.widget.ConstraintLayout>
0

There are 0 answers