FrameLayout within a DrawerLayout - android

I would like to wrap into a DrawerLayout a FrameLayout (to replace it on demand with other FrameLayouts at runtime). The Code below is from the GitHub project over here.
But If I add a FrameLayout in the LinearLayout below the widget.Toolbar, I receive following exception
Unhandled Exception:
System.InvalidCastException: Unable to convert instance of type 'Android.Widget.FrameLayout' to type 'Android.Support.Design.Widget.NavigationView'.
Without the FrameLayout it works perfectly. Where should I place the FrameLayout to achieve my goal?
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/drawer_layout"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:id="#+id/nav_view"
app:menu="#menu/navmenu"
app:headerLayout="#menu/header" />
</android.support.v4.widget.DrawerLayout>
The MainAcitivty.cs
drawerLayout = FindViewById<DrawerLayout>(Resource.Id.drawer_layout);
// Init toolbar
var toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);
SetSupportActionBar(toolbar);
// Attach item selected handler to navigation view
var navigationView = FindViewById<NavigationView>(Resource.Id.nav_view);
navigationView.NavigationItemSelected += NavigationView_NavigationItemSelected;
// Create ActionBarDrawerToggle button and add it to the toolbar
var drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, Resource.String.open_drawer, Resource.String.close_drawer);
drawerLayout.AddDrawerListener(drawerToggle);
drawerToggle.SyncState();

<?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"
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:background="#color/white"
tools:openDrawer="start">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include layout="#layout/toolbar" android:id="#+id/drawer_toolbar"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/framelayout"/>
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main">
<!-- app:menu="#menu/activity_main_drawer"-->
<ExpandableListView
android:id="#+id/navigationmenu"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start|right"
android:divider="#f0f0f0"
android:dividerHeight="1.5dp"
android:indicatorEnd="?android:attr/expandableListPreferredItemIndicatorRight"
android:layout_marginTop="170dp"
android:background="#android:color/white"
android:visibility="visible">
</ExpandableListView>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>

Related

Scrolling in ExpandableListView with coordinator layout

My problem is scrolling in ExpandableListView with coordinator layout design.
Toolbar works right and When it touched up, it gets hide, but ExpandableListView doesnt scroll
I need to use NestedScrollView because the layout_navigation_view is Common everywhere.
Take a look at the
picture http://info-sys.persiangig.com/noScroll.gif
My main code with Java AND My design code with XML is:
ActivityMain.java
public class ActivityMain extends ActivityNavigationView {
ArrayList<StructNote> group ; //StructNote public String id,title,icon; // StructNote = Filde Parametr
ArrayList<ArrayList<StructNote>> child ;
ActivityAdapter mAdapter; // class extends BaseExpandableListAdapter
ExpandableListView exListView ;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// ---> content_frame => layout_navigation_view.xml
FrameLayout contentFrameLayout = (FrameLayout) findViewById(R.id.content_frame);
getLayoutInflater().inflate(R.layout.activity_main, contentFrameLayout);
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.getMenu().getItem(1).setChecked(true);
exListView = (ExpandableListView) findViewById(R.id.exListView);
//... Fill Group Child Adapter List
//...Other CODE ...
}
}
ActivityNavigationView.java
public class ActivityNavigationView extends AppCompatActivity {
DrawerLayout drawerLayout;
ActionBarDrawerToggle actionBarDrawerToggle;
Toolbar toolbar;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.layout_navigation_view);
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
//...Other CODE ... Click menu and Open close NavigationView, Toolbar
}
}
layout_navigation_view.xml
<?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"
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"
tools:openDrawer="start">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/background_light"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/main.appbar"
android:layout_width="match_parent"
android:layout_height="300dp"
android:theme="#style/AppTheme.AppBarOverlay"
app:layout_scrollFlags="scroll|enterAlways">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:id="#+id/main.backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
android:src="#drawable/bg_tool_bar"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_margin="#dimen/activity_horizontal_margin"
android:src="#android:drawable/ic_dialog_info"
app:layout_anchor="#id/main.appbar"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_activity_main"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipeToRefresh"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ExpandableListView
android:id="#+id/exListView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:transcriptMode="disabled"
android:divider="#null"
android:dividerHeight="0dp"
android:minHeight="130dp">
</ExpandableListView>
</android.support.v4.widget.SwipeRefreshLayout>
</LinearLayout>
Edit :
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ExpandableListView
android:id="#+id/exListView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:transcriptMode="disabled"
android:divider="#null"
android:dividerHeight="0dp"
android:minHeight="130dp">
</ExpandableListView>
</LinearLayout>
Toolbar works right and When it touched up, it gets hide, but ExpandableListView doesnt scroll
Yes it's because of SwipeRefreshLayout and using SwipeRefreshLayout inside of NestedScrollView.
Add the SwipeRefreshLayout Widget To add the swipe to refresh widget to
an existing app, add SwipeRefreshLayout as the parent of a single
ListView or GridView
Solution:
Place SwipeRefreshLayout outside of NestedScrollView in layout_navigation_view.xml first:
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipeToRefresh"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
...
</android.support.v4.widget.NestedScrollView>
</android.support.v4.widget.SwipeRefreshLayout>
And remove SwipeRefreshLayout in activity_main.xml.

Android Fragment is overlapping Toolbar Layout

[Updated] I've used Bottombar library and default android Navigation Drawer in my project. Now simple TextView Fragment is overlapping top Toolbar. This is my activity layout code.
You can check Screenshot of Layout here.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<include layout="#layout/toolbar" />
<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" >
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<include
android:layout_width="#dimen/drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
layout="#layout/list_view" />
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
<!-- Start - Container to show Fragments -->
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottomBar" />
<!-- End - Container to show Fragments -->
<com.roughike.bottombar.BottomBar
android:id="#+id/bottomBar"
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_alignParentBottom="true"
android:background="#color/main_color_500"
app:bb_activeTabAlpha="1"
app:bb_inActiveTabAlpha="0.3"
app:bb_activeTabColor="#android:color/white"
app:bb_inActiveTabColor="#android:color/white"
app:bb_titleTextAppearance="#style/TextAppearance.AppCompat.Caption"
app:bb_showShadow="true"
app:bb_tabXmlResource="#xml/menu_bottombar" />
</RelativeLayout>
toolbar.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/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#color/main_color_500"
app:popupTheme="#style/Theme.AppCompat.Light.DarkActionBar"
app:theme="#style/AppTheme.Title" />
list_view.xml
<?xml version="1.0" encoding="utf-8"?>
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/list_view"
style="#style/ListViewStyle" />
OnCreate method(Navigation Drawer Code) of MainActivity
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
//getSupportActionBar().setTitle("Sample Title");
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mTitle = mDrawerTitle = getTitle();
mDrawerList = (ListView) findViewById(R.id.list_view);
mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow,
GravityCompat.START);
View headerView = getLayoutInflater().inflate(
R.layout.header_navigation_drawer_social, mDrawerList, false);
ImageView iv = (ImageView) headerView.findViewById(R.id.image);
// init universal image loader library
ImageUtil.initImageUtil(this);
ImageUtil.displayRoundImage(iv, "http://www.sample.com/0.jpg", null);
mDrawerList.addHeaderView(headerView);// Add header before adapter (for pre-KitKat)
mDrawerList.setAdapter(new DrawerSocialAdapter(this));
mDrawerList.setOnItemClickListener(new MainActivity.DrawerItemClickListener());
int color = ContextCompat.getColor(getApplicationContext(),R.color.material_grey_100);
color = Color.argb(0xCD, Color.red(color), Color.green(color),
Color.blue(color));
mDrawerList.setBackgroundColor(color);
mDrawerList.getLayoutParams().width = (int) getResources()
.getDimension(R.dimen.drawer_width_social);
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar,
R.string.drawer_open, R.string.drawer_close) {
public void onDrawerClosed(View view) {
getSupportActionBar().setTitle(mTitle);
invalidateOptionsMenu();
}
public void onDrawerOpened(View drawerView) {
getSupportActionBar().setTitle(mDrawerTitle);
invalidateOptionsMenu();
}
};
mDrawerLayout.addDrawerListener(mDrawerToggle);
if (savedInstanceState == null) {
// open drawer oncreate
//mDrawerLayout.openDrawer(mDrawerList);
}
How to fix it?
Thanks in advance.
Even though the question has already been answered the another cheeky way to do is add this in your frame layout
android:layout_marginTop="?attr/actionBarSize
Give you LinearLayout a id of something like android:id="#+id/ToolBar" and in your FrameLayout set below like android:layout_below="#+id/ToolBar"
Try this, I just tested and it works:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">
<RelativeLayout
android:id="#+id/nav"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/bottomBar">
<include layout="#layout/toolbar"
android:id="#+id/toolbar"/>
<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" >
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<include
android:layout_width="#dimen/drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
layout="#layout/list_view" />
</android.support.v4.widget.DrawerLayout>
<!-- Start - Container to show Fragments -->
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar"
/>
<!-- End - Container to show Fragments -->
</RelativeLayout>
<com.roughike.bottombar.BottomBar
android:id="#+id/bottomBar"
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_alignParentBottom="true"
android:background="#color/main_color_500"
app:bb_activeTabAlpha="1"
app:bb_inActiveTabAlpha="0.3"
app:bb_activeTabColor="#android:color/white"
app:bb_inActiveTabColor="#android:color/white"
app:bb_titleTextAppearance="#style/TextAppearance.AppCompat.Caption"
app:bb_showShadow="true"
app:bb_tabXmlResource="#xml/menu_bottombar" />
</RelativeLayout>
Please see if the following fixes the problem:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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.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"
android:layout_gravity="start">
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"/>
<include
android:layout_width="#dimen/drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
layout="#layout/list_view" />
</android.support.v4.widget.DrawerLayout>
<RelativeLayout
android:id="#+id/nav"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<include layout="#layout/toolbar"
android:id="#+id/toolbar"/>
<!-- Start - Container to show Fragments -->
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar"
/>
<!-- End - Container to show Fragments -->
</RelativeLayout>
<com.roughike.bottombar.BottomBar
android:id="#+id/bottomBar"
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_alignParentBottom="true"
android:background="#color/main_color_500"
app:bb_activeTabAlpha="1"
app:bb_inActiveTabAlpha="0.3"
app:bb_activeTabColor="#android:color/white"
app:bb_inActiveTabColor="#android:color/white"
app:bb_titleTextAppearance="#style/TextAppearance.AppCompat.Caption"
app:bb_showShadow="true"
app:bb_tabXmlResource="#xml/menu_bottombar" />
</RelativeLayout>
If this doesn't fix it I will have to give you a totally different approach.. Let me know.
You need to use android:layout_below on FrameLayout to get it under tool bar.
<include
android:id="#+id/tool_bar"
layout="#layout/toolbar" />
and change FrameLayout code to.
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottomBar"
android:layout_below="#+id/tool_bar"
/>
This approach might help (I faced a similar problem and this technique worked, but I wanted to add few views and not a complete fragment.)
Define a new xml layout and set whatever content you want to in that. (If you used the standard Navigation Drawer activity then an xml file by the name of content_test.xml or something similar might have been created automatically for you).
In your toolbar.xml add
<include layout="content_test.xml">
For example
content_test.xml
<android.support.constraint.ConstraintLayout
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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.yourdomain.yourappname.YourActivity"
tools:showIn="#layout/toolbar.xml">
<!--Add your views/layouts here. Don't forget to set
android:layout_below="#id/idOfToolbarDefinedInYourActivity-->
</android.support.constraint.ConstraintLayout>
Continuing with the example
toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<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="com.yourdomain.yourappname.YourActivity">
<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.AppBarLayout>
<include layout="#layout/content_test" />
</android.support.design.widget.CoordinatorLayout>

android drawerLayout (SlideMenu) without scrollbar

i have an android app with an sidemenu (the default android activity Navigation Drawer Activity)
i would like to hide the scrollbars.
i use this code for that:
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this);
navigationView.setVerticalScrollBarEnabled(false);
navigationView.setHorizontalScrollBarEnabled(false);
But the scrollbars aren't hidden.
why not?
XML
<?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"
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"
tools:openDrawer="start">
<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"
android:fitsSystemWindows="true"
tools:context="x.Overview">
<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"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/page_adapter"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
android:gravity="bottom"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:theme="#style/ThemeOverlay.AppCompat.Light"
app:menu="#menu/sidebar"/>
</android.support.v4.widget.DrawerLayout>
You can set transparent color to scrollbar by using following code in your theme style.
<item name="android:scrollbarThumbVertical">#color/transparent</item>
and than add custom theme to your navigation view.
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:menu="#menu/activity_main_drawer"
app:theme="#style/YOUR.THEME"
/>
Just try this way it will work
private void disableNavigationViewScrollbars(NavigationView navigationView) {
if (navigationView != null) {
NavigationMenuView navigationMenuView = (NavigationMenuView) navigationView.getChildAt(0);
if (navigationMenuView != null) {
navigationMenuView.setVerticalScrollBarEnabled(false);
}
}
}

Android, DrawerLayout + Fragments + CollapsingToolbarLayout

Is it possible to have a CoordinatorLayout / CollapsingToolbarLayout in the fragments shown in the main container of a DrawerLayout?
An answer to another question suggests that each fragment could have its own Toolbar. But this doesn't work well with the ActionBarDrawerToggle as it requires a Toolbar to link to the open/close drawer behaviour.
Has anybody achieved this, or do you have pointers about this? Thanks.
EDIT: I've been focusing some efforts in putting a single Toolbar in the DrawerLayout, meant to stay there all the time, but was not able to get it to scroll (on a Nexus5 API 22). In this question it is mentioned that the CoordinatorLayout needs to be the main view. So maybe inserting it in a DrawerLayout (as below) is not going to work.
<android.support.v4.widget.DrawerLayout ...>
<!-- main content -->
<android.support.design.widget.CoordinatorLayout ...>
<android.support.design.widget.AppBarLayout ...>
<android.support.design.widget.CollapsingToolbarLayout ...>
<ImageView .../>
<android.support.v7.widget.Toolbar .../>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView .../>
</android.support.design.widget.CoordinatorLayout>
<!-- navigation drawer -->
<android.support.design.widget.NavigationView ...>
<!-- drawer content -->
<fragment .../>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
As a matter of fact, yes you can. I was looking for the same thing and the link from your question lead me to this from Google Blogpost
Anyhow, below are my layout files, as for java code I did not change anything and Fragment calling remains the same.
activity_main.xml (Main 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"
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"
tools:openDrawer="start">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
app_bar_main.xml (NavigationBar layout)
<?xml version="1.0" encoding="utf-8"?>
<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.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="192dp"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<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_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
content_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".MainActivity"
tools:showIn="#layout/app_bar_main">
<FrameLayout
android:id="#+id/content_main_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.NestedScrollView>
And now you have "DrawerLayout + Fragments + CollapsingToolbarLayout"
This layout works for me
<?xml version="1.0" encoding="utf-8"?>
<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_gravity="left"
android:layout_width="match_parent" android:layout_height="match_parent"
tools:context=".BaseDrawerActivity"
android:foregroundGravity="left">
<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"
android:fitsSystemWindows="true"
tools:context=".myapp">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
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.AppBarLayout>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.design.widget.CoordinatorLayout>
<!-- The drawer -->
<se.emilsjolander.stickylistheaders.StickyListHeadersListView
android:id="#+id/drawer"
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
style="#style/BaseStyle_Dark" />
Initialise the activity as normal
public class BaseDrawerActivity extends AppCompatActivity implements MenuInterface {
private DrawerLayout mDrawerLayout;
private StickyListHeadersListView menuItemListView;
private static MenuItemAdapter menuItemAdapter;
private ActionBarDrawerToggle mDrawerToggle;
private Toolbar toolbar;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_drawer);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
menuItemListView = (StickyListHeadersListView) findViewById(R.id.drawer);
toolbar = (Toolbar) findViewById(R.id.toolbar);
if (savedInstanceState == null) {
}
mDrawerToggle = new ActionBarDrawerToggle(this,mDrawerLayout,toolbar,R.string.home_open,R.string.home_close);
mDrawerLayout.setDrawerListener(mDrawerToggle);
}
#Override
protected void onPostCreate(Bundle savedInstanceState) {
super.onPostCreate(savedInstanceState);
// Sync the toggle state after onRestoreInstanceState has occurred.
mDrawerToggle.syncState();
}
This will allow you to add the usual CoordinatorLayout features.
I had the same problem but I didn't need the ImageView, so here is my solution:
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer"
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"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.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"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="#dimen/toolbar_elevation"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</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"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header"
app:menu="#menu/drawer_view"/>
</android.support.v4.widget.DrawerLayout>
Hope it helps!

Navigation Drawer Below Toolbar

I am trying to get the navigation drawer to open below the toolbar.
<android.support.v4.widget.DrawerLayout
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"
android:id="#+id/drawer_layout"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width = "match_parent"
android:layout_height = "wrap_content">
<include layout="#layout/toolbar"
android:id="#+id/toolbar"/>
<FrameLayout
android:layout_below="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/background_color"/>
</RelativeLayout>
<ListView
android:id="#+id/drawer"
android:layout_width="260dp"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar"
android:layout_marginTop="56dp"
android:layout_gravity="start">
</ListView>
</android.support.v4.widget.DrawerLayout>
How do I reformat the xml so that the navigation bar opens below the toolbar?
You should move DrawerLayout as top parent and move Toolbar out of DrawerLayout content container.
In short this looks like:
RelativeLayout
----Toolbar
----DrawerLayout
---ContentView
---DrawerList
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/top_parent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar">
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/background_color" />
<ListView
android:id="#+id/drawer"
android:layout_width="260dp"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar"
android:layout_gravity="start"
android:layout_marginTop="56dp" />
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>
However, Material Design guidelines state that Navigation Drawer should be above the Toolbar.
You should simply add
android:layout_marginTop="#dimen/abc_action_bar_default_height_material"
to your layout which you are using as drawer.
This will automatically adjust the navigation drawer below the toolbar and also supports different screen sizes.
You can add layout_marginTop like this,
<android.support.design.widget.NavigationView
android:layout_marginTop="#dimen/abc_action_bar_default_height_material"
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
but drawer will appear as a the top layer to tool bar.
Here is another Choppy way to add it below to toolbar!!!
might not be the best but it works!
end result will look like this
If you create a project as a Navigation Drawer project(Navigation Drawer Activity) it will give you four XML files at the creation in your layout folder
app_bar_main
content_main
navigatin_main
activity_main
how these xmls are linked? mostly i see include tag is used
Your Activity is linked with activity_main
activity_main has the app_bar_main and navigation_view(drawer)
app_bar_main has the toolbar and content_main by default
now lets remove activity_main and set its contents directly to app bar main and use it as the main layout for Activity.
To add the drawer under tool bar
add it under the android.support.design.widget.AppBarLayout because is contains the toolbar and its should be on top.
here is an example of app_bar_main.XML
<?xml version="1.0" encoding="utf-8"?>
<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"
android:fitsSystemWindows="true"
tools:context="none.navhead.MainActivity">
<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.AppBarLayout>
//------ taken from activity_main
// content main
<include layout="#layout/content_main" />
// you need this padding
<android.support.v4.widget.DrawerLayout
android:paddingTop="?attr/actionBarSize"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:openDrawer="start">
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
</android.support.design.widget.CoordinatorLayout>
p.s you can set app_bar_main.XML to setContentView of your activity
just play around there are plenty of ways ;)
this is my layouts and work perfect:
activity_main:
<?xml version="1.0" encoding="utf-8"?>
<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">
<!-- AppBarLayout should be here -->
<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.AppBarLayout>
<!-- add app:layout_behavior="#string/appbar_scrolling_view_behavior" -->
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:openDrawer="start">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
</android.support.design.widget.CoordinatorLayout>
app_bar_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
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"
android:fitsSystemWindows="true"
tools:context=".activty.MainActivity">
<include layout="#layout/content_main"/>
</FrameLayout>
result:
Bellow toolbar
If you are using custom toolbar then use the drawer layout in this way..
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- The toolbar -->
<android.support.v7.widget.Toolbar
android:id="#+id/my_awesome_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/my_drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- drawer view -->
<LinearLayout
android:layout_width="304dp"
android:layout_height="match_parent"
android:layout_gravity="left|start">
....
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
and if you are not using custom toolbar then you have to set margin top to the drawer layout..
android:layout_marginTop ="?android:attr/actionBarSize"
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="false"
tools:openDrawer="start">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:layout_marginTop="?attr/actionBarSize"
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="false"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
An Easy and Good solution is set fitsSystemWindows=false for
android.support.v4.widget.DrawerLayout
that has id as
android:id="#+id/drawer_layout"
And for navigationView set layout_marginTop as ?attr/actionBarSize that would get the actionbar size and set it as margin
Here is complete code of activity_main.xml that has both the changes listed above.

Categories

Resources