How to display custom view in ActionBar?

Question

I want to show custom search in the action bar (for this I use ActionBarSherlock).

I got it:

But I want the custom layout (edittext field) to occupy the entire available width.

I implemented the custom layout suggested here .

There is my custom search.xml layout:

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" style="?attr/actionButtonStyle" android:layout_width="fill_parent" android:layout_height="match_parent" android:layout_gravity="fill_horizontal" android:focusable="true" > <FrameLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center_vertical|fill_horizontal" > <EditText android:id="@+id/search_query" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="left|center" android:background="@drawable/bg_search_edit_text" android:imeOptions="actionSearch" android:inputType="text" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right|center_vertical" android:src="@drawable/ic_search_arrow" /> </FrameLayout> </LinearLayout> 

And in MyActivity :

 ActionBar actionBar = getSupportActionBar(); actionBar.setDisplayHomeAsUpEnabled(true); actionBar.setDisplayShowCustomEnabled(true); actionBar.setDisplayShowTitleEnabled(false); actionBar.setIcon(R.drawable.ic_action_search); LayoutInflater inflator = (LayoutInflater) this .getSystemService(Context.LAYOUT_INFLATER_SERVICE); View v = inflator.inflate(R.layout.search, null); actionBar.setCustomView(v); 

How can I make a custom layout take up the entire available width of an actionBar ?

Help me please.

Answer 1

There is a trick for this. All you have to do is use RelativeLayout instead of LinearLayout as the main container. It is important to set android:layout_gravity="fill_horizontal" for it. That should do it.

Answer 2

I myself struggled with this and tried to answer Tomik. However, this did not make the layout fully accessible width at startup, only when you added something to the view.

When adding a view, you need to set LayoutParams.FILL_PARENT :

 //I'm using actionbarsherlock, but it the same. LayoutParams layout = new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT); getSupportActionBar().setCustomView(overlay, layout); 

Thus, it completely fills the available space. (You may need to use Tomik's solution too).

Answer 3

The answers from Tomik and Peterdk work when you want your custom view to occupy the entire action bar, even while hiding your own title.

But if you want your custom view to live side by side with the title (and fill in all the remaining space after the name is displayed), can I pass you an excellent answer from the Android-Developer user here:

stack overflow

His code below worked fine for me.

Answer 4

For example, you can define a layout file containing an EditText element.

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

You can do

 public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ActionBar actionBar = getActionBar(); // add the custom view to the action bar actionBar.setCustomView(R.layout.actionbar_view); EditText search = (EditText) actionBar.getCustomView().findViewById(R.id.searchfield); search.setOnEditorActionListener(new OnEditorActionListener() { @Override public boolean onEditorAction(TextView v, int actionId, KeyEvent event) { Toast.makeText(MainActivity.this, "Search triggered", Toast.LENGTH_LONG).show(); return false; } }); actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM | ActionBar.DISPLAY_SHOW_HOME); } 

Answer 5

Here's how it worked for me (above, the answers to it showed both the default name and my user view).

 ActionBar.LayoutParams layout = new ActionBar.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT); // actionBar.setCustomView(view); //last view item must set to android:layout_alignParentRight="true" if few views are there actionBar.setCustomView(view, layout); // layout param width=fill/match parent actionBar.setDisplayShowCustomEnabled(true);//must other wise its not showing custom view. 

I noticed that both setCustomView(view) and setCustomView(view,params) width = match / fill parent. setDisplayShowCustomEnabled (boolean showCustom)

Answer 6

In the Android launcher application (for example, I created a library from this application) there is an example that is inside a class that handles the selection of wallpapers ("WallpaperPickerActivity").

This example shows that you need to configure a custom theme for this. Unfortunately, this worked for me only using the usual structure, and not from the support library.

Here are the topics:

styles.xml

  <style name="Theme.WallpaperPicker" parent="Theme.WallpaperCropper"> <item name="android:windowBackground">@android:color/transparent</item> <item name="android:colorBackgroundCacheHint">@null</item> <item name="android:windowShowWallpaper">true</item> </style> <style name="Theme.WallpaperCropper" parent="@android:style/Theme.DeviceDefault"> <item name="android:actionBarStyle">@style/WallpaperCropperActionBar</item> <item name="android:windowFullscreen">true</item> <item name="android:windowActionBarOverlay">true</item> </style> <style name="WallpaperCropperActionBar" parent="@android:style/Widget.DeviceDefault.ActionBar"> <item name="android:displayOptions">showCustom</item> <item name="android:background">#88000000</item> </style> 

Value-V19 / styles.xml

  <style name="Theme.WallpaperCropper" parent="@android:style/Theme.DeviceDefault"> <item name="android:actionBarStyle">@style/WallpaperCropperActionBar</item> <item name="android:windowFullscreen">true</item> <item name="android:windowActionBarOverlay">true</item> <item name="android:windowTranslucentNavigation">true</item> </style> <style name="Theme" parent="@android:style/Theme.DeviceDefault.Wallpaper.NoTitleBar"> <item name="android:windowTranslucentStatus">true</item> <item name="android:windowTranslucentNavigation">true</item> </style> 

EDIT: There is a better way to do this, which also works in the support library. Just add this line of code instead of what I wrote above:

 getSupportActionBar().setDisplayShowCustomEnabled(true);