Adding a Fixed/Static Header to a Navigation DrawerLayout - android

Like many apps, I use the DrawerLayout code 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="fill_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
tools:context=".MainActivity">
<!-- 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="fill_parent"
android:layout_height="match_parent"
android:layout_gravity="right"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#FFFFFF" />
</android.support.v4.widget.DrawerLayout>
I have some user information above the ListView so I use the addHeaderView(). However, this scrolls with the list. I would like the list to appear that it is scrolling underneath it and the header stays fixed at the top.
Is this possible? I have tried by wrapping the ListView inside a LinearLayout with the header code inside that layout as well. This completely broke the app. Are there any other ways? I have actually seen Google do this in at least one of their apps (youtube).


Wrapping your List in some kind of layout is the way to go. Maybe you just missed something. Try 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="fill_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
tools:context=".MainActivity">
<!-- The main content view -->
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<!-- The navigation drawer -->
<LinearLayout
android:id="#+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_gravity="right">
<!--SOME HEADER-->
<View
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<ListView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#FFFFFF" />
</LinearLayout>
</android.support.v4.widget.DrawerLayout>

Related

My emulator shows just Listview on entire screen. even its width is limited to 240dp

I am using drawer layout and Listview is using as drawer.
My emulator just showing Listview as width set to match parent even it's set to 240dp.
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/drawer Layout"
android:background="#000000">
<ListView
android:layout_width="240dp"
android:layout_height="match_parent"
android:id="#+id/drawerList"
android:background="#color/colorAccent"/>
<FrameLayout
android:layout_width="250dp"
android:layout_height="match_parent"
android:id="#+id/fragmentContainer"
android:background="#ffffff"
android:choiceMode="singleChoice"
android:dividerHeight="0dp"
android:divider="#android:color/transparent"/>
</android.support.v4.widget.DrawerLayout>

Drawer layouts are usually hidden outside of the screen until you open them. Try opening the drawer by swiping from the side.

You must use NavigationView inside DrawerLayout and limit width in NavigationView.
Example layout structure is like that , there is 2 different usage of NavigationView :
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<!-- you can add extra views in DrawerLayout -->
<include layout="#layout/content_home"/>
<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:menu="#menu/homepage_leftdrawer"/>
<!-- you can use listview, recyclerview etc in navigationview -->
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:fitsSystemWindows="false"
app:headerLayout="#layout/homepage_right_header"
android:layout_gravity="end">
<ListView
android:id="#+id/list_slidermenu"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="end"
android:choiceMode="singleChoice"
android:dividerHeight="1dp"
android:layout_marginTop="80dp" />
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>

Navigation drawer is not closing while navigation item is selected

I am creating a navigation drawer. the drawer is not closing while i select the list item in the navigation drawer. Here is my code
<LinearLayout
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:orientation="vertical"
tools:context=".MainActivity">
<include
layout="#layout/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<!-- This DrawerLayout has two children at the root -->
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- This LinearLayout represents the contents of the screen -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- The main content view where fragments are loaded -->
<FrameLayout
android:id="#+id/flContent"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
<ListView
android:id="#+id/listViewNavDrawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:layout_weight="40"
android:background="#android:color/white"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
tools:context=".NavigationDrawerFragment"/>
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
what is the problem with that ? While using NavigationView instead of ListView there is no problem. But I need a ListView for my app. what should I do?

You need to call a method to close the active drawer, like DrawerLayout.closeDrawers().

Best way include a layout with many child layouts with a navigation drawer

My problem in short: How to include a complicated layout into a navigation drawer.
I have a my main activity with viewpager,fragment and here is the code of my mainactivity initially
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignBottom="#+id/pager"
android:gravity="center|bottom"
android:text="GGG" />
</RelativeLayout>
<fragment
android:id="#+id/text_fragment"
android:name="com.sample.fragment.HomeButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
Now I want to introduce navigation drawer to this. I figured two ways of doing it
1.Including the above layout in the framelayout(content_frame) of the navigation drawer (I tried but didnt work for me)
<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" >
</FrameLayout>
<ListView
android:id="#+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#111"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp" />
</android.support.v4.widget.DrawerLayout>
2.Creating a new fragment and include the above layout to this, now our mainactivity contains a new fragment+navigation drawer.
please tell me how to do this.

ListView on top of the drawer ListView

I am trying to have 2 listview in the same main activity. One list view for my horizontal drawer (sliding from the left), and the other list view on the center. It will show the drawer list view when I click on the drawer, but the drawer view didn't slide over the center list view instead the center is on top of it, so I can't actually see anything from the drawer. I am wondering if there's something wrong with my main_activity.xml that my res/layout directory (I am actually not sure if it's the right way for doing it as putting two list views in one activity)
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_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">
<ListView android:id="#+id/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>
<ListView android:id="#+id/deviceList"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:divider="#b5b5b5"
android:dividerHeight="1dp"
android:listSelector="#drawable/list_selector" />
</RelativeLayout>

I think you can simply reorder it by having the ListView (wrapped it with LinearLayout) before the DrawerLayout like this
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ListView
android:id="#+id/deviceList"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:divider="#b5b5b5"
android:dividerHeight="1dp"
android:drawSelectorOnTop="false"
android:listSelector="#drawable/device_list_item_selector"
android:scrollbarStyle="outsideOverlay" />
</LinearLayout>
<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="fill_parent" >
<ListView
android:id="#+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#111"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp" />
</android.support.v4.widget.DrawerLayout>
and make sure you have fill_parent for layout_height for both

Try This:-
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relative"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- A DrawerLayout is intended to be used as the top-level content view using match_parent for both width and height to consume the full space available. -->
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!--
As the main content view, the view below consumes the entire
space available using match_parent in both dimensions.
-->
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
<RelativeLayout
android:id="#+id/relative1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ListView
android:id="#+id/lst_week"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:dividerHeight="1dp" >
</ListView>
</RelativeLayout>
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ListView
android:id="#+id/left_drawer"
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:dividerHeight="0.5dp" />
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>

EditText inside of a DrawerLayout

I've been trying to set an EditText box inside of a DrawerLayout, but reading carefully through the Android Training Website, they explain that the DrawerLayout is allowed to have only two child views. If I would like to do something like the next code, How should I approach it?
<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 -->
<EditText
android:id="#+id/EditText01"
android:layout_width="240dp"
android:layout_height="match_parent"
android:hint="Search" >
</EditText>
<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>

Do it like this:
<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 -->
<LinearLayout
android:id="#+id/left_drawer"
android:layout_height="wrap_content"
android:layout_width="240dp"
android:orientation="vertical"
android:layout_gravity="start" >
<EditText
android:id="#+id/EditText01"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Search" >
</EditText>
<ListView android:id="#+id/left_drawer_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#111"/>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
In other words, whatever the first view is, will be set as the content view, and whatever the second view is will be set in the drawer. So simply add elements inside the second view for drawer, and first for content. Cheers :)

Categories

Resources