Android Collapsing Toolbar with navigation - android

I want to implement a collapsing toolbar with navigation bar in it (dots). User can swipe over the image to go next image in the collapsing toolbar layout . How do I go with it?? I searched a lot many tutorials but I am able implement just collapsing toolbar layout. Many Thanks for any thoughts on it.

Try the below code
//actionbar.setNavigationIcon(R.drawable.ic_arrow);
Toolbar actionbar = (Toolbar) findViewById(R.id.actionbar);
if (null != actionbar) {
actionbar.setNavigationIcon(R.drawable.ic_arrow);
actionbar.setTitle(R.string.title_activity_settings);
actionbar.setNavigationOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
// your implementation here
}
});
// Inflate a menu to be displayed in the toolbar
actionbar.inflateMenu(R.menu.menu);
}

Related

Dynamically Change Collapsing Toolbar Title

In the default layout provided in android studio with a collapsing toolbar, I've added a floating action button. Within the Scrolling Activity's onCreate() method, I wrote this -
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_scrolling);
final Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
FloatingActionButton fab = findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
ScrollingActivity.this.getSupportActionBar().setTitle("New Title");
}
});
}
Please tell me why the title won't change and how to change the title whenever fab is pressed.
To change collapsing toolbar title use :
collapsingToolbarLayout.setTitle("yourTitle");

Add and Remove views from Toolbar depending on Fragment Displayed

I have an application, that at the moment only has 2 fragments. Fragment 1, this has the nav drawer and the title.
Fragment 2 requires a custom view as adding menu items won't work as I need alignment. So I add the view as follows:
ActionBar.LayoutParams params = new ActionBar.LayoutParams(
ActionBar.LayoutParams.MATCH_PARENT,
ActionBar.LayoutParams.MATCH_PARENT,
Gravity.LEFT);
//Remove nav drawer "hamburger"
mMainActivity.mActionBarDrawerToggle.setDrawerIndicatorEnabled(false);
//Remove title from Toolbar
bar.setDisplayShowTitleEnabled(false);
LayoutInflater layoutInflater = LayoutInflater.from(getActivity());
View postToolBar = layoutInflater.inflate(R.layout.upload_content_toolbar, null);
mMainActivity.mToolBar.addView(postToolBar, params);
That is fine and it displays correctly. However, when I want to return to the previous fragment Fragment 1, I then call mMainActivity.mToolBar.removeView(postToolBar); I call this on return to Fragment 1 as the user can navigate either by the back button or by button in the postToolBar. However, the view is still in place. I can't get rid of it. I have now tried setting the visibility to GONE but that won't work either.
This was pretty simple with the Action Bar, however things seem to have gotten a bit complicated with the Tool bar.
I must add that in each of my two fragments I extend a BaseFragment in which I declare the toolbar view.
Can any one help or send me in the direction of a tutorial?
This is how i achieved it at this time:
in activity onCreateView();
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_home);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowCustomEnabled(true); // enable overriding the default toolbar_home layout
getSupportActionBar().setDisplayShowTitleEnabled(false); // disable the default title element here (for centered title)
getSupportActionBar().setDisplayShowHomeEnabled(false);
cutomToolbarView=getLayoutInflater().inflate(R.layout.custom_toolbar_home, null);
getSupportActionBar().setCustomView(cutomToolbarView);
}
and here is two simple method to do the magic
public void setToolbarTitleEnabled(String title) {
getSupportActionBar().setDisplayShowCustomEnabled(false);
getSupportActionBar().setDisplayShowTitleEnabled(true);
getSupportActionBar().setTitle(title);
}
public void setCustomToolbarEnabled() {
getSupportActionBar().setDisplayShowCustomEnabled(true);
getSupportActionBar().setDisplayShowTitleEnabled(false);
}
then simply when you can change actionbar like these:
when to select HomeFragment.java or whatever in your case
setToolbarTitleEnabled(CURRENT_TAG);
and when to select other fragment:
setCustomToolbarEnabled();

Gmail tablet like Actionbar items

I'm trying to build an app with a split actionbar/toolbar like in the Gmail app.
Is there any view element for this behaviour or do I have to write such a toolbar myself?
The search icon is moving with the master fragment when opening the slidingDrawer.
To accomplish this you can add one of the new Toolbar widgets to each of your fragments layouts. The new Toolbar class was designed to be much more flexible than a traditional Actionbar and will work well in this split design. This post is a good overview for implementing a standalone Toolbar. For posterity's sake I've included the sample code for it below.
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.blah);
Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
// Set an OnMenuItemClickListener to handle menu item clicks
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
#Override
public boolean onMenuItemClick(MenuItem item) {
// Handle the menu item
return true;
}
});
// Inflate a menu to be displayed in the toolbar
toolbar.inflateMenu(R.menu.your_toolbar_menu);
}

Remove back button from SearchView in toolbar AppCompat

How can I remove the back button icon when search view shows up in Toolbar (AppCompat)?
toolbar = (Toolbar) findViewById(R.id.tool_bar);
// Set an OnMenuItemClickListener to handle menu item clicks
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
#Override
public boolean onMenuItemClick(MenuItem item) {
// Handle the menu item
return true;
}
});
// Inflate a menu to be displayed in the toolbar
toolbar.inflateMenu(R.menu.menu_main);
toolbar.setTitle("");
setSupportActionBar(toolbar);
actionBar = getSupportActionBar();
// this works for normal back button but not for one appears on tapping SearchView
actionBar.setDisplayHomeAsUpEnabled(false);
Use:
getSupportActionBar().setDisplayHomeAsUpEnabled(false);
toolbar.setNavigationIcon(null);
OR
toolbar.setNavigationIcon(getResources().getColor(android.R.color.transparent));
getSupportActionBar().setDisplayHomeAsUpEnabled(false);
There is no way to remove the back arrow from a SearchView.
you can try finding it yourself
in the class (of the support.v7 lib or the main Android project) it looks like this:
mCloseButton = (ImageView) findViewById(R.id.search_close_btn);
But it's a private member and the visibility changes upon text input

How to make ActionMode aligned with custom Toolbar

I have an activity with new support Toolbar and navigation drawer. The Toolbar relates to the content e.g. list of items. Multiple items can be selected - then ActionMode is shown (Context Action Bar). However the system ActionMode position, size and layout order does not correspond to the Toolbar, which would be appropriate.
Question is: how can I adjust the system ActionMode to correspond to (be aligned with) my Toolbar? Or is there any other recommended alternative? See my cases below
Portrait
NavDrawer may be hidden in side (1-green) - this is OK for both Toolbar and ActionMode.
Both Toolbar and its content are overlapped by the navigation drawer the drawer is opened (2-yellow). However, when ActionMode is active, it is displayed always over the NavDrawer (3-red), but I want it to look like (2-yellow), because the ActionMode is related to the hidden content.
This issue is similar to this question:
How to make the Contextual ActionMode Bar overlay the appcompat-v7 Toolbar but not the navigation drawer?
Tablet/landscape
In landscape the NavDrawer fits next to the toolbar and content (left). The ActionMode always overlays the NavDrawer and Toolbar and has full screen width (right-red). Again I would like the ActionMode to be in the same position as Toolbar is (left-yellow).
I solved it by using another Toolbar (actionModeToolbar), which I can put anywhere in layout and show or hide it as appropriate.
I found some useful hints how to use Toolbar here:
https://gist.github.com/gabrielemariotti/ae63392e1c70bc33af8b
Here is how I created ActionMode using Toolbar with legacy ActionMode.Callback. I have used methods similar to system ActionMode for partial compatibility.
Note, that ActionMode.Callback is not required anymore, because system ActionMode is not used and code can be refactored.
class ToolbarActionMode {
Toolbar actionModeToolbar;
ActionMode.Callback callback;
void startActionMode() {
actionModeToolbar.setNavigationOnClickListener(new View.OnClickListener() {
#Override public void onClick(View v) {
toolbarActionMode.finishActionMode();
}
});
actionModeToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
#Override public boolean onMenuItemClick(MenuItem menuItem) {
return callback.onActionItemClicked(null, menuItem);
}
});
// will create menu using inflateMenu(R.menu.menu_res)
callback.onCreateActionMode(null, null);
invalidate();
actionModeToolbar.setVisibility(View.VISIBLE);
}
void finishActionMode() {
callback.onDestroyActionMode(null);
actionModeToolbar.setVisibility(View.GONE);
}
void invalidate() {
// will update title + menu
callback.onPrepareActionMode(null, actionModeToolbar.getMenu());
}
void setTitle(CharSequence title) {
actionModeToolbar.setTitle(title);
}
void inflateMenu(int menuRes) {
actionModeToolbar.inflateMenu(menuRes);
}
}

Categories

Resources