I'm trying to implement SearchView in my Android application but there is an extra padding when expanding it.
The SearchView is integrated in the Menu and when the app launches, I have a search icon inside the Toolbar. When I click that search button, the SearchView expands but has an extra padding.
Here are some photos so you can understand the issue:
This is the initial toolbar
When I click the search icon, this is what I get
I found one solution, to add a negative left padding (-16dp) to the SearchView: searchView.setPadding(getResources().getDimensionPixelSize(R.dimen.search_view_minus), 0, 0, 0);
Unfortunately, if I use this solution the search icon on the right side of the toolbar will be affected (somehow the SearchView gets over the search icon).
This is my menu:
<?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"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity">
<item
android:id="#+id/action_search"
android:icon="#drawable/ic_search_white_48dp"
app:showAsAction="always"
app:actionViewClass="android.support.v7.widget.SearchView"
android:title="Cauta..."/>
</menu>
This is my toolbar layout:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_home"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
app:theme="#style/AppTheme.Title"
app:titleMarginStart="0dp"
app:navigationIcon="#drawable/ic_menu_white_24dp"
app:contentInsetStartWithNavigation="0dp"
app:contentInsetEndWithActions="0dp"
app:contentInsetStart="0dp"
app:contentInsetEnd="0dp" />
This is some custom style applied to the SearchView:
<style name="searchStyle" parent="Widget.AppCompat.SearchView.ActionBar">
<item name="queryHint">#string/search_hint</item>
<item name="searchIcon">#drawable/ic_search_white_24dp</item>
<item name="voiceIcon">#drawable/ic_keyboard_voice_white_24dp</item>
<item name="android:textColorHint">#android:color/white</item>
</style>
Is there a proper solution to my problem?
Related
Top is the default padding for the upnavigation arrow when you set
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
I would like the Toolbar to look more like the bottom image, as I want the title to indicate where the upnavigation arrow will send the user to rather than being a description of the current activity. So far I have tried adding a custom textview to the toolbar, and setting app:contentInsetStartWithNavigation="0dp" as per this similar question. But as the author notes, this doesn't remove the padding to the right of the arrow. How can I get the toolbar to look more like the second image? Current xml for my toolbar is as follows:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_doc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme"
app:contentInsetStartWithNavigation="0dp"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:gravity="left"
android:id="#+id/txtTitle"
android:textColor="#FFFFFF"/>
</android.support.v7.widget.Toolbar>
I further provide the xml for the menu, which I add to the toolbar using the menu inflater. Another solution I was floating around was adding an arrow icon and textview to the menu itself? But then I'm not sure how I'd give the new arrow icon the same upnavigation behavior.
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
<item
android:id="#+id/navigation_home"
android:icon="#drawable/ic_baseline_home_24px"
app:showAsAction="always"/>
<item
android:id="#+id/action_settings"
android:orderInCategory="100"
android:title="#string/action_settings"
app:showAsAction="never" />
</menu>
Try setting app:contentInsetStart to 0dp instead of app:contentInsetStartWithNavigation.
<android.support.v7.widget.Toolbar
...
app:contentInsetStart="0dp">
I want to remove extra space which is before expanded searchView, and there is one more menu icon which needs to be shown with these two icons compulsorily.
Searched many questions related to this, but none of the solutions seem to be working.
If you need only reduce padding between navigation icon and logo, use Toolbar.setContentInsetStartWithNavigation(0)
Unlike contentInsetStart, this will modify the inset only when there is a navigation icon. If there's no navigation icon, you will still have the 16dp start inset.
This will work with custom toolbool.
<android.support.v7.widget.Toolbar
xmlns:app="schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primaryColor"
android:contentInsetLeft="0dp"
android:contentInsetStart="0dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp" />
Be Sure To add your other 2 Menus with The Search Widget with Explicit Command to Show always in your menu that will show on the Toolbar.
Example Below shows 3 Menu items with the Search View widget a show As Action of if Room which displays it whenever there is room on the toolbar. Likewise for the other 2 menu items.
The spacing shall happen seamlessly.
<menu 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"
tools:context=".activities.ScrollingActivity">
<item
android:id="#+id/action_search"
android:title="#string/search_hint"
android:orderInCategory="100"
android:icon="#mipmap/ic_search_white_24dp"
app:showAsAction="collapseActionView|ifRoom"
app:actionViewClass="android.support.v7.widget.SearchView" />
<item
android:id="#+id/profile"
android:orderInCategory="100"
android:title="#string/profile"
app:showAsAction="ifRoom" />
<item
android:id="#+id/credits"
android:orderInCategory="101"
android:title="#string/credits"
app:showAsAction="ifRoom" />
</menu>
Get the searchview by its ID in the activity in OnCreateOptionsMenu.
For Example
SearchView searchView = (SearchView) menu.findItem(R.id.action_search).getActionView();
searchItem.expandActionView();
I have to show back icon, Logo and text (Next) in Toolbar. Next is right aligned. I tried placing text via menu. I have set logo and back button to toolbar.
toolbar.setLogo(R.mipmap.logo);
toolbar.setNavigationIcon(R.mipmap.back);
Also, I have inflated following menu in onCreateOptionsMenu
Menu inflated:
<menu 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"
>
<item
android:id="#+id/action_next"
android:title="#string/next"
app:showAsAction="always" />
Text Menu is not visible at all. if I put icon in menu item, it gets displayed.
I have used android.support.v7.widget.Toolbar.
Edited:
I solved it. In case someone else gets struck with such issue.
Please add
<item name="android:actionMenuTextColor">#color/blue</item>
in styles. Menu itemw as getting selected on click but was not visible, means it was showing white text color on white toolbar. Setting menuText color solved my problem.
Android Documentation explains that the withText option for showAsAction will
Also include the title text (defined by android:title) with the action item.
Since that is what you want, code the following.
<item
android:id="#+id/action_next"
android:title="#string/next"
app:showAsAction="always|withText" />
You can do something like this:
First, remove default title in your Activity:
getSupportActionBar().setDisplayShowTitleEnabled(false);
Then, your toolbar layout can be like this:
<LinearLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/material_blue"
android:elevation="5dp"
android:minHeight="?attr/actionBarSize" >
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:gravity="end"
android:text="#string/app_name"
android:textColor="#android:color/white" />
</android.support.v7.widget.Toolbar>
</LinearLayout>
And, in your activity handle the click event:
toolbarTop.findViewById(R.id.toolbar_title).setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Log.d(TAG,"Clicked");
}
});
Try Changing to support widget. This worked for me
app:actionViewClass="android.support.v7.widget.SearchView"
This what it looked after the change
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<item android:id="#+id/search"
android:title="#string/search_title"
android:icon="#drawable/ic_search"
app:showAsAction="always|withText"
app:actionViewClass="android.support.v7.widget.SearchView"
tools:context=".AppHome.HomeActivity"/>
</menu>
If you are getting an empty action with no text but blank space in it,
it might happen if you have created your own tool bar in the layout and have also used the Action bar in your theme's parent.
If you are creating your own toolbar then use parent="Theme.MaterialComponents.DayNight.NoActionBar" in your themes, both normal and night themes.
It's happening because of the style used in your layout.
To solve this, define a new style and use it in your layout.
<style name="ToolBarStyle" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar">
<item name="android:itemBackground">#fff</item> // background color of the menus
<item name="android:textColor">#000</item>// text color of the menus
</style>
Use it like this in your layout
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="#style/ToolBarStyle"
app:popupTheme="#style/ThemeOverlay.MaterialComponents.Light"
android:background="#color/primary_pink"
android:minHeight="?attr/actionBarSize"
android:elevation="4dp"
/>
I am using the android.support.v7.widget.Toolbar in my activity.
I added it into my layout for the activity as following:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/add_contact_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#color/colorPrimary"
android:elevation="6dp"
android:title="#string/add_contact_toolbar_title"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
</RelativeLayout>
I inflate the options menu in onCreateOptionsMenu of the activity and I
inflate my menu.xml :
<menu
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/add_contact_optionmenu_save"
android:title="#string/add_contact_optionmenu_save"
app:showAsAction="always"/>
</menu>
But unfortunately, the item appears way too far right and is too small:
How can I make it to appear like in all other apps? Bigger, and with more
right margin?
Cheers!
Well to move the MenuItem to a bit left from the right edge, you need to set paddingRight attribute to the android.support.v7.widget.Toolbar.
android:paddingRight="20dp"
To change the size, add the following style <item> to your App Theme.
<item name="actionMenuTextAppearance">#style/ActionBar.MenuTextStyle</item>
<item name="android:actionMenuTextAppearance">#style/ActionBar.MenuTextStyle</item>
<style name="ActionBar.MenuTextStyle"
parent="android:style/TextAppearance.Holo.Widget.ActionBar.Title">
<item name="android:textSize">48dp</item>
</style>
All this being said, a better design pattern is simply to go ahead and follow the Material Design guidelines. I would suggest you have an icon for save rather than the text.
I have a menu layout with only one item in it.
<?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/toolbar_right_button"
android:icon="#drawable/ic_toolbar_locked"
android:orderInCategory="1"
android:title="Logout"
app:showAsAction="always|withText"/>
</menu>
As you can see I've included the withText attribute but I still only get the icon.
How can I get both the icon and text to show?
I agree with your answer, but I had to do some digging to get it to work in my code, ultimately, I had to create an onClickListener for the button.
In my code, I wrote in the onCreateOptionsMenu(Menu menu) method:
menu.getItem(indexInMenu).getActionView().findViewById(R.id.button_logout).setOnClickListener(...);
This makes the menuItem responsive when it's replaced with a button in app:actionLayout
I'm not sure why withText wouldn't work for me so I just created an actionLayout to use instead.
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/toolbar_right_button"
android:icon="#drawable/ic_toolbar_locked"
android:orderInCategory="1"
android:title="Logout"
app:actionLayout="#layout/menu_item_logout"
app:showAsAction="ifRoom|withText"/>
</menu>
and the actionLayout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/logout_button"
style="?android:attr/borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableRight="#drawable/ic_toolbar_locked"
android:gravity="center_vertical"
android:text="Logout"
android:textColor="#color/PrimaryColour"/>
</RelativeLayout>
I have try your menu xml, and it worked on android 4.1.1, 5.0.0
but it not worked on 4.3
to fix this, please refer to How to get text on an ActionBar Icon?
it use custom layout for the item
You could try:
<menu 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"
tools:context=".MainActivity" >
<!-- "Mark Favorite", should appear as action button if possible -->
<!-- Settings, should always be in the overflow -->
<item
android:title="Settings"
android:id="#+id/mainMenu"
android:icon="#drawable/ic_3d_rotation_black_24dp"
app:showAsAction="always">
<menu>
<item
android:id="#+id/menu_logout1"
android:icon="#drawable/ic_3d_rotation_black_24dp"
android:title="logout1"/>
<item
android:id="#+id/menu_logout3"
android:icon="#drawable/ic_3d_rotation_black_24dp"
android:title="logout3"/>
</menu>
</item>
<item
android:id="#+id/menu_logout2"
android:icon="#drawable/ic_3d_rotation_black_24dp"
android:title="logout2"
app:showAsAction="always"/>
</menu>
Note, that this example will also paint some icons, so if you don´t want the icons, just remove the icon attribute.
Remove icon from <item
android:icon="#drawable/ic_baseline_add_24"
Remove this line then it will show hope it worked for u
When the text in your toolbar menu items is not showing, this is probably related to your style settings. For example, when you have organized your style in a way that app title in toolbar is shown in white color, your menu items may become white on white.
To solve this, you need to set two attributes to your toolbar:
This is the general Style for the toolbar. Textcolor is white. Maybe you are using something like this when you are facing the "no text"-issue
<style name="ToolBarStyle" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar">
<item name="android:textColorPrimary">#android:color/white</item>
<item name="android:textColorSecondary">#android:color/white</item>
</style>
To make sure that text in menu is showing, not only set the app:theme of your toolbar but also the app:popuptheme. In this example popuptheme is set to a light theme because this leads to black text.
<androidx.appcompat.widget.Toolbar
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#color/supplyon_blue"
app:theme="#style/ToolBarStyle"
app:popupTheme="#style/ThemeOverlay.MaterialComponents.Light"
android:id="#+id/toolbar" />
Play around with this setting and it will probably solve your problem.