I’ve implemented NavigationDrawer with android-support-v4 as per this tutorial
My result is on this screenshot.
The question is how to remove or configure these transparency on Drawer which looks awful with background text.
UPDATE:
here is my layout configuration, with background been set to dark
<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/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<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="#111111"/>
</android.support.v4.widget.DrawerLayout>
You need to add alpha to your ListView.
Use your XML and extend the ListView definition with alpha-attribute.
<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="#111111"
android:alpha="255"
/>
Use this in you code.
Get the background of the drawer view and set alpha for it.
Drawable background = drawerView_.getBackground();
background.setAlpha(255);
Thanks everyone who tried to answer my question.
I'm sorry the trouble was in Fragment initialization in code.
So I've tried to add fragment as new instance, but it should be just a replacement of already defined fragment in layout as follows:
android.support.v4.app.FragmentManager fragmentManager = getSupportFragmentManager();
FeedFragment fragment = new FeedFragment();
fragmentManager.beginTransaction().replace(R.id.content_frame, fragment).commit();
now everything works fine.
To make navigation drawer transparent, you must first define the color for your drawer in res/values/colors.xml file.
Eg:<color name="navigationDrawerNew">#7ba9530c</color>
Now, on the left side of this line, the color that you have chosen will be displayed in a small square.
See image for example
Click on it. It will bring up a color chooser. In the color chooser, at the bottom, there is a slider which allow you to adjust transparency. Adjust it to get the required transparency.
Now, set this color as background color for the list view for navigation drawer in xml file. The list view looks almost like this:-
<ListView
android:id="#+id/navList"
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_gravity="left|start"
android:background="#color/navigationDrawerNew" />
Set the Background of the Drawer (Which in the linked demo is a ListView) to a solid color/drawable
It doesn't default to be transparent like this. You must have it set in your activities layout file. Change the android:background in the android.support.v4.widget.DrawerLayout tag to be a solid colour
What's the layout that your Adapter inflates in the
getView(LayoutInflater inflater, ..., ...) ?
The ListView inflates some layout and this one seems to be transparent, not the drawer.
The background color of your Drawer becomes the color of ListView's items.
You can notice that the second part of your drawer is a little bit darker then the items.
You only need to setBackgroundColor for DrawerListView in the code like this:
mDrawerListView.setBackgroundColor(Color.LTGRAY);
This is work for me. No need to add Alpha value.
You add background color of ListView in java file then it works correctly,
listview.setBackgroundColor(Color.WHITE);
Related
sorry for my bad English.
I have a navigation drawer in some activities, I want the icon of each navigation view item to be placed to the right of that item's text and the whole item get right gravity.
Because I only used Persian in my app, I can not use "supportsRtl" in my code, if I use, it will look weird when I set device language to any rtl languages.
I think probably I can fix this with setting custom layout for navigation view, but I'm looking for a simpler way. this is my NavigationView XML code:
<android.support.design.widget.NavigationView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:menu="#menu/menu"
android:layout_gravity="end" />
Edited :
layoutDirection is a good answer but i used drawerLayout.openDrawer(GravityCompat.START);
for opening navigation drawer. now if device language be an rtl language this make app crash.
Make supportsRtl true and set the layout dirction to RTL on navigation View and LTR in other layouts
Just add android:layoutDirection="rtl" to your NavigationView, like this:
<android.support.design.widget.NavigationView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:menu="#menu/menu"
android:layoutDirection="rtl"
android:layout_gravity="end" />
by default half of hamburger is shown, as seen at the top left corner of the screenshot. I want to display full hamburger. code is taken from https://developer.android.com/training/implementing-navigation/nav-drawer.html. how can I do this?
Seems you are using very old technique to create Navigation Drawer. Its around 4 years old code and seems perfect regarding old version.
FYI, previously this kind of UI was done using DrawerLayout with ListView. But now android itself officially introduced sliding panel menu by introducing a newer concept called Navigation Drawer in which we combine DrawerLayout and NavigationView to achieve the desired output.
How to make hamburger menu fully visible?
SOLUTION:
Use AppCompatActivity instead of Activity and use AppCompat theme to achieve your desired output.
Use NavigationView instead of ListView.
Here is an example of NavigationView:
<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:fitsSystemWindows="true">
<!-- Your contents -->
<android.support.design.widget.NavigationView
android:id="#+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/my_navigation_items" />
</android.support.v4.widget.DrawerLayout>
Here is a very good tutorial: Android Sliding Menu using Navigation Drawer
Hope this will help~
Im my app i have an Activity called MainActivity it contains a dynamic fragment with id container which i switch depending on state usually my app can be in the state Syncing or Regular now i wan't to add a NavigationDrawerto and i want it to be visible in the ActionBar and on the left only if the MainActivityis not on the Syncingstate since that if the Activity Synching i should not be abble to use the drawer to navigate in my app.
Im using the following activity layout
<!-- A DrawerLayout is intended to be used as the top-level content view using
match_parent for both width and height to consume the full space available. -->
<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="pt.ecs.myenergy.MainActivity">
<!-- As the main content view, the view below consumes the entire
space available using match_parent in both dimensions. -->
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- 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="---------.NavigationDrawerFragment"
tools:layout="#layout/fragment_navigation_drawer" />
</android.support.v4.widget.DrawerLayout>
The question is for a clever/best way to achieve this. I tought of a few but im not sure which one to use:
Have two xml layouts for the activity, one with the drawer included other without it and use setContentView which would cause for the xml to be inflated not sure if this is a good aproach
Use the merge tag with two childs one the drawer layout (with the container) other with only the container (for the syncing)
I would suggest doing none of those options. They both seem over complicate for no good reason for me.
you should lock the drawer closed using: drawer.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED)
and if you're also using the an ActionBarDrawerToggle you disable it's indicator with drawerToggle.setDrawerIndicatorEnabled(false)
I'd like to create an extra-information view similar to that of the Google Drive app (below) on a tablet. When the info button is clicked, this view slides in from the rightcontaining a layout. Another example would be the Google+ app with its notifications slide-out panel:. The SlidingLayer by 6Wunderkinder almost works, but doesn't fade a semi-black background over the views behind the "drawer" and I haven't found another library that does this.
If anybody has any suggestions/solutions please let me know!
Also, I've already looked at this question and none of the answers suggested there are correct either.
For posterity, here's the answer to this question. As Steve Benett's suggestion led me to discover, the correct way to do this is to use two DrawerLayouts, nested within each other like so:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_navigation_bar"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_sidebar"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
android:id="#+id/fragment_main_content"
android:name="MainContentFragment"
android:layout_height="match_parent"
android:layout_width="match_parent" />
<fragment
android:id="#+id/fragment_sidebar"
android:name="SidebarFragment"
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_gravity="end" />
</android.support.v4.widget.DrawerLayout>
<fragment
android:id="#+id/fragment_navigation_bar"
android:name="NavigationFragment"
android:layout_height="match_parent"
android:layout_width="300dp"
android:layout_gravity="start" />
</android.support.v4.widget.DrawerLayout>
The innermost DrawerLayout contains the main content of the Activity, whether it be a fragment or some other layout components. fragment_sidebar is the fragment that will be swiped out from the right. Then, on the top-level DrawerLayout you have the fragment_nagivation_bar which houses the left Drawer's ListView or whatever.
Then, in the Activity Java code you have:
mDrawerLayoutLeft= (DrawerLayout) findViewById(R.id.drawer_navigation_bar);
mDrawerLayoutRight = (DrawerLayout) findViewById(R.id.drawer_sidebar);
mDrawerLayoutLeft.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);
mDrawerLayoutRight.setDrawerShadow(R.drawable.sidebar_shadow, GravityCompat.END);
An optional addition (but recommended, for consistency of UX) is to hide the other Drawer when one is opened, so your screen doesn't consist solely of Drawers.
I hope this has helped somebody!
This is the DrawerLayout. Have a look at the design guide, which illustrates the behavior well.
If you want to use / customize the "semi-black background" use DrawerLayout.setDrawerShadow() with a drawable. Google hands out a set of drawables here. Download the ActionBar Icon Pack and look for the drawable_shadow.9.png.
If you want that the menu appears from the right, set android:layout_gravity="end" as a property in the second child of the layout.
I want to make an iOS 7 like drawer that I can slide from the bottom that doesn't cover the full screen and is semi transparent/blurred on Android.
I had a look at SlidingDrawer on android to try and get a start but it looks like its being depreciated. How can I create a similar future proof effect on android?
Just change the background color of the List view that gets populated in navigation drawer fragment.
use of background color "#22FFFFFF" makes navigation drawer semitransparent
Use an hexadecimal color code, which consists of two digits for alpha and six for the color itself, like this:
use android:background ="#88676767" change the first 88 to your selection of opacity
android:background="#c0000000" -for more darkness
Please rate it if it turns helpful.
<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="#22FFFFFF"
tools:context="com.Navigation Drawer Fragment" />