Search code examples
androidandroid-listviewandroid-listfragmentnine-patchandroid-styles

List Item background stretched 9patch Android


Im trying to create a 9patch background in my listview items, but since I modified the images with 9patch the background is streched so I cannot see the whole image. Here is the image that I've modified:

enter image description here

Here is my item.xml code:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/toggle"
    android:gravity="center"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/item_title"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center|left"
        android:textColor="@android:color/black" />

</LinearLayout>

and my toggle selector that is showing the proper image depending on the list item state:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/item_normal"></item>
    <item android:state_selected="true" android:drawable="@drawable/item_selected"></item>
    <item android:state_focused="true" android:drawable="@drawable/item_normal"></item>
    <item android:state_activated="true" android:drawable="@drawable/item_selected"></item>
    <item android:state_activated="false" android:drawable="@drawable/item_normal"></item>
    <item android:state_active="true" android:drawable="@drawable/item_selected"></item>
     <item android:state_active="false" android:drawable="@drawable/item_normal"></item>
</selector>

but instead of the full image in the background I'm gettings this:

enter image description here

Does anyone know how can I fix this?


Solution

  • Create Ninepatch Image Like Below.... That could be useful to you........... i could not remove lines of Corners So IGNORE IT...

    Note that black line is used for image streching....... Here...

    Left _top : is used for streaching image..... Right-Bottom : is used for Setting content area where your text will set...