Can't click the buttons behind the DrawerLayout - android

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.

Related

Android Drawer Multi Layout

I'm trying to improve my drawer layout, I would make a drawer with header (image and text) and list view, but I can't do it.
this is my layout:
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="#+id/navdrawer"
android:layout_width="230dp"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:background="#color/com_facebook_blue"
android:choiceMode="singleChoice"
android:divider="#android:color/holo_red_dark"
android:dividerHeight="2dp">
</ListView>
<LinearLayout
android:id="#+id/bottom_menu"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/sfondo_list_quattro"
android:orientation="vertical">
<include
android:id="#+id/header"
layout="#layout/listview_header"/>
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="300px"
android:layout_gravity="center"
android:layout_height="wrap_content"/>
<ListView
android:id="#+id/postListView"
android:layout_width="fill_parent"
android:paddingTop="50px"
android:layout_height="0dip"
android:layout_weight="1"
android:layout_marginBottom="20dp"
android:scrollbars="vertical"
android:divider="#android:color/holo_red_dark"
android:layout_marginTop="20dp"
android:background="#drawable/selector"
android:dividerHeight="3dp">
</ListView>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
Is possible to do it whitout fragment?
Thanks guys, have a good day.
Easy. Instead of ListView, make a vertical LinearLayout and give that android:layout_gravity="start" for the drawer. Then make your ListView a child of the LinearLayout. Above the ListView you can have another child layout that shows your header.

Add navigation drawer to content view containing ListView and Button

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>

how can i show my left navigation menu above all of the activity component?

what i have is a left navigation side bar which i made using the navigation drawer .. it works just fine but also in the same layout for the activity i have a three buttons .. and each time the menu appears it appears under the three buttons which is so weird .. i want this menu to appear above everything else in the activity .. here is my xml code :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#string/layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background"
>
<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 to display Fragments -->
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- Listview to display slider menu -->
<ListView
android:id="#+id/list_slidermenu"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="#ffffff"
android:dividerHeight="1dp"
android:listSelector="#drawable/list_selector"
android:background="#703534"/>
</android.support.v4.widget.DrawerLayout>
<Button
android:id="#+id/button2"
android:layout_width="170sp"
android:layout_height="60sp"
android:layout_alignLeft="#+id/button1"
android:layout_centerVertical="true"
android:background="#drawable/catalogue" />
<Button
android:id="#+id/button1"
android:layout_width="170sp"
android:layout_height="60sp"
android:layout_above="#+id/button2"
android:layout_centerHorizontal="true"
android:layout_marginBottom="52dp"
android:background="#drawable/our_products" />
<Button
android:id="#+id/button3"
android:layout_width="170sp"
android:layout_height="60sp"
android:layout_below="#+id/button2"
android:layout_centerHorizontal="true"
android:layout_marginTop="52dp"
android:background="#drawable/contact_us" />
</RelativeLayout>
can anyone help me??
The order of how you define things in the xml decide how they appear on the screen, also determines which view appears above or below which other view. For a Nav Drawer, The layout should be something like this :
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:font="http://schemas.android.com/apk/res/com.teewe.client"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- This LinearLayout is the layout for your activity. Replace with FrameLayout -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:orientation="vertical"
android:padding="#dimen/padding_from_screen_edges" >
</LinearLayout>
<!--The last view that you include, shows up in your drawer. In this case, everything inside this RelativeLayout shows up in the drawer. -->
<RelativeLayout
android:id="#+id/drawerRelativeLayout"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#fff" >
<ListView
android:id="#+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_above="#id/nowPlayingLayout"
android:choiceMode="singleChoice"
android:divider="#color/light_gray"
android:dividerHeight="1dp" />
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>

Contents not showing up in DrawerLayout after adding a progress bar in Android

I am new to android so I am trying to make a simple application. Everything is fine until I try to add a progress bar.
(Sorry for showing the images with a hyperlink as I don't have enough reputation to post images)
How it looks like:
screenshot here
What I wanted to have is something like:
draft layout here
main_activity before adding a progress bar:
<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">
<TextView
android:id="#+id/credit_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="24dp"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:text="#string/credit" >
</TextView>
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<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"/>
(The closing tag for DrawerLayout is at the end but I don't know why it is not showing up if I start a new line with it)
Then I want to add a progress bar under the textView which acts as a label. After I insert a ProgressBar element in main_activity.xml, a progress bar appeared in the middle of the screen but that's not what I exactly wanted.
Afterwards I tried to use a LinearLayout element to wrap up the TextView and ProgressBar, trying to arrange and display them accordingly, with the xml file shown below:
<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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/credit_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="24dp"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:text="#string/credit" >
</TextView>
<ProgressBar
style="?android:attr/progressBarStyleHorizontal"
android:id="#+id/credit_progress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="80dp" />
</LinearLayout>
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<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"/>
But the progress bar is not showing up, it turns out that only the TextView label is showing up. Upon interchanging the order of the TextView and ProgressBar elements, an error will occur stating that I am casting PorgressBar to TextView, but I don't know how this happenes with the following line of code:
TextView credit = (TextView) findViewById(R.id.credit_label);
I read another topic (here) in stackoverflow, stating that there can only be 3 elements in the drawerlayout, I tried to use the LinearLayout to wrap up all stuffs except the left_drawer list, so I tried the following version:
<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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/credit_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="24dp"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:text="#string/credit" >
</TextView>
<ProgressBar
style="?android:attr/progressBarStyleHorizontal"
android:id="#+id/credit_progress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="80dp" />
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<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"/>
This time it didn't stop unop starting the application, but the FrameLayout consists of the fragment displaying the expandable list will shows nothing (white blank in that place). I am very frustrated and I don't know what the problems are, hence finally came here and hope to get some help. Thanks a lot!

Drawerlayout children views overlapping

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

Categories

Resources