EditText inside of a DrawerLayout - android

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 :)

Related

Adding a Fixed/Static Header to a Navigation DrawerLayout

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>

Navigation drawer and sliding panel in the same activity

I need to use navigation drawer for left side menu and sliding panel for right side menu. Is any option to use them together, on same layout?
I have following layout for my activity:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/side_menu_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/oliveGreen"/>
<ListView android:id="#+id/left_drawer"
android:layout_width="240dp"
android:layout_marginStart="30dp"
android:layout_marginLeft="30dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#color/gray"/>
</android.support.v4.widget.DrawerLayout>
and navigation drawer (obviously) works but I cannot figure out how to add sliding panel.
Any advice would be appreciated.
Thanks in advance.
EDIT:
This is what I want to achieve:
Add another child View/ViewGroup inside DrawerLayout with layout_gravity set to end - this will act as your sliding panel.
Try code below, sliding panel is another ListView in this case but you can use <fragment /> or <LinearLayout /> etc instead:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/side_menu_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/oliveGreen"/>
<ListView android:id="#+id/left_drawer"
android:layout_width="240dp"
android:layout_marginStart="30dp"
android:layout_marginLeft="30dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#color/gray"/>
<ListView android:id="#+id/sliding_panel"
android:layout_width="240dp"
android:layout_marginStart="30dp"
android:layout_marginLeft="30dp"
android:layout_height="match_parent"
android:layout_gravity="end"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#color/gray"/>
</android.support.v4.widget.DrawerLayout>

Two Navigation Drawer on same Activity

Is it possible to configurate two Navigation Drawers on the same activity, one from the left and the other from the right?
You can use drawer layout
<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 -->
<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"/>
<ListView android:id="#+id/right_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="end"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#111"/>
</android.support.v4.widget.DrawerLayout>
ALso check the documantation https://developer.android.com/training/implementing-navigation/nav-drawer.html
Make sure you are using toolbar not action bar
Yes you can add two ListView inside your drawer layout, one listview should have gravity start and other have end.
yes
Can use two navigationdrawer
<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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
tools:context="PackageName.ActivityName">
<ScrollView
android:id="#+id/scrol_lay"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- your layout -->
</ScrollView>
<!-- First navigation drawer -->
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view_main"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/navigation_main_menu"
app:headerLayout="#layout/navigation_header"/>
<!-- Second navigation drawer -->
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view_second"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="end"
app:menu="#menu/navigation_menu"
app:headerLayout="#layout/navigation_header"/>
</android.support.v4.widget.DrawerLayout>
For maximum customization,
In your xml, you can use a FrameLayout as a container
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true">
<FrameLayout
android:id="#+id/contDrawer"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.design.widget.NavigationView>
Now in your Activity, you can replace it with any fragment
getSupportFragmentManager().beginTransaction().replace(R.id.contDrawer, SideBarCustomerFragment.newInstance()).commit();
Now for two users, you can create 2 different fragments, You can check my boilerplate code for reference
https://github.com/hamzaahmedkhan/AndroidStructure/blob/master/app/src/main/java/com/android/structure/activities/HomeActivity.java
https://github.com/hamzaahmedkhan/AndroidStructure/blob/master/app/src/main/java/com/android/structure/activities/BaseActivity.java

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"

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>

Categories

Resources