So, I have an activity with navigation view. By click on its item I change fragment in activity. All fragment have the same toolbar. But one have this toolbar and TabLayout to it. I would like to know what is better to declare toolbar once on activity like this
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/toolbar" />
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar" />
</RelativeLayout>
or declare it in each fragment.
The disadvantage of the first method is default toolbar shadow. When I add tabs in fragment, shadow looks like
When I tried 2 solution. All my toolbar was with back icon instead drawer animated logo.
Thanks.
I had the exact same problem. This is how I solved it:
Move the toolbars to the fragments like you suggested (so you won't have a shadow separating the two). This allows for a way more flexible way to implement (different) toolbars in your layouts too.
Replace the Toolbar's navigation icon by a custom one like this:
toolbar.setNavigationIcon(R.drawable.ic_action_menu);
(I used the Android Asset Studio to easily create an icon with the preferred color)
Now open the NavigationView with the new menu(home) icon. You can do this through the MainActivity (the one with the NavigationView). Create a public method in that Activity that opens the drawer:
public void openDrawer(){
mDrawerLayout.openDrawer(Gravity.LEFT);
}
Now call this method in the OnOptionsItemSelected in your fragments like this:
#Override
public boolean onOptionsItemSelected(MenuItem item) {
// handle item selection
switch (item.getItemId()) {
case android.R.id.home: //Menu icon
((MainActivity)getActivity()).openDrawer();
return true;
default:
return super.onOptionsItemSelected(item);
}
}
That's it. Of course the downside is that you must implement the Toolbar in each Fragment. However, this is the only way (that I know of) that enables you to have the Toolbar (+TabLayout) in a Fragment and still be able to control your NavigationView.
You can use AppBarLayout from design support library like:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
...
app:layout_scrollFlags="scroll|enterAlways" />
<android.support.design.widget.TabLayout
...
/>
</android.support.design.widget.AppBarLayout>
and then you can change visibility of tablayout.
For more information about desing layout library : link
Related
The proposed practise for the new navigation components were presented at I/O with the following template and proposed philosophy:
One Activity for an App
Activity contains Toolbar and Bottom Navigation Bar
A typical app often has a detail view with a CollapsingToolbar in it. How would one build that under that architecture?
Move Toolbar to each Fragment XML?
Implement the collapsing toolbar programmatically?
Move the detail fragment to its own activity (it may use its own deeplink anyway) and 'break' the philosophy?
A typical app often has a detail view with a CollapsingToolbar in it. How would one build that under that architecture?
Great question! I struggled with this for a bit as well and came to the conclusion that there should be one Activity with a NavHostFragment and, ideally, nothing else. This gives you ultimate flexibility to display (or not display) whatever you need for each screen. Importantly, make sure your theme removes the ActionBar:
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
Which leads to your next question...
Move Toolbar to each Fragment XML?
In my opinion, yup! Everything you'd typically use the ActionBar for can be done via a Toolbar. Here's a quick snippet that shows how a Toolbar can be used to do the most important things you've used ActionBar for in the past (up navigation, title, options menu, etc...):
toolbar.apply {
setNavigationOnClickListener { findNavController().navigateUp() }
setTitle(R.string.toolbar_title)
inflateMenu(R.menu.fragment_menu)
setOnMenuItemClickListener(::onMenuItemClick)
}
Implement the collapsing toolbar programmatically?
It depends on what exactly you are trying to do, but most likely, there's no need for that. You can drop an AppBarLayout, CollapsingToolbarLayout, and Toolbar into your layout and use them just like normal. Give your AppBarLayout an ActionBar theme overlay. Here's an example:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.MaterialComponents.Dark.ActionBar">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="#color/primary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:navigationIcon="#drawable/ic_up_white"/>
...
Move the detail fragment to its own activity (it may use its own deeplink anyway) and 'break' the philosophy?
No need for that with the above, right? It's an approach that's flexible enough to accommodate multiple levels easily in one nav graph and still be able to customize the appearance and behavior of every destination in the graph (including ActionBar-like functionality).
try
appBarLayout = (AppBarLayout) findViewById(R.id.appbar);
if(expandToolbar){
appBarLayout.setExpanded(true,true);
}else{
appBarLayout.setExpanded(false,true);
}
Here is a usufal link
disable expand on CollapsingToolbarLayout for certain fragments
also for other people inteasing of changing some parts of their toolBar
you should write your custom toolbar view in separate XML and try to inflate the custom view in your details Fragment grammatically then hide the unused elements
of the old toolbar if there are any.
setSupportActionBar(toolbar);
View logo = getLayoutInflater().inflate(R.layout.view_logo, null);
toolbar.addView(logo);
and here is how u can hide unwanted Views
for (int i = 0; i < toolbar.getChildCount(); ++i) {
View child = toolbar.getChildAt(i);
// here u can hide all text views for example.
if (child instanceof TextView) {
child.setVisibility(View.GONE );
}
}
this way is a lot better than writing two activities
Let's assume that we have
One Activity for an App
Activity contains Toolbar and Bottom Navigation Bar
All possible appearances for the toolbar that you need for your app should be implemented in that single toolbar and controllable be the currently active fragment.
Not to violate the Dependency inversion principle all Fragments that need a feature from the activity's toolbar must implement an interface. You could use the OnBackStackChangedListener to check for updates of the view
getFragmentManager().addOnBackStackChangedListener(
new FragmentManager.OnBackStackChangedListener() {
#Override
public void onBackStackChanged() {
Fragment visibleFragment = ...
if(visibleFragment instanceof ToolbarControlFragment) {
if(visibleFragment.shouldExpandToolbar()) {
// set AppBarLayout expanded state
}
// ...
}
}
}
);
You maybe remember that principle when a Fragment requires an OptionsMenu.
I would generally recommend having only one Bottom Navigation Bar controlled by an activity and several Toolbars in Fragments. This reduces complexity and makes components of the app more independent.
Template that provide Android Studio
This is how I try to do. What is the R.id.x?. I tried using layout id in xml ActivityMain but not the fragment is displayed or overlaid with out activity information.
After selecting one of the items, the fragment will be displayed above the activity. The activity has several elements belonging to material design as the FAB or the Toolbar, Could this create problems with what I do?
In activity_main.xml try replacing:
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
With this:
<FrameLayout android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
And then use R.id.fragment_container as your R.id.x.
This will however replace the view with the FAB and coordinator layout. But you will probably want to add them to the fragments where you want them.
If not you could try replacing the xml found below in app_bar_main.xml, or wrap it in the FrameLayout.
<include layout="#layout/content_main"/>
Update:
Replacing in activity_main.xml will cause some issues as that removes the toolbar.
If you replace the include in app_bar_main.xml your fragments will most likely get overlapped by the toolbar at the top. To prevent this you could try adding app:layout_behavior="#string/appbar_scrolling_view_behavior" in the FrameLayout snippet above.
R.id.x is the id of the View that your fragment going to be replaced. So in your layout R.layout.xyz you have created a layout
<FrameLayout android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
and add/replace the fragment to that id. (R.id.fragment_container) such that your new fragment will be placed in that layout.
transaction.add(R.id.fragment_container, firstFragment)
At the end solved the problem using some of the recommendations made in the answers they provided me.
Change content_main.xml content. Using a FrameLayout with its correspodiente id.
Add fragment on onNavigationItemSelected(MenuItem item)
Result
When I press a menu item ...
...the fragment is displayed
I've started to change from using ActionBarActivity to AppCompatActivity, but I've also started using the Toolbar as well instead of a standard ActionBar.
However, in one of my activities which has a swiping tab type of layout, the following line seems to be deprecated:
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
Although I have looked at some other answers on Stack Overflow regarding this, is there any built-in way of changing this to support using the Toolbar. If so, could you explain exactly how I would go about changing it? How would deprecated methods like onTabSelected be changed?
Also, I've noticed that the Google Play Music app has what looks like an extended toolbar/section underneath the tabs (see this image for what I am talking about). How would I be able to have that type of layout?
Thanks in advance.
So after a few days of lots of research, and looking through GitHub, I finally managed to solve my problem.
Steps to updating the ActionBar tabs to Toolbar tabs using AppCompatActivity:
UPDATE: After Friday 29th May 2015:
Thankfully, using a TabLayout with the Toolbar has become much simpler since the announcement of the Android Design Support Library in Google I/O 2015.
We no longer need to download custom view classes, and this is something Google really should have done a long time ago.
From the Android Developers' Blogspot post on the Android Design Support Library:
Tabs:
Switching between different views in your app via tabs is not a new concept to material design and they are equally at home as a top level navigation pattern or for organizing different groupings of content within your app (say, different genres of music).
The Design library’s TabLayout implements both fixed tabs, where the view’s width is divided equally between all of the tabs, as well as scrollable tabs, where the tabs are not a uniform size and can scroll horizontally. Tabs can be added programmatically:
TabLayout tabLayout = ...;
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
However, if you are using a ViewPager for horizontal paging between tabs, you can create tabs directly from your PagerAdapter’s getPageTitle() and then connect the two together using setupWithViewPager(). This ensures that tab selection events update the ViewPager and page changes update the selected tab.
Prior to Google I/O 2015:
Firstly, I downloaded the SlidingTabLayout.java and SlidingTabStrip.java files from Google's I/O Conference app on GitHub. These would be the views that would be used in the tab layout, so I created a folder with my other Java activities called 'view' and placed them there.
Next, I edited my activity layout .xml to look a bit like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="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="com.mycompany.myapp.MyActivity" >
<!-- This is the Toolbar with the tabs underneath -->
<LinearLayout android:id="#+id/detail_headerBar"
style="#style/HeaderBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include android:id="#+id/detail_toolbar" layout="#layout/toolbar" />
<com.mycompany.myapp.view.SlidingTabLayout
android:id="#+id/sliding_tabs"
android:background="?attr/colorPrimary"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<!-- This is the ViewPager (which I had used before) and
it would be responsible for the swiping to change layouts -->
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/detail_headerBar"
android:layout_above="#+id/detail_adView" />
<!-- I also had an AdView in my layout,
but this is not necessary for creating tab layouts -->
<com.google.android.gms.ads.AdView
android:id="#+id/detail_adView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
ads:adSize="SMART_BANNER"
ads:adUnitId="#string/banner_ad_unit_id" >
</com.google.android.gms.ads.AdView>
</RelativeLayout>
The line which references the Toolbar (<include android:id="#+id/detail_toolbar" layout="#layout/toolbar" />), is referencing the following layout (for those who aren't sure how to use the Toolbar yet):
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
And in both of the .xml layout files above, ?attr/colorPrimary, refers to the primary colour of my app (which I had defined in a style).
Also, in the first layout, the style I had mentioned as #style/HeaderBar refers to the following:
<style name="HeaderBar">
<item name="android:background">?colorPrimary</item>
<item name="android:elevation">4dp</item>
<!-- You may have to override this in a v21 version of this file -->
</style>
Before I started setting up the layouts in Java, I had to make sure to change the package names in SlidingTabLayout.java and SlidingTabStrip.java corresponding to where they were placed. In my case, I used: package com.mycompany.myapp.view; in both of these files.
Now, in my Activity (which was extending AppCompatActivity), I first added the following in the onCreate method:
Toolbar toolbar = (Toolbar) findViewById(R.id.detail_toolbar);
setSupportActionBar(toolbar);
This would be reponsible for displaying the Toolbar.
Then I setup the ViewPager and SlidingTabLayout parts:
mViewPager = (ViewPager) findViewById(R.id.view_pager);
mViewPager.setAdapter(new ViewPagerAdapter(getSupportFragmentManager()));
mSlidingTabLayout = (SlidingTabLayout) findViewById(R.id.sliding_tabs);
mSlidingTabLayout.setSelectedIndicatorColors(getResources().getColor(R.color.tab_line));
mSlidingTabLayout.setDistributeEvenly(true);
mSlidingTabLayout.setViewPager(mViewPager);
The colour 'tab_line' was a colour I had declared in color.xml which would be the colour of the tab line indicator. Also note that the variables above were global which I defined previously in this activity:
SlidingTabLayout mSlidingTabLayout;
ViewPager mViewPager;
The final thing to do was to setup the ViewPagerAdapter which I had called eariler. This would be responsible for changing the page depending on which tab was selected. I used the following:
public class ViewPagerAdapter extends FragmentPagerAdapter {
public ViewPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public int getCount() {
// Returns the number of tabs
return 3;
}
#Override
public Fragment getItem(int position) {
// Returns a new instance of the fragment
switch (position) {
case 0:
return new FragmentOne();
case 1:
return new FragmentTwo();
case 2:
return new FragmentThree();
}
return null;
}
#Override
public CharSequence getPageTitle(int position) {
Locale l = Locale.getDefault();
switch (position) {
case 0:
return getString(R.string.title_section1).toUpperCase(l);
case 1:
return getString(R.string.title_section2).toUpperCase(l);
case 2:
return getString(R.string.title_section3).toUpperCase(l);
}
return null;
}
}
I hope this was a thorough enough answer for those who are having the same trouble as I did, when switching from ActionBarActivity to AppCompatActivity and starting to use Toolbar instead of ActionBar. If there is anything that is unclear, feel free to comment below.
I am attempting to create a drop-down menu like the one found in the Google+ app. A screenshot can be found below. I have looked at Spinners and Popup Menus, but neither of these fit exactly for what I am trying to create. The first image shows the closed menu, and the second shows what the drop-down menu looks like when opened.
http://www.droid-life.com/wp-content/uploads/2014/05/google-plus-4.4-1.jpg
The menu should not appear inside the action bar, and when scrolling, the menu displaying the selected option remains at the top of the screen.
Sorry I don't have enough reputation to add comments, So I'll post as an answer, hope it'll help anybody. This is just my alternative solution trying to achieve a ui like google plus app as you've posted.
My current solution is to use a toolbar beneath the actionbar(which is a toolbar also set as actionbar). Then I add onClickListener for the toolbar. When the toolbar is tapped, a recyclerview will be visible. Which the recyclerview can be populate by dynamic data or custom data you put in the layout. Example code :
main_layout.xml
<LinearLayout .... >
// the actionbar toolbar
<android.support.v7.widget.Toolbar
android:id="#+id/action_toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
app:theme="#style/toolbarStyle"/>
// second toolbar act as the spinner
<android.support.v7.widget.Toolbar
android:id="#+id/dropdown_toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
style="#style/dropdownToolbar">
..... // add a spinner indicator (imageview)
</android.support.v7.widget.Toolbar>
//separator line
<View
android:id="#+id/separator_line"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:background="#adacad"/>
// two child overlaps in framelayout
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white">
// the visible layout example
<android.support.v7.widget.RecyclerView
android:id="#+id/default_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
// the layout that is visible when toolbar is tapped
// this is spinner content, put anything u want here
<android.support.v7.widget.RecyclerView
android:id="#+id/dropdown_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone"/>
</LinearLayout>
This will give u a full width and length layout. the dropdown_recyclerview content depends on what u want. I added an imageview to indicate if the fake spinner is open or close. Sample code for java :
MainActivity.java
//action toolbar
Toolbar actionToolbar = (Toolbar) findViewById(R.id.action_toolbar);
setSupportActionBar(actionToolbar);
RecyclerView dropdownRecyclerView = (RecyclerView) findViewById(R.id.dropdown_recyclerview);
//second toolbar
Toolbar dropdownToolbar = (Toolbar) findViewById(R.id.dropdown_toolbar);
//Listen for toolbar onClick
dropdownToolbar.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
//toggle visibility of dropdown spinner
if (!SHOW_SPINNER_FLAG) {
//set indicator close / open
dropdownRecyclerView.setVisibility(View.VISIBLE);
} else {
//set indicator close / open
dropdownRecyclerView.setVisibility(View.VISIBLE);
}
}
});
Later on you can customized the layout and add some animation to reveal the fake spinner layout. If there's other way, please share. For the moment this is what i use in my app and it works fine for me. Sorry for my poor english.
example app image
My main activity is a Swipe View with tabs in the action bar, which can be used to change to a particular fragment directly. I basically followed the developer guidelines on this. So far this works fine and as expected.
However, I now have a couple of items in the menu (Settings, About), which should not be displayed as part of the ViewPager, but rather should replace the ViewPager completely and set the "navigation up" affordance in the action bar. Following along with the answers to this question I know how to use the BackStack to manipulate the action bar and to show the "navigation up" affordance.
However I'm not sure what the best way to replace the ViewPager would be. As far as I know I can either try to disable all ViewPager functionality and make it appear as it would be a single fragment (e.g. disable tabs and swipe), or I could use nested fragments. Yet, I'm not convinced that either of this options is "clean".
Maybe I'm overlooking something here and there is a more intuitive way to achieve the same? What are you guys thinking about this and how do you implement something "basic" as this?
P.S.: Obviously I could use activities for this, but I think that an Activity is too heavy for a simple "About" text and in my understanding one should try to use Fragments wherever possible these days.
As I can understand, you could put the ViewPager inside a parent as FrameLayout and add() the "about" fragment with addToBackState() method above the ViewPager.
You will avoid to disable or refresh the ViewPager. Just add above it a new fragment.
UPDATE
I'm able to achieve it with add() method and a custom background on the added fragment to avoid the overlap issues. And finally make this background clickable to prevent the click events for the behind ViewPager.
See my activity layout:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context="com.example.viewpageroverlap.MainActivity"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
My Menu item event:
#Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.action_settings) {
getSupportFragmentManager().beginTransaction()
.add(R.id.container, OverlapFragment.newInstance(990), null).addToBackStack(null).commit();
return true;
}
return super.onOptionsItemSelected(item);
}
My Overlap Fragment layout:
<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"
tools:context="com.example.viewpageroverlap.MainActivity$OverlapFragment"
android:background="#FF0000"
android:clickable="true" >
<TextView
android:id="#+id/section_label"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center" />
</RelativeLayout>
This gives me this output:
Note: I used a red background but you can try with Android Resources Color and avoid to use a color declared in your files as android:background="#android:color/white".
WITH TABS
You can do the same as above and reset the navigation with NAVIGATION_MODE_STANDARD:
if (id == R.id.action_settings) {
getSupportActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_STANDARD);
getSupportFragmentManager().beginTransaction()
.add(R.id.container, OverlapFragment.newInstance(990), null).addToBackStack(null).commit();
return true;
}
Then, when the user come back to the ViewPager (when he presses the home button or hardware back button), reset the old navigation as:
// do the same with android.R.id.home inside onOptionsItemSelected
#Override
public void onBackPressed() {
// check if the "about" fragment is still displayed
if(this.getSupportFragmentManager().getBackStackEntryCount() > 0) {
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
this.getSupportFragmentManager().popBackStack();
}
}
Just have the ViewPager in its own fragment and replace that when you want to change to another fragment using regular fragment transactions.
If you turn on addToBackStack those transactions will react to the back button in a natrual way.