Develop Reference

Android material components bottom app bar cut off

I have tried to implement the material components bottom app bar, following these guidelines and doing a refactor to AndroidX + updating my AppTheme.
Material components - bottom app bar
So far so good, all working, but the button is cut off in my fragment.
The xml preview however shows this, which seems like everything is fine:
Here is my xml code:
<androidx.coordinatorlayout.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">
<!-- Other components and views -->
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottombar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:elevation="2dp"
app:fabAlignmentMode="center"
app:fabCradleVerticalOffset="10dp"
app:fabCradleMargin="10dp" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|center_horizontal"
android:adjustViewBounds="true"
app:layout_anchor="#id/bottombar"
app:layout_anchorGravity="top|center"
app:srcCompat="#drawable/marker" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
I even increased the fabCradleMargin and the fabCradleOffset - otherwise the button is completely in the bottom and not at all floating in that half circle as it is supposed to...
anyone got any clues for this? Thanks a lot!

So I noticed it has to do with the height of the bottom app bar. If i manually set it to 80dp, the Fab shows as it is supposed to.
I tried around a bit more and noticed this manual height setting is only necessary in fragments. I only placed the bottom app bar in a fragment to test it anyways.
So now I implemented it the same way as in the guideline in my MainActivityand then set up a function showFab(Boolean enable) that can then be called in different fragments based on the need.
Works like a charm, if anyone faces the same issues. I guess this might be as it is not supposed to be implemented in a single fragment only.

Bottom Navigation View With Left Righ Space Issue

I am newbie in android, i am use bottom navigation view with two menus
but im getting left right space
Here is my Navigation View,
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:itemBackground="#color/colorRed"
app:itemIconTint="#color/colorWhite"
app:itemTextColor="#color/colorWhite"
app:menu="#menu/bottom_bar_menu"/>
Please check Image

According to Material design guidelines
You can't use two menus with bottom navigation use, instead of bottomNavigation view use tab layout
Check this link for guidlines https://material.io/guidelines/components/bottom-navigation.html#bottom-navigation-usage
Still, if you want to use bottom navigation view
Try This inside BottomNavigationView
android:background="#color/colorRed"

Solution
Inside BottomAppBar set attribute
android:padding="0dp"

If there are fewer than three destinations, consider using tabs instead.
In Bottom

Android - How to place fab-menu(from yavski library) between 2 layouts

I'm using floating action menu from yavski library and I tried to place it between 2 layout just like in this question:
But when I did it with fab - menu from yavski library, it did not work...
What should I do?
EDIT
I'm adding the button between header and "cardview"(link).
When I slide down in this and I use default library for fab, it works well (Button disappear and appear when slide up). But when I use the special one, it at start looks good, but when i slide down, instead of disappearing it slides down too...
And the last problem is, that when the button is clicked, it moves a bit upwards...

"A simple library marrying together FAB + ..."
I dont use this special library your mentioned but with the default one it works like this and if the guy that created the projected worked well it should too:
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/white">
//Content
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:onClick="process"
android:src="#drawable/ic_add"
app:layout_anchor="#id/ANCHOR_VIEW"
app:layout_anchorGravity="bottom|right|end"
app:backgroundTint="#color/accent"/>
</android.support.design.widget.CoordinatorLayout>

How do i make an action bar like this

Hi, i´m making an app and i want to add an activity just like the image above, and i´m having difficulties extendin the action bar, i´ve seen this on google design guidelines, how do i implement this on android lollipop(my min sdk is 21 i´m not interested in backwards compatibility)
thanks in advance.

It can be done by using Collapsing Toolbars which is provided in the android design support library and here is an example for knowing for using that library.

If you don't want a CollapsingToolbar , you can use a simple Toolbar using a custom minHeight.
Inside the Toolbar you can put your views, for example TextView or TextInputLayout.
Finally use a FloatingActionButton. It is important to set the attributes
app:layout_anchorand app:layout_anchorGravity
<android.support.design.widget.CoordinatorLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_main"
android:layout_width="match_parent"
android:layout_height="256dp"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ToolbarMainTheme" >
<android.support.design.widget.TextInputLayout>
<TextView>
</android.support.v7.widget.Toolbar>
<!-- your scrollable view here -->
<android.support.design.widget.FloatingActionButton
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:borderWidth="0dp"
app:elevation="4dp"
app:pressedTranslationZ="6dp"
android:layout_marginRight="#dimen/fab_margin_card"
android:src="#drawable/ic_youricon"
app:layout_anchor="#id/toolbar_main"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>

You just need to add an EditText and several TextViews (or wrap the EditText in a TextInputLayout) into the Toolbar in your layout xml.
https://gist.github.com/chris95x8/53214de145571d410e13

AppCompat v21 Toolbar changing logo size

I am migrating to the new Toolbar feature in appcompat v21 from the previous action bar. I still want to keep the logo on the top left part of the actionbar (toolbar). For doing I added in my layout the support toolbar and I created a new thene for it.
app:theme="#style/NewToolBarStyle"
I am adding the log programmatically as there is some logic in the app for this.
actionBar.setLogo(R.drawable.myicon);
Referring to my new style (empty for the moment):
<style name="NewToolBarStyle" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
</style>
However the result is showing an image the is too big for what I am looking for, and I am wondering how to reduce the size of the icon.
Is there any way (style, layout or programming) that I can reduce the logo size?

There is no logo icon in material design : http://www.google.com/design/spec/layout/structure.html#, so I suppose this is not well tested scenerio - or simply (broken) by design. You can add ImageView as a child widget of your toolbar and use it to show any image. It will show on the right of all the other internal widgets - like spinner - but list navigation mode is also deprecated.
If you insist on having logo then my workaround for this is to make sure toolbar is of fixed height - this takes care of wrong icon height. Even after that you will have to set setAdjustViewBounds to true on toolbars internal logo ImageView - otherwise it will create large left and right padding.
This is how my toolbar looks like (height set to ?attr/actionBarSize):
<?xml version="1.0" encoding="utf-8"?>
<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_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
reference it inside your activity layout using:
<include layout="#layout/toolbar_actionbar"/>
dont change layout_height in include.
The second step is to setAdjustViewBounds(true) on logo icon:
Drawable logo = getDrawable(iconRes);
toolbar.setLogo(logo);
for (int i = 0; i < toolbar.getChildCount(); i++) {
View child = toolbar.getChildAt(i);
if (child != null)
if (child.getClass() == ImageView.class) {
ImageView iv2 = (ImageView) child;
if ( iv2.getDrawable() == logo ) {
iv2.setAdjustViewBounds(true);
}
}
}

Following the suggestiong give by #brightstar I would like to develop further the answer.
The best way to control the size and position of the Logo in the new Toolbar is by actually not using it. The concept is completely different, what you need to do is create a toolbar from scratch. So you need to make a decision, either you use the layout given by the actionBar or include everything new including the title.
If you stop using the logo but you keep using the title you finally will see that the logo is over the title creating and ood situation.
So, an example of what to do is the following:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<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/my_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/action_bar_background"
app:theme="#style/NewToolBarStyle"
android:minHeight="?attr/actionBarSize" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/text_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="17dp"
android:textSize="20sp"
android:layout_toRightOf="#+id/logo_image"
android:text="#string/app_name"
android:textColor="#color/white" />
<ImageView
android:id="#+id/logo_image"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:scaleType="centerInside" />
</RelativeLayout>
</FrameLayout>
You create this file as my_toolbar.xml. Notice the following details:
I did not include an src of my ImageView because I am changing it dinamically. But works adding it.
I used a relative layout for being able to center the icon and the text.
I need still to include the Home button.
Later on as described by #brightstar you need to include in the top of your layouts by an include, however.... remember to add an id so that you can refere all your other Views to it.
<include layout="#layout/toolbar_sharemup"
android:id="#+id/including" />