How can I set a header over a RecyclerView?

My Android app lists the audio files inside an specific folder by using a RecyclerView. However, I want to display at the top of that RecyclerView a header that indicates the current folder with a TextView, but I do not know how to do it.

Is there an easy way to achieve that?

This is my adapter code:

package vmc.songbook;

import android.content.Context;
import android.media.MediaMetadataRetriever;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import java.io.File;
import java.util.Date;

public class RecordingsAdapter extends RecyclerView.Adapter<RecordingsAdapter.ViewHolder> {

// Attributes
protected File[] files;             // Files to include in the RecyclerView
protected LayoutInflater inflater;  // This class creates the layout based on the XML file

/** Constructor */
public RecordingsAdapter(Context context, File[] files) {
        this.files = files;
        inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

/**  ViewHolder is needed to store the variables of each file */
public static class ViewHolder extends RecyclerView.ViewHolder {
    public TextView file_name, file_duration, file_date;
    public ViewHolder(View itemView) {
        super(itemView);
        file_name = (TextView) itemView.findViewById(R.id.file_name);
        file_duration = (TextView) itemView.findViewById(R.id.file_duration);
        file_date = (TextView) itemView.findViewById(R.id.file_date);
    }
}

/** Inflating the ViewHolder based on the XML file*/
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    View v = inflater.inflate(R.layout.file_element, null);
    return new ViewHolder(v);
}

/** Maximum number of items */
@Override public int getItemCount() {
    return files.length;
}

/** Customizing the ViewHolder */
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
    // Setting the date
    Date lastModDate = new Date(files[position].lastModified());
    holder.file_date.setText(lastModDate.toString());
    // Setting the audio duration
    String duration = getDuration(files[position]);
    holder.file_duration.setText(duration);
    // Setting the audio name
    holder.file_name.setText(files[position].getName());
}
}

Since I am usic a Basic Activity as Main Activity, my content_main.xml is the following:

<?xml version="1.0" encoding="utf-8"?>

<android.support.v7.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
/>

This is my current display:

Current Display

And this is the view that what I want to achieve:

Wanted display

EDITED: If I create a simple TextView over the RecyclerView within a LinearLayout, the layout colocates itself over the action bar...

enter image description here

Upvotes: 1

Views: 2847

Answers (2)

Ashwin
Ashwin

Reputation: 7637

The simplest thing you can do is just add a text view above the recycler view :)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <TextView
        android:id="@+id/title_text_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="title" />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

In your activity class set that text view to the current folder path text.

title_text_view.setText("path/to/folder");

Upvotes: 2

Pablo C. Garc&#237;a
Pablo C. Garc&#237;a

Reputation: 22394

Using this code snippet works like a charm, with scroll of course: https://github.com/cundong/HeaderAndFooterRecyclerView

Upvotes: 0

Related Questions