I have a layout file that represents a row item in recyclerView. That row item contains an image that is loaded though Piccaso library when going to onBindViewHolder method and is resizing the image width and height to a certain value.The issue is that is that when I am writing the value as, let's say -
.resize(250, 250)
it means that regardless of any device size it will always be 250 pixels - for a Pixel 1 that would be great, but for a Pixel 3 XL that would be tiny.
how could I make the resizing function of piccaso dynamic so I can adjust it according to the current screen size?
here is my row item XML -
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.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="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#b0b3b7"
android:elevation="@dimen/hero_row_elevation"
android:tag="0"
app:cardCornerRadius="@dimen/hero_row_corner_radius">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#b0b3b7"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/heroImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="@mipmap/ic_launcher"
app:layout_constraintEnd_toStartOf="@id/heroTitle"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<ProgressBar
android:id="@+id/adapterProgressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="@mipmap/ic_launcher"
app:layout_constraintEnd_toStartOf="@id/heroTitle"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<TextView
android:id="@+id/heroTitle"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="5dp"
android:autoSizeMaxTextSize="25dp"
android:autoSizeMinTextSize="15dp"
android:text="@string/hero_row_hero_title"
android:textColor="#000"
android:textSize="@dimen/hero_row_title_text_size"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="@+id/heroAbilities"
app:layout_constraintEnd_toStartOf="@+id/heartImageView"
app:layout_constraintStart_toEndOf="@+id/heroImage"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/heroAbilities"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="32dp"
android:autoSizeMaxTextSize="25dp"
android:autoSizeMinTextSize="15dp"
android:breakStrategy="simple"
android:hyphenationFrequency="none"
android:text="@string/hero_row_abilities_text"
android:textColor="#444"
android:textSize="@dimen/hero_row_abilities_text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/heroImage"
app:layout_constraintTop_toBottomOf="@+id/heroTitle" />
<ImageView
android:id="@+id/heartImageView"
android:layout_width="@dimen/hero_row_heart_size"
android:layout_height="@dimen/hero_row_heart_size"
android:layout_marginTop="9dp"
android:layout_marginEnd="24dp"
android:src="@drawable/empty_heart"
android:tag="1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/heroTitle"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
and here is my onBindViewHolder(); method -
@Override
public void onBindViewHolder(@NonNull final HeroesViewHolder holder, int position) {
final Hero currentHero = heroList.get(position);
String str = String.join(",", currentHero.abilities);
holder.heroTitle.setText(currentHero.title);
holder.heroAbilities.setText(str);
Picasso.get()
.load(currentHero.image)
.resize(250, 250)
.error(R.drawable.ic_launcher_foreground)
.into(holder.heroesImage, new Callback() {
@Override
public void onSuccess() {
holder.progressBar.setVisibility(View.GONE);
}
@Override
public void onError(Exception e) {
}
});
if (!currentHero.isFavorite()){
Picasso.get()
.load(R.drawable.empty_heart)
.into(holder.heartImageview);
} else {
Picasso.get()
.load(R.drawable.full_heart)
.into(holder.heartImageview);
}
setFadeAnimation(holder.itemView);
}
Whenever you use resize() function in Picasso, they've clearly stated the below line in their documentation here:
resizes the image to these dimensions (in pixel). does not respect aspect ratio
There is a reason why the term "dp" or Density Independent Pixels exists in Android. If you want the Image to be uniform in all the device, set the appropriate layout_width and layout_height in your layout file in "dp", and it'll be uniform on all the devices regardless of their size/screen density.