I'm trying to use Toolbar as an action bar, and I follow the Chris Banes guide:
https://chris.banes.me/2014/10/17/appcompat-v21/
Now following that setup I've an empty Toolbar, it seems that the getMenuInflater().inflate() doesn't work.
In my activity I've:
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menuhome, menu);
[...]
and in onCreate():
Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
setSupportActionBar(toolbar);
And this is my layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:allmytv="http://schemas.android.com/apk/res-auto"
xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads"
android:id="#+id/linearlayoutmain"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<android.support.v7.widget.Toolbar
xmlns:allmytv="http://schemas.android.com/apk/res-auto"
android:id="#+id/my_awesome_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary" />
<com.astuetz.PagerSlidingTabStrip
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="48dip"
allmytv:pstsIndicatorColor="#f57c1d" />
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
</android.support.v4.view.ViewPager>
</LinearLayout>
Where I'm wrong?
Inorder to use toolbar as actionbar you need to set the attribute windowActionBar as false.
Include the following in styles.xml
<style name="AppCompatTheme" parent="#style/Theme.AppCompat.Light.NoActionBar">
<item name="windowActionBar">false</item>
<item name="colorPrimary">#4285F6</item>
</style>
In manifest.xml under tag use the above theme
android:theme="#style/AppCompatTheme"
I have used toolbar to inflate the menu:
toolbar.inflateMenu(R.menu.your_toolbar_menu);
This was absolutely a very specific issue.
The issue was that I have a splashscreen setted with :
setContentView(R.layout.splashhome);
Toolbar was empty because I call setSupportActionBar(toolbar) when the splashscreen was active.
Moving the setSupportActionBar(toolbar) to the right place fixed it!
Related
I am trying to understand how to implement a SearchView in Android in my toolbar. The problem is that depending on the configurations I choose I get different interface results.
This is the layout of my Activity:
<RelativeLayout 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:layout_width="match_parent"
android:layout_height="fill_parent"
tools:context="com.construct.v2.activities.teams.ActivityTeams"
android:background="#ffffff"
android:id="#+id/relativeLayout">
<include android:id="#+id/toolbar" layout="#layout/toolbar_shadow"/>
<ListView
android:id="#+id/listview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/toolbar" />
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
app:tabMode="fixed"
app:tabGravity="fill"
app:tabIndicatorColor="#125688"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</RelativeLayout>
This is my toolbar_shadow layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/PopupMenuStyle"
android:id="#+id/my_awesome_toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
app:titleTextColor="#android:color/black"
android:layout_alignParentTop="true"
android:gravity="right"
android:elevation="5dp">
<TextView
android:id="#+id/delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/s_text_size"
android:padding="#dimen/small_margin"
android:layout_gravity="right|end"
android:layout_marginEnd="#dimen/s_margin"
android:textColor="#000000"
android:text="#string/edit"/>
</android.support.v7.widget.Toolbar>
And this is the layout file for my search item:
<?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/search"
android:title="#string/search"
app:icon="#drawable/ic_search_black_24dp"
android:icon="#drawable/ic_search_black_24dp"
app:showAsAction="collapseActionView|ifRoom"
app:actionViewClass="android.support.v7.widget.SearchView" />
</menu>
With this configuration I get this output:
But if I click on the magnifying glass I get this:
If I start typing I get this:
So I thought that it was because I have this configuration app:showAsAction="collapseActionView|ifRoom" but I tried to change to always but i got this output:
The magnifying glass disappears. But if I click on the place where it is supposed to be I get this output:
Which is the correct output I am looking for, but I don't know why the magnifying glass is not showing.
This is the part in my activity where I initialize the searchview:
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_search_team, menu);
SearchManager searchManager = (SearchManager)
getSystemService(Context.SEARCH_SERVICE);
searchMenuItem = menu.findItem(R.id.search);
searchView = (SearchView) searchMenuItem.getActionView();
ImageView searchClose = (ImageView) searchView.findViewById(android.support.v7.appcompat.R.id.search_close_btn);
searchClose.setImageResource(R.drawable.ic_action_cancel_black);
for (TextView textView : findChildrenByClass(searchView, TextView.class)) {
textView.setTextColor(Color.BLACK);
textView.setHintTextColor(Color.BLACK);
}
searchView.setSearchableInfo(searchManager.
getSearchableInfo(getComponentName()));
searchView.setSubmitButtonEnabled(true);
searchView.setOnQueryTextListener(this);
return true;
}
And this is how I initialize my toolbar:
#Override
protected void initToolbar() {
toolbar = (Toolbar) findViewById(R.id.toolbar);
if(toolbar!=null) {
if (user_type == 1) {
toolbar.setTitle(R.string.collaborators_title);
} else if (user_type == 2) {
toolbar.setTitle(R.string.admin_title);
}
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
toolbar.setNavigationIcon(R.drawable.ic_action_back_black);
//getSupportActionBar().setDisplayHomeAsUpEnabled(true);
//toolbar.setTitle("Teste");
//toolbar.setTitleTextColor(Color.parseColor("#000000"));
//final TextView edit = (TextView) findViewById(R.id.delete);
//edit.setText(" ");
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
onBackPressed();
}
});
}
}
Since I can't see the rest of the code where you implement the functionality for the x button, I'm just gonna take a stab at it. Add a listener for when the user leaves the search view to go back to the view with the magnifying glass. In that listener add this line:
<Your activity>.findViewById(R.id.search).setVisibility(View.VISIBLE);
It could be possible that the searchview automatically set the view to invisible, but you never reset the visibility for the user.
Edit:
app:icon="#drawable/ic_search_black_24dp"
android:icon="#drawable/ic_search_black_24dp"
there is difference between app: prefix and android: prefix. With appcompat-v7 library you can use android: prefix and remove app:icon line .
app:showAsAction="collapseActionView|ifRoom"
Change this line to
app:showAsAction="always|collapseActionView"
In searchview if we select only always as showasAction then back arrow is not visible.
Check the theme and styles of your app because a I had had the same problem that you and it made me crazy.
I found the solution changing the theme and styles.
If you are using Toolbar I assume that your main theme is
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
For the AppBarLayout use this
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark" />
For the Toolbar use this
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
Note that one is Dark and the other is Light. You can exchange both if it adjust better to your main theme
Use the suggest from Zohra Khan
Change this line to
app:showAsAction="always|collapseActionView" In searchview if we select only always as showasAction then back arrow is not visible.
If it's not clear, take a look to this example from where I took this ideas
Hope this helps you
Here is my code in onCreate() function;
this.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_USER_PORTRAIT);
getSupportActionBar().setDisplayShowHomeEnabled(false);
getSupportActionBar().setDisplayShowTitleEnabled(false);
The problem is that, When I write and compiler this code, I cannot get the result which I wanna see on the screen. I just want to see the swipe tabs without action bar.
Here is the result by image;
enter image description here
Remove your ActionBar and use TabLayout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical" android:padding="4dip"
android:gravity="center_horizontal"
android:layout_width="match_parent" android:layout_height="match_parent">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill" />
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="net.voidynullness.android.tabitytabs.TabLayoutActivity">
</android.support.v4.view.ViewPager>
Edit your styles.xml under res - > values - > styles.xml and set parent to parent="Theme.AppCompat.Light.NoActionBar"
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
</style>
</resources>
and remove
getSupportActionBar().setDisplayShowHomeEnabled(false);
getSupportActionBar().setDisplayShowTitleEnabled(false);
from onCreate() of Activity
ActionBar show only icon. How to get icon and text?
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/item1"
android:title="#string/add"
app:showAsAction="always|withText"
android:icon="#android:drawable/ic_input_add"
>
</item>
</menu>
My xml menu file.
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.menu_add, menu);
return super.onCreateOptionsMenu(menu);
}
My code.
always|withText' will work if there is sufficient room, otherwise it will only place icon. You can test it on your phone with rotation.
if you want to show always text with icon follow the below step for work around
In Style.xml make sure parent is "Theme.AppCompat.Light.NoActionBar"
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
</style>
Now Include Toolbar like in which layout you want to add menu action.
toolbar_with_add.xml
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:title="#string/app_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/darker_gray"
android:minHeight="?attr/actionBarSize">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:drawableRight="#android:drawable/ic_menu_add"
android:gravity="center"
android:text="Add" />
</android.support.v7.widget.Toolbar>
Make sure you include support library like fro toolbar like below in your build.gradle file.
compile 'com.android.support:appcompat-v7:23.0.1'
You can also change the drawable prosition by changing the "android:drawableRight" to "android:drawableLeft", "android:drawableBottom" ,"android:drawableTop"
Here's my toolbar style:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
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="wrap_content"
android:background="#color/md_blue_500">
<item
android:id="#+id/next_button"
android:title="#string/next_text"
android:orderInCategory="1"
android:icon="#drawable/ic_navigate_next_white_18dp"
app:showAsAction="ifRoom">
</item>
</android.support.v7.widget.Toolbar>
I am adding this Toolbar to my Activity Layout using:
<include
layout="#layout/toolbar"
android:id="#+id/toolbar">
</include>
From there, I've set it as my Action Bar in my onCreate method to basically say: hey Android, I don't want to use your Action Bar, I've got my own.
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_bnew_account);
toolbar = (Toolbar) findViewById(R.id.toolbar);
// I'm not using your action bar anymore
setSupportActionBar(toolbar);
}
For some reason it crashes my app if I put the item element in my toolbar style:
<item
android:id="#+id/next_button"
android:title="#string/next_text"
android:orderInCategory="1"
android:icon="#drawable/ic_navigate_next_white_18dp"
app:showAsAction="ifRoom">
</item>
Any idea on what I'm doing wrong?
While slightly out of date, the adding action items to the Action Bar training shows how you to add action items via a menu resource. When you call setSupportActionBar() with your Toolbar, calls to onCreateOptionsMenu() will be routed automatically to your Toolbar, making it a drop in replacement for a standard Action Bar.
I'm unable to see how adding a popup menu from the title is accomplished like is shown in many of the material design examples. Any help would be much appreciated.
You're going to need to add a Spinner to the Toolbar:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:background="?attr/colorPrimary">
<Spinner
android:id="#+id/spinner_nav"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.v7.widget.Toolbar>
You will then need to disable the default title:
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);
You can then retrieve and setup the Spinner as needed in your Activity/Fragment.
I came across this question while I was trying to find a solution to prevent the popup to overlay the spinner and I would like to leave here an alternative solution to this question as its possible to add the spinner to the toolbar using the menu.xml as well
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">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorAccent" />
</android.support.design.widget.AppBarLayout>
<!-- Other layout widgets -->
</LinearLayout>
menu_main.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/spinner"
android:title="Spinning"
app:actionViewClass="android.widget.Spinner"
app:showAsAction="always" />
<!-- Other items -->
</menu>
Your Activity
It will be necessary to override the onCreateOptionMenu() method, then use getMenuInflater() to inflate the menu file created earlier.
You will also need to get the Spinner item and set an adapter to it as you would normally do.
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
//Get Spinner item from menu
MenuItem spinnerMenuItem = menu.findItem(R.id.spinner);
final Spinner spinner = (Spinner) MenuItemCompat.getActionView(spinnerMenuItem);
//Set adapter whichever way you prefer (from the resource or manually)
final ArrayAdapter<CharSequence> spinnerAdapter = ArrayAdapter
.createFromResource(this, R.array.items_array, android.R.layout.simple_spinner_dropdown_item);
spinnerAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
spinner.setAdapter(spinnerAdapter);
return true;
}
Style.xml
Finally, if you want to customize your spinner
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:spinnerStyle">#style/spinner_style</item>
</style>
<style name="spinner_style" parent="Widget.AppCompat.Spinner">
<item name="android:dropDownVerticalOffset">40dip</item>
<!--<item name="android:dropDownHorizontalOffset">0dip</item>-->
<item name="overlapAnchor">false</item>
<!--Other customizations-->
</style>