How to set the extended width of an ActionView in a SupportActionBar to fill the available space

Question

I am trying to customize MenuItem with actionView as described here .

In my case, the actionView Widget is a SeekBar .

The problem is that when the actionView symbol actionView displayed on the icon, its width is less than expected, as you can see in the following screenshots:

The docs say:

If the widget is in the application panel, the application should display the widget as an Icon. If the widget is in the overflow menu, the application should display the widget as a menu item. When the user interacts with the view action, it expands to populate the application panel .

In my case, nothing is "expanding." Instead of taking the entire width of the ActionBar , its tiny.

To fix this, I tried using a different View as an EditText , but got similar results. (EditText is small at startup, but expands when writing to it). It seems to work with android.support.v7.widget.SearchView used in docs.

I also tried it with Theme.AppCompat.Light.DarkActionBar or Theme.AppCompat.Light.NoActionBar , providing a toolbar in the layout without any noticeable difference.

Here is the code I used:

Mainactivity

 public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); /* set this on other layout with toolbar in it Toolbar toolbar = findViewById(R.id.toolbar); setSupportActionBar(toolbar); */ } @Override public boolean onCreateOptionsMenu(Menu menu) { super.onCreateOptionsMenu(menu); getMenuInflater().inflate(R.menu.camera_menu, menu); return true; } } 

app_menu.xml

 <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:id="@+id/action_item" android:title="Action" android:icon="@drawable/ic_icon_in_black_24dp" app:showAsAction="ifRoom|collapseActionView" app:actionViewClass="android.widget.SeekBar" /> </menu> 

I also tried app:actionViewLayout=@layout/seekbar_layout instead of actionViewClass where seekbarLayout was something like this

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

Where I also tried different versions of ViewGroups around it like Linear, Relative or FrameLayouts, or tried to set the fixed width of my SeekBar without any success.

What am I missing or doing wrong here?

Answer 1

"Magic" takes place in Toolbar.expandItemActionView . This method overrides the layout options of the extended ActionView and sets the width to wrap_content . Now to one of the possible solutions:

Toolbar.expandItemActionView checks whether the ActionView implements the CollapsibleActionView interface and calls the CollapsibleActionView.onActionViewExpanded method, if so. This is your chance to fix the layout options and set the match_parent width. Derive your own class from SeekBar and let it implement CollapsibleActionView :

 public class CollapsibleSeekBar extends AppCompatSeekBar implements CollapsibleActionView { public CollapsibleSeekBar(Context context) { super(context); } public CollapsibleSeekBar(Context context, AttributeSet attrs) { super(context, attrs); } public CollapsibleSeekBar(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } @Override public void onActionViewExpanded() { ViewGroup.LayoutParams params = getLayoutParams(); params.width = ViewGroup.LayoutParams.MATCH_PARENT; setLayoutParams(params); requestLayout(); } @Override public void onActionViewCollapsed() { } } 

Use it in your menu item via app:actionViewClass .

Also use the appropriate CollapsibleActionView .

If you use android.support.v4.widget.Toolbar you will also need android.support.v7.view.CollapsibleActionView .

If you have android.widget.Toolbar use android.view.CollapsibleActionView

Answer 2

Adding Seekbar as a menu item will take the default size of the menu item . If you need a Seekbar to expand the appbar , then you can create your own Toolbar and add a Seekbar like this.

 <youtLayoutRoot> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:popupTheme="@style/AppTheme.PopupOverlay" app:titleTextColor="@color/white" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1"> <SeekBar android:layout_width="match_parent" android:layout_height="wrap_content" android:max="100" android:progress="10"/> </LinearLayout> </android.support.v7.widget.Toolbar> <!-- your content layout here --> </youtLayoutRoot> 

Make your activity theme as Theme.AppCompat.Light.NoActionBar and run the application . You should see a Seekbar covering the Toolbar .

In your activity, simply inflate the menu and it will have a size. It works for me and hopes that searching through the menu item will also work for you.

 toolbar.inflateMenu(R.menu.menu_delete) toolbar.setNavigationIcon(R.drawable.vector_back) toolbar.setNavigationOnClickListener { onBackPressed() } toolbar.setOnMenuItemClickListener { menuItem -> when (menuItem.itemId) { R.id.delete -> { deleteCall() true } else -> { false } } }