Android: DrawerLayout with content view with two fragments - android

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

Related

Android elements overlapping when dynamically inserting fragment

My project consists of a main activity which loads different fragments into view when tabs are pressed on the bottom navigation bar. Blue depicts the activity controls, orange what should be included from one of the fragments. In this case, it is a MapBox MapView with FABs in the corners.
My problem is that I can't seem to get the fragment container height correct; either the top or bottom button (sometimes both) is always cut off vertically underneath the status bar or bottom navigation bar.
My current layout (irrelevant attributes removed for brevity):
activity_main.xml:
<ConstraintLayout
android:layout_height="match_parent">
<RelativeLayout
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/nav_bottom">
<FrameLayout
android:id="#+id/fragment_container"
android:layout_height="wrap_content">
</FrameLayout>
</RelativeLayout>
<BottomNavigationView
android:id="#+id/nav_bottom"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:menu="#menu/nav_bottom">
</BottomNavigationView>
</ConstraintLayout>
fragment_map.xml:
<ConstraintLayout
android:layout_height="wrap_content">
<MapView
android:id="#+id/map_view"
android:layout_height="match_parent"
mapbox:layout_constraintTop_toTopOf="parent"
mapbox:layout_constraintBottom_toBottomOf="parent">
</MapView>
<FloatingActionButton
android:id="#+id/button_top"
android:layout_height="wrap_content"
mapbox:layout_constraintTop_toTopOf="#id/map_view"
mapbox:layout_constraintRight_toRightOf="#id/map_view" />
<FloatingActionButton
android:id="#+id/button_bottom"
android:layout_height="wrap_content"
mapbox:layout_constraintBottom_toBottomOf="#id/map_view"
mapbox:layout_constraintRight_toRightOf="#id/map_view" />
</ConstraintLayout>
I am adding the fragment to the activity like this:
getSupportFragmentManager()
.beginTransaction()
.replace(R.id.fragment_container, fragment, "myFrag")
.commit();
Change your layout style activity_main.xml:
<LinearLayout
android:layout_height="match_parent"
orientation = vertical>
<FrameLayout
android:id="#+id/fragment_container"
android:layout_height="0dp"
weight = "1">
</FrameLayout>
<BottomNavigationView
android:id="#+id/nav_bottom"
android:layout_height="wrap_content"
app:menu="#menu/nav_bottom">
</BottomNavigationView>
</LinearLayout>
and your fragment_map.xml:
<RelaytiveLayout
android:layout_height="match_parent">
<MapView
android:id="#+id/map_view"
android:layout_height="match_parent">
</MapView>
<FloatingActionButton
android:id="#+id/button_top"
android:layout_height="wrap_content"
alignParentRight = true />
<FloatingActionButton
android:id="#+id/button_bottom"
android:layout_height="wrap_content"
alignParentRight = true
alignParentBottom = true />
</RelaytiveLayout>
edited your fragment_map.xml see the changes

Android bottom toolbar disappears when fragment fills screen

I'm working on an android app and am using a toolbar at the top of the screen and a navigation bar at the bottom of the screen. I'm using a single activity to create the top and bottom toolbars and fragments to change the content between the toolbars. However, when the contents in the fragment go beyond the size of the screen, the bottom bar disappears.
Here is my home activity xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_home"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.rentables.testcenter.HomeActivity">
<include
android:id="#+id/toolbar_main"
layout="#layout/toolbar_main"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<fragment android:name="com.rentables.testcenter.HomeFragment"
android:id="#+id/fragment_place"
android:layout_weight="0"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:layout="#layout/fragment_home" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="bottom">
<include
android:id="#+id/toolbar_navigate"
layout="#layout/toolbar_navigate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center|bottom"/>
</LinearLayout>
</LinearLayout>
Im guessing it's because of the inner linear layout I have, but I wasn't sure how else to get the nav bar to stay static at the bottom. Any help would be awesome. Thanks
Figured it out. I just changed the whole thing to a relative layout, got rid of the inner linear layout, and instead of gravity I used alignParentBottom="true".

Correctly implementing Toolbar and NavigationDrawer

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.

Setting up layout with multiple fragments

I am currently working on an android project and I am trying to make use of fragments. I've got it mostly working, however, I can't get the layout right.
In the layout there should be a slide in navigation drawer from the left and a slide in navigation drawer from the right.
At the top of the activity there should be a fragment and underneath that another fragment. The top fragment being smaller than the below fragment.
Even though I have set the height for the fragment it is taking up the whole screen and both fragments are overlapping below. Below is an image which should hopefully highlight what I am trying to achieve.
Below is the XML for the FragmentActivity
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<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">
<fragment android:name="com.BoardiesITSolutions.MysqlManager.QueryEditor"
android:id="#+id/fragment_query_editor"
android:layout_width="match_parent"
android:layout_height="10dp"/>
<fragment android:name="com.BoardiesITSolutions.MysqlManager.MainContentFragment"
android:layout_width="fill_parent"
android:layout_height="100dp" />
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/left_drawer"
android:layout_width="280dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:paddingLeft="#dimen/list_padding"
android:paddingRight="#dimen/list_padding"
android:choiceMode="singleChoice"
android:divider="#4e4e4e"
android:dividerHeight="1dp"
android:background="#111" />
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>
I've taken out the slide in nav menu from the right for the time being just while I get the basic layout correct
Below is the XML for the query editor fragment
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="vertical"
android:background="#c1c1c1c1" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="QUERY EDITOR"/>
</LinearLayout>
Thanks for any help you can provide
Your drawer layout should be the outermost parent. You should then have a layout with matchparent height and width that you can use to contain your inner UI fragments. The 2nd and 3rd layouts should be your slide in drawers with the relevant left and right layout_gravity set.
In summary, an outer drawer that contains 3 inner layouts.
Sorry I am on a tablet so can't show this for you but it is all explained here.
http://developer.android.com/reference/android/support/v4/widget/DrawerLayout.html

ScrollView in content of DrawerLayout prevents the drawer to be opened by swiping

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 :)

Categories

Resources