How can I center an ActionView (a SearchView in particular) inside of a Action Bar?
As seen in the Google Books app:
My current layout setup (search_layout.xml):
<?xml version="1.0" encoding="utf-8"?>
<SearchView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:queryHint="#string/search_hint" />
My Action Bar XML file (menu.xml):
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:icon="#+android:drawable/ic_menu_search"
android:title="#string/search"
android:showAsAction="always|collapseActionView"
android:id="#+id/searchMenuItem"
android:actionLayout="#layout/search_layout" />
</menu>
Is there a way to mimic the behaviour of the Books' SearchView?
A View centered in the ActionBar can't be achieved with Action Items in an xml menu, as far as I can tell. However it can be implemented by setting a custom layout to the ActionBar. A basic example:
An Activity:
public class MainActivity extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ActionBar actionBar = getActionBar();
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
actionBar.setDisplayShowHomeEnabled(true);
actionBar.setCustomView(R.layout.actionbar_layout);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
}
where actionbar_layout is:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<SearchView
android:id="#+id/mySearchView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:iconifiedByDefault="false" />
</RelativeLayout>
creates this on a 7'' tablet:
Note the iconifiedByDefault attribute set to false on the SearchView which forces it to appear expanded and not just as an icon. This may require that you hide the softkeyboard programmatically or it will be launched open when the Activity starts.
Have a look here. You can just use the android:actionViewClass="android.widget.SearchView" attribute, and that should work just fine (keep in mind that you can get a reference to the searchView in Java, and change the hint there if that's what you want).
Related
I am trying to add an icon to my toolbar using these two lines
getSupportActionBar().setDisplayShowHomeEnabled(true);
getSupportActionBar().setIcon(R.drawable.logo);
The icon is added, however it's added in the center of the toolbar, how can I add it to the right corner of the toolbar for example?
This is my action_bar_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_name"
android:textColor="#ffffff"
android:id="#+id/action_bar_text"
android:textSize="18sp" />
</LinearLayout>
There is no direct way to set icon towards RIGHT in toolbar. An alternate way is to make use of Menu.
You can do the following
Create a Menu.xml in res/menu.xml folder
<?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/menu_item"
android:icon="#drawable/logo"
app:showAsAction="always"/>
</menu>
In the Activity Implement the following method.
#Override
public boolean onCreateOptionsMenu(Menu menu){
getMenuInflater().inflate(R.menu.right_menu, menu);
return super.onCreateOptionsMenu(menu);
}
Now with the above changes, you will see the icon on the right side of toolbar.
You can implement the tap by using the below method:-
#Override
public boolean onOptionsItemSelected(MenuItem item){
switch(item.getItemId()){
case R.id.menu_item: //this item has your app icon
Toast.makeText(this,"Tapped on icon",Toast.LENGTH_SHORT).show();
return true;
default: return super.onOptionsItemSelected(item);
}
}
I am attempting to display icon with search bar in Android nav bar but it just keeps displaying just the icon. Here is my xml code
<item android:id="#+id/action_login"
android:title="Login"
android:icon="#android:drawable/ic_lock_lock"
app:showAsAction="always|withText" />
here the xml full code
<?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/action_login"
android:title="Login"
android:icon="#android:drawable/ic_lock_lock"
app:showAsAction="always|withText" />
</menu>
what could be wrong
Your code worked properly in Android 5.0 and above.
But in android 4.2 display only icon, not text!!
So if you worked on below 5.0 then use actionLayout.
Refer this answer:
How to get text on an ActionBar Icon?
Hope this will help you
Change this -:
android:icon="#android:drawable/ic_lock_lock"
To-:
android:icon="#drawable/ic_lock_lock"
or
android:icon="#mipmap/ic_lock_lock"
I have resolved this problem by following code:
1- Create menu in menu folder
<menu 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"
tools:context=".MainActivity">
<item
android:id="#+id/action_sign"
android:title="Sing In"
app:showAsAction="always|withText"
app:actionLayout="#layout/menu_sign" />
2- app:actionLayout is the key word, Then create layout named menu_sign and put textView in it. the icon will displayed by drawableLeft
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:drawableLeft="#mipmap/ic_user_sign"
android:gravity="center"
android:orientation="vertical"
android:text="#string/text"
android:drawablePadding="#dimen/margin_5"
android:paddingLeft="#dimen/margin_10"
android:paddingRight="#dimen/margin_10"
android:textColor="#android:color/white" />
3- Add listener for your menu
super.onCreateOptionsMenu(menu, inflater);
inflater.inflate(R.menu.menu_sign, menu);
signItem = menu.findItem(R.id.action_sign);
signItem.getActionView().setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
onOptionsItemSelected(signItem);
}
});
I am new in Android applications development, and I am trying to develop an application in UI I added a toolbar but In don't know why the three dots in the right side of the toolbar, it is necessary for me because I want to add a logout button there.
here is the toolbar layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:background="#000">
</android.support.v7.widget.Toolbar>
And here is where i add the toolbar inside the activity class:
toolbar= (Toolbar) findViewById(R.id.app_bar);
setSupportActionBar(toolbar);
toolbar.setTitle(R.string.app_name);
toolbar.setTitleTextColor(getResources().getColor(R.color.com_facebook_button_background_color_focused));
and this is my menu.xml:
<?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=".HomeActivity">
<item android:id="#+id/action_settings"
android:title="Settings"
android:orderInCategory="100"
app:showAsAction="always"
android:icon="#drawable/icon"
/>
<item
android:id="#+id/action_search"
android:title="Search">
</item>
</menu>
And what is weird is that in the android studio preview the three dots are shown:
what I am doing wrong ?
Create Android Resource Directory of type menu in res folder and add xml file named: user_menu.xml
<?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/logout_menu"
android:orderInCategory="100"
android:title="#string/action_logout"
app:showAsAction="never" />
</menu>
In your Activity:
#Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.user_menu, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.logout_menu:
// Do whatever you want to do on logout click.
return true;
default:
return super.onOptionsItemSelected(item);
}
}
The three dots were hidden because they were black, and the toolbar background is black, so I had to add this white theme
android:theme="#style/ThemeOverlay.AppCompat.Dark"
to my toolbar layout.
In onCreateOptionmenu() one file will be inflating automatically. Remove that file and three dots will be removed.
Or
If this function is not included in your activity file then remove the file under res\menu folder.
I have an app, which have toggle button in action menu item, though i'm using Actionbar Sherlock, I don't know, how to place the toggle button in the action menu item. I don't want to place as a custom layout in action bar, but i want to place it as a Menu item. If anyone find solution, Please help me out.
Purpose, If I change the state of toggle button, it will sort the person based on ALphabets and again in Date of Birth.
Thanks in Advance!
Just add it like a normal Menu Button, check its state with a boolean variable, and you can change the icon and title when changing the sortmode
boolean birthSort=false;
#Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.menu_toggle:
if(birthSort){
//change your view and sort it by Alphabet
item.setIcon(icon1)
item.setTitle(title1)
birthSort=false;
}else{
//change your view and sort it by Date of Birth
item.setIcon(icon2)
item.setTitle(title2)
birthSort=true;
}
return true;
}
return super.onOptionsItemSelected(item);
}
Don't forget to add it in xml like any other menu button and configure android:showAsAction if you want to show it in overflow or outside of it.
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/menu_toogle"
android:showAsAction="ifRoom"
android:title="Share"
/>
</menu>
Other approach would be to use a custom layout for your ActionBar:
Basically you define a layout that contains your Toggle:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ToggleButton
android:id="#+id/actionbar_service_toggle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOn="Logging On"
android:textOff="Logging Off" />
</RelativeLayout>
ALTERNATIVE 1:
Then in your Activity or Fragment container you do:
ActionBar actionBar = getSupportActionBar();
actionBar.setCustomView(R.layout.actionbar_top);
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_HOME | ActionBar.DISPLAY_SHOW_CUSTOM);
...
ToggleButton button = (ToggleButton) findViewById(R.id.actionbar_service_toggle);
Notice that you are having a real ToggleButton and you are handling it in code as a real object ToggleButton, which has lots of advantages compared to having you re-implement your own toggle (theme, reliability, views hierarchy, native support...).
Source code here.
ALTERNATIVE 2:
Another way to do it is embed your custom view into a regular menu view:
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="#+id/myswitch"
android:title=""
android:showAsAction="always"
android:actionLayout="#layout/actionbar_service_toggle" />
</menu>
If like me the actionLayout isn't working for you, try app:actionLayout="#layout/actionbar_service_toggle" instead of android:actionLayout="#layout/actionbar_service_toggle" as well as app:showAsAction="always" instead of android:showAsAction="always"
This is because if you use appCompat the android namespace won't be used.
So here's the final version:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ToggleButton
android:id="#+id/actionbar_service_toggle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOn="Logging On"
android:textOff="Logging Off" />
</RelativeLayout>
and
<?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/myswitch"
android:title=""
app:showAsAction="always"
app:actionLayout="#layout/actionbar_service_toggle" />
</menu>
create xml file in menu:
menu.xml
<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="si.ziga.switchinsideab.MainActivity">
<item android:id="#+id/switchId" android:title="" android:showasaction="always" android:actionlayout="#layout/switch_layout">
<item android:id="#+id/action_settings" android:orderincategory="100" android:title="#string/action_settings" app:showasaction="never">
</item></item></menu>
And then navigate to your layout folder make a new xml file
and name it switch_layout.xml
Here's the code:
switch_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="match_parent" android:orientation="horizontal">
<switch android:id="#+id/switchAB" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true">
</switch></relativelayout>
In your MainActivity class copy and paste this code:
MainActivity.java
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu, menu);
switchAB = (Switch)menu.findItem(R.id.switchId)
.getActionView().findViewById(R.id.switchAB);7
Or follow this link about this stuff
Here somthing easy
<?xml version="1.0" encoding="utf-8"?>
<item
android:title="#string/mode"
android:id="#+id/switch1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:switchMinWidth="56dp"
android:layout_marginTop="120dp"
app:showAsAction="ifRoom"
app:actionViewClass="androidx.appcompat.widget.SwitchCompat"
android:checked="false"/>
I want something like this:
The 3rd icon is for notifications and it is just a png image now. Is it possible to do something, so that i can change the text/number ie.., 03 programatically to show the actual no.of notifications.
Thank You
Here is some example code that worked for me.
1: Create a layout for your badge menu item.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="48dp"
android:layout_height="fill_parent"
android:layout_gravity="right" >
<!-- Menu Item Image -->
<ImageView
android:layout_width="48dp"
android:layout_height="fill_parent"
android:clickable="true"
android:src="#drawable/bkg_actionbar_notify_off" />
<!-- Badge Count -->
<TextView
android:id="#+id/actionbar_notifcation_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:padding="#dimen/padding_small"
android:text="99"
android:textColor="#color/holo_orange_dark" />
</RelativeLayout>
2: Create a menu item in res/menu and set the actionLayout to your layout
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="#+id/badge"
android:actionLayout="#layout/actionbar_badge_layout"
android:icon="#drawable/icn_menu_posts"
android:showAsAction="always">
</item>
</menu>
3: Then in onCreateOptionsMenu of your activity or fragment you can do something like this...
public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
inflater.inflate(R.menu.badge, menu);
RelativeLayout badgeLayout = (RelativeLayout) menu.findItem(R.id.badge).getActionView();
TextView tv = (TextView) badgeLayout.findViewById(R.id.actionbar_notifcation_textview);
tv.setText("12");
}
Note: If you wanted to change the badge count later on, you could store a reference to the Menu object passed to onCreateOptionsMenu and use the same code to get the required view and set a value.
=== ApCompat Warning ==================================================
If using the AppCompatActivity then you must set the actionView in onCreateOptionsMenu
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main_menu, menu);
MenuItem item = menu.findItem(R.id.badge);
MenuItemCompat.setActionView(item, R.layout.actionbar_badge_layout);
RelativeLayout notifCount = (RelativeLayout) MenuItemCompat.getActionView(item);
TextView tv = (TextView) notifCount.findViewById(R.id.actionbar_notifcation_textview);
tv.setText("12");
return super.onCreateOptionsMenu(menu);
One option is to create your own action view for this. Use android:actionLayout in the XML and getActionView() in Java after inflation to manipulate it. Your action view would be an ImageView (for the icon) and... something for the badge. I suspect that you will find that trying to make that badge via text will be difficult, and that you are better served with a bunch of badge images, one of which you layer on top of the icon (e.g., via RelativeLayout or FrameLayout, or by wrapping the icon in a LayerListDrawable).
Another option is simply to have N versions of the icon+badge, perhaps wrapped in a LevelListDrawable, that you choose from at runtime.
Had to make some changes to domji84's answers. For some reason the clicking on imageview was not calling the click event, it works find after removing the clicklabe = "true" from image view.
menu_item_cart.xml
<!-- Menu Item Image -->
<ImageView
android:layout_width="30dp"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher" />
<!-- Badge Count -->
<TextView
android:id="#+id/cartCountTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:padding="5dp"
android:layout_marginTop="5dp"
android:text="99"
android:textColor="#android:color/white"
android:textStyle="bold"/>
</RelativeLayout>
menu_main.xml
<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_settings"
android:title="#string/action_settings"
android:orderInCategory="100"
app:showAsAction="never" />
<item
android:id="#+id/action_cart"
android:title="test"
app:actionLayout="#layout/menu_item_cart_count"
app:showAsAction="always">
</item>
</menu>
Activity code
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
menu.findItem(R.id.action_cart).getActionView().setOnClickListener(this);
return true;
}
Here you can use Custom action bar with default action bar...
firstly prepare layout by xml or java.then use display matrics and get window manager.After this inflate the layout. like this
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
ActionBar ab = getSupportActionBar();
View mactionbar = getLayoutInflater().inflate(R.layout.main2, null);