Develop Reference

Toolbar appears on the bottom instead of top in android app

I am using a toolbar for my android app and disabled action bar . For main activity the toolbar comes correctly on the top but for app settings (which is a fragment) it appears on the bottom , any help on this
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:name="com.example.app.Settings$NewsPreferenceFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/toolbar"
tools:context="com.example.app.Settings">
<include xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
layout="#layout/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

Please check if you are using Linear Layout with gravity="bottom" or relativeLayout
Make sure the code resides something like this
The layout should ideally look like
<LinearLayout 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"
orientation="vertical">
<include xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
layout="#layout/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<fragment
android:name="com.example.app.Settings$NewsPreferenceFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.app.Settings">
</LinearLayout>

Why is my comman navigation darwerlayout and content.xml overlapping each other

Question: Why my common navigation drawer layout and content.xml is overlapping each other
I want to implement common navigation drawer for all the multiple activities by using include. I have created a separated XML file for navigation drawer and also include toolbar code inside it.
Navigation.xml
This the navigation part where we include toolbar and drawer code.so here we are implementing simple navigation code by using drawer layout and recycle view
<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/navigation_Drawerlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="#layout/navigation_drawerlayout" />
<android.support.design.widget.NavigationView
android:id="#+id/navigation_View"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include layout="#layout/navigation_headerview" />
<android.support.v7.widget.RecyclerView
android:visibility="gone"
android:id="#+id/navigationRecycleView"
android:layout_width="match_parent"
android:layout_height="wrap_content"></android.support.v7.widget.RecyclerView>
</LinearLayout>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
Toolbar.xml
this the common toolbar for all the activities.the most uses of it we can easily reuse the code.in which I've simply use CoordinatorLayout and AppBarLayout inside it use toolbar layout with a title.so that I can show toolbar title with a toolbar.
<?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.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:titleTextColor="#android:color/white">
<!-- Screen title -->
<TextView
android:id="#+id/toolbarTitle"
style="#style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text=""
android:textColor="#android:color/white"></TextView>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
contents.xml
this the content file where we define my code logic and implementation and also similar to all the activities which use the common navigation drawer
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
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:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".Activities.EventsActivity"
tools:showIn="#layout/toolbar"
>
<!-- Events -->
<include
layout="#layout/toolbar" />
<android.support.v7.widget.RecyclerView
android:layout_marginTop="55dp"
android:id="#+id/events_recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>

Adding floating action button with drawable layout is not visible in Android

I am developing an Android app. In my app, I am using drawer layout as main layout. There is a Frame Layout inside drawer layout for main content. main content is replaced with Fragment when an item form drawer is clicked. Fragment can contain listview, scroll,gridview or whatever.
What I want is a floating action button fixed at the right bottom of the screen. That must be in the main layout(DrawerLayout) because it will contain for all fragment replaced. I added a floating action button to main layout. But I cannot see it when I run my app.
This is the main layout 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"
android:id="#+id/main_drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- This LinearLayout represents the contents of the screen -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- The ActionBar displayed at the top -->
<include
layout="#layout/action_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<!-- The main content view where fragments are loaded -->
<FrameLayout
android:background="#color/whitesmoke"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.FloatingActionButton
android:layout_gravity="bottom|end"
android:id="#+id/fb_office_btn"
android:src="#android:drawable/ic_menu_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<!-- The navigation drawer that comes from the left -->
<!-- Note that `android:layout_gravity` needs to be set to 'start' -->
<android.support.design.widget.NavigationView
app:itemIconTint="#drawable/drawer_item"
app:itemTextColor="#drawable/drawer_item"
android:id="#+id/left_nv_view"
app:headerLayout="#layout/header_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start" />
</android.support.v4.widget.DrawerLayout>
This is the screenshot:
As you can see above, there is not floating action button. How can I fix it?
Edit
When I change LinearLayout to RelativeLayout, the gridview of main content are showing like below. Action bar is gone away.

Try to change your LinearLayout to RelativeLayout
<android.support.v4.widget.DrawerLayout
...
>
...
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<!-- The ActionBar displayed at the top -->
<include
android:id="#+id/actionBar" // Add this
layout="#layout/action_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<!-- The main content view where fragments are loaded -->
<FrameLayout
android:background="#color/whitesmoke"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/actionBar" // Add this
/>
<android.support.design.widget.FloatingActionButton
android:layout_alignParentRight="true" // Add this
android:layout_alignParentBottom="true" // Add this
android:id="#+id/fb_office_btn"
android:src="#android:drawable/ic_menu_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
...
</android.support.v4.widget.DrawerLayout>
OR you can follow the Android Studio design
activity_main.xml
<?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="start">
<include
layout="#layout/app_bar_main" // include app_bar_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"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer"/>
</android.support.v4.widget.DrawerLayout>
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=".ui.activities.MainActivity">
<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/content_main"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/feedback_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/ic_fab_feedback"/>
</android.support.design.widget.CoordinatorLayout>
Change the id of some component like your app.
Hope this help

How to get a border at the bottom of my toolbar?

I want to add a gray border at the bottom of my white toolbar so that it's distinctly separated from the main content. I'm setting up my toolbar like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:orientation="vertical"
android:id="#+id/pick_root_layout">
<android.support.v7.widget.Toolbar
android:id="#+id/pick_toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
app:theme="#style/Toolbar.White"
android:background="#color/white">
</android.support.v7.widget.Toolbar>
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipe_refresh_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/conversation_list">
</ListView>
</android.support.v4.widget.SwipeRefreshLayout>
</LinearLayout>
I need to add a small gray line at the bottom of the toolbar that also scrolls with it when I move. How can I do this? I'd like to avoid making a custom layout if possible.

If you are trying to add a drop shadow type effect that will stay attached to the toolbar an easy way to get this is to wrap your SwipeRefreshLayout with a FrameLayout and place a foreground on the FrameLayout.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:orientation="vertical"
android:id="#+id/pick_root_layout">
<android.support.v7.widget.Toolbar
android:id="#+id/pick_toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
app:theme="#style/Toolbar.White"
android:background="#color/white"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:foreground="#drawable/bottom_shadow">
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipe_refresh_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/conversation_list" />
</android.support.v4.widget.SwipeRefreshLayout>
</FrameLayout>
</LinearLayout>
Shadow 9 patch ->

Appcompat Toolbar Not Showing With Navigation Drawer

I am trying to configure the following in my app:
Toolbar (Appcompat v7 version)
Navigation Drawer
Pre-Lollipop Appcompat v7 Material theme
I followed the instructions here: http://android-developers.blogspot.com/2014/10/appcompat-v21-material-design-for-pre.html
However, after declaring .NoActionBar in the theme, as well as putting the toolbar in the layout, my toolbar does not show. What I end up getting is exactly what you'd expect when declaring no action bar -- no action bar. Here is the 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"
android:orientation="vertical"
tools:context=".MainActivity">
<!-- Toolbar -->
<include layout="#layout/toolbar"/>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/layout_main"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<Spinner
android:id="#+id/spinner_main"
android:visibility="gone"
android:textAlignment="center"
android:gravity="center"
android:layout_gravity="center_horizontal"
android:entries="#array/error_loading_content_array"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<FrameLayout
android:id="#+id/container"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0px"></FrameLayout>
</LinearLayout>
<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"/>
Toolbar.xml:
<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.Dark.ActionBar"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
In MainActivity.java:
// Load view/layout
setContentView(R.layout.guidelib_activity_main);
// TODO: Toolbar not showing
mToolbar = (Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);
Solution
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/linearlayout_root_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<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
android:id="#+id/layout_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- Toolbar -->
<!-- Moved up to new LinearLayout root tag -->
<!--<include layout="#layout/toolbar"/>-->
...

DrawerLayout extends FrameLayout, but you are treating it like a LinearLayout. You can either wrap your tag and the following LinearLayout in another LinearLayout, or you can move your tag.
Also, "fill_parent" is deprecated and maps to "match_parent" so you should just use the latter. You can also remove the additional xmlns attributes in your LinearLayout element.
<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
android:id="#+id/layout_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- Toolbar -->
<include layout="#layout/toolbar"/>
...
Your original layout did not work because the Toolbar was hidden (z-ordered) behind the LinearLayout.