Overlay icon over relative layout in Drawer layout? - android

I want to integrate a button over relative layout over navigation drawer. Could someone help me please?
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true">
<!-- The navigation drawer -->
<RelativeLayout
android:id="#+id/rela"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:layout_marginRight="-20dp"
android:background="#android:color/black"></RelativeLayout>
<RelativeLayout
android:id="#+id/relad"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="end"
android:background="#android:color/black">
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#android:drawable/radiobutton_off_background"
app:fabSize="normal"
android:layout_marginLeft="-20dp"
/>
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
My floatin button appear inside. But cannot able to overlay it

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

How to add navigation drawer to an exisiting activity/layout

I'm trying to add navigation drawer to this layout. It currently has a Bottom Navigation View and a relative layout to hold fragment.
Problem is I can't make the root layout a Drawer Layout coz it opts out the fragment container relative layout.
<RelativeLayout
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:layout_height="match_parent"
tools:context="deb.com.firebasedemo.HomePage"
>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:background="#054ec5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:itemIconTint="#drawable/nav_state_color"
app:itemTextColor="#drawable/nav_state_color"
app:menu="#menu/bottom_nav_menu"
android:layout_alignParentBottom="true"
>
</android.support.design.widget.BottomNavigationView>
<RelativeLayout
android:id="#+id/home_fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottom_navigation">
</RelativeLayout>
</RelativeLayout>
I tried something like this. Putting drawer layout inside the relative layout and navigation view.
<RelativeLayout
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:layout_height="match_parent"
tools:context="deb.com.firebasedemo.HomePage"
>
<android.support.v4.widget.DrawerLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:menu="#menu/navigation_menu"
android:layout_gravity="start">
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:background="#054ec5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:itemIconTint="#drawable/nav_state_color"
app:itemTextColor="#drawable/nav_state_color"
app:menu="#menu/bottom_nav_menu"
android:layout_alignParentBottom="true"
>
</android.support.design.widget.BottomNavigationView>
<RelativeLayout
android:id="#+id/home_fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottom_navigation">
</RelativeLayout>
</RelativeLayout>
But it's not working :( .. The navigation drawer won't show up.
I need some help here.

Can't place Floating Action Button (FAB) between header and items in DrawerLayout using RecyclerView

I can't get the Floating Action Button (FAB) to appear in the correct position. I want it to appear between the header and the first item in my nav drawer.
Currently, I've got it to appear in the bottom right corner of the header and NOT on top of the line between the 1st and 2nd elements (1st element = header & 2nd element = first item in recyclerview).
My app is using the following appcompat items:
appcompat-v7:23.0.0
recyclerview-v7:23.0.0
design:23.0.0
I'm using a nav drawer but I can't use the NavigationView because I need to customize the item entries and not load a simple menu.
As you know, the drawer is really not 2 different controls. The header is actually the '0' element in the RecyclerView. I don't know if this makes a difference.
Here is my current xml for the header/"0 view in RecyclerView":
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="#dimen/navdrawer_image_height">
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/navDrawerHeaderView"
android:layout_width="match_parent"
android:layout_height="#dimen/navdrawer_image_height">
<ImageView
android:id="#+id/navdrawer_image"
android:layout_width="wrap_content"
android:layout_height="#dimen/navdrawer_image_height"
android:contentDescription="#string/cd_navdrawer_image"
android:scaleType="centerCrop"
android:src="#drawable/bg_material_design" />
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/app_image"
android:layout_width="#dimen/navdrawer_user_picture_size"
android:layout_height="#dimen/navdrawer_user_picture_size"
android:src="#drawable/ic_launcher"
android:layout_marginTop="16dp"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
app:border_width="2dp"
app:border_color="#FF000000"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/appNameTextView"
android:text="App Name"
android:textStyle="bold"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_marginBottom="16dp"
android:layout_alignParentBottom="true"
android:textColor="#android:color/white"/>
</RelativeLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:src="#drawable/button_account"
app:layout_anchor="#id/navDrawerHeaderView"
app:layout_anchorGravity="bottom|right|end"
app:elevation="4dp"/>
</android.support.design.widget.CoordinatorLayout>
I think I might have the FAB in the wrong location/file. Here is the xml for the drawer.
<?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"
android:id="#+id/drawerLayout"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true">
<!-- Content layout -->
<LinearLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical">
<include
android:id="#+id/toolbar"
layout="#layout/tool_bar"/>
<FrameLayout
android:id="#+id/contentFrame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/init_background">
</FrameLayout>
</LinearLayout>
<!-- Pages -->
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="320dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="#ffffff"
android:scrollbars="vertical"
android:clickable="true"
android:focusable="true"
android:focusableInTouchMode="true">
</android.support.v7.widget.RecyclerView>
</android.support.v4.widget.DrawerLayout>
HELP!!!!!
example drawer fragment layout containing your existing RecyclerView:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="200dp">
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f00"
android:id="#+id/header"/>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:scrollbars="vertical"
android:clickable="true"
android:focusable="true"
android:focusableInTouchMode="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|right|end"
android:layout_margin="5dp"
android:clickable="true"/>
</android.support.design.widget.CoordinatorLayout>

Floating Action Buttons over Drawer Menu

I have added 2 floating action buttons to my activity. The problem is that I also have a drawer menu and when I open it my floating buttons remain visible.
This is how my XML file looks like:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/DrawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="7dp">
<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
android:id="#+id/tool_bar"
layout="#layout/tool_bar"
></include>
<LinearLayout
android:id="#+id/viewA"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.6"
android:background="#FF8845"
android:orientation="horizontal"/>
<LinearLayout
android:id="#+id/viewB"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.4"
android:background="#AF3800"
android:orientation="horizontal">
<ListView
android:id="#+id/listView5"
android:layout_marginTop="20dp"
android:layout_width="wrap_content"
android:layout_height="270dp"></ListView>
</LinearLayout>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/RecyclerView"
android:layout_width="320dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="#ffffff"
android:scrollbars="vertical">
</android.support.v7.widget.RecyclerView>
</android.support.v4.widget.DrawerLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/button_add_new_friend"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:src="#drawable/ic_add_friend"
app:layout_anchor="#id/viewA"
app:layout_anchorGravity="bottom|right|end"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/button_user_photos"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="100dp"
android:clickable="true"
android:src="#drawable/ic_user_photos"
app:layout_anchor="#id/viewA"
app:layout_anchorGravity="bottom|right|end"/>
</android.support.design.widget.CoordinatorLayout>
And this is how they look like:
Any ideas how I can solve this problem?
Set visibility of buttons GONE or INVISIBLE in onDrawerOpened(View view) listener.
Move floating buttons declaration in XML to the top of CoordinatorLayout container (before the DrawerLayout declaration). Android draws views from top to bottom.
UPD.
As suggested by #JohanShogun, elevation might be the key. FABs probably have default elevation value higher than you have in your DrawerLayout. Try to override it with lower value and if it won't help, have a look at this answer.

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.

Categories

Resources