Search code examples
androidnine-patch

9Patch content area error


It seems my content area doesn't match what the 9patch file says it should be
Heres my 9patch file. my-nine-patch-image

and here is an image of how it looks with an item in it, but the text is getting cut off prematurely, it should be "Varenr." I don't understand why there is such a big white space instead of text ?? enter image description here

and here is the xml layout of the spinner:

        <Spinner
            android:id="@+id/sortSpinner"
            android:layout_width="0dp"
            android:layout_weight="4"
            android:layout_height="35dp"
            android:layout_marginBottom="10dp"
            android:layout_marginTop="10dp"
            android:background="@drawable/spinner_background"
            android:drawSelectorOnTop="true"
            android:focusable="false"
            android:focusableInTouchMode="false"
            android:prompt="@string/sort" />

And of the spinner item

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/text1"
    style="?android:attr/spinnerItemStyle"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:ellipsize="none"
    android:gravity="center"
    android:singleLine="true" />

Thanks in advance for help.

And for closure, the 9patch in question: 9patch image

Edit: The whole line where the spinner is located:

    <LinearLayout
        android:id="@+id/headerLabel"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:background="@color/transparent"
        android:orientation="horizontal"
        android:weightSum="11">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_weight="3"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:id="@+id/sortAmountLabel"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dip"
                android:singleLine="false"
                android:textColor="@color/solid_red"
                android:textSize="15dp" />

            <TextView
                android:id="@+id/sortLabel"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="5dip"
                android:text="Produkter"
                android:singleLine="true"
                android:textColor="@color/solid_red"
                android:textSize="15dp" />

        </LinearLayout>

        <Button
            android:id="@+id/filterBtn"
            android:layout_width="0dp"
            android:layout_height="35dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="15dp"
            android:layout_marginTop="10dp"
            android:layout_weight="4"
            android:background="@drawable/button_background_red"
            android:clickable="true"
            android:singleLine="true"
            android:onClick="setFilterList"
            android:text="Filtrér"
            android:textColor="@color/solid_white"
            android:textSize="15dp"
            android:textStyle="bold" />


        <Spinner
            android:id="@+id/sortSpinner"
            android:layout_width="0dp"
            android:layout_weight="4"
            android:layout_height="35dp"
            android:paddingRight="30dp"
            android:layout_marginBottom="10dp"
            android:layout_marginTop="10dp"
            android:background="@drawable/spinner_background"
            android:drawSelectorOnTop="true"
            android:focusable="false"
            android:focusableInTouchMode="false"
            android:prompt="@string/sort" />
    </LinearLayout>

Solution

  • Now, this is how I remade it:

    enter image description here

    Which gives this result:

    enter image description here

    Make sure the extension is .9.png

    [EDIT]

    This is the result when applied to a TextView:

    enter image description here

    The screen is an old ldpi device (240x320 @120 dpi)

    This is how I applied it:

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/stripes_vert_4"
        >
    
        <!-- ... -->
    
        <TextView
            android:id="@+id/txtTitle3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:layout_alignParentBottom="true"
            android:textColor="@android:color/black"
            android:textSize="16sp"
            android:textStyle="bold"
            android:text="Lorem ipsum dolor sit amet"
            android:background="@drawable/spinner_drawable"
        />
    </RelativeLayout>
    

    [EDIT 2]

    As per the OP requirement, I switched the TextView to a Spinner:

    Result:

    enter image description here

    By using this code:

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/stripes_vert_4"
        >
    
        <!-- ... -->
    
        <Spinner
            android:id="@+id/spnElements"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:entries="@array/prefs_search_modes"
            android:layout_alignParentBottom="true"
            android:textColor="@android:color/black"
            android:textSize="16sp"
            android:textStyle="bold"
            android:background="@drawable/spinner_drawable"
        />
    </RelativeLayout>
    

    Which implies you have an arrays.xml file in your value folder.
    Mine is:

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <!-- Settings -->
        <!-- Word search mode -->
        <string-array name="prefs_search_modes">
            <item>*b* (Contains "b")</item>
            <item>Ab* (Starts with "Ab")</item>
            <item>*bc (Ends in "bc")</item>
            <item>Abc (Exact match)</item>
        </string-array>
    </resources>
    

    [EDIT3]

    In the last comments the OP is asking for (75% white space + the rest of the width left for the spinner) something like this:

    enter image description here

    ARE YOU SURE?

    The running screen is low res (ldpi).
    But next to it, in the graphical editor you can see another device (HTC Desire Bravo) screen which is hdpi.

    And it shows the same "issue": 1/4 screen width.
    So, the stretchable part of the 9 png background (which contains the text) is squeezed away and only the unsqueezable part (the arrow) stays.

    [EDIT4]

    After playing with the 9 patch size, I could make part of the text become visible:

    enter image description here

    So, it seems you have to experiment with smaller sizes until you get an acceptable result.

    [EDIT5]

    I forgot to add the new spinner 9 patch (resized).
    Here it is:

    enter image description here

    When rescaling, mind the outer border: it has to be completely transparent and the markers must be full black.