Need help figuring out why my toolbar is overlapping the contents.
I have a toolbar layout here
toolbar.xml
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="#style/AppTheme">
</android.support.v7.widget.Toolbar>
I then use this toolbar with a navigation drawer like so.
navigation_drawer.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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="me.jlurena.yougothw.activities.base.NavigationDrawer">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include layout="#layout/toolbar"/>
</LinearLayout>
<ListView
android:id="#+id/nav_list"
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#ffeeeeee">
</ListView>
</android.support.v4.widget.DrawerLayout>
Finally, so I would only have to extend a NavigationDrawer.java I set up the toolbar in NavigationDrawer.java and extend it in every other activity I'll need. I then inflate it like so
public void inflateBaseLayout(Activity activity, int resLayoutId) {
LayoutInflater inflater =
(LayoutInflater) activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
// Inflate Navigation Drawer in activity
View view = inflater.inflate(resLayoutId, null, true);
drawer.addView(view, 0); // Where drawer is the DrawerLayout from navigation_drawer.xml
}
What exactly am I doing wrong with the toolbar?
Place the ListView into the LinearLayout after the include for the toolbar. That should bring everything in order.
I fixed it. I had to put the DrawerLayout and Toolbar inside a container such as a LinearLayout because DrawerLayout as the root hovers over (overlaps) other contents.
I changed my navigation_drawer.xml to this
<?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/root_navigation_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/toolbar"/>
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="me.jlurena.yougothw.activities.base.NavigationDrawer">
<ListView
android:id="#+id/nav_list"
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#ffeeeeee">
</ListView>
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
Related
If I set the order as seen in the picture --> Image
The DrawerLayout is drawn under the content_main
And the DrawerLayout dosen't get OnClickEvents
If I set The Order: first content_main then drawer_layout
The DrawerLayout is drawn over the content_main but the content_main doesn't get OnClick Events
Here my activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<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_below="#+id/toolbar"
android:clickable="true">
<!--The main content view-->
<!--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="#fff"
android:visibility="visible"/>
</android.support.v4.widget.DrawerLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar"
android:id="#+id/content_main"
android:focusable="false">
</RelativeLayout>
</RelativeLayout>
The Problem is only one of the layouts get OnClickEvents.
How do i do that both Layouts get OnClickEvents.
Sorry for my English.
You should put the content_main into the DrawerLayout as seen in the picture.
Picture
I recently came across something for placeholderview onClick. You have to keep the XML file in the correct layout as well else the onClick on the items wont work.
For example in my faulty layout I had
DrawerLayout ->
FrameLayout (for the side menu) ->
LinearLayout (including my UI).
The correct layout was DrawerLayout then LinearLayout and FrameLayout.
I spent a lot of time on a silly mistake. If anyone knows why that would be the case please reply back. Thank you.
I am currently redesigning my app to include a navigation drawer for navigating through the app. Currently, each screen is an activity and the way I have designed the home screen, is that it contains a toolbar and another xml file.
<?xml version="1.0" encoding="utf-8"?>
<Toolbar
android:layout_width="match_parent"
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay">
<ImageView
android:layout_width="#dimen/_30sdp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_95sdp"
android:src="#drawable/logo"
android:id="#+id/logo"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/sync_green"
android:id="#+id/sync_button"
android:layout_marginStart="#dimen/_75sdp"/>
</Toolbar>
<include layout="#layout/activity_main" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/run"
/>
Now, I have made another XML file for the navigation drawer:
<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"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- The main content view where fragments are loaded -->
<FrameLayout
android:id="#+id/flContent"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
<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:menu="#menu/activity_main_drawer" />
My dilemna is that since my toolbar is in the home.xml fragment, when I switch fragments, I will lose the toolbar. I want to keep the toolbar for all the views in the navigation drawer.
Also, in my java code, the setActionBar(toolbar) is throwing up an error saying cannot resolve method setActionBar.
One simple and straightforwrd solution for integrating NavigationDrawer along with Fragment in an Activity, is to design the activity_main.xml the following way :
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:layoutDirection="rtl"
tools:openDrawer="start">
<include
layout="#layout/content_act_main"
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"
android:background="#color/flat_white_light">
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
Now, in the content_act_main.xml you can have :
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/ToolbarColoredBackArrow"
app:popupTheme="#style/AppTheme.PopupOverlay" >
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
If you notice, in the conten_act_main.xml, there is a toolbar that will be available to all the content that are shown in the FrameLayout, and you can use this FrameLayout as the container of your Fragments.
You can of course maintain this toolbar, you need ActionBarDrawerToggle to bind the drawerLayout and Toolbar together.
Minimal configuration would be more or less :
ActionBarDrawerToggle actionBarDrawerToggle;
DrawerLayout drawerLayout;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
drawerLayout = (DrawerLayout) findViewById(R.id.navigation_drawer);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);
actionBarDrawerToggle = new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.app_name,R.string.app_name);
drawerLayout.setDrawerListener(actionBarDrawerToggle);
}
And you put the Toolbar in your base activity layout and other views wrapped in DrawerLayout.
<Android.support.v4.widget.DrawerLayout
xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:id="#+id/navigation_drawer"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:fitsSystemWindows="true">
<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"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
></Android.support.v7.widget.Toolbar>
....
....
</Android.support.v4.widget.DrawerLayout>
Try This in your activity
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setTitle("");
setSupportActionBar(toolbar);
This is my .xml file
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:paddingBottom="#dimen/design_navigation_separator_vertical_padding"
tools:openDrawer="start">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:orientation="vertical">
<include
android:id="#+id/toolbar"
layout="#layout/apptoolbar" />
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/nav_toolbar"
android:clickable="true">
</FrameLayout>
</RelativeLayout>
<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:background="#color/appColor"
android:fitsSystemWindows="true"
android:paddingBottom="#dimen/design_navigation_separator_vertical_padding"
app:itemTextAppearance="#style/NavigationDrawerStyle"
app:headerLayout="#layout/nav_header_home"
app:itemBackground="#color/appColor"
app:itemTextColor="#color/drawable_selector_drawer_item"
app:menu="#menu/activity_home_drawer" />
</android.support.v4.widget.DrawerLayout>
I'm trying to add a simple SearchView to the toolbar in my app. Everything it's working fine expect for the layout.
There is this "space" between the NavigationDrawer icon and the SearchView.
If I set a title the space is filled with that string, otherwise is empty.
Empty string:
With a string in title:
How do I remove that annoying empty space?
Edit:
I'm using as base code the NavigationDrawer example from Android Studio
main.xml
<menu 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=".MainActivity"
>
<item
android:id="#+id/action_search"
android:icon="#android:drawable/ic_menu_search"
android:title="Search"
app:actionViewClass="android.support.v7.widget.SearchView"
app:showAsAction="always" />
</menu>
app_bar_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:context="ga.musicforyou.musicforyou.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
/>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
activity_main.xml
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
app:theme="#style/ThemeOverlay.AppCompat.Dark"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:itemTextColor="#FFF"
app:itemIconTint="#FFF"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
Toolbar extends from FrameLayout and you can put views inside it. Like this:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primary_color">
<SearchView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.v7.widget.Toolbar>
Edit: You put it inside the layout as a menu. It always will be on the right side of the toolbar, because it is a menu. If you want to have a more direct control over views inside a toolbar, just put it there as I did show you.
I have set actionBar.setDisplayHomeAsUpEnabled(true) in code. So only adding SearchView in the toolbar didn't work for me and there is some extra space between Navigation Back and SearchView. I don't have Title in Toolbar. So I customized whole toolbar like this:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentTop="true" // If parent layout is RelativeLayout
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentInsetLeft="0dp" // This is important,
app:contentInsetStart="0dp" // Otherwise there will be extra space on Left Side
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:id="#+id/ivNavBack"
android:layout_width="56dp"
android:layout_height="56dp"
android:background="#drawable/your_drawable" // Custom background (optional), if you want to have a press effect
android:padding="16dp"
android:src="#drawable/ic_nav_back" /> // You can set icon of your choice here
<android.support.v7.widget.SearchView
android:id="#+id/searchView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:queryHint="#string/search_view_hint"
app:queryHint="#string/search_view_hint" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
...& in your Activity:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
SearchView searchView = (SearchView) toolbar.findViewById(R.id.searchView);
searchView.onActionViewExpanded(); // Expands searchView by default
// If this is not set, then you will see default search icon and you have to click it to expand SearchView.
Now no need to set actionBar.setDisplayHomeAsUpEnabled(true) in code. Just handle click event of ivNavBack for it.
I have the following MainActivity 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" >
<FrameLayout
android:id="#+id/fragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#EAEAEA" />
<LinearLayout
android:id="#+id/navigation_drawer"
android:layout_width="260dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#FFFFFF"
android:clickable="true"
android:orientation="vertical" >
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
The fragment I add on the FrameLayout contains a ListView. The problem is that I cannot drag the DrawerLayout from ListView, only if ListView is long enough to scroll (vertically).
Everything works well for the DrawerLayout, I have tried to open it using openDrawer and it works, I only can't open it by dragging from ListView. Is there any way to fix this?
everybody, I am new in Android development and I am trying to create an app with custom navigation drawer. I have a code:
<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"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<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>
<include layout="#layout/fragment_home" />
</LinearLayout>
<ListView
android:id="#+id/navigation_list_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"/>
</android.support.v4.widget.DrawerLayout>
And this code creates a navigation drawer perfectly fine. Although, when I provide a layout like this, my navigation drawer seems to take place in whole screen and doesn't react to any actions:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<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>
<include layout="#layout/fragment_home" />
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/navigation_menu_background" >
<include layout="#layout/navigation_menu_header" />
<ListView
android:id="#+id/navigation_list_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"/>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
My JAVA code is:
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close) {
#Override
public void onDrawerOpened(View drawerView) {
// TODO: Handle drawer open action here!
}
#Override
public void onDrawerClosed(View drawerView) {
// TODO: Handle drawer close action here!
}
};
drawer.setDrawerListener(toggle);
toggle.syncState();
// Sets up navigation view.
ListView navigationListView = (ListView) findViewById(R.id.navigation_list_view);
NavigationMenuListAdapter navigationMenuListAdapter = new NavigationMenuListAdapter(this);
navigationListView.setAdapter(navigationMenuListAdapter);
navigationListView.setOnItemClickListener(this);
Where could be a problem causing this issue? And why is that so?
The android:layout_gravity="start" attribute needs to be on the View that you're using for the drawer; in this case, the NavigationView.
You might also want to set the layout_width to "wrap_content", so the drawer doesn't cover more of the content than it should. NavigationView will measure itself out to an appropriate width, but if you were to use another View that doesn't, you might need to use an exact measure instead of wrapping; e.g., "240dp".
The reason it's taking up the whole screen is because you have "match_parent" specified as the height and width values- it's matching the size of the entire view, and therefore the entire screen.