I'm looking for best practices when it comes to the following pretty common setup:
What I'm currently doing is:
My Main Activity has a navigation drawer and a Toolbar.
When you click on one of the list items inside the drawer a fragment is loaded under the toolbar. Some fragments have their own tabs inside using viewpager ect.
I would like to make use of the material functionalities like hiding the toolbar while scrolling ect. It is no problem to get it done.
But there is a problem when only some of your fragments would like to make use of the scrolling toolbar. Using a normal Scrollview does solve the problem if you can add an additional margin at the bottom, but once you have a keyboard it will mess up as the scroll is wrong. Using a nestedscrollview works but does scroll the toolbar.
So how can I avoid the scrolling toolbar when my activity holds the toolbar and some fragments that scroll should make use of it and some not?
Is the architectural design wrong? Another thing I thought is to have the different toolbars inside of each fragment... but they have to share the same navigation drawer so you have to create and add the ToggleButton each time? Is it the right approach ? Should I go that path? I'm not convinced and would like to have the opinion of somebody more experienced then me. What's the best solution in this case.
Appreciate your help!
Cheers
EDIT:
Main Activity
<android.support.v4.widget.DrawerLayout
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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/fragment_container_first"
>
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:id="#+id/owner_main_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/appBar"
android:orientation="horizontal"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/addicon"
app:fabSize="normal"
app:layout_anchor="#id/owner_main_container"
app:layout_anchorGravity="bottom|right|end"
app:layout_behavior="xxx.Classes.Misc.ScrollAwareFABBehavior"
/>
</android.support.design.widget.CoordinatorLayout>
<!-- The navigation drawer -->
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/drawerhost" />
I am also Using navigation drawer and tool bar please import project from this link
And try to understand how to use navigation drawer and tool bar using fragment
Related
I am new to android and I am going to design this kind of layout that is complex to me. Here's the code of main_activity.xml file:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<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"
tools:context=".MainActivity">
<android.support.v4.view.ViewPager
android:id="#+id/home_view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<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/AppTheme.PopupOverlay" />
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout_home"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:layout_gravity="start"
app:headerLayout="#layout/nav_header"
app:menu="#menu/menu_drawer"/>
</android.support.v4.widget.DrawerLayout>
Basically I have in my main activity a Navigation drawer and 3 tabs. Here's a picture:
Everything works as I want and I'm happy.
When I click on a navigation drawer item I start a new intent to open a new activity and it's good but the drawer disappears of course (becase the new activity does NOT have the drawer). I want to keep the drawer in the screen always.
To keep the drawer on my screen I thought that I could have placed the TabLayout of the above XML as a fragment; in this way the drawer would still be there. But how can I do this? How can I place the TabLayout in a fragment so that I can replace this fragment with TabLayout or other fragments?
I think that I could put a FrameLayout instead of TabLayout but I do not know if it's good idea and how would it work. Any help?
There are similar questions like this but they haven't helped me because I'm still stuck here
More. If you click on results, the ThisSeason activity is launched and it has some fragments inside (inclusing ResultsFragments). That works, but there is no navigation drawe anymore and I have to press the back button!
I'll give you a general idea for implementing this.
Make a base activity for your application.
Then make fragment for each activity including the screen which has tabs. So, if you have 5 items in nav view then total of 6 fragments will be created.
Add the nav view and related functions in the main activity xml and java file. This will basically add navigation view to the base activity and since you're using fragments, all the pages(fragments) will have the navigation view.
Additional Note: You can make multiple subclasses to handle specific functions, like one for handling actionMode, navigation view and updating the title in the toolbar. You get the point.
Also, all the features which are common to all the fragments should be added in the base activity only instead of repeating the same code everywhere.
I recently implemented a navigation drawer into the main screen of my app. For some reason a small grey (or transparent black) bar is being rendered on top of it.
Screenshot:
Layout code:
<android.support.design.widget.CoordinatorLayout
... >
<LinearLayout
... >
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/PopupOverlay"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.DrawerLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/drawer_layout">
<fragment
... />
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/navigation"
android:layout_gravity="start">
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/list_nav"/>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
<android.support.design.widget.FloatingActionButton
... />
</android.support.design.widget.CoordinatorLayout>
The Java portion is just your generic list-filling stuff. Let me know if you need more code.
How can I remove this weird bar?
For me, it worked to add
app:insetForeground="#color/transparent"
to the NavigationView's XML definition.
NavigationView is a very specialized ViewGroup that builds its own internal structure from provided resources. It's not meant to be used as a regular ViewGroup. That is, it's not meant to have child Views added directly to it, either in layout XML, or in code.
This is not immediately apparent, though, since no fatal error will occur if you do add children to it manually. It is further muddled by the fact that Android Studio's recent Navigation Drawer templates use NavigationView as the default drawer View in the DrawerLayout, with no indication that it is not mandatory that the drawer be a NavigationView. A drawer can be virtually any kind of View or ViewGroup.
In this case, the shadow is apparently coming from something internal to the NavigationView. However, since it's not being used for any of its specialized features, the NavigationView can be removed completely, and the ListView can act as the drawer on its own.
Simply remove the <NavigationView> element, and any code associated with it. To setup the ListView as the drawer, set its layout_gravity attribute to start, and set its layout_width to an exact value; e.g., 240dp.
i add in my activity_main.xml line:
<com.google.android.material.navigation.NavigationView
...
app:insetForeground="#android:color/transparent" />
and it works fine!
I am new to Android and I want to know how to best develop my app.
My app is going to be only on tablets and I have a navigation menu on the header (not side menu like a NavDrawer but a navigation menu on header like in websites).
The question is if it's better to make a header.xml file that contains all the navigation buttons and include it in every activity, and then in order to handle click events make it inside some base activity that every activity will inherit from.
Or it's better to make the header as a fragment and handle the click events inside the fragment itself.
Thanks.
Current practice is to use a Toolbar with either a navigation tab with a spinner or Tabs/Icons for each of your views. If you don't want to build this yourself you can use the TabbedActivity template when you set up your project.
The way it works is it's a Toolbar(new version of the ActionBar) included on the top of an Activity that has a fragment for the rest of the view. You can use a ViewPager or a FragmentManager to change the content of the fragment as the user makes his/her selection.
Here is the main activity of an app I built like this recently:
<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=".MainActivity"
android:background="#dfdfdf">
<include
android:id="#+id/tool_bar"
layout="#layout/tool_bar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:layout_below="#id/tool_bar"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true" />
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/tabs"
/>
</RelativeLayout>
and the toolbar looks something like this:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:elevation="6dp"
android:theme="#style/Base.ThemeOverlay.AppCompat.Dark">
</android.support.v7.widget.Toolbar>
Screenshot 1 and
Screenshot 2 of my app
The problem is basically this: The PagerTitleStrip and the RecyclerView go below my Toolbar even though I have set layout_behaviour to my ViewPager.
More detail:
I have a main activity that uses the layout below and then from it I launch fragments. Before trying the CoordinatorLayout + ViewPager and all of the other fancy stuff I just had a FrameLayout in which I displayed my fragments. However, I decided that I want to use
app:layout_scrollFlags="scroll|enterAlways"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
so that my Toolbar disappears when I scroll the recyclerview. I found online that FrameLayout had no behaviour in it to allow me to fix the position of the recyclerView going under the Toolbar and that's why I changed to ViewPager + CoordinatorLayout to manage my fragments.
However, that introduced a few problems. What I want to achieve is - A toolbar with a PagerTitleStrip attached to it, when I scroll the toolbar disappears leaving the PagerTitleStrip visible ideally, maybe it hides as well I don't care that much about that. But I want my Navigation Drawer to keep working and it doesn't. It's like it doesn't exist.
Now, this first layout actually has all of the above features working, but the problem is the strip is below the toolbar and it's not visible unless the Toolbar hides when I scroll. Drawer works. Recycler view items are partially hidden below the Toolbar unfortunately - they don't start scrolling from the right point of the screen even though I have that set - appbar_scrolling_view_behavior
Layout m_drawerlayout.xml for my main activity to inflate:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer"
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"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.view.PagerTitleStrip
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="6dp"
android:paddingBottom="6dp"
android:layout_gravity="top"
android:textSize="15sp"
android:textColor="#color/tealfifty"
android:background="#color/teal">
</android.support.v4.view.PagerTitleStrip>
</android.support.v4.view.ViewPager>
<ListView
android:id="#+id/drawer_list"
android:background="#color/tealDark"
android:cacheColorHint="#android:color/transparent"
android:choiceMode="singleChoice"
android:divider="#drawable/list_divider"
android:dividerHeight="1dp"
android:layout_width="280dp"
android:layout_height="match_parent"
android:layout_gravity="start"/>
</android.support.v4.widget.DrawerLayout>
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include layout="#layout/app_bar"/>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
And this is the code for my app_bar.xml
<?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:id="#+id/top_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/teal"
app:theme="#style/ToolbarTheme"
app:popupTheme="#style/Green.Overlay.LightPopup"
app:layout_scrollFlags="scroll|enterAlways" >
<Spinner android:id="#+id/spinner"
android:layout_gravity="right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawSelectorOnTop="true"
android:paddingRight="20dp"
/>
</android.support.v7.widget.Toolbar>
I tried moving elements around, in and out of other components but no success. For example, it seems logical that to make the PagerTitleStrip attached to the Toolbar and share one behaviour I'd have to nest the PagerTitleStrip inside the AppBar layout but PagerTitleStrip has to be a direct child of ViewPager to work...Any suggestions guys about all this? I'm new to all these design functionalities and I researched a lot without success, there are similar topics here but not at all what I need. Seems there's almost nothing on the internet about things I'm trying to do above (there are a few) compared to other basic topics.
If anyone is wondering why I'm using ViewPager when I have no tabs, it's because as I said, FrameLayout has no behaviour allowing me to use a disappearing Toolbar correctly and that's what I found is good to use. I also saw NestedScrollView could be used but I haven't used it ever so... I now want to possibly use the ViewPagerTitle which I guess limits me to ViewPager for the Fragments.
The problem is in the:
<android.support.design.widget.CoordinatorLayout
<android.support.v4.widget.DrawerLayout
Which the DrawerLayout should be the root layout.
Please see: http://developer.android.com/training/implementing-navigation/nav-drawer.html#DrawerLayout
To add a navigation drawer, declare your user interface with a
DrawerLayout object as the root view of your layout. Inside the
DrawerLayout, add one view that contains the main content for the
screen (your primary layout when the drawer is hidden) and another
view that contains the contents of the navigation drawer.
Also, it is not recommended to use ListView instead of NavigationView.
And here is the doc suggested way to do(except that ListView:) ):
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- The main content view -->
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- The navigation drawer -->
<ListView android:id="#+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#111"/>
</android.support.v4.widget.DrawerLayout>
And also:
However, that introduced a few problems. What I want to achieve is - A
Toolbar with a PagerTitleStrip attached to it, when I scroll the
toolbar disappears leaving the PagerTitleStrip visible ideally, maybe
it hides as well I don't care that much about that. But I want my
Navigation Drawer to keep working and it doesn't.
Check my answer about this one:
https://stackoverflow.com/a/35241363/4409113
You just put your Toolbar inside CollapsingToolbarLayout like this:
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingtoolbarly"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|snap">
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<ImageView
android:layout_width="match_parent"
android:layout_height="190dp"
android:minHeight="190dp"
android:scaleType="fitXY"
android:src="#drawable/header"
app:layout_collapseMode="parallax" />
</android.support.design.widget.CollapsingToolbarLayout>
It should collapsed and the Toolbar will be hided after that.And if you want to keep that PagerTitleStrip(Recommended to use TabLayout Nowadays), just put it below the CollapsingToolbarLayout and above the </android.support.design.widget.AppBarLayout> like this:
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="?attr/colorPrimary" />
</android.support.design.widget.AppBarLayout>
That's pretty much it, Goodluck then.
I encountered a strange problem with the new Android Design Support Librar (http://android-developers.blogspot.com.ar/2015/05/android-design-support-library.html). If I place additional content (like a LinearLayout) in an AppBarLayout along with the ToolBar and toggle the visibility of that content then switching fragments will have show a dead space at the top of the fragment content.
It appears that AppBarLayout isn't resizing the parent CoordinatorLayout correctly when visibility of the content is toggled. I have my CoordinatorLayout wrapped in the DrawerLayout. I want to toggle the visibility of the extra LinearLayout in the AppBarLayout depending on the which fragment shown.
Here is my main.xml file for the MainActivity:
<android.support.v4.widget.DrawerLayout
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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
android:layout_height="match_parent"
android:layout_width="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_vertical"">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="start"
android:text="Hello"/>
</LinearLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/drawer"/>
</android.support.v4.widget.DrawerLayout>
I had a similar problem using the support design widget. I had a CoordinatorLayout inside a DrawerLayout and an AppBarLayout inside the CoordinatorLayout. I had two toolbars inside the AppBarLayout. My aim was to display a toolbar with a ViewPager displaying a recyclerview content. I wanted to swop between the toolbars when selecting items. In other words, I made one toolbar GONE while the other was visible and vise versa. Scrolling the content up would push the toolbar up off the top of the screen. Everything worked perfectly except that changing orientation would show a space for the toolbar that should be gone. I tried every hack I could think of to get rid of it but did not succeed. I then came across this post and realized that it was a bug in the support library. I then tried putting a FrameLayout in the AppBarLayout and then put the two toolbars inside the FrameLayout and NO MORE SPACE! everything now works as I intend it to work. GONE toolbars are GONE and only the visible toolbar shows, even when changing the orientation.
Hope this helps someone.