why is my 9png photo si starched to the right?

Question

I have this image(@drawable/engines_bg), as my Horizontal Scroll view:

you can see the triangle is in the exact middle.

However, when I run my Activity, the triangle is closed to the left:

(if you measure with a roller)

how can it be?

I have checked and there is no re-positioning in the code.

here is my xml:

<com.w.view.title.TitleBar
    android:id="@+id/titleBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

<ListView
    android:id="@+id/searchResultsList"
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/searchButtonBar"
    android:layout_below="@id/titleBar"
    android:cacheColorHint="#00000000"
    android:divider="@null"
    android:fadingEdge="none"
    android:scrollbars="none" />

<com.w.navigate.SearchButtonsBarHorizontalScrollView
    android:id="@+id/searchButtonBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:background="@drawable/engines_bg"
    android:fadingEdge="horizontal"
    android:gravity="center"
    android:padding="0dp"
    android:scrollbars="none" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:orientation="horizontal"
        android:paddingTop="25dp" >

        <ImageButton
            android:id="@+id/leftMargin"
            android:layout_width="160dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/search_engine_button"
            android:visibility="invisible" />

        <ImageButton
            android:id="@+id/searchButton1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/search_engine_button"
            android:onClick="engineClicked" />

        <ImageButton
            android:id="@+id/searchButton2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/search_engine_button"
            android:onClick="engineClicked" />

      <ImageButton
            android:id="@+id/rightMargin"
            android:layout_width="160dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/search_engine_button"
            android:visibility="invisible" />
    </LinearLayout>
</com.w.navigate.SearchButtonsBarHorizontalScrollView>

<LinearLayout
    android:id="@+id/searchProgressPopup"
    android:layout_width="180dp"
    android:layout_height="140dp"
    android:layout_centerInParent="true"
    android:background="@drawable/semi_transparent_bg"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    android:visibility="invisible" >

    <com.w.view.map.ProgressAnimation
        android:id="@+id/searchProgressAnimation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_weight="1" />

    <TextView
        android:id="@+id/searchProgressText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginBottom="5dp"
        android:gravity="center"
        android:textColor="#FFFFFF" />
</LinearLayout>

<ImageView
    android:layout_width="match_parent"
    android:layout_height="6dp"
    android:layout_below="@id/titleBar"
    android:scaleType="fitXY"
    android:src="@drawable/topbar_shadow" />

update:

I have tried @Brian's solution, but it's all mixed up:

<com.w.view.title.TitleBar
    android:id="@+id/titleBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

<ListView
    android:id="@+id/searchResultsList"
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/searchButtonBarWrapper"
    android:layout_below="@id/titleBar"
    android:cacheColorHint="#00000000"
    android:divider="@null"
    android:fadingEdge="none"
    android:scrollbars="none" />

<LinearLayout
    android:id="@+id/searchButtonBarWrapper"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:background="@drawable/engines_bg"
    android:orientation="horizontal" >

    <com.w.navigate.SearchButtonsBarHorizontalScrollView
        android:id="@+id/searchButtonBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fadingEdge="horizontal"
        android:gravity="center"
        android:padding="0dp"
        android:scrollbars="none" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:orientation="horizontal"
            android:paddingTop="25dp" >

            <ImageButton
                android:id="@+id/leftMargin"
                android:layout_width="160dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/search_engine_button"
                android:visibility="invisible" />

            <ImageButton
                android:id="@+id/searchButton1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/search_engine_button"
                android:onClick="engineClicked" />

            <ImageButton
                android:id="@+id/searchButton2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/search_engine_button"
                android:onClick="engineClicked" />

            <ImageButton
                android:id="@+id/searchButton3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/search_engine_button"
                android:onClick="engineClicked" />

            <ImageButton
                android:id="@+id/searchButton4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/search_engine_button"
                android:onClick="engineClicked" />

            <ImageButton
                android:id="@+id/searchButton5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/search_engine_button"
                android:onClick="engineClicked" />

            <ImageButton
                android:id="@+id/rightMargin"
                android:layout_width="160dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/search_engine_button"
                android:visibility="invisible" />
        </LinearLayout>
    </com.w.navigate.SearchButtonsBarHorizontalScrollView>
</LinearLayout>

<LinearLayout
    android:id="@+id/searchProgressPopup"
    android:layout_width="180dp"
    android:layout_height="140dp"
    android:layout_centerInParent="true"
    android:background="@drawable/semi_transparent_bg"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    android:visibility="invisible" >

    <com.w.view.map.ProgressAnimation
        android:id="@+id/searchProgressAnimation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_weight="1" />

    <TextView
        android:id="@+id/searchProgressText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginBottom="5dp"
        android:gravity="center"
        android:textColor="#FFFFFF" />
</LinearLayout>

<ImageView
    android:layout_width="match_parent"
    android:layout_height="6dp"
    android:layout_below="@id/titleBar"
    android:scaleType="fitXY"
    android:src="@drawable/topbar_shadow" />

The result:

Uapdte2: Tried Luksprog's 9.png

I had two problems:

1) the 1 pixel dots are visible

2) the arrow is to strached

3) I sae the original 9.png in two folders. How can I know which one my device relates to?

Answer 1

Your nine patch image is too big to be handled by the ScrollView so the arrow doesn't get in the middle where you'd want it. So make the nine patch image smaller in width(that would be one of the advantages of nine patches vs regular images) by simply taking out two equal chunks from the left and right of the arrow and also adding the stretch points(which should be equal so the image gets stretched proportionally).

Here's my attempt(which should be saved as the_image_etc.9.png):

If you miss transparency somewhere it may be due to me saving that wrong but the general approach of obtaining the image is above.

I save the original 9.png in two folders. How can I know which one my device relates to?

When using a nine patch you need to have a version for each of the density drawable folders(so the image itself doesn't get resized using the image from another density folder), you don't need versions for different sizes of the screens(that's what is great about nine patches, they take out the size issue by extending themselves).