Using layout_width & wrap_content With NavigationView

Nathan Sokalski 4,116

I have a com.google.android.material.navigation.NavigationView with several menu items & a header for which I want it to horizontally stretch to fit. In most controls, I would simple use
android:layout_width="wrap_content"
However, this seems to have no effect with NavigationView. The only workaround I could find is to set a fixed width, which seems very inefficient. Is there a reason wrap_content is not working with NavigationView?

1 answer

JarvanZhang 23,936 Reputation points

2021-10-08T05:46:39.567+00:00
Hello,

Welcome to our Microsoft Q&A platform!

a header for which I want it to horizontally stretch to fit

To make the header fit the the navigationView. Please set the android:layout_width of the header layout to android:layout_width match_parent instead. Here is the sample code, you could refer to it.

<com.google.android.material.navigation.NavigationView android:id="@+id/nav_view" ... app:headerLayout="@layout/nav_header_main" app:menu="@menu/activity_main_drawer"/>

layout/nav_header_main.xml

<?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="@dimen/nav_header_height" ...> ... </LinearLayout>

Best Regards,

Jarvan Zhang

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Please sign in to rate this answer.
Nathan Sokalski 4,116 Reputation points

2021-10-08T18:44:55.34+00:00

The root of my headerLayout (which is a GridLayout) I have the following:

android:layout_width="match_parent" android:layout_height="wrap_content"

In my NavigationView, I have tried using match_parent & wrap_content. Here is the code & a screenshot for each one:

android:layout_width="match_parent" android:layout_height="match_parent" app:headerLayout="@layout/navigation_header"

android:layout_width="wrap_content" android:layout_height="match_parent" app:headerLayout="@layout/navigation_header"

Notice that match_parent uses more space than necessary, while wrap_content simply shows only part of the content (it doesn't even clip or wrap it, it may as well not be there). As a test, I tried changing the main text from "Golf Scorekeeper" to "Golf X" with wrap_content, but the width remained the same, so wrap_content is obviously using a fixed width (but I don't know what that is or where it is coming from). Am I missing something?

JarvanZhang 23,936 Reputation points

2021-10-11T02:27:41.527+00:00

This is because the source code of the NavigationView class defines a fixed width value('maxWidth'), the navigationView's width shouldn't be less than the fixed value. Here is the part source code of the onMeasure method.

case MeasureSpec.AT_MOST://set layout_width to wrap_content widthSpec = MeasureSpec.makeMeasureSpec( Math.min(MeasureSpec.getSize(widthSpec), maxWidth), MeasureSpec.EXACTLY); //maxWidth is the fixed value which is provided by the source code break;

Nathan Sokalski 4,116 Reputation points

2021-10-11T16:06:54.817+00:00

Is there any way I can edit this or anything I can override that would have the same effect as wrap_content?

JarvanZhang 23,936 Reputation points

2021-10-12T06:13:22.823+00:00

You could try to create a custom NavigationView class to override the OnMeasure method to define the size of the control. Here is the explaination of the onMeasure method, you could refer to it.

https://stackoverflow.com/questions/12266899/onmeasure-custom-view-explanation

Nathan Sokalski 4,116 Reputation points

2021-10-20T03:19:17.387+00:00

I looked at that, but it requires me to measure & calculate the width of every child, and the layout for my NavigationView will also include a header, making it very hard to do this calculation, especially since the header will not always be the same width. Also, since the menu items include icons, I cannot use the usual methods for finding the width of text. Is there any way to sort of efficient way to iterate through the views that would affect the width?

JarvanZhang 23,936 Reputation points

2021-10-20T08:11:39.397+00:00

Try to update the width value via the LayoutParameters of the navigationView.

NavigationView navigationView = FindViewById<NavigationView>(Resource.Id.nav_view); var _params = navigationView.LayoutParameters; _params.Width = Resources.DisplayMetrics.WidthPixels / 3; navigationView.LayoutParameters = _params;

Nathan Sokalski 4,116 Reputation points

2021-10-20T19:15:40.297+00:00

I'm not sure I understand your code. First of all, the contents of my NavigationView are dynamic (they will not be the same each time I open it), but your code sets it to a value that will be the same every time it is opened. Also, why do you divide by the literal value 3? Is that just a value you picked, or is there a specific reason for picking 3 instead of another value?

JarvanZhang 23,936 Reputation points

2021-10-21T08:47:23.03+00:00

The '3' is just an example. The above code cannot change value Adaptively. What you describe works like the wrap_content style, but this width of navigationView has been set to a 'fixed' value in design.

For more details, please check this thread: https://stackoverflow.com/a/31389439/11083277
Sign in to comment