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.
Related
I'm trying to create an application with fragment on the side as a menu bar.
My main problem is that when I open the fragment I can see the buttons behind it and even press them.
Of course I don't want that. I tried adding the property android:clickable="true" to the layout but it didn't help.
This is my code:
<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:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context="ibuy.ibuy.AddUpdateItem">
.
.
.
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/search_image"
android:id="#+id/btnBrows"
android:onClick="openItemTable"
android:layout_alignTop="#+id/imageView"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
.
.
.
<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="ibuy.ibuy.AddUpdateItem"
android:clickable="true">
<fragment
android:id="#+id/navigation_drawer"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
android:name="Menus.smallMenu"
tools:layout="#layout/fragment_navigation_drawer"
android:alpha="255" />
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>
This is the code of the listView of the fragment on other file:
<ListView
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:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#cccc"
tools:context="Menus.smallMenu"
android:clickable="true"/>
What am I doing wrong?
Thank you in advance!
I don't know what you meant by "I can see the buttons behind it". I assume you meant behind the DrawerLayout UI.
1)
In that case, you can use the attribute like android:layout_below="#id/btnBrows". As far as I know, all the UI elements should be positioned, otherwise they may be displayed one on top of another, like what you are seeing.
2) Also an issue is that both android:layout_width and layout_height of DrawerLayout is match_parent which fills up the whole screen. It competes screen space with the button. If the button is inside DrawerLayout, that would not be an issue but this might be your intentional design.
If you're into Android Studio, create a new Navigation Drawer Activity. Take a look at the main XML layout.
The DrawerLayout should be your root view. Inside it, you have the RelativeLayout with the buttons and the Fragment that is your navigation drawer.
That way, both are separated and the navigation drawer overlaps correctly when opened.
I made a simple app which when I open it I see the wallpaper and the 2 buttons.First button opens my gallery and the second one opens a Calculator app. Now I want to be able to slide from left to right and bring up the Navigation Drawer Activity.
I did this: right clicked on my app -> New -> Activity -> Navigation Drawer Activity. It created 2 java classes ( NavigationActivity and NavigationDrawerFragment ), some layouts (activity_navigation fragment_navigation and fragment_navigation_drawer). Anyway, what I don't know is how to make the navigation drawer show up, how do I link it to my activity_main ?
This is the activity_main.xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context=".MainActivity"
android:background="#drawable/digital_blue_wallp">
<TextView
android:text="#string/welcome"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#fff8fdff"
android:textSize="24sp"
android:id="#+id/welcome"
android:layout_centerHorizontal="true"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button"
android:background="#drawable/calcu"
android:layout_alignParentBottom="true"
android:layout_alignRight="#+id/welcome"
android:layout_alignEnd="#+id/welcome"
android:layout_centerHorizontal="true"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button2"
android:background="#drawable/gallery"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
In you main activity layout, declare the navigation drawer like this:
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<GridView
android:id="#+id/left_drawer"
android:layout_width="180dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:paddingTop="10dp"
android:choiceMode="singleChoice"
android:numColumns="2"
android:verticalSpacing="15dp"
android:horizontalSpacing="5dp"
android:background="#color/black_transparent"/>
</android.support.v4.widget.DrawerLayout>
I chose to use a GridView but you can use whatever you want. Then in your activity instantiate the drawer and subview:
mDrawerLayout = (DrawerLayout)findViewById(R.id.drawer_layout);
mAppsGrid = (GridView)findViewById(R.id.left_drawer);
You should then create a custom drawer adapter, which is very similar to a grid adapter and simply controls the items within the view.
mDrawerAdapter = new DrawerAdapter(this);
mAppsGrid.setAdapter(mDrawerAdapter);
mAppsGrid.setOnItemClickListener(this));
I know this doesn't specifically tell you what you're doing wrong, but without seeing more of your code, it would just be guess what's going wrong on your app. Hope this helps!
How can I put an image on top of navigation drawer like Google Play Store or Left sidebar on Google+?
Actually I have my own adapter for the navigation drawer, it put an icon for each element of the list view, and this is the current XML:
<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/frame_content"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</FrameLayout>
<ListView
android:id="#+id/left_menu"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/menuBackground"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp" />
</android.support.v4.widget.DrawerLayout>
I think I must add ImageView in this XML but I'm not sure if this is the correct way.
I've just found out how to implement this today (if you have not already solved this problem).
Took me hours to ask the right question
I think you're looking something like this
If so, you need to create a xml files to act as a header and add to the top of the listview.
so just create a header.xml
header.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/img_first"
android:layout_width="fill_parent"
android:layout_height="200dp"
android:scaleType="fitXY"
android:src="#drawable/hatsune" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text Name"
android:background="#88f3f3f3"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="20dp"
android:background="#88f3f3f3"
android:text="Text Point"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
Back to your activity lets say Activity.java
//Header of the listview, go to header.xml to customize
View header = getLayoutInflater().inflate(R.layout.header, null);
//addHeaderView is to add custom content into first row
yourListView.addHeaderView(header);
yourListView.setAdapter(yourAdapter);
I think I must add ImageView in this XML but I'm not sure if this is the correct way.
No, at least in my personal opinion that is not the correct way to implement it. Try to follow a approach like this.
Create a layout you want to add to the top of Navigation Drawer.
Add that layout as a header in your list using getListView().addHeaderView(headerView);
Hope this helps.. :)
When I put ScrollView into the content of a DrawerLayout, I am nolonger able to open the drawer by swiping from the side.
Activity 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">
<!-- The menu_main content view -->
<FrameLayout
android:id="#android:id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<!-- The navigation drawer -->
<ListView
android:name="com.gumtree.androidapp.DrawerFragment"
android:id="#+id/drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start" />
</android.support.v4.widget.DrawerLayout>
In Activity's onCreate I add a fragment which has following layout:
<ScrollView
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">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_height="160dp"
android:layout_width="match_parent"/>
<TextView
android:id="#+id/headline"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="#dimen/headline_text_size"
android:padding="#dimen/detail_text_padding"
android:textIsSelectable="false"/>
<TextView
android:id="#+id/description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="#dimen/description_text_size"
android:padding="#dimen/detail_text_padding"
android:textIsSelectable="false"/>
</LinearLayout>
</ScrollView>
Without the ScrollView everything works fine and I am able to open the drawer by swiping from the side. However when I add the ScrollView, it stops working.
The problem here was silly named ID of FrameLayout used as content container of DrawerLayout. I used system ID (android.R.id.content) which caused that the content fragment was put on the top of all other views - even the drawer.
It also caused fragment's layout to overlap the drawer and - related to this question - blocked the drawer from receiving touch events. The touch events were taken by fragment's ScrollView.
Conclusion: DO NOT USE SYSTEM IDs (android.R.*) WHERE IT IS NOT NEEDED.
I just wanted it to look nice and clean.. Silly me :)
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 :)