I am looking to keep the home button in my toolbar. I have a collapsing toolbar with an image which disappears if scrolled up. In my other toolbar I implemented the tool bar with:
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
but it doesn't work now. I can't see the button both when the toolbar is collapsed (when the image isn't shown) and when the toolbar is open (when the image is visible and the toolbar is expanded).
My Toolbar code:
Toolbar toolbar = (Toolbar) findViewById(R.id.anim_toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setTitle("Awesome");
You should put ToolBar in CollapsingToolbarLayout
<android.support.design.widget.AppBarLayout
android:layout_height="192dp"
android:layout_width="match_parent">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
You can add navigation icon by,
final Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
toolbar.setNavigationIcon(R.drawable.nav_icon);
and you can specify the action in onOptionsItemSelected as follows:
#Override
public boolean onOptionsItemSelected(final MenuItem item) {
final int id = item.getItemId();
if (id == android.R.id.home) {
//finish();
}
//........
}
Related
I made a NavigationView and included getSupportActionBar().setDisplayHomeAsUpEnabled(true);in my code to show the hamburger button, and it worked. but then i removed the default toolbar (by setting AppTheme in styles values to parent="Theme.AppCompat.Light.NoActionBar"), and implemented my own toolbar in the layout. And now instead of the Hamburger button, it shows the back button, although clicking on it draws the NavigationView. What should i do?
My Java code:
private DrawerLayout sideBar;
private ActionBarDrawerToggle sideBarToggle;
private Toolbar actionToolbar;
#Override
public void onCreate(...) {
sideBar = (DrawerLayout) findViewById(R.id.sqliteLayout);
sideBarToggle = new ActionBarDrawerToggle(this, sideBar, actionToolbar, R.string.sideBarOpen, R.string.sideBarClose);
actionToolbar = (Toolbar) findViewById(R.id.navAction);
sideBar.addDrawerListener(sideBarToggle);
sideBarToggle.syncState();
setSupportActionBar(actionToolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
if(sideBarToggle.onOptionsItemSelected(item)){
return true;}
return super.onOptionsItemSelected(item);
}
My Toolbar code:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/navAction"
android:background="#color/colorPrimary"
app:theme="#style/Base.Theme.AppCompat.Light.DarkActionBar">
</android.support.v7.widget.Toolbar>
SOLUTION:
I reordered the java code to this, and removed the 3rd argument in new ActionBarDrawerToggle(...) and it worked!
actionToolbar = (Toolbar) findViewById(R.id.navAction);
setSupportActionBar(actionToolbar);
sideBar = (DrawerLayout) findViewById(R.id.sqliteLayout);
sideBarToggle = new ActionBarDrawerToggle(this, sideBar, R.string.sideBarOpen, R.string.sideBarClose);
sideBar.addDrawerListener(sideBarToggle);
sideBarToggle.syncState();
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
Call setSupportActionBar(actionToolbar); before you set up your ActionBarDrawerToggle.
ActionBarDrawerToggle uses getSupportActionBar() under the hood, so all the work it is doing is wiped out when you call setSupportActionBar afterwards.
Make sure you have added:
actionBar.setDisplayHomeAsUpEnabled(true);
Not this one:
getSupportActionBar().setHomeAsUpIndicator(true);
I used CollapsingToolbarLayout as the parent of Toolbar, below it the layout
<android.support.design.widget.CoordinatorLayout 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.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/test_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:navigationIcon="#drawable/abc_ic_ab_back_mtrl_am_alpha"
app:theme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
Then I want to set the title of the Toolbar with the following code, but it didn't work. The title just didn't show.
Toolbar toolbar = (Toolbar) findViewById(R.id.test_toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowTitleEnabled(true);
getSupportActionBar().setTitle("ABC");
I also tried set the title in CollapsingToolbarLayout with the following code, it didn't work either.
CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout);
collapsingToolbarLayout.setTitleEnabled(true);
collapsingToolbarLayout.setTitle("ABC");
But if I removed CollapsingToolbarLayout from my layout and make AppBarLayout as the direct parent of Toolbar, the code above to set the title of Toolbar worked.
Did I missed something? This issue is so weird. Is it a bug in design support library? How can I solve it without changing my layout?
This is a temporary solution. I didn't investigate the code deeply, but by disabling the refresh of Toolbar in CollapsingToolbarLayout, it worked.
Here is what I did:
public static void setRefreshToolbarEnable(CollapsingToolbarLayout collapsingToolbarLayout,
boolean refreshToolbarEnable) {
try {
Field field = CollapsingToolbarLayout.class.getDeclaredField("mRefreshToolbar");
field.setAccessible(true);
field.setBoolean(collapsingToolbarLayout, refreshToolbarEnable);
} catch (NoSuchFieldException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
}
}
Simply set Collapsing toolbar 'titleEnabled=false' in xml Then Toolbar title will show up.
app:titleEnabled="false"
try this :
collapsingToolbarLayout.setTitleEnabled(false);
toolbar.setTitle("ABC");
Move
CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout);
collapsingToolbarLayout.setTitleEnabled(true);
collapsingToolbarLayout.setTitle("ABC");
from onCreate to onCreateView inside if
Here is my layout:
<android.support.design.widget.AppBarLayout
<android.support.design.widget.CollapsingToolbarLayout
...
<android.support.v7.widget.Toolbar
...
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
I want title stays in Toolbar, not in CollapsingToolbarLayout. So I changed my code from:
mCollapsingToolbar = ...
mCollapsingToolbar.setTitle(title);
to:
mTitleBar = ...
setSupportActionBar(mTitleBar);
getSupportActionBar().setTitle(title);
But the title is not visible. My device is Nexus 6 5.1.0
Thanks in advance.
Update 1: I have changed code to this, still not work :(
setSupportActionBar(mToolbar);
getSupportActionBar().setTitle(title);
getSupportActionBar().setDisplayShowTitleEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
Update 2: Here is code snippet for those three views:
private void setUpAppBarLayout() {
AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appbar_layout);
appBarLayout.setBackgroundColor(extractBackgroundColor());
}
private void setUpCollapsingToolbarLayout() {
if (null == mCollapsingToolbar) {
mCollapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
}
}
private void setUpToolbar(String title) {
mToolbar = (Toolbar) findViewById(R.id.tb_main);
mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
supportFinishAfterTransition();
}
});
mToolbar.inflateMenu(R.menu.menu_group_activity);
mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
#Override
public boolean onMenuItemClick(MenuItem item) {
if (R.id.action_settings == item.getItemId()) {
...
return true;
} else {
return false;
}
}
});
mToolbar.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
mRecyclerView.smoothScrollToPosition(0);
}
});
setSupportActionBar(mToolbar);
getSupportActionBar().setTitle(title);
getSupportActionBar().setDisplayShowTitleEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
After called setSupportActionBar(mToolbar), both title and menu are invisible.
In order for the Toolbar title to work with the CollapsingToolbarLayout you need to set the ctl's title enabled to false
CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbarLayout.setTitleEnabled(false);
The solution is easy. As Daniel Persson said, you just set collapsingToolbarLayout.setTitleEnabled(false);
or use the XML attribute app:titleEnabled="false"
and set the title with the inner Toolbar instead of the CollapsingToolbarLayout, i.e.: toolbar.setTitle(title);
It is very simple and it not required workarounds.
It actually looks like the title from the Toolbar is gone when you wrap it inside a CollapsingToolBarLayout, so the only solution I got for this issue is to create a new TextView and add it to the ToolBar, remember that Toolbar is a ViewGroup, so you can add widgets to it. It's not as clean as I would like, but it works for now.
TextView text = new TextView(this);
text.setText(title);
text.setTextAppearance(this, android.R.style.TextAppearance_Material_Widget_ActionBar_Title_Inverse);
toolbar.addView(text);
Hope I can find an xml-friendly solution for this soon, too.
The trick here is to set the titleEnabled = false of CollapsingToolbarLayout
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:titleEnabled="false">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:title="Message"
app:titleMarginTop="13dp"
app:titleTextColor="#android:color/white" />
</android.support.design.widget.CollapsingToolbarLayout>
Or through code:
CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout);
collapsingToolbarLayout.setTitleEnabled(false);
You need to enable actionBar.setDisplayHomeAsUpEnabled(true); in your code
Maybe this? Just add android:fitsSystemWindows="true" to AppBarLayout
<android.support.design.widget.CoordinatorLayout
...
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="300dp"
...
android:fitsSystemWindows="true"
>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:title="My Title"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
...
</android.support.design.widget.CoordinatorLayout>
This is what you get
Is it possible to add a circular icon like this to a transparent Toolbar (styled like an action bar), and maintain its coloring?
EDIT: this icon will be right aligned on the toolbar, similar to where you would see the three dot menu icon in most apps.
You want to inflate a menu for the toolbar, set the background to transparent, inflate the menu with the icon.
Activity with the Toolbar
public class MainActivity extends ActionBarActivity {
Toolbar toolbar;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// getSupportActionBar().hide();
toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setTitle("Hello World");
toolbar.inflateMenu(R.menu.menu_main);
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
#Override
public boolean onMenuItemClick(MenuItem item) {
int id = item.getItemId();
if (id == R.id.icon) {
// Your action here
Toast.makeText(getApplicationContext(), "Clicked", Toast.LENGTH_SHORT).show();
return true;
}
return false;
}
});
}
}
activity layout
<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"
tools:context=".MainActivity"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="56dp"
android:layout_width="match_parent"
app:theme="#style/ThemeOverlay.AppCompat.Light"
android:elevation="5dp"
android:background="#android:color/transparent" />
</LinearLayout>
Menu
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/icon"
android:title="Icon Title"
android:icon="#drawable/ic_launcher"
android:orderInCategory="100"
app:showAsAction="always" />
</menu>
I'm trying the new Toolbar component and having some trouble with the navigation icon.
I want to implement a custom icon for back navigation :
In my manifest i set a parent to my activity :
<activity android:name=".CardsActivity" android:parentActivityName=".MainActivity">
<!-- Parent activity meta-data to support API level 7+ -->
<meta-data
android:name="android.support.PARENT_ACTIVITY"
android:value=".MainActivity" />
</activity>
I declare the toolbar like this :
<RelativeLayout 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:paddingBottom="#dimen/activity_vertical_margin"
tools:context="com.example.lollitest.MainActivity" >
<android.support.v7.widget.Toolbar
android:id="#+id/my_awesome_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:layout_marginBottom="10dp"
android:background="?attr/colorPrimary" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/my_awesome_toolbar"
android:text="#string/hello_world" />
</RelativeLayout>
Then in my activity i configure the Toolbar like this :
Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
toolbar.setNavigationIcon(R.drawable.ic_good);
toolbar.setTitle("Title");
toolbar.setSubtitle("Sub");
toolbar.setLogo(R.drawable.ic_launcher);
setSupportActionBar(toolbar);
Which giving me :
The back icon is not the one i set with setNavigationIcon() ! Whatever drawable i give to the method the navigation icon is always the back arrow.
I have tried to remove the parent association in the manifest but the only effect is (obviously) to prevent the button to go back.
On contrary if i want the default back arrow icon and don't call setNavigationIcon() i don't have any icon at all.
What is the correct way to handle the navigation icon in toolbar (custom and default) ?
NOte : i'm running my test on Android 4.4
Currently you can use it, changing the order: (it seems to be a bug)
Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
setSupportActionBar(toolbar);
toolbar.setNavigationIcon(R.drawable.ic_good);
toolbar.setTitle("Title");
toolbar.setSubtitle("Sub");
toolbar.setLogo(R.drawable.ic_launcher);
Specific to the navigation icon, this is the correct order
// get the actionbar as Toolbar and set it up
Toolbar toolbar = (Toolbar) findViewById(R.id.signIn_toolbar);
setSupportActionBar(toolbar);
Inform the Toolbar to provide back navigation. This will set the icon to the default material icon
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
Later override the icon with the custom one, in my case the Holo back icon
toolbar.setNavigationIcon(R.drawable.ic_chevron_left_white_36dp);
(The answer to user802421)
private void setToolbar() {
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
if (toolbar != null) {
setSupportActionBar(toolbar);
toolbar.setNavigationIcon(R.drawable.ic_action_back);
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
onBackPressed();
}
});
}
}
toolbar.xml
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_height"
android:background="?attr/colorPrimaryDark" />
Use setNavigationIcon to change it. don't forget create ActionBarDrawerToggle first!
sample code work for me:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
drawer = (DrawerLayout)findViewById(R.id.drawer_layout);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
drawer.setDrawerListener(toggle);
toggle.syncState();
toolbar.setNavigationIcon(R.drawable.ic_menu);
I had simillar problem. After a big headache I found, that my ActionBarDrawerToggle was modifying the icon, also when it should not modify the icon (because I didn't give reference to toolbar to the toggle component). So in my NavigationDrawerFragment class (that handles the opening and closing) in setUp(...) method I set mDrawerToggle.setHomeAsUpIndicator(R.drawable.app_icon);
and finally it worked.
I tried to set up toolbar like #Gabriele Mariotti, but I had some problem with title. So then I set order to
toolbar.setTitle("Title")
setSupportActionBar(toolbar);
toolbar.setNavigationIcon(R.drawable.ic_good);
and it works.
I just found the solution. It is really very simple:
mDrawerToggle.setDrawerIndicatorEnabled(false);
Hope it will help you.
I used the method below which really is a conundrum of all the ones above. I also found that onOptionsItemSelected is never activated.
mDrawerToggle.setDrawerIndicatorEnabled(false);
getSupportActionBar().setHomeButtonEnabled(true);
Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar);
if (toolbar != null) {
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
onBackPressed();
}
});
}
You can use invalidate() method to change toolbar state in any place.
Example:
Toolbar toolbar = (Toolbar)findViewById(R.id.my_awesome_toolbar);
setSupportActionBar(toolbar);
toolbar.setNavigationIcon(R.mipmap.arrow_white);
toolbar.invalidate(); // restore toolbar
Remove this line from activity if you have added
#Override
protected void onPostCreate(Bundle savedInstanceState) {
super.onPostCreate(savedInstanceState);
// Sync the toggle state after onRestoreInstanceState has occurred.
mDrawerToggle.syncState();
}
Then set icon
getSupportActionBar().setHomeAsUpIndicator(icon);
work for me...
<android.support.v7.widget.Toolbar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/toolBar"
android:background="#color/colorGreen"
app:title="Title"
app:titleTextColor="#color/colorBlack"
app:navigationIcon="#drawable/ic_action_back"/>
In case you don't wish to set the toolbar as the action bar, you can use this:
val toggle = ActionBarDrawerToggle(this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close)
toggle.isDrawerSlideAnimationEnabled = false
toggle.isDrawerIndicatorEnabled = false
toggle.setHomeAsUpIndicator(AppCompatResources.getDrawable(this, ...))
drawer!!.addDrawerListener(toggle)
toggle.setToolbarNavigationClickListener {
setDrawerOpened(!isDrawerOpened())
}
toggle.syncState()
fun setDrawerOpened(open: Boolean) {
if (open == drawerLayout.isDrawerOpen(GravityCompat.START))
return
if (open)
drawerLayout.openDrawer(GravityCompat.START)
else drawerLayout.closeDrawer(GravityCompat.START)
}
Try this:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:toolbar="http://schemas.android.com/apk/res-auto"
android:id="#+id/tool_drawer"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
toolbar:navigationIcon="#drawable/ic_navigation">
</android.support.v7.widget.Toolbar>