Search code examples
androidpaddingnine-patch

9patch as background wraps content


I'm trying to have an image fit a whole chat-like bubble defined as a 9patch. So I defined my imageView like:

<ImageView
    android:id="@+id/img_content"
    android:layout_width="270dp"
    android:layout_height="200dp"
    android:adjustViewBounds="true"
    android:background="@drawable/bubble_right"
    android:cropToPadding="true"
    android:paddingRight="11dp"
    android:scaleType="centerCrop"
    android:src="@drawable/orange_fruit" />

But it generates the following result with invalid padding:

bad padding

But If I manually set other sides padding to 0 then the result looks correct:

android:paddingBottom="0dp"
android:paddingLeft="0dp"
android:paddingTop="0dp"

expected result

Why do I need to manually set padding to 0dp to make it work as intended?

edit:

Here is the nine patch:

9patch


Solution

  • Thanks to pskink comment, the problem was related to nine patch bottom and right guides which define where the content should go.

    I modified the 9patch to look like this to solve my issue. There is no need to define padding anymore:

    enter image description here I learned a bit more how 9patch are working today :).