Does anyone know how to do this?!?
I have looked everywhere online for 3 days now and every single tutorial only shows you how to make the drawer, but the problem is actually PUTTING THINGS AS THE LAYOUT for each selected item.
Please Help!
I am not sure if this is the exact answer you are looking for but I built a Navigation Drawer with the AppCompat (ActionBarActivity) library. I have also added things like spinners (drop down lists) into the Nav Drawer XML for a different screen.
Note: In this example I actually add entries programmatically into the XML but the XML is the framework for the drawer. I essentially make a vertical linear layout, scrollable list of links under id externalLinks.
Disclaimer: The purist Material Design person will note that my navigation drawer is below the action bar but I like the little hamburger -> arrow icon that is provided and didn't want to cover it up. The difference is the layout_MarginTop of actionBarSize.
Hope this helps!
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/drawerLayout"
android:background="#color/background"
>
<!-- The main content view -->
<LinearLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<include layout="#layout/common_toolbar"/>
<ScrollView
android:id="#+id/login_scroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<!-- There is a bunch of layout that I removed because it is just my app's screen and isn't part of the answer -->
</LinearLayout>
</ScrollView>
</LinearLayout>
<!-- The navigation drawer -->
<LinearLayout
android:layout_marginTop="?attr/actionBarSize"
android:id="#+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="1dp"
android:background="#color/background"
android:orientation="vertical"
>
<TextView
android:layout_width="match_parent"
android:layout_height="3dp"
android:background="#color/colorAccent"
/>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/background"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<TextView
android:id="#+id/navMoreTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/navExternal"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:paddingLeft="5dp"
android:paddingStart="5dp"
android:paddingRight="5dp"
android:paddingEnd="5dp"
android:minHeight="30dp"
android:gravity="center_vertical"
android:textAppearance="?android:attr/textAppearanceMedium"
android:background="#color/white"
/>
<LinearLayout
android:id="#+id/externalLinks"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#color/background"
>
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
Related
I know this type of problem already discussed here so many times . But in my case none of them working for me . I am using AndroidSlidingUpPanel in my project with navigation drawer. The problem is sliding panel layout always showing over navigation drawer , but what I want is reverse . Here is the current condition
As you can see I can't see the navigation drawer items . Sliding panel layout hides the navigation drawer .
Here is my code
<?xml version="1.0" encoding="utf-8"?>
<com.sothree.slidinguppanel.SlidingUpPanelLayout xmlns:sothree="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/sliding_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
sothree:umanoDragView="#+id/dragView"
sothree:umanoOverlay="false"
sothree:umanoPanelHeight="68dp"
sothree:umanoParalaxOffset="100dp"
sothree:umanoShadowHeight="4dp">
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawerMainActivity"
android:layout_width="match_parent"
android:layout_alignParentBottom="true"
android:layout_height="match_parent">
<FrameLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/containerView">
<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:minHeight="?android:attr/actionBarSize"
android:background="?attr/colorPrimary"
android:id="#+id/toolBar"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark"
/>
</FrameLayout>
<android.support.v7.widget.RecyclerView
android:layout_width="240dp"
android:layout_height="match_parent"
android:id="#+id/recyclerView"
android:scrollbars="vertical"
android:background="#FFFFFF"
android:layout_gravity="left"
/>
</android.support.v4.widget.DrawerLayout>
<!-- SLIDING LAYOUT -->
<LinearLayout
android:id="#+id/dragView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:clickable="true"
android:focusable="false"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/name"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textColor="#android:color/holo_green_dark"
android:gravity="center_vertical"
android:paddingLeft="10dp"
android:text="#string/slide"
android:textSize="14sp" />
<Button
android:id="#+id/btn_hide"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical|right"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text="#string/hide"
android:textSize="14sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFCCCC">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:scaleType="centerCrop"
android:src="#drawable/image" />
</LinearLayout>
</LinearLayout>
</com.sothree.slidinguppanel.SlidingUpPanelLayout>
How can I solve this problem ? So that navigation drawer always comes top over sliding panel layout .
Set your DrawerLayout as the root element, instead of your SlidingUpPanelLayout
To set the Z-axis you have to order the tree. From the documentation
View.html#Drawing
The tree is largely recorded and drawn in order, with parents drawn
before (i.e., behind) their children, with siblings drawn in the order
they appear in the tree. If you set a background drawable for a View,
then the View will draw it before calling back to its onDraw() method.
The child drawing order can be overridden with custom child drawing
order in a ViewGroup, and with setZ(float) custom Z values} set on
Views.
So basically set the Drawerlayout as last.
I have a view layout containing a ListView and a Button:
<?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:background="#5434"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_alignParentTop="true"
android:layout_weight="1.0"
android:id="#+id/itemlistView" tools:ignore="ObsoleteLayoutParam"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
tools:ignore="ObsoleteLayoutParam">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/button"
android:text="#string/new_item"
android:id="#+id/listview_addDebtButton"
android:layout_gravity="center_horizontal"
android:layout_weight="1.0"
tools:ignore="ObsoleteLayoutParam"/>
</LinearLayout>
but now i want to add a Navigation Drawer. Using the sample code from google developers. But am not sure how to do this since the sample code contains an empty content view:
<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">
<!-- As the main content view, the view below consumes the entire
space available using match_parent in both dimensions. -->
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- 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.
The drawer is given a fixed width in dp and extends the full height of
the container. A solid background is used for contrast
with the content view. -->
<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"/>
I however proceeded to try with this as my new layout:
<?xml version="1.0" encoding="utf-8"?>
<!-- As the main content view, the view below consumes the entire
space available using match_parent in both dimensions. -->
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
<ListView
android:layout_width="fill_parent"
android:layout_height="0dp"
android:id="#+id/itemlistView" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/button"
android:text="#string/new_item"
android:id="#+id/listview_addDebtButton"
android:layout_gravity="center_horizontal"
android:layout_weight="1.0"
/>
</LinearLayout>
</FrameLayout>
<!-- 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.
The drawer is given a fixed width in dp and extends the full height of
the container. A solid background is used for contrast
with the content view. -->
<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"/>
This fails woefully when I try to run the app and i get a android.view.InflateException with the error message:
error inflating class DrawerLayout. Am not sure how to proceed from here. "There is a similar question that asks "How do I add navigation drawer to my existing code?" but this problem is way too complicated than mine and I can't apply the solutions to my problem. Any suggestions will be appreciated.
Try like this:
According to docs: Drawer Layout tooks two direct children
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.
From that reference I used one for FrameLayout and another one for ListView.
<?xml version="1.0" encoding="utf-8"?>
<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/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:id="#+id/container"
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<ListView
android:id="#+id/itemlistView"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_alignParentTop="true"
android:layout_weight="1.0"
tools:ignore="ObsoleteLayoutParam" />
<Button
android:id="#+id/listview_addDebtButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="1.0"
android:background="#drawable/button"
android:text="#string/new_item"
tools:ignore="ObsoleteLayoutParam" />
</RelativeLayout>
</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>
here is my xml:
<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=".Main"
android:background="#android:color/black" >
<RelativeLayout
android:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageButton
android:id="#+id/calendar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/about"
android:layout_centerHorizontal="true"
android:background="#drawable/calendar" />
<ImageButton
android:id="#+id/okan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/calendar"
android:layout_marginLeft="20dp"
android:layout_toRightOf="#+id/calendar"
android:background="#drawable/okanliyiz"/>
<ImageButton
android:id="#+id/about"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:layout_marginTop="140dp"
android:layout_toLeftOf="#+id/calendar"
android:background="#drawable/info" />
</RelativeLayout>
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="false" >
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="false" />
<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>
</RelativeLayout>
I wrote the programmatic part of it and the Drawer works just fine, it's just that I cannot click the ImageButtons behind it. If I put the buttons in front I am able to click them but well, then the drawer is left behind and that's a terrible sight. What is the work-around for this? How can I both click the buttons behind the Drawer and see the Drawer in the front?
Thanks in advance.
According to the Navigation Drawer guide the DrawerLayout should be the root of your layout. It should have only 2 children - one that contains your "main content" - buttons, text fields, etc. And the other one should be the content of the drawer itself. Something like this:
<android.support.v4.widget.DrawerLayout>
<RelativeLayout>
<Button/>
<EditText/>
</RelativeLayout>
<ListView android:id="#+id/drawer_list" />
</android.support.v4.widget.DrawerLayout>
In addition:
The order of the 2 children is important due to the Z-order of the DrawerLayout (which is a ViewGroup). The list view should be declared after your main content so that it's ordered(and displayed) in front of it.
I want add button below the listview in navigation drawer as shown in figure.
there are custom listview with text and checkbox in navigation drawer. and i want add button below the listview. is that possible? please give me solution . thanks in advance.
You must keep in mind that there can only be two childs at max in navigation drawer !!
<?xml version="1.0" encoding="utf-8"?>
<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:background="#color/lightgray" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
>
<ListView android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<LinearLayout
android:alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="100dp"/>
<Button android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<Button android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
</RelativeLayout>
<LinearLayout
android:id="#+id/left_drawer"
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="#android:color/white"
android:orientation="vertical" >
<ListView .... here goes your navigation drawer UI/>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
Okk after reading your requirement i will suggest you to do this android:layout_alignParentBottom="true" for the button and for the list use android:layout_above="#id/idof your button" and android:layout_alignParentTop="true" in your listview layout.
I've been trying to make a DrawerLayout that has a ViewPager and a LinearLayout attached to the bottom of the DrawerLayout. The problem is that the ViewPager and LinearLayout are overlapping at the top of the view, and all my efforts to move the LinearLayout down have failed so far.
The XML Layout:
<?xml version="1.0" encoding="utf-8"?>
<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.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0dp" >
<android.support.v4.view.PagerTabStrip
android:id="#+id/tabstrip"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</android.support.v4.view.ViewPager>
<LinearLayout
android:id="#+id/linear_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_below="#id/base_activity_viewpager"
android:orientation="vertical" >
<TextView
android:id="#+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textAppearance="#android:style/TextAppearance.Medium"
android:textIsSelectable="false" />
</LinearLayout>
<!-- Naviagtion drawer -->
<ListView
android:id="#+id/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>
I've tried adding several things to linear_layout:
android:layout_gravity="bottom" (causes an IllegalStateException)
android:layout_below="#id/viewpager"
android:layout_alignparentbottom="true"
But all of these values seem to be ignored, even changing android:layout_width of the LinearLayout is ignored. I think i'm overlooking something obvious but if anyone has suggestions on how to do this it would be greatly appreciated.
A drawerlayout is allowed only 2 children, the first is a main content view, the second is the drawer. You need to combine your first two views into a linear layout. http://developer.android.com/training/implementing-navigation/nav-drawer.html