Develop Reference

Getting a Floating Action button between two layouts which already has elevation

<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:layout_width="130dp"
android:layout_height="130dp"
app:cardCornerRadius="65dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="-105dp"
android:clipChildren="true"
app:cardElevation="10dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/pic"
android:scaleType="centerCrop"/>
</android.support.v7.widget.CardView>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Raven Starfire"
android:textColor="#FFFFFF"
android:gravity="center_horizontal"
android:layout_marginTop="155dp"
android:textAppearance="?android:textAppearanceLarge"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Bran, Romania"
android:textColor="#FFFFFF"
android:gravity="center_horizontal"
android:layout_marginTop="180dp"
android:textAppearance="?android:textAppearanceSmall"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#90A4AE"
android:layout_gravity="bottom"
android:orientation="vertical"
android:id="#+id/bottomTopCard"
android:elevation="19dp"></LinearLayout>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="#id/bottomTopCard"
app:layout_anchorGravity="top|right"
android:layout_marginRight="16dp"/>
</android.support.design.widget.CoordinatorLayout>
Well, I need to bring the Floating Action button above the linear layout(lighter shade of ash) at the bottom of the Coordinator Layout. I set the anchor to top right end of the Linear layout(which works fine), but the FAB seems to have gone below it.
I suppose that the Coordinator layout does not work like the FrameLayout/CardView. Giving elevation doesn't bring the FAB above the Linear layout either.
Any suggestion about bringing the FAB Above that linear layout would be helpful.
Thank you for the answer. The layout turned out like this now,

Set the Floating Action button elevation from the app namespace not android:
app:elevation="20dp"
not:
android:elevation="20dp"
By the way, android material design recommends that the FAB be at 6dp elevation
https://material.google.com/material-design/elevation-shadows.html

Android - Padding/Gap on the left of toolbar's child layout

I'm stuck with an issue and I have browsed the entire internet for a solution but nothing is working for me.
I have added an imageview inside my toolbar but it's slightly towards the right. It doesn't align centrally, it's shifted a bit towards the right. When i align the imageview to the left, there's an unknown padding/gap between the imageview and the left side of the toolbar. Following is my XML code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<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=".NavigationDrawerHomeScreen.BaseActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
app:elevation="0dp">
<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_home_activity"
android:layout_width="match_parent"
android:layout_height="45dp"
android:contentInsetLeft="0dp"
android:contentInsetStart="0dp"
android:contentInsetStartWithNavigation="0dp"
android:minHeight="?attr/actionBarSize"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/logo_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/fixer_title_thick" />
</RelativeLayout>
<android.support.v7.widget.SearchView
android:id="#+id/search_home"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:showAsAction="ifRoom"
android:visibility="gone">
</android.support.v7.widget.SearchView>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/container_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/home_bg" />
</FrameLayout>
<!--<TextView-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content"-->
<!--android:layout_centerInParent="true"-->
<!--android:text="this is base" />-->
</android.support.design.widget.CoordinatorLayout>
</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="#2A2929"
android:backgroundTint="#2A2929"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_home_customer"
app:itemTextAppearance="#style/NavDrawerTextStyle"
app:itemTextColor="#fff"
app:menu="#menu/activity_home_customer_drawer">
<LinearLayout
android:id="#+id/footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:clickable="true"
android:orientation="vertical">
<!-- any addition stuff you want in yoour footer layout -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="50dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Set Search Radius"
android:textColor="#color/white" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:clipChildren="false">
<com.crystal.crystalrangeseekbar.widgets.CrystalSeekbar
android:id="#+id/rangeSeekbar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:bar_color="#color/blue"
app:left_thumb_color="#color/blue_dark" />
<TextView
android:id="#+id/textMin1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/rangeSeekbar1"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_marginTop="5dp"
android:text="0"
android:textColor="#color/white"
android:textSize="16dp" />
<TextView
android:id="#+id/textMax1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#id/rangeSeekbar1"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="5dp"
android:text="100"
android:textColor="#color/white"
android:textSize="16dp" />
</RelativeLayout>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#1E88E5">
<TextView
android:id="#+id/logout_footer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginBottom="20dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:drawableLeft="#drawable/ic_logout_white_24dp"
android:drawablePadding="32dp"
android:text="Logout"
android:textColor="#fff"
android:textSize="18sp" />
</RelativeLayout>
</LinearLayout>
</android.support.design.widget.NavigationView>
The app:contentinset/android:contentinset solution works for some people but it doesnt work for me.
here's the image http://imgur.com/a/Vp2g6.

I had this same problem, and I tried a lot of things like setting
app:contentInsetStart ="0dp" ;
app:contentInsetStartWithNavigation = "0dp" ;
It didn't work. I even set them to a negative value, but it didn't work. I tried adding a right margin to my child view but it reduced the visible size of child view instead of occupying that left space. So probably child views are not allowed in this space.
So after spending some time I figured there are 2 ways to workaround this problem, one is preferred other I'd not prefer. First let me tell you the one I do not prefer:
Custom Implementation of the Up button: This problem only arises when in your Java Class for this layout you set this toolbar as your ActionBar and you
setDisplayHomeAsUpEnabled(true);
Without this command this problem doesn't exist. So if you don't use the default back button and implement one your own by putting an imageView and providing onClick implementation, this should work fine.
Make ChildViews as rather Siblings: The other method is using the property of toolbar of it being just another view.
I prefer this method because by using this method you can use the android's default up button. The only thing you need to do is - instead of defining child views inside the toolbar, make the child view and toolbar as siblings in a Linear or Relative Layout. This way you can reduce the left space only to "wrap_content" of the toolbar and utilise the left space in other child views. In my app, I even had an onClick functionality on the toolbar which can now be done by giving that functionality on the parent of both the layouts i.e. set the onClick on the LinearLayout.
Though I still don't know the exact reason why the left space exists or is there a way to disable it, but this is a pretty clean method to work around this.

View not centered in fragment in ViewPager and RecyclerView Hidden by Toolbar

I have a ViewPager integrated with a TabLayout that displays 4 fragments (4 tabs). Each of those fragments are RecyclerViews that display lists of items. The number of items in each list is generated by a given date but sometimes there will be no items displayed. When this happens I switch to another fragment that displays in a TextView "No Games Scheduled".
The problem is that text is not centered in the screen. It is positioned kind of in the center but towards the bottom. I believe it has to do with my ViewPager attribute in XML where I set it to app:layout_behavior="#string/appbar_scrolling_view_behavior" (Note: this line is not displayed in posted code. I explain later.)
When I click on the xml code for the ViewPager, in the preview screen, (in Android Studio) the blue section that lights up is extended below the screen. So I know it has to do with that. When I remove that line of code the blue section fits the screen. As a test, I set the TextView displaying "No Games Scheduled" layout_gravity to center|bottom and when I ran the app, the text was not showing on screen. So I know it's being hidden by that line of code in the ViewPager. But I need it because I want the toolbar to hide when scrolling down and show when I scroll up.
I then tried removing app:layout_behavior="#string/appbar_scrolling_view_behavior" from the ViewPager and placed it in each of the fragments. It works but now the top of each fragment is being covered by the Toolbar and the Tabs like this (not my program, because I'm not allowed to show the UI, but it shows my exact problem):
How can I fix this? Thanks for any help!
main_activity.xml:
<android.support.v4.widget.DrawerLayout
android:id="#+id/nav_drawer"
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.CoordinatorLayout
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:fitsSystemWindows="true">
<include layout="#layout/toolbar"/>
<android.support.design.widget.TabLayout
android:id="#+id/main_activity_tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/light_black"/>
<LinearLayout
android:id="#+id/league_and_date_title_view"
android:layout_width="match_parent"
android:layout_height="34dp"
android:background="#color/gray"
android:orientation="horizontal"
android:paddingEnd="0dp"
android:paddingLeft="4dp"
android:paddingRight="0dp"
android:paddingStart="4dp"
android:weightSum="1">
<TextView
android:id="#+id/league_title_header"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center|start"
android:paddingEnd="0dp"
android:paddingLeft="5dp"
android:paddingRight="0dp"
android:paddingStart="5dp"
android:textSize="14sp"
android:textColor="#color/green"
tools:text="League"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center|end"
android:orientation="horizontal">
<ImageButton
android:id="#+id/previous_date_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?attr/selectableItemBackgroundBorderless"
android:contentDescription="#string/prev_date_button"
android:src="#drawable/previous_arrow"/>
<TextView
android:id="#+id/display_date_text_view"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="?attr/selectableItemBackgroundBorderless"
android:gravity="center"
android:textColor="#color/outnix_orange"
android:textSize="14sp"
tools:text="Date Goes Here"/>
<ImageButton
android:id="#+id/next_date_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?attr/selectableItemBackgroundBorderless"
android:contentDescription="#string/next_date_button"
android:src="#drawable/next_arrow"/>
</LinearLayout>
</LinearLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/main_activity_view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<ProgressBar
android:id="#+id/loading_circle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="true"/>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
<fragment
android:id="#+id/fragment_nav_drawer"
android:layout_width="120dp"
android:layout_height="match_parent"
android:layout_gravity="start"
app:layout="#layout/fragment_nav_drawer"
tools:layout="#layout/fragment_nav_drawer"/>
</android.support.v4.widget.DrawerLayout>
One of the fragment's layout:
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipe_refresh"
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.RecyclerView
android:id="#+id/all_games_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/light_black"
android:paddingBottom="8dp"
android:scrollbars="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</android.support.v7.widget.RecyclerView>
</android.support.v4.widget.SwipeRefreshLayout>
Fragment I switch to when no items are in the RecyclerView:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/light_black">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="#string/no_games"
android:textColor="#color/white"
android:textSize="18sp"/>
</RelativeLayout>

Android toolbar Layout issue

I am trying to make a bottom bar using the toolbar and aligning it to the parent bottom. This is how it looks:
But somehow as mentioned in the image, their is a lot of empty space due to which the layout is not exactly centered. Why is that happening?
bottom_tool_bar.xml
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/ColorPrimaryLight"
android:elevation="4dp"
android:layout_alignParentBottom="true"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="#+id/origin_select"
android:src="#mipmap/ic_action_play"
android:background="#drawable/feedback_background"
android:onClick="choose_origin_button"
/>
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="#+id/destination_select_select"
android:src="#mipmap/ic_action_stop"
android:background="#drawable/feedback_background"
android:onClick="choose_destination_button"/>
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="#+id/poi_select"
android:src="#mipmap/ic_action_pause"
android:background="#drawable/feedback_background"
android:onClick="choose_interest_button"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
The layout file for the concerned activity:
<include
android:id="#+id/tool_bar"
layout="#layout/tool_bar"
>
</include>
<include
android:id="#+id/bottom_tool_bar"
layout="#layout/bottom_tool_bar">
</include>
<fragment
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/plot_path_map"
android:layout_below="#+id/tool_bar"
android:layout_above="#+id/bottom_tool_bar"
android:name="com.google.android.gms.maps.MapFragment"
/>
<Button
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/submit_button"
android:text="Submit"
android:textColor="#FFFFFF"
android:layout_centerHorizontal="true"
android:background="#drawable/feedback_background"
android:layout_centerVertical="true"
android:textSize="20sp"
android:layout_alignParentBottom="true"
android:visibility="invisible"
android:onClick="submit_button_click"
/>
</RelativeLayout>

If you want to place the toolbar at the bottom, this is what you should be doing.
Use a LinearLayout with alignParentBottom="true"
<RelativeLayout
android:id="#+id/mainLyt"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<!-- Some layout things -->
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/bottomBar">
<!-- some scrolling content -->
</ScrollView>
<LinearLayout
android:id="#+id/bottomBar"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:orientation="horizontal"
android:layout_alignParentBottom="true">
<!-- Some Buttons -->
</LinearLayout>
</RelativeLayout>
As you mentioned about spacing, which I believe is another question, you can modify it by using the following attributes inside your ToolBar.
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"

Make a separate layout file and name it tool_bar.xml and make sure LinearLayout is your root layout.
Then in your activity type this:
<include
android:id="#+id/tool_bar"
layout="#layout/tool_bar"
></include>
Then give weight of 0.3 to all your ImageViews and layout:width and layout:height as wrap_content

Use below line to avoid left side gap in activity class.
mToolbar.setContentInsetsAbsolute(0, 0);
Look below code for avoid top and bottom space.
<ImageView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/origin_select"
android:src="#mipmap/ic_action_play"
android:background="#drawable/feedback_background"
android:onClick="choose_origin_button"
/>
In your image view width should be a wrap_content and height should be 0dp

For centering the Views you have many options two are the following (I believe the second is best):
First include weigthsum in your linearlayout, I like to use 100 since this helps me think in percentage, then include 2 stump framelayout in order to push your imageviews to the horizontal center and to let them keep responsive properties by using weight like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="100"
android:orientation="horizontal"
>
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="30"/>
<ImageView
android:id="#+id/origin_select"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="13"
android:background="#drawable/feedback_background"
android:onClick="choose_origin_button"
android:src="#mipmap/ic_action_play"
/>
<ImageView
android:id="#+id/destination_select_select"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="13"
android:background="#drawable/feedback_background"
android:onClick="choose_destination_button"
android:src="#mipmap/ic_action_stop"/>
<ImageView
android:id="#+id/poi_select"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="13"
android:background="#drawable/feedback_background"
android:onClick="choose_interest_button"
android:src="#mipmap/ic_action_pause"/>
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="30"/>
</LinearLayout>
As you can see both framelayout have nothing inside but they help you push your other ImageViews to the center they both give you 60% of space used and leave you just another 40% for your ImageViews thus they have each 13%.
On the other hand you can use a RelativeLayout as your parent element instead of LinearLayout and position Imageview with id: destination_select_select align center to parent both horizontal and vertical and then position the other two imageviews at the side of the one centered in the middle. This option might be the best:
Like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:id="#+id/origin_select"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#drawable/feedback_background"
android:onClick="choose_origin_button"
android:src="#mipmap/ic_action_play"
android:layout_alignLeft="#+id/destination_select_select"
/>
<ImageView
android:id="#+id/destination_select_select"
android:layout_width="wrap_content"
android:layout_centerInParent="true"
android:layout_height="match_parent"
android:background="#drawable/feedback_background"
android:onClick="choose_destination_button"
android:src="#mipmap/ic_action_stop"/>
<ImageView
android:id="#+id/poi_select"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignRight="#+id/destination_select_select"
android:background="#drawable/feedback_background"
android:onClick="choose_interest_button"
android:src="#mipmap/ic_action_pause"/>
</RelativeLayout>

To avoid top and bottom spaces,
Add this line
android:minHeight="0dp"
to the <android.support.v7.widget.Toolbar> properties.

Android Toolbar layout is horizontal

I'm trying to use a couple views within a support.v7.widget.Toolbar, but it looks like they're all placed as if in a horizontal LinearLayout. I'm looking to create something more like this where the EditText ends past the overflow menu, rather than where the overflow menu begins. Here's my currently layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="true"
android:focusableInTouchMode="true"
android:orientation="vertical"
tools:context=".MainActivity"
tools:ignore="MergeRootFrame">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="250sp"
android:background="#color/primary"
android:gravity="bottom"
android:minHeight="?attr/actionBarSize">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/button_id"
android:layout_width="40sp"
android:layout_height="40sp"
android:layout_gravity="center" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/url"
android:textColor="#color/accent"
android:textSize="16sp" />
<EditText
android:id="#+id/url_text_field_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textNoSuggestions"
android:maxLines="1" />
<TextView
android:id="#+id/output_text_view_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/initial_output_text_id"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.Toolbar>
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
Here's a screenshot. You can see the views are in line with the share button and overflow menu. The title is also hidden on the left hand side by the views. How would I have a second row for my views in the Toolbar so they span the width of the page? Hopefully, I'm just missing something small, as I'm new to Android. Thanks in advance for the help.

You could, probably, put a vertical LinearLayout into your Toolbar