I'm using a NavigationDrawer as main menu in my app. Some of my fragments use the SlidingPaneLayout.
At the moment, I show the NavigationDrawer on the right and the SlidingPaneLayouton the left, always a little bit visible.
But I would like to have the NavigationDrawer on the left side and the SlidingPaneLayout on the right side (like in Hangouts) always a little bit visible.
Question:
I know how to get the NavigationDrawr to the other side, but I can't find out how (if possible) to move the SlidingPaneLayout to the right side? So that it slides in from the right...
my solution
<android.support.v4.widget.SlidingPaneLayout
android:id="#+id/sliding_pane_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/fragment_main_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="left"
android:layout_marginRight="0dp"
android:orientation="vertical" >
<include
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="#layout/card_toast_container" />
<FrameLayout
android:id="#+id/fragment_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<!-- marginLeft: set it to width - 150 in your code!!! -->
<FrameLayout
android:id="#+id/fragment_slider"
android:layout_width="150dp"
android:layout_height="match_parent"
android:layout_gravity="right"
android:layout_marginLeft="0dp" />
</android.support.v4.widget.SlidingPaneLayout>
and use some wrapping methods like for example following, for easier and more readable code:
public boolean isSliderMenuShown()
{
return !mSlidingLayout.isOpen();
}
public static void openSlider(boolean isSliderLeft, MySlidingPaneLayout slidingLayout)
{
slidingLayout.closePane();
}
public static void closeSlider(boolean isSliderLeft, MySlidingPaneLayout slidingLayout)
{
slidingLayout.openPane();
}
Set this to view inside navigation drawer:
android:layout_gravity="left"
you can try keeping it open in the start with:
SlidingPaneLayout sp = (SlidingPaneLayout) findViewById(R.id.spl);
sp.openPane();
Also keep your main content on the left and menu on the right
After my research and test, android.support.v4.widget.SlidingPaneLayout can't swipe out from right to left. The only effect is swiping out from left to right.
No matter whether android:layout_gravity= is start left end or right.
You can achieve that by adding the layout direction for you Slidingpanel layout
layout = (SlidingPaneLayout) findViewById(R.id.sliding_pane_layout);
layout.setLayoutDirection(View.LAYOUT_DIRECTION_RTL);
before that make sure you have added a property android:supportsRtl="true" for your manifest file.
Step-1
In order to support RTL in your app, you first need to add android:supportsRtl="true" to the element in your manifest file.
Step-2
Add RTL support in SlidingPaneLayout
android:layoutDirection="rtl"
Step-3
Add LTR support in child views of SlidingPaneLayout
android:layoutDirection="ltr"
<SlidingPane
android:id="#+id/slidingPanelLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layoutDirection="rtl">
<include
layout="#layout/left_drawer"
android:layout_width="250dp"
android:layout_height="match_parent"
android:layoutDirection="ltr" />
<include
layout="#layout/view_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layoutDirection="ltr"
/>
</SlidingPane>
Note: add LTR support in both left_drawer.xml, view_container.xml
Related
I'm working on an android app and am using a toolbar at the top of the screen and a navigation bar at the bottom of the screen. I'm using a single activity to create the top and bottom toolbars and fragments to change the content between the toolbars. However, when the contents in the fragment go beyond the size of the screen, the bottom bar disappears.
Here is my home activity xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_home"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.rentables.testcenter.HomeActivity">
<include
android:id="#+id/toolbar_main"
layout="#layout/toolbar_main"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<fragment android:name="com.rentables.testcenter.HomeFragment"
android:id="#+id/fragment_place"
android:layout_weight="0"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:layout="#layout/fragment_home" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="bottom">
<include
android:id="#+id/toolbar_navigate"
layout="#layout/toolbar_navigate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center|bottom"/>
</LinearLayout>
</LinearLayout>
Im guessing it's because of the inner linear layout I have, but I wasn't sure how else to get the nav bar to stay static at the bottom. Any help would be awesome. Thanks
Figured it out. I just changed the whole thing to a relative layout, got rid of the inner linear layout, and instead of gravity I used alignParentBottom="true".
My application has a DrawerLayout with two drawers in it, one on the left for nav and one on the right for notifications. When the application goes through a cold start and I swipe the left drawer open, the right drawer jumps from the far left of the screen to the right.
It looks like this: http://i.imgur.com/mhoJ7MZ.gifv
As shown in the video, I've tried using DrawerLayout's isDrawerOpen and isDrawerVisible methods to try to see if it actually thinks the right drawer is open when it's not (since it seems to be "closing" the drawer when the left one is opened), but I didn't get anything useful from that.
What's causing the weird jump?
My activity's XML is below, the full code is here.
<?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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
...
</LinearLayout>
<LinearLayout
android:id="#+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#ACFF0000"
android:gravity="center"
android:visibility="gone">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="LEFT DRAWER"
android:textSize="24sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/right_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="end"
android:background="#AC00FF00"
android:gravity="center"
android:visibility="gone">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RIGHT DRAWER"
android:textSize="24sp" />
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
The issue comes from the android:visibility="gone" element on the LinearLayouts -- For some reason having visibility set to gone conflicts with the DrawerLayout's logic for if the view is showing or not, so it tries to hide it.
Taking that out of the XML causes everything to look the same (since DrawerLayout looks at the layout_gravity to decide which child views are drawers and hides them itself) and not have the weird jump.
I'm struggling with LinearLayout when using DrawerLayout. This is using the Android Studio template for DrawerLayout:
<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="match_parent"
android:layout_height="match_parent"
tools:context=".MyActivity">
<!-- As the main content view, the view below consumes the entire
space available using match_parent in both dimensions. -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:background="#00f"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<LinearLayout
android:background="#f00"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0" />
</LinearLayout>
</LinearLayout>
<!-- android:layout_gravity="start" tells DrawerLayout to treat
this as a sliding drawer on the left side for left-to-right
languages and on the right side for right-to-left languages.
If you're not building against API 17 or higher, use
android:layout_gravity="left" instead. -->
<!-- The drawer is given a fixed width in dp and extends the full height of
the container. -->
<fragment android:id="#+id/navigation_drawer"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
android:name="com.test.testdrawerlayout.NavigationDrawerFragment"
tools:layout="#layout/fragment_navigation_drawer" />
</android.support.v4.widget.DrawerLayout>
The preview in Android Studio shows this:
http://imgur.com/UlPGzJS
However, when running on my Nexus 5, the following shows:
http://imgur.com/w4QeGbB
As you can see, the layout_weight="1" part is not showing at all. When I create a blank project with the inner LinearLayout however, the layout works (with the blue layout taking most of the screen with the red layout at the bottom, just like the preview).
Any ideas would be really appreciated, as I'm completely stumped right now. Thanks in advance.
It appears I was using an older Android SDK platform. Once I went into SDK manager and installed API 19, it worked (with a new project).
Maybe it was a bug in an older implementation?
This is definitely an Android issue (or at least appcompat/design library issue). I've tested with different layouts inside the DrawerLayout, and concluded that the problem was "content_layout" file - the one that is displayed below the drawer.
Only using a clean, plain FrameLayout worked. No CoordinatorLayout, no fragments, no custom layouts nor 3rd-party layouts, just a good old FrameLayout with "match_parent" as width and height.
Inside the drawerlayout you should have a FrameLayout which contains the main content for your screen and you should also have a ListView in most cases to hold the contents of the navigation drawer.
It should be as such:
<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"/>
</android.support.v4.widget.DrawerLayout>
Now place your LinearLayout within the FrameLayout. Think of the FrameLayout as the "container" that holds your main screen.
Note that the official Android documentations state that
The main content view (the FrameLayout above) must be the first
child in the DrawerLayout because the XML order implies
z-ordering and the drawer must be on top of the content.
For more reference and information, I would advise you check this link by clicking here.
Please mark this as the answer if it solved your problem. Thank you.
UPDATE:
Okay first, remove "xmlns:android="http://schemas.android.com/apk/res/android"" from your linearlayout. That should only appear once and in the main root xml, in this cause the DrawerLayout.
Next, fix how you are using your weights. Declare a android:weightSum attribute. Think of weightSum as a pie. In this case we set it too 5, so we have 5 pieces of the pie. Anything inside this layout using the android:layout_weight attribute. This first one is set to 4, which will take 4/5ths of the screen. The last one is 1/5th of the screen at the bottom.
Make sure this LinearLayout is still wrapped within the FrameLayout. Your LinearLayout should appear as such:
<LinearLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="5">
<LinearLayout
android:background="#00f"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"/>
<LinearLayout
android:background="#f00"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0" />
</LinearLayout>
</LinearLayout>
I have DrawerLayout setup with a drawer on either side
<FrameLayout android:id="#+id/navigation_drawer"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start" />
<FrameLayout android:id="#+id/navigation_drawer_right"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="end" />
The right drawer is populated when a certain method is run, however, before that method is run I can swipe from the right and the screen dims but nothing shows (because the layout is empty until the method has been run).
How can I disable swipe from the right until the method has been run? I've seen solutions to fully disable any swiping, but that wouldn't work for me as the left drawer needs to always work (the setup right draw function is called when a particular option is selected on the left drawer).
Or, would there be a better way to do this? Maybe dynamically adding the right FrameLayout when the function is run?
This disables the swipe:
mDrawerLayout = (DrawerLayout) findViewById(R.id.navigation_drawer_right);
mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED);
And to enable swipe:
mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED);
A bit updated answer.
You need to pass right drawer view to disable swipe on it.
mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED, findViewById(R.id.right_drawer));
Just to mention an interesting observation.
In case you are using a layout structure for having left AND right side menus like this one:
<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:fitsSystemWindows="true">
<!-- MAIN CONTAINER -->
<include layout="#layout/content_home"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/toolbar"/>
<!-- LEFT SIDE MENU -->
<RelativeLayout
android:id="#+id/left_side_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:visibility="visible"
android:fitsSystemWindows="false"
android:background="#color/green">
<!-- put some menu items in here -->
</RelativeLayout>
<!-- RIGHT SIDE MENU -->
<RelativeLayout
android:id="#+id/right_side_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:visibility="visible"
android:fitsSystemWindows="false"
android:background="#color/gray">
<!-- put some items in here -->
</RelativeLayout>
You're gonna have some hard time trying to disable only one of the side menus
with statements like this one:
mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED, findViewById(R.id.right_drawer))
That will lock the whole DrawerLayout and you won't be able to swipe neither of the side menus.
Thus, the method proposed by #Alberto Maluje, under one of the answers above, will give you more flexibility.
mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED, GravityCompat.END);
I have full screen RelativeLayout that contains the following:
1. FrameLayout, full screen, displaying content.
2. LinearLayout, act as a control menu, stay on top of the content #1, must be able to slide or fade in/out on request(I actually have two of these. One at the top of the screen, another at the bottom).
I have the view display correctly, the menu controller slide/fade in and out when menu button pressed. But when I slide and fade the view out, the click action remain. How do I remove this action?
I tried to call menuLayout.setVisibility(View.GONE); but the action remains.
I read some issue with TranslateAnimation but I cannot get it to work.
Can someone tell me how do I fix this? Example would be appreciated.
XML:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#99000000"
android:layout_alignParentLeft="true"
android:gravity="center_vertical"
android:id="#+id/contentFrame"
>
<ViewSwitcher
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/viewSwitch">
<include layout="#layout/main_car" />
</ViewSwitcher>
</FrameLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="43dp"
android:background="#drawable/um_top_bar"
android:layout_alignParentTop="true"
android:id="#+id/topMenu"
android:gravity="top"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/um_btn_home"
android:id="#+id/homeMainBtn" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/exp_menu_btn"
android:id="#+id/menuMainBtn" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FF000000"
android:layout_alignParentBottom="true"
android:id="#+id/bottomMenu"
android:gravity="top"
>
<include layout="#layout/menu_bottom" />
</LinearLayout>
Ok, I got it to work at last. For anyone who may face the same problem, here's what I did.
I place empty layer and separate all menu content into separate XML file.
Here's the code:
/** Resetting bottom menu content */
private void resetBottomMenu(boolean isOpen){
bottomMenu.removeAllViews();
bottomMenu.addView(loadBottomMenu(isOpen));
// Control event handler goes here.
}
/** Load bottom menu content from XML */
private LinearLayout loadBottomMenu(boolean isOpen){
LinearLayout result = null;
if(isOpen){
result = (LinearLayout)View.inflate(this.getApplicationContext(), R.layout.menu_bottom_open, null);
}else{
result = (LinearLayout)View.inflate(this.getApplicationContext(), R.layout.menu_bottom, null);
}
return result;
}
Every time I want to slide menu in, I called resetBottomMenu then start animation on bottomMenu. If I want to close the menu, I start animation then resetBottomMenu.
It's important to remove child view in that Layout since that will remove the click action.
P.S. I'm not sure if this is the best way of doing it but I can confirm that it works. I have three menu that need to be fade/slide and they work perfectly now :)