Customising NavigationView - Adding dynamic headerView, Android Support Design Library

Question

I tried the navigationView from the new android support design library. I want to have a dynamic headerview. Basically, my headerview will show something like quote of the day. I have like around 10 quotes and i want to randomly select a quote and display in a textview in the headerView. I also want to add onClick method for the headerView.

Right now, I don't see any possibilities of changing the headerview layout programmatically. Any suggestions to implement this?

Answer 1

first create header XML like lay_header.xml

<TextView
    android:id="@+id/tvThought"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

on your java file inflate this above header in a TextView. like

TextView headerView = (TextView) LayoutInflater.from(this).inflate(R.layout.lay_header, null);
headerView.setText("Your_thoght");

Now add it as a HeaderView

navView = (NavigationView) findViewById(R.id.navView);
navView.addHeaderView(headerView);

Thats it...

Answer 2

After the new support library update (23.1.1),

You could do this -

Add the headerview in the app:headerLayout="@layout/drawer_header" inside NavigationView.

Then, you can access it by,

View header = navigationView.getHeaderView(0);
TextView text = (TextView) header.findViewById(R.id.textView);

or if you have multiple headers

navigationView.getHeaderCount()

Ref : https://code.google.com/p/android/issues/detail?id=190226#c31

Answer 3

TextView txt2;
txt2 = (TextView) navigationView.inflateHeaderView(R.layout.nav_header_main).findViewById(R.id.textView2);
txt2.setText("wow! It works like a charm");

Answer 4

create header layout take text view inside,

<TextView
                android:id="@+id/profile_email_text"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@id/profile_image"
                android:layout_alignParentBottom="true"
                android:layout_toLeftOf="@id/expand_account_box_indicator"
                android:ellipsize="end"
                android:maxLines="1"
                android:paddingBottom="16dp"
                android:singleLine="true"
                android:clickable="true"
                android:onClick="onSelectText"
                android:text="dhaval0122@gmail.com"
                android:textColor="@color/body_text_2_inverse"
                android:textSize="@dimen/text_size_medium" />

in onCreate,

((TextView) findViewById(R.id.profile_email_text)).setText("test");

create method onSelectText in your activity

public void onSelectText(View v){
        if(v.getId() == R.id.profile_email_text){
            Snackbar
                    .make(fab, "clicked on sub title", Snackbar.LENGTH_LONG)
                            //.setAction(R.string.snackbar_action, myOnClickListener)
                    .show();
            drawer_layout.closeDrawers();
        }
    }

Answer 5

You may add your custom header programmatically by calling addHeaderView on your navigationView, or define it in the layout file using app:headerLayout="@layout/myheader".

Answer 6

You can use findViewById() to access header elements within the NavigationView. This works even if you've initialised the header with the headerLayout property e.g. app:headerLayout="@layout/drawer_header". You can then dynamically modify the header without any need to inflate or add a new header.

@Override
public boolean onNavigationItemSelected(final MenuItem menuItem) {

...

if(mNavItemId == R.id.drawer_item_1)
{
  View headerView = mNavigationView.findViewById(R.id.drawer_header_root);
  // Test modifying the size of the header root element (FrameLayout)
  // when the first menu item is clicked.
  LinearLayout.LayoutParams p = (LinearLayout.LayoutParams) headerView.getLayoutParams();
  p.height = p.height == 700 ? 400 : 700;
  headerView.setLayoutParams(p);
  return true;
}
...

drawer_header.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="196dp"
android:background="@color/drawer_header_bg"
android:orientation="vertical"
android:id="@+id/drawer_header_root">
...

I think Dhawal is saying the same thing, but it wasn't super clear.

Answer 7

My be this link will help you

slimier question

final NavigationView navigationView = (NavigationView) findViewById(R.id.navigation_view);

View headView = navigationView.getHeaderView(0);

((TextView) headView.findViewById(R.id.nav_title)).setText("New title");

Answer 8

First you have to get navigationView. NavigationView navigationView =(NavigationView)findViewById(R.id.nav_view);

Then header. View header = navigationView.getHeaderView(0) Then textView. TextView text = (TextView) header.findViewById(R.id.textView); And finally you can set the text you want to display. text.setText("Hello there");