I have the following layout in my activity.xml
`
<?xml version="1.0" encoding="utf-8"?>
<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"
android:id="#+id/store_page_layout"
tools:context=".StorePage">
<include
android:id="#+id/store_page_toolbar"
layout="#layout/toolbar"/>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/store_drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/store_page_toolbar">
<FrameLayout
android:id="#+id/container_body"
android:layout_width="fill_parent"
android:layout_height="#dimen/container_body_height"
android:layout_weight="1">
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginRight="16dp"
android:layout_marginLeft="16dp"
android:elevation="6dp"
card_view:cardCornerRadius="4dp"
android:background="#drawable/landing_animated_button_background">
</android.support.v7.widget.CardView>
</FrameLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/store_menu_drawer"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/black_200"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/store_cart_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="end"
android:layout_marginLeft="#dimen/nav_drawer_left_min_margin"
android:background="#color/black_200"/>
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>
`
No I went ahead and added ActionBarDrawerToggle on my Toolbar widget, the behavior I wanted from the hamburger icon is if I click on it left drawer open up (Working), I click it again left drawer closes (Working), I open right drawer by dragging from right to left plus the hamburger icon changes to arrow (Working), if I click on arrow icon it closes right drawer as well (Not working)
As you can see, I want the hamburger icon to close both right and left drawers based on which one is open, my approach is to listen to click on arrow icon and decide which drawer is open then close it. I am unable to figure out how to set onClickListener on the hamburger or arrow icon automatically added by ActionBarDrawerToggle class.
This is explained in the documentation
http://developer.android.com/reference/android/support/v7/app/ActionBarDrawerToggle.html#setToolbarNavigationClickListener(android.view.View.OnClickListener)
public void setToolbarNavigationClickListener (View.OnClickListener onToolbarNavigationClickListener)
When DrawerToggle is constructed with a Toolbar, it sets the click
listener on the Navigation icon. If you want to listen for clicks on
the Navigation icon when DrawerToggle is disabled
(setDrawerIndicatorEnabled(boolean), you should call this method with
your listener and DrawerToggle will forward click events to that
listener when drawer indicator is disabled.
I finally figured out the solution. Instead of setting setToolbarNavigationClickListener on actionBarDrawerToggle setting setNavigationOnClickListener on Toolbar works perfectly. my code is given below.
toolbar.setNavigationOnClickListener(new toolBarNavigationIconListener());
And OnClickListener is as follows.
private class toolBarNavigationIconListener implements View.OnClickListener {
#Override
public void onClick(View v) {
if(!storeDrawer.isDrawerOpen(Gravity.RIGHT) && !storeDrawer.isDrawerOpen(Gravity.LEFT)) {
storeDrawer.openDrawer(Gravity.LEFT);
} else if(storeDrawer.isDrawerOpen(Gravity.LEFT)) {
storeDrawer.closeDrawer(Gravity.LEFT);
} else if(storeDrawer.isDrawerOpen(Gravity.RIGHT)) {
storeDrawer.closeDrawer(Gravity.RIGHT);
}
}
}
Related
I has activity with the next 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/drawerLayoutWidget"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/containerProgress"
android:layout_width="match_parent"
android:clickable="false"
android:layout_height="match_parent"
android:background="#4777">
<ProgressBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</LinearLayout>
</FrameLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/widgetRecyclerView"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/windowBackground"
android:scrollbars="vertical" />
</android.support.v4.widget.DrawerLayout>
Container containerProgress(progressBar) is show over all other elements in screen.
OK.
I need when containerProgress is show to was not possible to click any items on screen.
But I can click on drawerlayout hamburger icon.
How I can disable click on hamburger icon while containerProgress is show?
Set empty click listener to toggle
toggle.setOnClickListener(view -> {
// We ignore it
}
And whem you want to enable it again:
toggle.setOnClickListener(null);
OR
You can hide it using
toggle.setDrawerIndicatorEnabled(false);
OR
If under "disable click" you mean "prevent drawer to be opened" you can do that:
drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED)
And when you want to enable it:
drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED)
I'd like to create a navigation drawer effect, but rather than the drawer sliding out from the left, it must be "behind" the main view, so the item that slides is the view itself (i.e. to the right) - the drawer doesn't move at all, but is "revealed" by sliding the main view out of the way. The finger swipe (and tap on hamburger icon) action is the same as with the drawer, just the reveal effect is different.
The way the main view moves is the same to what can be achieved here
How to move main content with Drawer Layout left side
but in my case I want the "drawer" to stay statically underneath the main view.
I've achieved the desired effect by overlaying views and making the drawer transparent - of course this means that the drawer is no longer used for navigation; just for effect. Using the code in the above link
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/whole_frame"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- everything here is now the new "drawer" -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="BOO I am hiding!"
android:id="#+id/tv2"
android:layout_gravity="left|top" />
<!-- /everything here is now the new "drawer" -->
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<!-- The This is the main content frame -->
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="MOOOOOO!"
android:id="#+id/textView"
android:layout_gravity="left|top" />
</FrameLayout>
<!-- The see-through navigation drawer -->
<RelativeLayout
android:layout_width="280dp"
android:layout_height="match_parent"
android:id="#+id/left_drawer"
android:clickable="false"
android:background="#drawable/transparent_bg" <!-- #00FFFFFF -->
android:layout_gravity="start">
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
Everything is perfect except that id/tv2 (or other items on that layer) are not clickable when the "drawer" is opened.
I've tried:
1)
Making the layouts above not clickable (drawer_layout, content_frame and left_drawer setClickable(false) without effect).
2)
The code in the above link moves the content_frame on X axis and not the drawyer_layout - I tried moving drawer_layout instead of the frame - this doesn't work properly as you can no longer click on the far right to close the drawer again.
3)
Changing the android:layout_width of the drawer_layout to fill_parent, but this is still a problem as it is not the layer being moved out of the way.
My guess is that DrawerLayout ( android.support.v4.widget.DrawerLayout ) is not meant to be above another layout and I might need to create my own drawer to achieve the desired effect - any ideas or suggestions would be great.
I believe I've figured out a relatively simple solution. The following DrawerLayout setup is pretty standard - i.e., the content ViewGroup first, the drawer View last, using standard attributes, etc. Additionally, a technique similar to that shown in your posted link is used to slide the content with the drawer.
The trick in the example is the setup of the drawer itself. We're going to use two nested ViewGroups - the outer one is the regular sliding drawer View; the inner, a ViewGroup for the actual drawer contents. We'll then slide the inner content ViewGroup opposite the direction of the drawer's slide using a DrawerListener (an ActionBarDrawerToggle in our example), making the drawer appear static against the left side.
The example DrawerLayout, main.xml. Note the standard drawer attributes set on the drawer_container ViewGroup:
<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:background="#000000">
<FrameLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#cccccc" />
<FrameLayout
android:id="#+id/drawer_container"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start">
<LinearLayout
android:id="#+id/drawer_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="#drawable/ic_launcher" />
...
</LinearLayout>
</FrameLayout>
</android.support.v4.widget.DrawerLayout>
This example Activity shows the few extra lines we need to add to a regular Navigation Drawer setup. Other than getting references to the Views, the main bit is in the ActionBarDrawerToggle's onDrawerSlide() method:
public class MainActivity extends Activity {
ActionBarDrawerToggle toggle;
DrawerLayout drawerLayout;
View drawerContainer;
View drawerContent;
View mainContent;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
drawerContainer = findViewById(R.id.drawer_container);
drawerContent = findViewById(R.id.drawer_content);
mainContent = findViewById(R.id.main_content);
toggle = new ActionBarDrawerToggle(...) {
#Override
public void onDrawerSlide(View drawer, float slideOffset) {
super.onDrawerSlide(drawer, slideOffset);
drawerContent.setTranslationX(drawerContainer.getWidth() * (1 - slideOffset));
mainContent.setTranslationX(drawerContainer.getWidth() * slideOffset);
}
};
drawerLayout.addDrawerListener(toggle);
}
}
Keep in mind that DrawerLayout restores the drawer opened/closed state during Activity re-creation, so you might need to account for that, for example, during orientation changes, etc.
I created a DrawerLayout sidebar. And when I click on the sidebar, the content in the background layout also gets clicked.
public class MainActivity extends Activity{
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final DrawerLayout drawer = (DrawerLayout) this.findViewById(R.id.drawer_layout);
Button btn = (Button)findViewById(R.id.clickBtn);
btn.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
drawer.openDrawer(Gravity.LEFT);
Toast.makeText(getApplicationContext(), "Button Clicked", Toast.LENGTH_SHORT).show();
}
});
}
}
And here is my layout:
<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=".MainActivity">
<!-- The main content view -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:id="#+id/clickBtn"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="hello pandora"/>
</RelativeLayout>
<!-- The navigation drawer -->
<TextView
android:id="#+id/left_drawer"
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:text="hello world"
android:textColor="#fff"
android:background="#111"/>
</android.support.v4.widget.DrawerLayout>
When I click button, the drawer slides open and in the 3rd picture, when I click on the sidebar, the button("hello pandora") in the background layer also gets clicked.
Is there anything i have to add in DrawerLayout to block the touch events in background layout??
I faced the same issue.
Add android:clickable="true" in your layout.
what you prominently call "the navigation drawer" there, is actually a TextView -
while it should rather be a android.support.design.widget.NavigationView,
with some header.xml and a menu.xml inflated, into which you have to put the child nodes.
a DrawerLayout without a NavigationView ..."might behave unexpectely".
on an Android, one can enable the option to "show layout boundaries", just alike in Android Studio there is a Layout Inspector, which both would have helped to understand the reason for abnormal behavior.
I fixed it myself, but in a bad way. I wrote an onClickListener for the navigation drawer layout (TextView here) and left it blank in onClick() method. This way it works now.
I like to open sliding drawer from any out side button not with its child button handle , If any one have any answer or tutorial please help me?
I want to open a slider from any other button in layout not from handle button ... not from its child button ??
like if I have any button in xml.. and when I click on it slider open .
Android Sliding Up View
please check it and see the screen shot I don't have that much reputation so that I upload Image
I want to click on show button the slider opens not on slider
The "Navigation Drawer" can be opened programmatically with mDrawerLayout.openDrawer(mDrawerContentLayout). Here's some info how to set it up:
private DrawerLayout mDrawerLayout;
private RelativeLayout mDrawerContentLayout;
Get the reference to drawerView in your Activity onCreate():
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mDrawerContentLayout = (RelativeLayout) findViewById(R.id.drawer_content);
Call this on your button click when you want drawer opened:
mDrawerLayout.openDrawer(mDrawerContentLayout);
I used a RelativeLayout as content view of my drawer, but you can use any which suits you. Just remember, the mDrawerLayout layout should be inside mDrawerLayout (which is actually a android.support.v4.widget.DrawerLayout) and should have the android:layout_gravity="start" attribute.
Here's the (abbreviated) activity layout that I used:
<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
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
<android.support.v4.view.PagerTitleStrip
android:id="#+id/pager_title_strip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#33b5e5"
android:paddingBottom="4dp"
android:paddingTop="4dp"
android:textColor="#fff" />
</android.support.v4.view.ViewPager>
<RelativeLayout
android:id="#+id/drawer_content"
android:layout_width="#dimen/nav_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start" >
<ListView
... />
</android.support.v4.widget.DrawerLayout>
You can find more details in the API documentation, the developer docs and the design patterns.
Okay, if you want to open slider on it's button's click then use below code.
sliding_menu = (Button) findViewById(R.id.slidingMenu);
sliding_menu.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View arg0) {
menu.showMenu();
}
});
I have created drawer layout sample application, it's working fine, my problem is drawer layout working in right to left perfectly but I am trying to move icon left side to right side but it's not working give me your suggestion..!!! This is possible or not?
<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:layout_gravity="right" >
<!-- 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/drawer_list"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="right"
android:background="#111"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp" />
</android.support.v4.widget.DrawerLayout>
Maybe it's too late but you can solve this using the default Menu.
Create res/menu/my_right_side_menu.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:myapp="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/btnMyMenu"
android:icon="#drawable/ic_drawer"
android:title="Right Side Menu"
myapp:showAsAction="always"/>
</menu>
Then add your menu in onCreateOptionsMenu() in your Activity
#Override
public boolean onCreateOptionsMenu(Menu menu) {
int menuToUse = R.menu.my_right_side_menu;
MenuInflater inflater = getMenuInflater();
inflater.inflate(menuToUse, menu);
return super.onCreateOptionsMenu(menu);
}
Next, in your ActionBarDrawerToggle handle the click event of your menu item
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.string.drawer_open, R.string.drawer_close) {
#Override
public boolean onOptionsItemSelected(android.view.MenuItem item) {
if (item != null && item.getItemId() == R.id.btnMyMenu) {
if (mDrawerLayout.isDrawerOpen(Gravity.RIGHT)) {
mDrawerLayout.closeDrawer(Gravity.RIGHT);
} else {
mDrawerLayout.openDrawer(Gravity.RIGHT);
}
return true;
}
return false;
}
};
And finally don't forget to hide your Home button from the ActionBar
getSupportActionBar().setDisplayHomeAsUpEnabled(false);
getSupportActionBar().setDisplayShowHomeEnabled(false);
If you use AppBarLayout and Toolbar do as below
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
android:layoutDirection="rtl">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
notice: android:layoutDirection="rtl"
This icon represents navigation menu, which by design has to be on left side of the screen. As per the guidelines, we can although have a navigation drawer on right side, but that shall be used to modify the contents (for example filters). For all such purposes you might want to use ActionbarItem, and put up an ActionItem in right corner of the screen. Click on that action item will open or close the right navigation drawer.
But for sure, as per the design, this animated three lined menu icon, which represents navigation shall be on left hand side.
Just for the information, to put the navigation drawer on right side, you have to change the gravity of navigation drawer as follows:
<?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:background="#color/main_background" >
<!-- The main content view -->
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</FrameLayout>
<!-- The navigation drawer -->
<LinearLayout
android:id="#+id/right_drawer"
android:layout_width="280dp"
android:layout_gravity="end"
android:layout_height="match_parent"
android:orientation="vertical" />
</android.support.v4.widget.DrawerLayout>
Also, in this case you really really want the navigation menu icon, on right either use custom header layouts or a library like ActionBarSherlock to edit it.
I hope this helps!
Here is a loophole-like solution which worked in my case.
toggle = new ActionBarDrawerToggle(
this, drawer, toolbar0, R.string.open_nav, R.string.close_nav);
I made up a toolbar for it.
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_marginRight="40dp"
android:layout_marginEnd="40dp"
android:background="#color/colorPrimary">
<!-- this is your general toolbar-->
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="right|end|center_vertical"
android:text="Mytitle"/>
</android.support.v7.widget.Toolbar>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar0"
android:layout_width="40dp"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="right|end"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<!-- this is your nav-button toolbar-->
</FrameLayout>
</android.support.design.widget.AppBarLayout>
and set onclicklistener for it:
toolbar0.setNavigationOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if (drawer.isDrawerOpen(Gravity.RIGHT)) {
drawer.closeDrawer(Gravity.RIGHT);
} else {
drawer.openDrawer(Gravity.RIGHT);
}
}
});
From Developer's Guide:
Drawer positioning and layout is controlled using the
android:layout_gravity attribute on child views corresponding to which
side of the view you want the drawer to emerge from: left or right.
(Or start/end on platform versions that support layout direction.)
Which means, you can do this by:
<DrawerLayout
android:layout_gravity="right">
</DrawerLayout>
Edit
According to Creating a Navigation Drawer,
The drawer view (the ListView) must specify its horizontal gravity
with the android:layout_gravity attribute. To support right-to-left
(RTL) languages, specify the value with "start" instead of "left" (so
the drawer appears on the right when the layout is RTL).
So you should do:
<DrawerLayout
android:layout_gravity="start">
</DrawerLayout>