How to display DrawerLayout above HeaderLayout - android

my mainActivity is containing DrawerLayout to display sliding menu + ViewPager for tabs navigation. I've hided the actionbar and i replace it with a big linearLayout to implement the actionbar/tabs alternatif and also a layout containing button between them.
My xml file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/light_gray_2">
<LinearLayout android:id="#+id/header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="60dp"
android:background="#color/blue_buzzvibe"
android:orientation="horizontal" >
Here title and menu button (ActionBar alternatif)
</LinearLayout>
<LinearLayout
android:id="#+id/options_buttons_campaign"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical|center_horizontal" >
Here 4 layout for buttons
</LinearLayout>
<LinearLayout
android:id="#+id/tabs_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical|center_horizontal" >
Here 2 layout for tabs
</LinearLayout>
</LinearLayout>
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
>
<FrameLayout
android:id="#+id/fragment_container_main_msg"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1"/>
<!-- Listview to display slider menu -->
<ExpandableListView
android:id="#+id/list_slidermenu"
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:dividerHeight="0dp"
android:divider="#null"
android:background="#color/menu_list_background"
/>
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
With this xml lyaout my drawer is display bellow the big layout. and i want to display drawer in all the screen height.
Here a screenShot of what i have http://i.imgur.com/4Oz9P7e.png?1
and here a screenshot of what i want http://i.imgur.com/v65p7gM.png?1

Related

set navigation drawer above view pager dynamically

I just want to put my navigation drawer on the top of my app, right after the navigation drawer my sliding menu should be displayed. So I figured out to do this with "android:layout_marginTop="xdp"/>". When I don't do this my nav drawer and the sliding tabs will overlap each other.
So my question is how can I do this dynamically with xml e.g. how can I get the height of the navdrawer to set the correct size for the marginTop?
Here is my xml-layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.starpedia.marvin.swc_pedia.FragmentNavigationDrawer
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="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<!-- The ActionBar -->
<include
layout="#layout/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<!-- The main content view -->
<FrameLayout
android:id="#+id/flContent"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<!-- The navigation drawer -->
<ListView
android:id="#+id/lvDrawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:paddingTop="24dp"
android:divider="#android:color/darker_gray"
android:dividerHeight="0dp"
android:background="#android:color/background_light" />
<com.starpedia.marvin.swc_pedia.SlidingTabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"/>
</com.starpedia.marvin.swc_pedia.FragmentNavigationDrawer>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1"
android:background="#android:color/white"/>
</LinearLayout>
and a picture of the current screen displayed.
Thanks for your help in advance.

How do you customize an XML layout of a navigation drawer selection?

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>

DrawerLayout overlapped by another view

I implemented a Navigation Drawer as explained here https://developer.android.com/training/implementing-navigation/nav-drawer.html
I inserted the DrawerLayout xml code snippet just below the tag and above the others app views.
At runtime when open the Navigation Drawer the behind view is still clickable and I cant use the Navigation Drawer
I think I've to adjust the xml layout but I don't know how..
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg_sky">
<com.example.sp1d3r.weatheralarm.CustomDrawerLayout 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 -->
<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:dividerHeight="0dp" />
</com.example.sp1d3r.weatheralarm.CustomDrawerLayout>
<RelativeLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<AutoCompleteTextView
android:id="#+id/cityTV"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:clickable="true"

NavigationDrawer blocks other button on the activity

I'm working on the UI of my app and I'm facing a problem when I implement the Navigation Drawer. As you can see here, I have some buttons to manage my Media Player, these are not responding to my clicks when I implement the Navigation Drawer (working fine without Navigation Drawer).
I think the problem is coming from my XML file because there are no changing when I delete the implementation in Java.
Here are my XML sheets :
main_activity.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=".MyActivity">
<fragment
android:id="#+id/fragments"
android:layout_width="match_parent"
android:layout_height="match_parent"
class="com.example.ilan.myapplication.fragments.FragmentHome" >
</fragment>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Buffering"
android:id="#+id/tV_Buffering"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true" />
<include
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_weight="1"
layout="#layout/player_controls"
android:layout_alignParentBottom="true"/>
<include
layout="#layout/navigation_drawer_main_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
Note that I put the Navigation Drawer in the end to have it to cover the all activity.
navigation_drawer_main_layout.xml
<?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/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<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="#FFFFFF"/>
</android.support.v4.widget.DrawerLayout>
player_controls.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/blue">
<Button
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/button_play_pause"
android:layout_toStartOf="#+id/tV_Buffering"
android:background="#drawable/bouton_play"
android:layout_centerInParent="true"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Stop"
android:id="#+id/button_stop"
android:layout_toRightOf="#id/button_play_pause"
android:layout_centerInParent="true"
android:layout_marginLeft="20dp"/>
</RelativeLayout>
Well, if anyone has any idea from where this come from it would be awesome, thanks !
To use a DrawerLayout, position your primary content view as the first child with width and height of match_parent and no layout_gravity. Add drawers as child views after the main content view and set the layout_gravity appropriately. Drawers commonly use match_parent for height with a fixed width. Check out the documentation of google regarding to DrawerLayout : https://developer.android.com/reference/android/support/v4/widget/DrawerLayout.html.
Your primary content should put inside DrawerLayout instead of including the DrawerLayout inside your RelativeLayout.
For your case, you could try to implement it this way instead:
main_activity.xml
<?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">
<RelativeLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MyActivity">
<fragment
android:id="#+id/fragments"
class="com.example.ilan.myapplication.fragments.FragmentHome"
android:layout_width="match_parent"
android:layout_height="match_parent">
</fragment>
<TextView
android:id="#+id/tV_Buffering"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:text="Buffering"
android:textAppearance="?android:attr/textAppearanceSmall"/>
<include
layout="#layout/player_controls"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_alignParentBottom="true"
android:layout_weight="1"/>
</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="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#FFFFFF"
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>

Categories

Resources