Search code examples
androiddrawablenine-patch

Android 9-patch and drawable-mdpi


I created a simple 9-patch image for Android. Poured into a folder drawable-mpdi. Everything works, but the upper frame is lost. It is not clear why. See screenshot:

enter image description here

This is my 9-patch file:

enter image description here

https://dl.dropbox.com/u/30086473/input_login_active2.9.png

My XML layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/white">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:background="@drawable/login_bg"
        android:orientation="vertical">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/auth_logo"/>
            <EditText
                android:layout_width="273dip"
                android:id="@+id/login"
                android:layout_marginTop="20dip"
                android:layout_height="wrap_content"
                android:background="@drawable/auth_edit_text"
                android:hint="@string/auth_login"/>
            <EditText
                android:layout_width="273dip"
                android:id="@+id/password"
                android:layout_height="wrap_content"
                android:background="@drawable/auth_edit_text_left"
                android:hint="@string/auth_login_left"
                android:layout_marginLeft="17dip"/>
    </LinearLayout>
</LinearLayout>

What is the problem? How to recycle 9-patch, that there was a blue frame at the upper of element?

There is @drawable/auth_edit_text:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/t" />
</selector>

Solution

  • Your pixel borders seem to be incorrect (reversed maybe). Try this instead:

    enter image description here

    With your original, you'd be stretching the phone icon as well, not just the bubble. Also, you had the content area and stretch area reversed for the top and bottom (I've inverted them in the attachment). While I don't know that that would specifically cause the problem you've shown, I would give it a try and see what happens.

    EDIT: Try this:

    enter image description here

    EDITED ANSWER FROM COMMENTS: I think that may be your issue is that it's looking for the ldpi image, not finding one, and falling back to the default and scaling it down. Since the border is only 1 px, it simply disappears when scaled down.