Android Drawer Multi Layout - android

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.

Related

ListView inside ScrollView(Mine issue is different)

I have a Drawer layout. I have placed a ViewPager for sliding Image and Tab Layout for dots, after I want a TextView and a ListView Again a TextView and again ListView, it goes for 4 times. So, I want my whole screen to be scroll-able. Here is the issue, if I am fixing the height of ListView app, it is starting from Bottom, If I am using match parent then list view does not scroll and it act like Linear layout and anything below this doesn't shows up. If I am using wrap content in height, the list view is scroll-able but nothing shows up after list view because whole screen is not scrolling.
MainActivity.xml
<?xml version="1.0" encoding="utf-8"?>
<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"
android:layout_width="match_parent"
android:background="#f5f5f5"
android:id="#+id/drawer"
android:layout_height="match_parent"
tools:context="com.tollywood2bollywood.t2bliveapp.HomeActivity">
<ScrollView
android:layout_width="match_parent"
android:fillViewport="true"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
<!--ViewPager for sliding Image-->
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="270dp"
android:id="#+id/top_stories_pager">
</android.support.v4.view.ViewPager>
<!--For dots used in scrollable image-->
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:id="#+id/tab_layout"
app:tabBackground="#drawable/tab_selector"
app:tabGravity="center"
app:tabIndicatorHeight="0dp"
android:layout_height="wrap_content"/>
<!--List View Starts -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/recent_stories"
android:layout_marginTop="5dp"
android:layout_marginStart="3dp"
android:text="RECENT STORIES"/>
<ListView
android:layout_width="match_parent"
android:id="#+id/recent_stories_listview"
android:layout_height="wrap_content"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ENTERTAINMENT"
android:layout_marginTop="5dp"
android:layout_marginStart="3dp"/>
<ListView
android:layout_width="match_parent"
android:id="#+id/entertainment_listview"
android:layout_height="match_parent"/>
</LinearLayout>
</ScrollView>
<!--Navigation Drawer setting-->
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:itemTextColor="#color/colorPrimaryDark"
app:itemIconTint="#color/colorPrimaryDark"
app:menu="#menu/drawermenu"
android:layout_gravity="start"
android:background="#fff">
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
If I am using above xml, then Enterntainment TextView and List View following is not showing. Please Help. I am making a news app.
Change the ScrollView with NestedScrollView and ListView with RecyclerView
<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"
android:layout_width="match_parent"
android:background="#f5f5f5"
android:id="#+id/drawer"
android:layout_height="match_parent"
tools:context="com.tollywood2bollywood.t2bliveapp.HomeActivity">
<NestedScrollView
android:layout_width="match_parent"
android:fillViewport="true"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:focusableInTouchMode="true"
android:layout_height="match_parent">
<!--ViewPager for sliding Image-->
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="270dp"
android:id="#+id/top_stories_pager">
</android.support.v4.view.ViewPager>
<!--For dots used in scrollable image-->
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:id="#+id/tab_layout"
app:tabBackground="#drawable/tab_selector"
app:tabGravity="center"
app:tabIndicatorHeight="0dp"
android:layout_height="wrap_content"/>
<!--List View Starts -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/recent_stories"
android:layout_marginTop="5dp"
android:layout_marginStart="3dp"
android:text="RECENT STORIES"/>
<RecyclerView
android:layout_width="match_parent"
android:clipToPadding = "false"
android:paddingBottom = "50dp"
android:id="#+id/recent_stories_listview"
android:layout_height="wrap_content"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ENTERTAINMENT"
android:layout_marginTop="5dp"
android:layout_marginStart="3dp"/>
<RecyclerView
android:layout_width="match_parent"
android:id="#+id/entertainment_listview"
android:clipToPadding = "false"
android:paddingBottom = "50dp"
android:layout_height="match_parent"/>
</LinearLayout>
</NestedScrollView>
<!--Navigation Drawer setting-->
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:itemTextColor="#color/colorPrimaryDark"
app:itemIconTint="#color/colorPrimaryDark"
app:menu="#menu/drawermenu"
android:layout_gravity="start"
android:background="#fff">
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
here is link for migrate from ListView to RecyclerView
Please use NestedScrollView instead, it is similar to ScrollView, but it will support acting as both a nested scrolling parent and child. Please check this for more information and samples.
https://inducesmile.com/android-tips/android-recyclerview-inside-nestedscrollview-example/
change your scrollview to nestedscrollview

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>

Can't click the buttons behind the 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.

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