Develop Reference

Wrong size and click behavior for Views in DrawerLayout

I have a layout for an Activity that I'm trying to add a navigation drawer to.
The problem is, to work properly, I need to use:
<android.support.v4.widget.DrawerLayout
instead of:
<RelativeLayout
but it messes things up. My ProgressBar becomes much bigger, my RecyclerView doesn't work, the app logs me out when I click something, etc.
My layout XML:
<?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"
tools:context="com.st.mf.UserAreaActivity"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:padding="#dimen/activity_vertical_margin"
android:background="#fff">
<ProgressBar
android:id="#+id/progressBar1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_marginTop="20dp" />
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:menu="#layout/navigation_menu"
android:layout_gravity="start">
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
How can I create my drawer menu without messing everything else up?

Any direct child View of a DrawerLayout that's not a drawer is considered a content View, and will be laid out to match_parent in both directions, regardless of the width and height attributes you've set on it. In your case - indeed, in most cases - you only need one content View, so the rest of the non-drawer Views should all be inside a single ViewGroup.
We'll place your ProgressBar and RecyclerView both inside a RelativeLayout that acts as the content View, where they'll keep the layout attributes you've set. For example:
<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"
tools:context="com.st.mf.UserAreaActivity"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="#dimen/activity_vertical_margin"
android:background="#fff">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ProgressBar
android:id="#+id/progressBar1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_marginTop="20dp" />
</RelativeLayout>
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:menu="#layout/navigation_menu"
android:layout_gravity="start">
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
Note that the content View should always be listed before any drawers, to maintain proper z-ordering; i.e., to keep the drawers on top of the content.

Drawer layout listView transparent background

I'm trying to set the background of the listview inside the drawer layout to be transparent like google's camera app.
What happens is whenever I set the background of the listview to be transparent its items disappears
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/activity_main_drawer_layout_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ListView
android:id="#+id/activity_main_navigation_list"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:background="#android:color/transparent"
android:divider="#android:color/transparent"
android:dividerHeight="0dp" />
</android.support.v4.widget.DrawerLayout>
I tried to set it to a transparent image it didn't work either it doesn't work with any transparency added to the color of it's background.
This works:
android:background="#232321"
This doesn't
android:background="#fb232321"
Any idea how can I fix this problem

Try using android:background="#color/transparent" on DrawerLayout view and not on the listView. Also, you can use background transparent on childView of your ListView

So the I solved my problem by wrapping the listview with a Relativelayout it works with other layouts as well.
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/activity_main_drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/black">
<FrameLayout
android:id="#+id/activity_main_frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#android:color/transparent"
android:focusableInTouchMode="true">
<ListView
android:id="#+id/activity_main_navigation_list"
android:layout_width="240dp"
android:layout_height="match_parent"
android:choiceMode="singleChoice"
android:clickable="true"
android:divider="#android:color/transparent"
android:dividerHeight="1dp"
android:focusable="true" />
</RelativeLayout>

use #00000000 for black transparency

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>

SwipeRefreshLayout is hidden behind ActionBar with transparent status bars

I'm having some trouble making my SwipeRefreshLayout visible when using transparent navigation, and status bars (API Level 19). That is to say, its currently under the status bar (at the top of the screen), when I want it to be under the actionbar.
The ListView is working as expected. That is, the content is properly shown behind the navigation bars, and does not get hidden under the status bar, or actionbar.
With this being said, if I add the android:fitsSystemWindows="true" property to my relative layout, the SwipeRefreshLayout works properly. But, doing this makes my listview not visible under the transparent navigation bars. Instead, the navigation bars are simply the color of my background, and do not allow content from my listview to be shown under it.
How can I get the ListView to stay how it is now, and also get my SwipeRefreshLayout to be visible (instead of being hidden under the status bar, at the top of the screen)?
Below is my layout:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingTop="10dp"
android:background="#ccc"
android:clipToPadding="false">
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipe_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/container"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ccc">
<ListView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/listView"
android:paddingTop="10dp"
android:fitsSystemWindows="true"
android:clipToPadding="false"
android:divider="#android:color/transparent"
android:layout_gravity="left|top" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="No Internet Connection"
android:id="#+id/noInternet"
android:textColor="#android:color/secondary_text_light"
android:layout_gravity="center" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Pull To Refresh"
android:translationY="20dp"
android:id="#+id/nointernetSub"
android:textColor="#android:color/secondary_text_light"
android:layout_gravity="center" />
</FrameLayout>
</android.support.v4.widget.SwipeRefreshLayout>
</RelativeLayout>
<fragment android:id="#+id/navigation_drawer"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
android:name="com.package.app.NavigationDrawerFragment"
tools:layout="#layout/fragment_navigation_drawer" />
</android.support.v4.widget.DrawerLayout>

I would recommend using a margin
android:layout_marginTop="?android:attr/actionBarSize"

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!