Shadow Separator Between Android Fragments

by

Just to let everyone know (because there seems to be a lack of information out there on this topic), this is achieved within the background selector XML of the individual list rows’ view. For example, this is the main screen’s layout,

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/list_row"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="@drawable/list_item_selector">

    ...<!-- Rest of layout goes here -->

</RelativeLayout>

But the magic comes in the list_item_selector:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/list_pressed" />
    <item android:state_activated="true" android:drawable="@drawable/list_arrow_activated"  />
    <item android:drawable="@drawable/list_default" />
</selector>

By defining these as 9-patch drawables like this, you can have each list item contribute it’s width worth of shadow to that line in the middle, and when it is activated, that segment of shadow will be replaced by an arrow. I hope this helps someone, as it’s sure helped me!

Leave a Comment