Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why do 9-patch graphics size correctly in the emulator but not on a phone?

I have a RelativeLayout that has a 9-patch background image. The image is a simple speech bubble with a perfectly centered "arrow" at the bottom middle. Speech bubble

The RelativeLayout is inflated and placed on a MapView. Using the emulator, the speech bubble can be easily pointed to a location and will expand to its contents (text, an image, or both). When I run my app on a phone however, the 9-patch doesn't stretch properly. The "arrow" for the speech bubble will be offset to the left by a very noticeable amount.

I primarily test on a Nexus S, but also a Samsung Captivate and Nexus One. Targeting SDK 7. Tested emulators for SDK 7+. Only hardware devices seem to have this problem.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_height="wrap_content"
                android:id="@+id/BubbleLayout"
                android:background="@drawable/bubble"
                android:layout_width="wrap_content"
                android:gravity="center_horizontal">
    <TextView android:layout_height="wrap_content"
              android:id="@+id/date"
              android:layout_width="wrap_content"
              android:maxWidth="196dp"></TextView>
    <TextView android:layout_below="@+id/date"
              android:layout_height="wrap_content" 
              android:layout_width="wrap_content"
              android:maxWidth="196dp"
              android:id="@+id/summary"></TextView>
</RelativeLayout>
like image 558
originalbryan Avatar asked Feb 23 '11 20:02

originalbryan


People also ask

Why do apps sometimes look different in the designer than they do in the emulator?

The reason why the designs look different is that the emulator's screen configuration is different to that which is used to render the design preview.

What is use of 9 patch image in android?

The Draw 9-patch tool is a WYSIWYG editor included in Android Studio that allows you to create bitmap images that automatically resize to accommodate the contents of the view and the size of the screen. Selected parts of the image are scaled horizontally or vertically based on indicators drawn within the image.

What is the difference between regular PNG and nine patch image?

A NinePatch graphic is a standard PNG image that includes an extra 1-pixel border. It must be saved with the 9. png extension in the res/drawable/ directory of your project.

What is 9 patch PNG?

A 9 patch image is a regular png (. PNG) image which is needful for android app developers where they require to wrap any content within a background image without pixelating the background image.


1 Answers

Make sure you have an mdpi and an hdpi version if you test on different densities. If you put your 9patch in res/drawable/ for instance, it will be treated as an mdpi asset and scaled up automatically on hdpi devices (Nexus S). Because it's an automatic process, the results are not guaranteed.

like image 119
Romain Guy Avatar answered Sep 18 '22 08:09

Romain Guy