Android - scrolling / moving the list itself
I've seen some modern Android and iOS apps where there will be an image at the top of the page that covers the entire width of the screen. Below it will be the ListView
one that reaches the page.
When you start scrolling down on ListView
, it itself ListView
starts moving up until it hits the top of the screen, i.e. completely covers the top screen.
Examples of applications that do this: Google Play Save , Huffington Publish , YouTube .
I tried googling but couldn't find the relative source.
source to share
This is a bit of a visual trick, where it seems like the image and the list are the same, but in reality they are not.
basically you have a listview with a headerview the same size as the image and below the list you have an image, as you scroll through it a scroll list appears above the image.
The layout will look something like this.
<RelativeLayout>
<ImageView></ImageView>
<ListView></ListView>
</RelativeLayout>
Create another layout for the header which is empty, with the image size
You can also translate the image in the Y direction when the list is scrolled, but then you have to keep it globally in your class so you can translate it with v.setTranslateY()
source to share
You need to add a title to the list. You can do this by following these steps:
final View header = LayoutInflater.from(getActivity()).inflate(R.layout.myheader, null);
((ListView) getActivity().findViewById(R.id.list)).addHeader(header);
Then you can perform the scroll effect by doing the following:
((ListView) getActivity().findViewById(R.id.list)).setOnScrollListener(new AbsListView.OnScrollListener() {
@Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
}
@Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
if (v.getChildCount() > 0 && v.getChildAt(0) != null)
header.setTranslationY(Math.round(-v.getChildAt(0).getTop() * 0.5));
}
});
Here header
is the title of the list
source to share