I already did something like this with a listview, but the problem I
had is that after I select an item, it won't have the color it had
when it was pressed.
That is an easy fix. In the onClick(View arg0) method you add arg0.setSelected(true). Also remember to set the old view's selected state to false.
If there is a risk of views getting reused, you will need to keep track of which one is selected by change your list of data to a map and store a boolean value in the entries. However, if you want to scroll the list and detailed fragments together or the list is short enough as in your picture that won't be necessary.
Change your background color to a selector (drawable xml)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:color="@color/selected_color_resource"
android:state_selected="true" />
<item
android:color="@color/color_resource" /> <!-- default -->
</selector>
The first matching state will be used so make sure default is the last item.
And also with a view pager I would have an extra container where I
can put my fragments.
Yes use Brett's solution. Replace your detailed fragment with VerticalViewPager. You will need to set your activity (or whichever class that handles your list) to a ViewPager.SimpleOnPageChangeListener. So that when someone scroll the selected list item can be changed. You can do a lot of cool animaitons thanks to this nice method
onPageScrolled(int position, float positionOffset, int positionOffsetPixels)