Scrollable ImageView with ListView

Question

I have an ImageView i.e. Cover Photo. Another ImageView i.e. profile picture and a textview i.e. name within Coverphoto. There is a listview below this cover photo. I want to make the whole layout scrollable i.e. Cover photo layout should also scroll up with Listview. I've tried list.addHeaderView but how do merge coverphoto with profile photo and name in list.addheaderview?

Use your listview inside a nestedscrollview. – Malith Lakshan May 25 '16 at 13:30 — Malith Lakshan, May 25 '16 at 13:30
http://ivankocijan.xyz/android-nestedscrollview/ – Malith Lakshan May 25 '16 at 13:40 — Malith Lakshan, May 25 '16 at 13:40

Amir · Accepted Answer · 2016-05-25T13:46:51.530

Put all of them (cover-photo, profile-photo, names, etc) in single layout (e.g. LinearLayout | RelativeLayout) and then Inflate them and add to your Listview.

Your code may be something like this :

View profielView = LayoutInflater.from(getActivity()).inflate(R.layout.view_your_profile, mListView, false);
mListView.addHeaderView(profileView);

Your view_your_profile is something like this :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout_profile_header_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!-- cover photo -->
    <ImageView
        android:id="@+id/image_profile_cover"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/ic_launcher"
        android:scaleType="centerCrop" />


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="horizontal">
            <!-- username  -->
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_marginRight="8dp"
                android:text="@string/icon_chevron_left"
                android:textColor="@color/white_transparent_30" />

            <!-- profile photo -->
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:gravity="center"/>

        </LinearLayout>

</RelativeLayout>

There is also better way using RecyclerView with different view type you can find good tutorial here.

score 0 · Answer 2 · edited May 23 '17 at 12:24

You need to make a RelativeLayout for your cover photo and put the profile picture and textview inside it, in a file named header.xml for example.

You can refer to these questions:

Android, ImageView over ImageView

Adding text to ImageView in Android

So, after making your header.xml, you can add it to your ListView with your cover photo, profile picture, text, and it will be scrolled as you scroll your list view!

Scrollable ImageView with ListView

2 Answers2