As per title, how can I set the right margin of the navigation drawer to 56 dp as per Google's material design (refer below)? I have tried android:layout_marginRight="56dp" in the second view of the DrawerLayout but it looks very weird (more than 56dp and very different from google's material design picture below).
I would like to suggest that you focus on the width of the Second View of DeawerLayout which should be within 240dp to 320dp,
Think about this you manage to give navigation drawer right margin of 56 dp on the right side, now you want to check this in landscape mode, and more surprises will be waiting for you
Try focus on the width of the navigation drawer, it should be in between 240dp to 320dp. It will automatically adjust with the right margin.
This is an example of the xml file which contains the navigation drawer fragment. Here the width of the fragment is set in the dimens folder as 280dp
<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:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/container_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include
android:id="#+id/app_bar"
layout="#layout/app_bar" />
<it.neokree.materialtabs.MaterialTabHost
android:id="#+id/materialTabHost"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_below="#+id/app_bar"
app:accentColor="#color/colorAccent"
app:hasIcons="true"
app:iconColor="#android:color/white"
app:primaryColor="#color/colorPrimary" />
</LinearLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_below="#+id/materialTabHost"
android:layout_weight="1" />
</LinearLayout>
<fragment
android:id="#+id/fragment_navigation_drawer"
android:name="com.example.fragments.FragmentDrawer"
android:layout_width="#dimen/nav_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
app:layout="#layout/fragment_navigation_drawer"
tools:layout="#layout/fragment_navigation_drawer" />
</android.support.v4.widget.DrawerLayout>
Now this is an example which is the layout of the navigation drawer
<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:background="#android:color/white"
tools:context="com.example.fragments.FragmentDrawer">
<android.support.v7.widget.RecyclerView
android:id="#+id/drawerList"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
It will be a good practice if you set the width in the dimens folder rather than hardcoding it.
Related
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.
I have a base activity with an layout defined like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
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:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="end">
<include
layout="#layout/app_bar_base"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_base"
app:menu="#menu/activity_base_drawer"/>
<FrameLayout
android:id="#+id/right_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="end"
android:layout_marginTop="200dp"/>
</android.support.v4.widget.DrawerLayout>
The include part is where I set my toolbar and have a container that will receive a fragment.
Has you can see by the id, the FrameLayout will act as an right drawer.
I want that this drawer is placed bellow the toolbar.
I've tried to add an android:layout_marginTop to the drawer but with no success (that 200dp value is only for tests and the final value will be 56dp). When I open the drawer it takes all the screen height (bellow status bar).
Here is an image:
How can I put the frame layout bellow the toolbar?
Use a linear layout with a vertical orientation and place the toolbar and frame layout inside. Use "wrap_content" in the height property of the frame layout so that it will not take full height of its parent..
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<include
layout="#layout/app_bar_base"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<FrameLayout
android:id="#+id/right_drawer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="200dp"/>
</LinearLayout>
How do I get my main layout to simply line up directly underneath my DrawerLayout? My main layout is listed below and is mainly made up of listviews. Right now everything is overlapping. So the below first shows my DrawerLayout. After closing of DrawerLayout my main activity is listed.
<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:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/container_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
</LinearLayout>
<FrameLayout
android:id="#+id/container_body"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
<fragment
android:id="#+id/fragment_navigation_drawer"
android:name=“com.example.my.app.FragmentDrawer"
android:layout_width="#dimen/nav_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
android:layout="#layout/fragment_navigation_drawer"
tools:layout="#layout/fragment_navigation_drawer" />
</android.support.v4.widget.DrawerLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent”
android:orientation="vertical">
<TextView
android:id="#+id/txt_empty_list_cars"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_margin="4dp"
android:gravity="center"
android:text="#string/view1"
android:textAppearance="?android:attr/textAppearance"
android:textColor="#android:color/darker_gray"
android:visibility="gone" />
<ListView
android:id="#+id/list_cars"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/txt_header"
android:layout_margin="4dp"
android:divider="#android:drawable/divider_horizontal_bright"
android:dividerHeight="0.5dp"
android:listSelector="#android:drawable/list_selector_background" />
So, your problem is drawer layout overlapping the linear layout below. Use
android: layout_below="#id/drawer_layout"
In your linear layout. That will linearly arrange both layouts.
I dont know if your are looking for a sliding panel like the new gmail app
but if yes you can refer yourself Sliding Pane Layout and this very awesome tutorial.
hope it helps, happy codings.
In order to use the DrawerLayout correctly, it has to be the only root / parent view of your entire layout.
<android.support.v4.widget.DrawerLayout>
/*other nested child views */
<fragment
android:id="#+id/fragment_navigation_drawer"
...
/>
</android.support.v4.widget.DrawerLayout>
Also, to prevent the over lapping, ensure that you have two direct child views as per design guideline at
https://developer.android.com/reference/android/support/v4/widget/DrawerLayout.html
"To use a DrawerLayout, position your primary content view as the first child with a width and height of match_parent . Add drawers as child views after the main content view and set the
layout_gravity appropriately."
I want to implement such a functionality :
So - Navigation Drawer and Drop Down list for the Lollipop.
As I've read - we could implement this feature with the
getActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);
in the earlier versions.
But now, this method is deprecated for the Lolipop.
I found this way :
<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">
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_parent_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<include layout="#layout/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<!-- 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" />
</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="mobapply.freightexchange.NavigationDrawerFragment"
tools:layout="#layout/fragment_navigation_drawer" />
</android.support.v4.widget.DrawerLayout>
where toolbar layout looks like :
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
app:theme="#style/ThemeOverlay.AppCompat.ActionBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary">
<Spinner
android:id="#+id/spinner_toolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.v7.widget.Toolbar>
But the layouts places one after the another - so Toolbar is not included in the Navigation Drawer.
Do somebody had experience implementing this in the Lollipop ?
I am working on a project where there is a navigation drawer.In the navigation drawer , i want to place an imageview above a listivew.The xml layout is as follows:
<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/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<!-- The navigation drawer -->
<RelativeLayout
android:id="#+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:orientation="vertical"
android:clickable="true"
>
<ImageView
android:id="#+id/image_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/ic_logo" />
<ListView
android:id="#+id/slider_list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#CC000000"
android:choiceMode="singleChoice"
android:divider="#808080"
android:layout_below="#id/image_view"
android:dividerHeight="0.5dp"
/>
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
The issue is that the imageview appears squished/compressed on running on a device.Why does it appear to be compressed?Please help!!
To answer your question:
you have the imageView width set to "match_parent" and height set to "wrap_content" which is going to cause the image to stretch horizontally unless it is the same width as the device - set the width to "wrap_content" and center the image if necessary.
also...
Relative layouts don't have orientation so you should remove the line -
android:orientation="vertical"
Use this attribute in your imageview:
android:adjustViewBounds="true"
Also, use the src attribute for the drawable, not the background attribute:
android:src="#drawable/my_drawable"