Develop Reference

Android App's Toolbar Title is Not Centred Vertically

I have been following the official documentation on how to create an app toolbar. The tutorial says that, after following the instructions,
"Your app now has a basic action bar. By default, the action bar
contains just the name of the app and an overflow menu."
Well, mine doesn't, it looks like this:
As you can see from this image, I've done some styling to get the colours as I want them, and I've added a menu item, just to see if it appeared correctly. I'll work out how to fix the colour of the icon later.
My problem is that, as you can see, the app title isn't centred vertically. It's too close to the top. This irritates me because, as far as I can tell, it should be centered automatically and I don't know why mine isn't, but I've nevertheless tried to fix this myself using styles, with absolutely no success. No style attributes seem to have any effect on the padding of just the Toolbar Title. I can add padding to the whole Toolbar, but that affects the menu item too, and I don't want it to.
My implementation looks like this:
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/main_activity_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
style="#style/MyToolbarStyle"
app:theme="#style/MyToolbarTheme" />
</LinearLayout>
styles.xml:
<resources>
<!-- Base application theme. -->
<style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="MyToolbarStyle" parent="Base.Widget.AppCompat.Toolbar">
<item name="android:elevation">4dp</item>
<item name="android:background">#color/colorPrimary</item>
</style>
<style name="MyToolbarTheme" parent="Base.Widget.AppCompat.Toolbar">
<item name="android:textColorPrimary">#ffffff</item>
</style>
Ideally, if somebody could explain where I've gone wrong so that my application title isn't centered vertically, that'd be great, but if not, can somebody tell me how to add a margin or padding just to the application title in the toolbar so that I can attempt to centre it myself?
P.S. This isn't a duplicate of this question - that question deals with a more complex custom Toolbar. Mine is supposed to be the default implementation.
Update:
As requested, here's the code for my MainActivity.java file:
package com.example.samplescanner;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuInflater;
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar MainActivityToolbar = (Toolbar) findViewById(R.id.main_activity_toolbar);
setSupportActionBar(MainActivityToolbar);
}
#Override
public boolean onCreateOptionsMenu(Menu menu)
{
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.menu_items, menu);
return super.onCreateOptionsMenu(menu);
}
}

I couldn't find the exact source of the issue from Base.Widget.AppCompat.Toolbar, but it alters the Gravity of the Toolbar. Inherit from ThemeOverlay.AppCompat.Dark.ActionBar instead:
<style name="MyTheme.ToolbarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:background">#color/colorPrimary</item>
<item name="android:elevation">4dp</item>
</style>
They use ThemeOverlay.AppCompat.ActionBar in the documentation you mentioned, but the Dark version should set the textColorPrimary attribute for you.

Change action provider back icon

Action provider back icon:
How do i change the back icon generated by the action provider.
I have already changed the back icon in all my activities with HomeAsUpIndicator.
But this generated back icon still with the default black arrow.
The image above show which icon i talk about, when i click on the search icon for example.
In my activity :
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar_equipment);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_chevron_left_white_48dp);
[...]
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.equipments_menu, menu);
MenuItem searchItem = menu.findItem(R.id.action_search);
SearchActionProvider searchActionProvider = new SearchActionProvider(this);
MenuItemCompat.setActionProvider(searchItem, searchActionProvider);
return super.onCreateOptionsMenu(menu);
}

It works with this line :
app:collapseIcon="#drawable/ic_chevron_left_white_48dp"
Put it here :
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_equipment"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:title="#string/equipments"
app:titleTextColor="#color/white"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:collapseIcon="#drawable/ic_chevron_left_white_48dp" />

Edit your styles.xml and add the following:
<style name="AppTheme" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionBarStyle">#style/CustomActionBar</item>
</style>
<style name="CustomActionBar" parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:icon">#drawable/ic_close</item>
</style>

get the SupportActionbar and specfiy the id of the icon
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_close);

AppCompat ToolBar popupTheme not used when multi selection active

In styles.xml I'm styling the popup theme of the overflow menu in the toolbar:
<style name="ToolbarOverflowMenuStyle" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:backgroundTint">#color/white</item>
</style>
That works as intended but if I do a multi selection in a recycler view (list) the popup theme background color turns from white to yellow (the color of the toolbar). I have no idea why that is since it has the right color if the multi-selection isn't active.
Any ideas what I am doing wrong?
Styling of the toolbar:
<style name="PostToolbarStyle" parent="android:Theme.Material">
<item name="android:backgroundTint">#color/yellow</item>
<item name="android:textColorHint">#color/lightGray2</item>
<item name="android:textColorPrimary">#color/defaultTextColor</item>
<item name="android:textColorSecondary">#color/defaultTextColor</item>
</style>
And this is how I set the toolbar in the layout xml file:
<android.support.v7.widget.Toolbar
android:id="#+id/app_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:minHeight="?attr/actionBarSize"
android:paddingTop="#dimen/tool_bar_top_padding"
app:popupTheme="#style/ToolbarOverflowMenuStyle"
app:theme="#style/ThemeOverlay.AppCompat.ActionBar"/>
How the popup theme looks like (correctly) when multi-selection is not active:
And here how is being displayed (wrongly) when multi-select is active:

Its Menu -ActionMode you see your default OptionsMenu popUp background is the white, and the default contextual Menu for your app is the Yellow in your case. When you enter into multi-selection a ActionMode is triggered to handle the itemClick and what have you, and since you know how CAB works.
if you want to maintain the same white background in your setMultiChoiceModeListener override onPrepareActionMode(ActionMode mode, Menu menu) and use getCustomView().setBackgroundColor(Color.White);
Edit: addressing comment
This is what i mean in your onPrePareActionMode()
#Override
public boolean onPrepareActionMode(ActionMode mode, Menu menu) {
//the mode parameter is your CAB, so call that on it
mode.getCustomView().setBackgroundColor(Color.White);
}
Hope its helpful

Can you Try editing you style with this property, selectableItemBackground
<style name="ToolbarOverflowMenuStyle" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:backgroundTint">#color/white</item>
<item name="selectableItemBackground">?android:selectableItemBackground</item></style>
Had a similar problem with SwitchCompat and the solution was in one of the properties itself. Also this blog helped a lot . http://blog.mohitkanwal.com/blog/2015/03/07/styling-material-toolbar-in-android/

Transparent status bar not working with windowTranslucentNavigation="false"

I am developing an Activity where I need to make the navigation bar opaque, and the status bar transparent on devices running 5.0+ (API 21+). The styles I am using are below, along with an explanation of my problem.
AppTheme extends Theme.AppCompat.Light.NoActionBar
<item name="android:statusBarColor">#color/transparent</item>
<item name="android:windowActionBar">false</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#color/welbe_red_transparent</item>
FullscreenTheme extends AppTheme
<item name="android:windowNoTitle">true</item>
<item name="android:statusBarColor">#color/transparent</item>
<item name="android:windowTranslucentNavigation">true</item>
This makes the app look like this
If I remove the android:windowTranslucentNavigation style, or set it to false in Fullscreen, it fixes the navigation bar issue. The problem is the status bar turns completely white instead of staying transparent and displaying the content behind it.
I have tried using fitsSystemWindow="true" in my layouts, but it didn't fix the issue. Anyone know why this is happening?

android:windowTranslucentNavigation does one thing that android:statusBarColor doesn't do, which is requesting the SYSTEM_UI_FLAG_LAYOUT_STABLE and SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN flags.
These are the ones that you need to request in order to draw behind the status bar.
Request them in the onCreate of your Activity:
getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
Alternatively you can also simply set your apps theme background and that will also pop up behind your status bar.
More information here.

As far as I know there's no proper way to set the color of the status bar on APIs lower than 19.
For API 19+ you can use a similar attribute to windowTranslucentNavigation only for the status bar:
<item name="android:windowTranslucentStatus">true</item>
Notes:
The reason you were getting a white status bar is because of
<item name="android:statusBarColor">#color/transparent</item>
There are some hacks that work on specific manufacturer devices, but I wouldn't use them myself.

I struggle with this for over 3 hours. Wrap everything in a CoordinatorLayout it is the only one that seems to pay attention to the fitsSystemWindow="true" or "false"
This is my main activity fragment
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/content_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/layout_google_map"/>
<include layout="#layout/layout_toolbar_transparent"/>
<include layout="#layout/layout_action_buttons"/>
<include layout="#layout/layout_bottom_sheet"/>
</android.support.design.widget.CoordinatorLayout>
this is my toolbar layout
<android.support.design.widget.CoordinatorLayout
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="match_parent"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:theme="#style/ToolbarTheme"
app:popupTheme="#style/AppTheme.PopupOverlay">
<android.support.v7.widget.AppCompatImageView
android:layout_width="wrap_content"
android:layout_height="?actionBarSize"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:adjustViewBounds="true"
app:srcCompat="#drawable/ic_fynd_logo_red"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CoordinatorLayout>
as you can see, my fragment layout makes the google map be drawn under the status bar.
I have an action bar where the company's logo goes.
And other ui buttons "layout_action_buttons" also wrapped in a Coordinator layout , so the fitsSystemsWindows works.
Check it out.

To achieve this in any activity
Add the style:
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:windowBackground">#android:color/white</item>
</style>
Use CoordinatorLayout as root layout in XML
In oncreate() method, before setcontentview use
window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_STABLE or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN

For the latest android version R and backward compatibility, this works for me.
WindowCompat.getInsetsController(window, window.decorView)?.isAppearanceLightStatusBars =false /* true for dark icon on StatusBar and false for white icon on StatusBar */
WindowCompat.setDecorFitsSystemWindows(window, false)
WindowCompat.getInsetsController(window, window.decorView)?.show(WindowInsetsCompat.Type.statusBars())
ViewCompat.setOnApplyWindowInsetsListener(findViewById(android.R.id.content)) { rootView, insets ->
val navigationBarHeight = insets.getInsets(WindowInsetsCompat.Type.navigationBars()).bottom
rootView.setPadding(0, 0, 0, navigationBarHeight)
insets
}
For Fragment, you can use activity?.window...

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