Here I am trying to fit the entire image as the background for card view. but it takes some space as shown in the picture. I tried android:scaleType="centerCrop"
and fitXY
and others also but it not responding. In attached image violet color represents empty space that occupied. I need that spaces need to occupied with the background image. Here is my code.
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardBackgroundColor="@color/voilet">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/application_ads_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerInside"
android:src="@drawable/app_ads_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0" />
<Button
android:id="@+id/application_ads_install_button"
android:layout_width="74dp"
android:layout_height="34dp"
android:layout_marginEnd="48dp"
android:background="@color/voilet"
android:text="@string/application_ads_install"
android:textColor="@color/white"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="@+id/application_ads_image"
app:layout_constraintTop_toTopOf="@+id/application_ads_image"
app:layout_constraintVertical_bias="0.674" />
<TextView
android:id="@+id/application_ads_review"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/application_ads_review"
android:textColor="@color/white"
app:layout_constraintBottom_toBottomOf="@+id/application_ads_image"
app:layout_constraintEnd_toStartOf="@+id/application_ads_install_button"
app:layout_constraintHorizontal_bias="0.27"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/application_ads_name"
app:layout_constraintVertical_bias="0.567" />
<TextView
android:id="@+id/application_ads_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:text="Zira"
android:textColor="@color/white"
app:layout_constraintEnd_toEndOf="@+id/application_ads_image"
app:layout_constraintHorizontal_bias="0.176"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
This is Image of my output as per my code
Customized CardView First, add a CardView dependency to the application-level build. gradle file. Then create a drawable background for the cards. For that, create a new drawable resource file inside the drawable folder.
Set android:backgroundTint="@android:color/transparent" . This is CardView attribute to set background. Set android:cardElevation="0dp" to remove the shadow.
In ConstraintLayout
, if you want to make width & height fit to parents, there are two options.
1.Within layout_constraint
attrs, you need to set 0dp
on layout_width
& layout_height
<ImageView
android:id="@+id/application_ads_image"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="fitXY"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
2.If you set match_parent
, you don't need to set layout_constraint
. If set, it will effect just like wrap_content
<ImageView
android:id="@+id/application_ads_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="@mipmap/ic_launcher"/>
I write a sample for you, you can check the result like this
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardBackgroundColor="@color/voilet">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/application_ads_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/app_ads_background"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="@+id/application_ads_install_button"
android:layout_width="74dp"
android:layout_height="34dp"
android:layout_margin="4dp"
android:background="@color/voilet"
android:text="INSTALL"
android:textColor="#FFF"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<TextView
android:id="@+id/application_ads_review"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:layout_marginStart="16dp"
android:text="5/5"
android:textColor="#FFF"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="@+id/application_ads_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:text="Zira"
android:textColor="#FFF"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With