Develop Reference

Toolbar navigation icon can't be center inside

I want to set the navigation icon for my toolbar ,and get into the problem that the icon isn't center inside by default it looks like:
and the code is:
setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
actionBar.setHomeButtonEnabled(true);
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setDisplayShowTitleEnabled(false);
toolbar.setNavigationIcon(R.drawable.ic_arrow_back_white_48dp);
and the theme.xml is:
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:windowTranslucentStatus">true</item>
<item name="android:navigationBarColor">#color/colorPrimaryDark</item>
<item name="android:windowContentTransitions">true</item>
<item name="android:windowAllowEnterTransitionOverlap">true</item>
<item name="android:windowAllowReturnTransitionOverlap">true</item>
and the layout xml is:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_height"
/>
I think I have tried everything I know but I just can't figure it out.I used to set the navigation icon for toolbar then it will be center inside and now.Any help will save my day!
Eidted: of course I tried different size of icons
and I konw I could add a custom layout in toolbar or customize a layout like (which is a Linearlayout I write about)
But I just don't why I can't set the navigation icon like before,it will automatically be center inside....I think maybe I should change the theme or define something like navigationButttonStyle in the attributes....

I fix this by inherit the right theme Widget.AppCompat.Toolbar rather than ThemeOverlay.AppCompat.Dark.ActionBar to define my own toolbar style.
And use
<item name="toolbarStyle">#style/MyToolBar</item>
to set the toolbarStyle

I think you are using a bit big image. Try figure it out using this link

OK now I finally find out where the problem is: which has nothing to do with the icon size
You should place the image resource in the to the corresponding folder like (drawable-xxhdpi , drawable-xhdpi).If you don't do so,which means if you just put it in the drawable folder , it won't be auto resized to be center inside in your toolbar;

Custom action bar is overlapping other elements

I am trying to implement a custom action bar in an activity. I have done so below, but am getting my custom action bar overlapped with another. I have attached the screen shot below.
public class MainActivity extends ActionBarActivity {
private TextView actionBarTitle;
#Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ActionBar actionBar = getSupportActionBar();
View customView=getLayoutInflater().inflate(R.layout.actionbar_layout, null);
actionBar.setCustomView(customView);
actionBarTitle =(TextView)findViewById(R.id.actionbar_text);
actionBarTitle.setText("Action bar");
}
}
Manifest:
<application
android:name="MyApplication"
android:allowBackup="true"
android:icon="#drawable/ic_launcher"
android:label="#string/app_name"
android:theme="#style/AppBaseTheme"
android:requiredForAllUsers="false">
<activity android:name="MainActivity"
android:screenOrientation="portrait"/>
</application>
actionbar_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:orientation="vertical" >
<ImageView
android:id="#+id/actionbar_icon"
android:layout_width="wrap_content"
android:layout_height="32dp"
android:layout_alignParentTop="true"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/actionbar_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_toRightOf="#+id/actionbar_icon"
android:text="title" />
</RelativeLayout>
strings.xml:
<resources>
<string name="app_name">sample</string>
</resources>
styles.xml
<resources>
<!--
Base application theme, dependent on API level. This theme is replaced
by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
-->
<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
<!--
Theme customizations available in newer API levels can go in
res/values-vXX/styles.xml, while customizations related to
backward-compatibility can go here.
-->
</style>
<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
</style>
<style name="Dialog_No_Border">
<item name="android:windowIsFloating">true</item>
<item name="android:windowBackground">#color/transparent_color</item>
</style>
</resources>
How can I remove the sample text and black background so that only the custom view is displayed?

What you are showing in your screenshot is exactly what the specification says is supposed to happen. When you use a custom view in the action bar, it is placed in between where the app icon (if any) on the left side of the action bar and the action buttons (if any) on the right side of the action bar.
Custom navigation views appear between the application icon and any action buttons and may use any space available there.
ActionBar#setCustomView(View view)

try to Extend from Activity class and use Actionbar.
public class MainActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ActionBar actionBar = getActionBar();
**actionBar.setDisplayShowHomeEnabled(false);
actionBar.setDisplayShowTitleEnabled(false);**
LayoutInflater mInflater = LayoutInflater.from(this);
View mCustomView = mInflater.inflate(R.layout.custom_actionbar, null);
TextView mTitleTextView = (TextView) mCustomView.findViewById(R.id.title_text);
mTitleTextView.setText("your title here");
actionBar.setCustomView(mCustomView);
actionBar.setDisplayShowCustomEnabled(true);
It worked for me!by inflating custom actionbar! but make sure it doesn't hinder other layout or components.
ps : i have used this in one of my project and worked well,if you're going through any error/bug/suggestion correct me.

Removing Extra Space in Custom ActionBar

My issue concerns using fully custom ActionBar views (as it's necessary for how my customer wants the ActionBar to work). I've removed the logo, title, and everything else possible. However, the custom view for the ActionBar will not extend all the way across the screen.
I've tried the following (as a quick overview):
Dynamically removing aspects of the ActionBar (snippet below)
Removing the Options Menu in its entirety
Specifying in the Style/Theme to remove everything from the ActionBar
Here is a screenshot of my issue:
Here is the style: (as a side note, I originally kept the native ActionBar but removed most of it)
<!-- Customized App Theme -->
<style name="AppTheme2" parent="Theme.AppCompat.Light">
<!-- Let the actioBbar overlay the activity, ie activity is full screen -->
<item name="android:windowActionBarOverlay">true</item>
<!-- Set up the action bar styles -->
<item name="android:actionBarStyle">#style/ActionBarEmpty</item>
<!-- Remove the shadow under the actionBar -->
<item name="android:windowContentOverlay">#null</item>
<!-- Set the drawer icon to show up instead of the "Up" caret icon
<item name="android:homeAsUpIndicator">#drawable/ic_drawer</item>
<item name="homeAsUpIndicator">#drawable/ic_drawer</item>
-->
<!-- Support library compatibility -->
<item name="actionBarStyle">#style/ActionBarEmpty</item>
</style>
<!-- Final, empty Action Bar style | makes space for customized actionBar -->
<style name="ActionBarEmpty" parent="Widget.AppCompat.Base.ActionBar">
<!-- TODO: Add support versions -->
<item name="android:displayOptions">none</item>
<item name="android:background">#color/transparent</item>
<!-- Tested the below, does absolute nothing -->
<item name="android:layout_margin">0dp</item>
<item name="android:padding">0dp</item>
<item name="android:minWidth">0dp</item>
</style>
Here is the code in my Activity that concerns setting up the ActionBar:
// Initialize and set up the ActionBar
mActionBar = getActionBar();
mActionBar.setDisplayHomeAsUpEnabled(false);
mActionBar.setDisplayShowHomeEnabled(false);
mActionBar.setDisplayShowTitleEnabled(false);
mActionBar.setDisplayShowCustomEnabled(true);
// Set the actionBar layout initially to the simple one
mActionBar.setCustomView(mViewActionBarSimple);
Here is the view shown in the screenshot for the ActionBar:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="?android:actionBarSize"
android:background="#color/white">
<ImageButton
android:id="#+id/navButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="#dimen/padding_actionbar_icon"
android:paddingBottom="#dimen/padding_actionbar_icon"
android:paddingRight="#dimen/padding_actionbar_icon"
android:paddingEnd="#dimen/padding_actionbar_icon"
android:layout_marginLeft="#dimen/margin_actionbar_icon_left"
android:layout_marginStart="#dimen/margin_actionbar_icon_left"
android:src="#drawable/ic_drawer_normal"
android:background="?android:attr/selectableItemBackground"
/>
<TextView
android:id="#+id/textTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/margin_general"
android:layout_gravity="center"
android:textColor="#color/black"
android:textSize="#dimen/text_normal"
android:text="#string/garbage_fill_short"
/>
</LinearLayout>
In addition to trying to remove everything I could think of, I also tried to remove the options menu:
#Override
public boolean onCreateOptionsMenu(Menu menu) {
return false;
}
#Override
public boolean onPrepareOptionsMenu(Menu menu) {
// To remove the options menu - and make the custom actionBar take the full space -
// always return false
return false;
}
I'm running this on a Samsung Galaxy S4 with Android KitKat.
Thank you for reading this. Any help would be appreciated at this point.
Update: For anyone reading this, I don't know why it worked like this, but I came upon the problem after following the below answer. I surrounded the actionBar layout with a RelativeLayout [with the LinearLayout and its contents as the children], and the width/background fixed itself... The answer is still amazing as its very clear cut and absolutely removes the actionBar, while before I was still using it in some way.

Please try below for removing action bar content by creating base activity so you can refer in all your app & inflate custom action bar from layout
#SuppressLint("InlinedApi")
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
getSupportActionBar().hide();
ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayHomeAsUpEnabled(false);
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setDisplayShowTitleEnabled(false);
actionBar.setDisplayShowHomeEnabled(false);
actionBar.setHomeButtonEnabled(false);
actionBar.setIcon(new ColorDrawable(getResources().getColor(android.R.color.transparent)));
View homeIcon = findViewById(android.R.id.home);
// Hides the View (and so the icon)
if (homeIcon != null)
((View) homeIcon.getParent()).setVisibility(View.GONE);
overridePendingTransition(0, 0);
}
add custom view
#SuppressLint("InlinedApi")
#Override
public void setContentView(int layoutResID)
{
super.setContentView(R.layout.activity_base);
ViewGroup viewGroup = (ViewGroup) findViewById(R.id.container);
viewGroup.removeAllViews();
viewGroup.addView(getLayoutInflater().inflate(layoutResID, null));
// you can find action_bar layouts view & add listner
}
and customise XML containing custom action bar in activity_base.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="right"
android:orientation="vertical" >
<include layout="#layout/action_bar" />
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="right" />
</LinearLayout>
Where you want to use then extend this activity.

How to display custom view in ActionBar?

I want to display custom search in actionbar (I'm using ActionBarSherlock for that).
I got that:
But I want make custom layout (edittext field) to occupy the entire available width.
I've implemented custom layout as suggested here.
There is my custom layout search.xml:
<?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 custom layout to occupy all the available width of actionBar?
Help, please.

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

I struggled with this myself, and tried Tomik's answer.
However, this didn't made the layout to full available width on start, only when you add something to the view.
You'll need to set the LayoutParams.FILL_PARENT when adding the view:
//I'm using actionbarsherlock, but it's the same.
LayoutParams layout = new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);
getSupportActionBar().setCustomView(overlay, layout);
This way it completely fills the available space. (You may need to use Tomik's solution too).

This is how it worked for me (from above answers it was showing both default title and my custom view also).
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.
What I noticed is that both setCustomView(view) and setCustomView(view,params) the view width=match/fill parent. setDisplayShowCustomEnabled (boolean showCustom)

The answers from Tomik and Peterdk work when you want your custom view to occupy the entire action bar, even hiding the native title.
But if you want your custom view to live side-by-side with the title (and fill all remaining space after the title is displayed), then may I refer you to the excellent answer from user Android-Developer here:
https://stackoverflow.com/a/16517395/614880
His code at bottom worked perfectly for me.

For example, you can define a layout file which contains a 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);
}

There is an example in the launcher app of Android (that I've made a library out of it, here), inside the class that handles wallpapers-picking ("WallpaperPickerActivity") .
The example shows that you need to set a customized theme for this to work. Sadly, this worked for me only using the normal framework, and not the one of the support library.
Here're the themes:
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 it, which works on the support library too. Just add this line of code instead of what I've written above:
getSupportActionBar().setDisplayShowCustomEnabled(true);

Setting a custom share icon on Actionbar ShareActionProvider

I'm trying to set the icon ShareActionProvider, need a solid white one instead of the semi transparent white one.
However setting in share_menu.xml and code doesn't work. Just wondering whether anyone has got workaround for this before extending the ShareActionProvider. (I'm using actionbarsherlock)
#Override
public void onCreateOptionsMenu(final Menu menu, final MenuInflater inflater) {
inflater.inflate(R.menu.share_menu, menu);
MenuItem actionItem = menu.findItem(R.id.share_action_provider);
ShareActionProvider actionProvider = (ShareActionProvider) actionItem.getActionProvider();
actionProvider.setShareIntent(mShareIntent);
// re-setting the icon as it's not being picked up from the menu xml file
actionItem.setIcon(R.drawable.ic_action_share);
super.onCreateOptionsMenu(menu, inflater);
}
share_menu.xml
<item android:id="#+id/share_action_provider"
android:showAsAction="ifRoom"
android:title="#string/share_with"
android:icon="#drawable/ic_action_share"
android:actionProviderClass="com.actionbarsherlock.widget.ShareActionProvider" />
Update:
Also tried setting it in the style, but no joy
<style name="Theme.MyApp" parent="Theme.Sherlock.Light">
<item name="actionModeStyle">#style/ActionModeStyle</item>
<item name="android:actionModeStyle">#style/ActionModeStyle</item>
</style>
<style name="ActionModeStyle" parent="Widget.Sherlock.ActionMode">
<item name="actionModeShareDrawable">#drawable/ic_action_share</item>
</style>

When I am looking to customize the action bar, usually the first place I look is the ActionBarSherlock themes and styles.
I found that the Sherlock theme uses the "actionModeShareDrawable" as found in theme.xml file.
Try changing your theme to include the "actionModeShareDrawable" item directly.
<style name="Theme.MyApp" parent="Theme.Sherlock.Light">
<item name="actionModeShareDrawable">#drawable/ic_action_share</item>
</style>

For AppCompat the changes to 2 styles are needed:
1)
<style name="MyAppTheme" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="actionBarWidgetTheme">#style/Theme.AppCompat.CustomShareIcon</item>
<item name="android:actionBarWidgetTheme">#style/Theme.AppCompat.CustomShareIcon</item>
</style>
In other words, specifiing attr:actionModeShareDrawable in your MyAppTheme is not what you really need, but it should be mentioned in your attr:actionBarWidgetTheme as following:
2)
<style name="Theme.AppCompat.CustomShareIcon" parent="#style/Theme.AppCompat">
<item name="actionModeShareDrawable">#drawable/abc_ic_menu_share_holo_dark</item> <!-- your icon goes here -->
</style>

UPDATE: Forget about the TRICKY way below, just sub-class ShareActionProvider, return null in onCreateActionView Method, and provide your own icon in menu.xml file, everything will be fine
===========================
I found a very tricky but none-ActionBarSherlock-specific way:
Sub-class ShareActionProvider, with just a little tweak:
#Override
public View onCreateActionView() {
View target = super.onCreateActionView();
ViewGroup viewGroup = (ViewGroup) LayoutInflater.from(context).inflate(R.layout.actionbutton_share, null);
ImageView overlay = (ImageView) viewGroup.findViewById(R.id.overlay);
ViewGroup container = (ViewGroup) viewGroup.findViewById(R.id.container);
container.addView(target);
container.getLayoutParams().width = overlay.getLayoutParams().width;
container.getLayoutParams().height = overlay.getLayoutParams().height;
return viewGroup;
}
Create a layout file (R.layout.actionbutton_share), which place the original view at top but transparent to user (Note the "android:alpha=0" part) :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical" >
<FrameLayout
android:id="#+id/container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:alpha="0" />
<ImageView
android:id="#+id/overlay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginLeft="7dp"
android:layout_marginRight="7dp"
android:src="#drawable/yours_whatever_share_icon"
tools:ignore="ContentDescription" />
</RelativeLayout>
Use the hacked ShareActionProvider in your menu.xml file

vivimice's solution is good, but the icon of last used app for sharing becomes hidden too.
I did custom share icon as a common menu item without any ShareActionProvider, just in onOptionsItemSelected() method used this code:
Intent sendIntent = new Intent();
sendIntent.setAction(Intent.ACTION_SEND);
sendIntent.putExtra(Intent.EXTRA_TEXT, "This is my text to send.");
sendIntent.setType("text/plain");
startActivity(Intent.createChooser(sendIntent, getResources().getText(R.string.send_to)));
It creates not a popup menu, but a chooser dialog.

You can override the non-public attribute like this.
<style name="Theme.MyApp" parent="android:Theme.Holo">
<item name="*android:actionModeShareDrawalbe">#drawable/icon</item>
</style>
(*) means reference to the non-public resources in Android