Android toolbar not doing what I want - android

I have a nearly full screen dialog fragment in my app, containing a toolbar on top. I want to style this toolbar like in the Material design guidelines:
Toolbar XML:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="#dimen/abc_action_bar_default_height_material"
android:layout_width="match_parent"
android:title="#string/new_folder"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:background="#color/primary_dark"/>
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">
<item
android:id="#+id/action_done"
android:title="#string/action_save"
android:icon="#drawable/ic_done_white_48dp"
android:orderInCategory="100"
app:showAsAction="always|withText" />
</menu>
In my Dialog Fragment, code relevant to the toolbar:
private Toolbar.OnMenuItemClickListener mMenuItemListener = new Toolbar.OnMenuItemClickListener() {
#Override
public boolean onMenuItemClick(MenuItem menuItem) {
switch (menuItem.getItemId()) {
case android.R.id.home:
dismiss();
return true;
case R.id.action_done:
dismiss();
return true;
}
return false;
}
...
mToolbar.setNavigationIcon(R.drawable.ic_close_white_48dp);
mToolbar.inflateMenu(R.menu.menu_folder);
mToolbar.setOnMenuItemClickListener(mMenuItemListener);
My toolbar looks like this:
I have four problems:
The 'Save' text is not displayed next to the checkmark, even though there is ample room for it
The X icon is too large (maybe use the 36dip version?)
The X icon is not clickable
The toolbar does not display the title ('New Folder')
What am I doing wrong?
Note that my toolbar is not set as the action bar! It's just a toolbar in a fragment.

The 'Save' text is not displayed next to the checkmark, even though
there is ample room for it
This is not possible. You can show only text or only icon.
The X icon is too large (maybe use the 36dip version?)
You should use 24dp version.
The toolbar does not display the title ('New Folder')
Because you are in Fragment so you need to set title explicitly into Toolbar and from you code i don't see source code that doing this. You need to do it programatically (via xml it seems it's broken) and i prefer to you use support library.
The X icon is not clickable
You need to use OnNavigationClickListener and not OnMenuClickListener, your X icon is navigation icon not menu icon.

I don't think that you should but texts in the menu side (right of the toolbar). Looking at the guidelines, you can see that is not a good practice, and all the examples show menus only with icons
From the guidelines, I think you should use 24dp (http://www.google.com/design/spec/style/icons.html#icons-system-icons in the section 'Clearance')
Use
toolbar.setNavigationOnClickListener();
you need to set the title like
toolbar.setTitle("'New Folder")

Related

How to show back arrow in toolbar in the design editor preview?

I want to see the back arrow (Display home as up etc.) of the toolbar in the design editor preview.
I know in the xml the tools namespace usually has lots of useful things like this, e.g. tools:listitem on RecyclerViews etc., is there one for the toolbar to show the back arrow?
Try this:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:navigationIcon="?attr/homeAsUpIndicator" />
You can make that feature in java itself instead of xml(Alternative),
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeAsUpIndicator(R.drawable.back_button_black); //for
enabling your own icon.
override onoptionsItemSelected Method, for making actions
#Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()){
case android.R.id.home:
onBackPressed(); //any logic.
break;
}
return super.onOptionsItemSelected(item);
}
To do that
Simply add ?attr/homeAsUpIndicator
And you'd definitely see the back arrow

Status bar wrong colour initially and pushing layout off screen slightly

I am working with an activity that has a few different stages. It is designed like a wizard so a few sections of it are tutorial like pages where I hide the toolbar and status bar. The Activity starts off with the toolbar hidden. In each of the fragments, I have an onToolbarShown(ActionBar ab) (called in the base fragments onStart() method) which I use to edit the title, if the back button shows etc, and then I call the showToolbar method below:
public void showSystemUi(boolean show){
if(show){
KKDeviceUtil.showSystemUI(mRootLayout);
}else {
KKDeviceUtil.hideSystemUI(mRootLayout);
}
}
#Override
public void showToolbar(boolean show){
if(getSupportActionBar() != null){
showSystemUi(show);
if(show) {
mRootLayout.setFitsSystemWindows(true);
getSupportActionBar().show();
}else{
getSupportActionBar().hide();
mRootLayout.setFitsSystemWindows(false);
}
}
}
(showSystemUi is the stock show/hide method suggested by android here)
The problem is that the first time I show the toolbar, the status bar is the wrong colour and the layout is shunted down by the height of the status bar. As seen here:
When I next switch fragments, the problem clears up:
And if I go back to the previous fragment, it looks correct:
I don't get this problem if I never hide the toolbar/system windows in the first place. I originally had some of the operations in a different order and thought that re-arranging them could help, but It didn't seem to make any difference. I also tried calling setStatusBarColor but that had no effect. I also have <item name="android:statusBarColor">#color/status_bar_color</item> in my v21/styles.xml which is the correct colour for my status bar, and my primaryDark is the same colour as the screenshot (buggy) above shows.
I can't seem to find what I am doing wrong here, is this the correct way to show/hide my toolbar/system ui and why does this only happen on the first showing of the toolbar?
(Note: it is hard to see from the screenshots, but in the first screenshot, the 'Done' button is much closer to the bottom than the correct placing in the third screenshot)
Please see below i've shown you demo style that will reflect color on the status bar.
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/side_bar_color</item>
<item name="colorPrimaryDark">#color/side_bar_color</item>
<item name="colorAccent">#color/side_bar_color</item>
</style>
There "colorPrimaryDark" is that color which will used at status bar, you need to set this style to your application or activity at manifest class

Android: Expanded SearchView aligns right

In my app I want to create a searchview within an actionbar. I've used the following code.
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="#+id/autocomplete_search"
android:icon="#drawable/search_light"
android:title="#string/what_form_edit_text"
app:showAsAction="ifRoom|collapseActionView"
app:actionViewClass="android.support.v7.widget.SearchView" /></menu>
With this code a search icons shows up in my activity. After clicking this icon the search view expands and aligns on the left side of my actionbar (the title is gone).
Now I want to achieve this behaviour when automatically expanding the searchview. I tried to change the values of showAsAction into "always" instead of "ifRoom|collapseActionView", but it's not working. The searchview gets expanded, but is aligned on the right side of the actionbar. Is there any way I am missing to align the searchview on the left side (without implementing my own toolbar and place the searchview within?). Thanks for any help :)
Try to use
app:showAsAction="ifRoom"
It should fix your issue.

Actionbar back arrow direction

In my application I started to set the UI to meet Material Design use the Toolbar.
I want to add the back arrow on the action bar. It looks ok but somehow, when I change my phone locality to Hebrew which is a rtl language, the arrow change it's direction and instead of pointing "out", it is now pointing "in".
Please refer to image to see how arrow looks in Hebrew and English.
Is there a way to control the arrow direction (I want it will point "out" always of course)?
I tried to add the android:layoutDirection="ltr" and android:textDirection="ltr" but it didn't helped.
Thanks for who can answer on this.
Here is the code of the Toolbar layout:
<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="?android:attr/actionBarSize"
android:background="#color/primaryColor"
app:theme="#style/MyCustomToolBarTheme"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark"
android:textDirection="ltr"
android:layoutDirection="ltr">
Finally I succeeded to change the arrow direction.
Well, actually I followed this post:
First, I have found some action bar icons and placed a drawable back icons in the project.
Then I used this code to set the arrow programmatically:
getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_action_back);
The "back" icon is provided by a drawable specified in the homeAsUpIndicator attribute of the theme. You can try to override it and put your own marker (arrow out) it would be something like this:
<style name="Theme.MyTheme" parent="android:Theme.Holo">
<item name="android:homeAsUpIndicator">#drawable/out_arrow</item>
</style>
Below code adjust back arrow direction automatically (Write in your activity):
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
just set android:autoMirrored="true" in your vector drawble's xml.
If you are using Toolbar then this can be a solution:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
// getting the back arrow view
View toolbarBack = null;
for (int i = 0; i < toolbar.getChildCount(); i++)
if (toolbar.getChildAt(i) instanceof ImageButton)
toolbarBack = toolbar.getChildAt(i);
if (toolbarBack != null) {
// change arrow direction
toolbarBack.setRotationY(180);
}

How can I remove dropdown actionbutton overflow?

I'm trying to remove the dropdown menu ActionButton Overflow, from Action Bar. In the case, it would be the one that has 3 points and default option "Settings".I would like to remove this item "Settings", so that, by clicking on the menu icon, he has to take action automatically. Any idea?
go to folder menu->main then remove item settings then you can add another item (for example)
<item
android:id="#+id/action_refresh"
android:orderInCategory="100"
android:showAsAction="ifRoom"
android:title="#string/action_refresh"
android:icon="#drawable/refresh">
</item>
and in your activity:
onOptionsItemSelected(MenuItem item) // write your switch case to handle the clicked item.
the line that allows the option to be directly on the action bar is:
android:showAsAction="ifRoom"
You cannot get rid of the overflow. You can ask for the action bar to consider making one (or more) of your action bar items be toolbar-style buttons in the action bar. To do that:
if you are using the native action bar, add android:showAsAction="ifRoom" to the <item> in your menu resource
if you are using the appcompat-v7 action bar backport, add app:showAsAction="ifRoom" to the <item> in your menu resource (assuming that you have the appcompat-v7 namespace set to be app)
However, the decision on whether or not to show the item as a toolbar button or to put it in the overflow is up to the action bar, not you. For example, if you ask for 8 items to all be toolbar buttons, while that may be possible on a 10" tablet in landscape, there will not be enough room for all of them on a phone-sized screen in portrait. Some of your items will be toolbar buttons; the rest will go into the overflow.
The Menu is inflated in the onCreateOptionsMenu method, and uses a menu XML in the menu folder (default) to retrieve items. If you would like to perform an action on the keycode menu, you can use the following
#Override
public boolean onKeyDown(int keycode, KeyEvent e) {
switch(keycode) {
case KeyEvent.KEYCODE_MENU:
Toast.makeText(getApplicationContext(), "Menu Pressed", Toast.LENGTH_LONG).show();
return true;
}
return super.onKeyDown(keycode, e);
}
if you have no use for menu items, you can also go ahead and get rid of the onCreateOptionsMenu and onOptionsItemSelected methods, as well as the menu XML, that is up to you though
You have to remove all methods that create the menu (onCreateOptionsMenu etc).
Then in the XML file for the Toolbar, you have to add in the toolbar a custom icon. For example:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<----YOUR CUSTOM ICON/BUTTON HERE---->
</android.support.v7.widget.Toolbar>
Then programmatically you can add an onClickListener on the custom icon/button and you can do whatever you want with it then.

Categories

Resources