Android show one layout element over another - android

I know this type of problem already discussed here so many times . But in my case none of them working for me . I am using AndroidSlidingUpPanel in my project with navigation drawer. The problem is sliding panel layout always showing over navigation drawer , but what I want is reverse . Here is the current condition
As you can see I can't see the navigation drawer items . Sliding panel layout hides the navigation drawer .
Here is my code
<?xml version="1.0" encoding="utf-8"?>
<com.sothree.slidinguppanel.SlidingUpPanelLayout xmlns:sothree="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/sliding_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
sothree:umanoDragView="#+id/dragView"
sothree:umanoOverlay="false"
sothree:umanoPanelHeight="68dp"
sothree:umanoParalaxOffset="100dp"
sothree:umanoShadowHeight="4dp">
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawerMainActivity"
android:layout_width="match_parent"
android:layout_alignParentBottom="true"
android:layout_height="match_parent">
<FrameLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/containerView">
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?android:attr/actionBarSize"
android:background="?attr/colorPrimary"
android:id="#+id/toolBar"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark"
/>
</FrameLayout>
<android.support.v7.widget.RecyclerView
android:layout_width="240dp"
android:layout_height="match_parent"
android:id="#+id/recyclerView"
android:scrollbars="vertical"
android:background="#FFFFFF"
android:layout_gravity="left"
/>
</android.support.v4.widget.DrawerLayout>
<!-- SLIDING LAYOUT -->
<LinearLayout
android:id="#+id/dragView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:clickable="true"
android:focusable="false"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/name"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textColor="#android:color/holo_green_dark"
android:gravity="center_vertical"
android:paddingLeft="10dp"
android:text="#string/slide"
android:textSize="14sp" />
<Button
android:id="#+id/btn_hide"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical|right"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text="#string/hide"
android:textSize="14sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFCCCC">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:scaleType="centerCrop"
android:src="#drawable/image" />
</LinearLayout>
</LinearLayout>
</com.sothree.slidinguppanel.SlidingUpPanelLayout>
How can I solve this problem ? So that navigation drawer always comes top over sliding panel layout .

Set your DrawerLayout as the root element, instead of your SlidingUpPanelLayout

To set the Z-axis you have to order the tree. From the documentation
View.html#Drawing
The tree is largely recorded and drawn in order, with parents drawn
before (i.e., behind) their children, with siblings drawn in the order
they appear in the tree. If you set a background drawable for a View,
then the View will draw it before calling back to its onDraw() method.
The child drawing order can be overridden with custom child drawing
order in a ViewGroup, and with setZ(float) custom Z values} set on
Views.
So basically set the Drawerlayout as last.

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

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.

setTranslationY making a white window appear on my fragment container

I have a view with some fragments and I created a snackbar with a slide animation on it. The animation works fine, but before it comes up a white window appears where the snackbar is going to appear.
It is happening because I am using setTranslationY on the view. I tried to put the background transparent but it did not work.
How can I solve it?
<RelativeLayout
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="wrap_content"
android:background="#android:color/transparent">
<LinearLayout
android:id="#+id/pager_activity_page"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#android:color/transparent">
<FrameLayout
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#android:color/transparent"
android:layout_weight="1"
/>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#android:color/black"
android:id="#+id/snackbar_container"
android:visibility="gone">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textColor="#android:color/white"
android:textSize="13sp"
android:textStyle="normal"
android:id="#+id/snackbar_text"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center" />
</FrameLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
style="#style/MyCustomTabLayout"
app:tabGravity="fill"
app:tabMode="fixed"
android:background="#android:color/white"
app:tabIndicatorColor="#android:color/white"
app:tabSelectedTextColor="#color/bpBlue"
app:tabTextColor="#929292"
/>
</LinearLayout>
</RelativeLayout>
Did you build your own "snackbar"? Try to use this:
http://www.androidhive.info/2015/09/android-material-design-snackbar-example/
But your problem:
I think the problem is, that your add your "snackbar" in your linear layout! You set the visibility to "gone" and your bar will not use any space. On your animation you set the visibility to "visible". The linear layout will give you the space, which you need for you bar. You need to add the bar above your layout(also the tablayout)

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.

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>

Categories

Resources