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.
Related
When I open the overflow menu in my application, I see a solid rectangle of the menu background color displayed behind the menu itself throughout the enter/exit animations. Here's an animation showing this (slowed to 75% speed):
The presence of this extraneous colored rectangle spoils the nice enter/exit animations! How can I remove it while retaining all other Toolbar styling?
Research
I've read a bunch of answers on Toolbar styling on SO, and Chris Banes' own posts on the subject. It seems that usage of the style/theme tags on a per-View basis has changed in the past couple years, which has made it difficult to find definitive information anywhere.
I've reproduced this using versions 22.1.0 through 23.2.0 (inclusive) of the support library.
App files
styles.xml
<resources>
<style name="AppTheme" 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="ToolbarStyle" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:background">#color/colorPrimary</item>
</style>
</resources>
activity_main.xml
<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="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:style="#style/ToolbarStyle" />
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
Runtime View Analysis
As #Commonsware suggested, I took a look at the view hierarchy at run time. Editing in the results:
Menu collapsed (overflow button present, no mysterious extra rectangle):
Menu expanded (overflow menu views displayed in separate Window):
The main application view hierarchy (as displayed in the original Window) is unchanged when comparing the two menu (steady) states. My guess is therefore that the extra rectangle is temporarily added to the main application's window during menu animations, and immediately removed upon their completion. I'm not sure why this would be done - perhaps it's a hangover from an older (and now unused) method of showing and hiding the overflow menu? If my deduction is correct, then this question could be resolved if we can determine how to prevent this transitory behavior...
An extract from the Chris Bane's answer to the question AppCompat style background propagated to the Image within the ToolBar
style = local to the Toolbar
theme = global to everything inflated in the Toolbar
Based on the above post it seems, the android:background attribute you are setting in the android:theme is the reason for the extra background color during the animation.
I'd set the background to the toolbar directly and used the android:colorBackground attribute to set the background color for the popup. The animation seems to work fine.
Code:
activity_main.xml
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:theme="#style/CustomToolbarTheme" />
styles.xml
<style name="CustomToolbarTheme" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:colorBackground">#color/colorPrimary</item>
<item name="android:textColorPrimary">#android:color/white</item>
</style>
Background
I'm trying to theme my app to have more material design look, and as such, I have a toolbar that's being set as the actionBar of the activity.
I have a SearchView in it that allows to search items of the listView below.
The problem
Thing is, you can select the text in the SearchView (to copy, cut, etc...), yet when this happens, the toolbar gets the text-selection toolbar on top of it, making it and the text itself hidden:
Before text selection:
After text selection:
What I've tried
I tried to disable text selection using this code:
final EditText searchTextView=(EditText)searchView.findViewById(R.id.search_src_text);
if(searchTextView!=null&&VERSION.SDK_INT>=VERSION_CODES.HONEYCOMB)
searchTextView.setTextIsSelectable(false);
But it didn't do anything. I've also tried to search for how to listen for the even of text selection (so that I could set the toolbar a marginTop or something), but I didn't find it.
The only thing that I have succeeded is using this code, which tells me when the text-selection toolbar appears (but not when it disappears) :
searchTextView.setOnCreateContextMenuListener(new OnCreateContextMenuListener()
{
#Override
public void onCreateContextMenu(final ContextMenu menu,final View v,final ContextMenuInfo menuInfo)
{
Log.d("AppLog","onCreateContextMenu");
}
});
This doesn't help. I can't even close the menu. I think it can't even help, as some devices might show something else instead of a toolbar (like on LG devices, where they have a small popup).
The code
The layout is basically a vertical LinearLayout, where the first item is the toolbar:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/activity_app_list__toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:colorControlNormal="?attr/colorControlNormal"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme"
tools:ignore="UnusedAttribute"/>
...
The theme that's used is set to hide the normal action bar:
<style name="AppTheme" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
...
The action bar menu's XML is quite basic and has 3 action items, where the first one of them is the searchView:
<item
android:id="#+id/menuItem_search"
android:icon="?attr/app_search_menu_icon"
android:title="#string/search"
app:actionViewClass="android.support.v7.widget.SearchView"
app:showAsAction="always|collapseActionView"/>
Handling the SearchView is done via a special class I've made that supports even old Android versions. This is the main function that handles the searchView :
#TargetApi(Build.VERSION_CODES.ICE_CREAM_SANDWICH)
public void init(final MenuItem searchMenuItem,final int hintResId,final OnQueryTextListener onQueryTextListener,final OnActionExpandListener onActionExpandListener)
{
this._searchMenuItem=searchMenuItem;
if(_searchView==null)
{
_searchView=(SearchView)MenuItemCompat.getActionView(searchMenuItem);
if(_searchView==null)
{
MenuItemCompat.setShowAsAction(searchMenuItem,MenuItem.SHOW_AS_ACTION_COLLAPSE_ACTION_VIEW|MenuItem.SHOW_AS_ACTION_ALWAYS);
MenuItemCompat.setActionView(searchMenuItem,_searchView=new SearchView(_context));
}
_searchView.setQueryHint(_context.getString(hintResId));
if(VERSION.SDK_INT<VERSION_CODES.HONEYCOMB)
{
final EditText searchTextView=(EditText)_searchView.findViewById(R.id.search_src_text);
if(searchTextView!=null)
{
searchTextView.setScroller(new Scroller(_context));
searchTextView.setMaxLines(1);
searchTextView.setVerticalScrollBarEnabled(true);
searchTextView.setMovementMethod(new ScrollingMovementMethod());
final int searchTextColorResId=App.getResIdFromAttribute(_context,android.R.attr.textColorPrimary);
if(searchTextColorResId!=0)
searchTextView.setTextColor(_context.getResources().getColor(searchTextColorResId));
else
{
// TODO workaround for some v2.3 devices that can't get the correct color. remove this when stopping the support for v2.3
TextView searchBadge=(TextView)_searchView.findViewById(R.id.search_badge);
if(searchBadge!=null)
searchTextView.setTextColor(searchBadge.getTextColors());
}
}
}
_searchView.setOnQueryTextListener(onQueryTextListener);
MenuItemCompat.setOnActionExpandListener(searchMenuItem,onActionExpandListener);
}
}
The function is called at the end of "onCreateOptionsMenu" of any activity/fragment that is supposed to have a searchView, for example:
_searchHolder.init(menu.findItem(R.id.menuItem_search),R.string.search_for_apps,onQueryTextListener,onActionExpandListener);
The question
How can I solve this issue? Obviously this has happened because the Toolbar is just a view, so the text-selection bar is shown on top of it, but is there any way to fix this?
How do I avoid the extra toolbar become on top of the one I've used?
Is there a way to support all devices in this regard?
Looking at Google's apps, it seems that they usually don't use the official searchView, but one of their own. Only on Youtube it seems like the official one, but there it seems as if they also use the official actionBar (plus it has weird colors when selecting the text).
I found in many apps(Google messenger, Contacts etc) text selection is disabled in search view. You can do that by setting your toolbar theme as.
<style name="toolbarTheme" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:autoCompleteTextViewStyle">#style/SearchViewStyle</item>
<item name="android:textColor">#android:color/white</item>
<item name="android:textColorPrimary">#android:color/white</item>
<item name="android:editTextColor">#android:color/white</item>
</style>
<style name="SearchViewStyle" parent="#android:style/Widget.Holo.Light.AutoCompleteTextView">
<item name="android:longClickable">false</item>
</style>
Or if you want it like youtube add this line in your theme
<item name="windowActionModeOverlay">false</item>
Thanks of the Max's answer, I've tried looking the AppCompat style files by clicking on references one after another, I've found Widget.AppCompat.AutoCompleteTextView. Override it in your Toolbar theme with:
<item name="android:autoCompleteTextViewStyle">#style/AppTheme.SearchViewStyle</item>
<style name="AppTheme.SearchViewStyle" parent="Widget.AppCompat.AutoCompleteTextView">
<item name="android:longClickable">false</item>
</style>
It disables the longClick in SearchView. This works on devices from API 14 (didn't try previous versions) to API 22.1.1 at least.
I'm having trouble implementing a Toolbar in my Android application. I have several problems, really.
First off, here's my MainActivity.java:
public class MainActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar_Main);
toolbar.setLogo(R.drawable.logo);
toolbar.setTitle(R.string.app_name);
toolbar.inflateMenu(R.menu.main_actions);
setActionBar(toolbar);
}
}
activity_main.xml:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity"
android:nestedScrollingEnabled="false">
<Toolbar
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:id="#+id/toolbar_Main"
android:background="?android:attr/colorPrimary" />
<!-- There's an EditText here, but I think that's not the problem -->
</LinearLayout>
styles.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="android:Theme.Material.Light">
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
<item name="android:colorPrimary">#color/primaryColor</item>
<item name="android:colorPrimaryDark">#color/primaryColorDark</item>
</style>
</resources>
The problems I'm having are:
the menu is gone;
the logo and title text are centered in the Toolbar, even though I'm pretty sure I haven't set any property to center or whatever.
Now the first problem I can fix by removing the setActionBar part (not sure if that's good practice though), but second one, not so much. The logo and text remain centered no matter what I try. I've tried setting the Toolbar's gravity to top|left, as well as some other things, all to no avail.
When searching on Google (or StackOverflow), all I get are results asking to center the text, which is what I don't want.
I should also mention that I'm developing the app only for API level 21, so no AppCompat and all that fancy stuff, just a Toolbar that I wish to use as the app's main ActionBar.
I'm probably just missing some tiny thing, so thanks in advance.
To me:
You should not remove the setActionBar() call;
Your menu might be disappearing because maybe you have a hardware menu button on your device. Try tapping and see what happens. To fix however, try deleting the inflateMenu() line and inflate the menu during onCreateOptionsMenu(), as usual;
Title and logo issues, as well as menu disappearing, might be due to:
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
Why these lines? Just remove them if you don't need.
If this doesn't fix, try calling setActionBar(toolbar) first, and then set title using getActionBar().setTitle() . However I'm pretty sure that removing the two window lines from your style will be enough, so do that first.
I have the same problem as was described here - Setting a custom share icon on Actionbar ShareActionProvider
But I'am not using ActionBarSherlockI found that the Sherlock theme uses the "actionModeShareDrawable" and I can also use it like this, if I don't use ActionBarSherlock
<style name="Theme.MyApp" parent="android:Theme.Holo">
<item name="*android:actionModeShareDrawable">#drawable/icon</item>
</style>
This works fine on my nexus 5, but failed on many other devices
So my question is, how to change that icon without using ActionBarSherlock
You can subclass ShareActionProvider, overriding only the constructor and createActionView().
From here, you can get the View from super, casting it to ActivityChooserView so you can call
setExpandActivityOverflowButtonDrawable(Drawable) to change the icon.
package com.yourpackagename.whatever;
import android.content.Context;
import android.graphics.drawable.Drawable;
import android.support.v7.internal.widget.ActivityChooserView;
import android.support.v7.widget.ShareActionProvider;
import android.view.View;
import com.yourpackagename.R;
public class CustomShareActionProvider extends ShareActionProvider {
private final Context mContext;
public CustomShareActionProvider(Context context) {
super(context);
mContext = context;
}
#Override
public View onCreateActionView() {
ActivityChooserView chooserView =
(ActivityChooserView) super.onCreateActionView();
// Set your drawable here
Drawable icon =
mContext.getResources().getDrawable(R.drawable.ic_action_share);
chooserView.setExpandActivityOverflowButtonDrawable(icon);
return chooserView;
}
}
I like PrplRugby's answer, but you have to include the ActivityChooserView in your app. I refactored to use reflection which you can find here: https://gist.github.com/briangriffey/11185716
You can use in the menu like this
menu.xml
<item android:id="#+id/menu_share"
android:title="#string/share"
app:actionProviderClass="android.support.v7.widget.ShareActionProvider"
app:showAsAction="always"
android:orderInCategory="100"/>
And into your set icon if api>21 android:actionModeShareDrawable otherwise actionModeShareDrawable
Style.xml
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
....
<item name="actionModeShareDrawable">#drawable/share</item>
</style>
In the last apply this theme
manifest.xml
<application
...
android:theme="#style/AppTheme" >
I know this is not in a theme but I set my share icon in menu.xml. This may help if you are just trying to have a custom icon.
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#+id/share" android:showAsAction="always" android:title="#string/share" android:icon="#drawable/ic_menu_share"/>
</menu>
I am surprised it works at all. Try changing actionModeShareDrawalbe to actionModeShareDrawable.
<style name="Theme.MyApp" parent="android:Theme.Holo">
<item name="android:actionModeShareDrawable">#drawable/icon</item>
</style>
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