I have an application with one activity that contains the navigation drawer. This activity also houses all the fragments that are associated with the navigation drawer.
What I'd like to do is have each fragment implement its own toolbar since some of these fragments might have a different theme or background for each toolbar in each fragment/screen.
The problem is once I have implemented a toolbar for each fragment, the hamburger icon disappears and is replaced with the back arrow. The navigation drawer still works, but the back arrow is misleading since the arrow should be a burger icon for each of those fragment connected with the navigation drawer.
What would be the correct way to implement a toolbar with the navigation drawer and have the freedom to change any property of the toolbar and keep the hamburger icon as well.
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<include layout="#layout/standard_toolbar" />
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/my_toolbar" >
</FrameLayout>
</RelativeLayout>
<LinearLayout
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:orientation="vertical" >
<ListView
android:id="#+id/left_drawer"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:color/white"
android:choiceMode="singleChoice"
android:divider="#color/navigation_drawer_line_color"
android:dividerHeight="0.4dp"
android:listSelector="#drawable/list_selector" />
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
This is my code in the activity that houses the navigation drawer with child fragments as well as the toolbar.
getActivity().findViewById(R.id.toolbar) will give you reference to your Toolbar in your Fragments.
Hence, from this point you can control the background, inflate menus, change title, usually as you would with old ActionBar.
Regarding the theming of the toolbar programmatically, it is not possible.
Related
I am using Android Design Support Library to get navigation drawer pattern. I have following main activity layout:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res/pl.dzielins42.skinflint.android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="http://schemas.android.com/apk/res-auto"
tools:ignore="MergeRootFrame" >
<!-- The main content view -->
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- The navigation drawer -->
<android.support.design.widget.NavigationView
android:id="#+id/drawer_navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/view_nav_drawer_header"
app:menu="#menu/drawer" />
</android.support.v4.widget.DrawerLayout>
The container layout is where I inflate my fragments. Some of the fragments have Toolbar in their layouts. I use navigation drawer to move between these fragments. In each of the fragments with Toolbar I set it as activity's actionbar using setSupportActionBar, and later
supportActionBar.setDisplayHomeAsUpEnabled(true);
supportActionBar.setHomeButtonEnabled(true);
The problem is that on the first fragment (inflated in activity's onCreate) the "hamburger" icon is displayed properly, but after I change the fragment to another fragment with Toolbar, the icon changes to standard back-arrow.
I have tried to fix it by using ActionBarDrawerToggle (v7) and calling syncState in onDrawerClosed. This fixes it partially, as the "hamburger" icon is set but only after drawer is fully closed, so while it is still closing, back arrow-icon is visible.
Can someone provide better solution?
set the ActionBarDrawerToggle properly:
mDrawerToggle.setDrawerIndicatorEnabled(true);
I am using Androidhibe NavigationDrawer and SwipeTab with Custom Action Bar as seen here:
http://www.androidhive.info/2013/11/android-sliding-menu-using-navigation-drawer/
The NavigationDrawer is shown over the ViewPager (below the ActionBar) but I would like it to show on top of the ActionBar. How can I achieve that affect?
You can use Toolbar instead of ActionBar to achieve that.
Here is a blog post that may help you from switching over to Toolbar.
The XML for your MainActivity would look something like this:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/toolbar"/>
<!-- As the main content view, the view below consumes the entire
space available using match_parent in both dimensions. -->
<FrameLayout android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
<!-- android:layout_gravity="start" tells DrawerLayout to treat
this as a sliding drawer on the left side for left-to-right
languages and on the right side for right-to-left languages.
If you're not building against API 17 or higher, use
android:layout_gravity="left" instead. -->
<!-- The drawer is given a fixed width in dp and extends the full height of
the container. -->
<fragment android:id="#+id/navigation_drawer"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
android:name="com.example.app.NavigationDrawerFragment"
tools:layout="#layout/fragment_navigation_drawer" />
</android.support.v4.widget.DrawerLayout>
The XML for my Toolbar looked like this:
<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"
app:theme="#style/ThemeOverlay.AppCompat.Dark"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="#color/colorPrimary"/>
I struggled with it at first, but once I switched over to using Toolbar the Navigation Drawer overlayed the Toolbar just like I wanted. If the blog post and sample code here is not enough, just let me know and I can continue to help you through it.
I'm creating the layout for a tablet and I have a DrawerLayout, which has a Fragment on the left menu (so the drawer) and should have two fragments as main content.
The way I'm doing it is the following:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"/>
<View
android:id="#+id/right_card_group_divider"
android:layout_width="1dip"
android:layout_height="match_parent"
android:background="#drawable/grey_line_bg"/>
<FrameLayout
android:id="#+id/menu_frame_two"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1.3"/>
</LinearLayout>
<!-- The navigation drawer -->
<FrameLayout
android:id="#+id/menu_frame"
android:layout_width="300dp"
android:layout_gravity="start"
android:layout_height="match_parent"/>
</android.support.v4.widget.DrawerLayout>
Nevertheless, I notice that if I manually hide the "menu_frame_two", the DrawerLayout works perfectly, but if that Fragment isn't hidden, then when opening the DrawerLayout nothing appears on the screen: it gets darker, just like if the drawer has been opened.
Is there any reason why the left drawer menu isn't showing?
Your menu_frame_two FrameLayout seems coming over the menu_frame Navigation Drawer. So navigation drawer is not visible that time
Solution :
Use single FrameLayout and add all elemets of main content screen inside it
<FrameLayout android:id = "#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<FrameLayout
android:id="#+id/content_frame_inside"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"/>
<View
android:id="#+id/right_card_group_divider"
android:layout_width="1dip"
android:layout_height="match_parent"
android:background="#drawable/grey_line_bg"/>
<FrameLayout
android:id="#+id/menu_frame_two"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1.3"/>
</FrameLayout>
Reason :
As per Documentation there should be one content_frame with height and width equal to match_parent
Hi I am trying to implement a sliding drawer overlay in my android app. I have taken reference from this link:
https://github.com/SimonVT/android-menudrawer
and implemented a menu drawer in my activity. So my activity has 2 fragments in a viewPager with a TitlePageIndicator. When I click on a button in the fragment, the menu drawer opens. Currently the drawer overlays the titlePageIndicator as well. I would like to know to implement a menu drawer which opens/overlays below the title of the viewPager. Or is something like that not possible? Thanks for the help!
you can use below xml, you should define a layout below of your titlebar and set that for it:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/com.mhp.chek"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- main layout -->
<LinearLayout
android:id="#+id/base_layout"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_gravity="end"
android:orientation="vertical" >
<!-- for example your **viewpager** can define here -->
</LinearLayout>
<!-- drawer layout-->
<LinearLayout
android:id="#+id/drawer"
android:layout_width="300dp"
android:layout_height="fill_parent"
android:layout_gravity="end"
android:orientation="vertical" >
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
note that you need support library for this one.
When I put ScrollView into the content of a DrawerLayout, I am nolonger able to open the drawer by swiping from the side.
Activity layout:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- The menu_main content view -->
<FrameLayout
android:id="#android:id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<!-- The navigation drawer -->
<ListView
android:name="com.gumtree.androidapp.DrawerFragment"
android:id="#+id/drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start" />
</android.support.v4.widget.DrawerLayout>
In Activity's onCreate I add a fragment which has following layout:
<ScrollView
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">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_height="160dp"
android:layout_width="match_parent"/>
<TextView
android:id="#+id/headline"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="#dimen/headline_text_size"
android:padding="#dimen/detail_text_padding"
android:textIsSelectable="false"/>
<TextView
android:id="#+id/description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="#dimen/description_text_size"
android:padding="#dimen/detail_text_padding"
android:textIsSelectable="false"/>
</LinearLayout>
</ScrollView>
Without the ScrollView everything works fine and I am able to open the drawer by swiping from the side. However when I add the ScrollView, it stops working.
The problem here was silly named ID of FrameLayout used as content container of DrawerLayout. I used system ID (android.R.id.content) which caused that the content fragment was put on the top of all other views - even the drawer.
It also caused fragment's layout to overlap the drawer and - related to this question - blocked the drawer from receiving touch events. The touch events were taken by fragment's ScrollView.
Conclusion: DO NOT USE SYSTEM IDs (android.R.*) WHERE IT IS NOT NEEDED.
I just wanted it to look nice and clean.. Silly me :)