9-patch - Conservation of the height/width ratio of the non-stretchable area when scaling down

Question

I have the following 9 patch file as background of a cardview:

To scale the image to the background I use the scale type "fitXY" on my ImageView :

          <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/background_player_right_elo"
            android:scaleType="fitXY"/>                          

It works well when the dimension of the card is greater than the image. However, in my case the height of the image is lower than the height of the image (45dp) and the result is distored :

I can reduce the size of the image but it gives a pixelated image. I can't use standard image instead of 9-patch since the width of the card depends of the device screen width.

Is it possible to conserve the ratio height/width of the non-stretchable area when scaling down a 9-patch image?

Otherwise, is there another way of obtaining the desired result?

Thanks in advance!

Answer 1

There are several possible answers depending on the constraints:

1. Reduce the size of the 9-patch image if the result is not too pixelated;
2. Increase the size of the CardView if you don't mind;

3. Otherwise, you can use two ImageView:

   • The first with scaleType "fitXY" that will contain a 9-patch image with the strechable background;
   • The second with scaleType "centerInside" that will only contain the logo (which is not a 9-patch) and a transparent background.

Exemple:

        <!-- ImageView for the 9-patch background -->
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/background"
            android:scaleType="fitXY"/>

        <!-- ImageView for the non 9-patch logo -->
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/logo"
            android:scaleType="centerInside"/>