Develop Reference

Floating Action Button is translucent for some reason

I have two Floating Action Buttons in my layout, but for some reason, the two buttons are semi-transparent.
I was wondering how to make the buttons solid? Here's the source code for the layout file:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:orientation="vertical">
<android.support.design.widget.FloatingActionButton
android:id="#+id/add_assignment_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:src="#drawable/ic_add_white_24dp"
app:useCompatPadding="true" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/start_session_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|end"
android:src="#drawable/ic_play_arrow_white_24dp"
app:layout_anchor="#id/add_assignment_button"
app:layout_anchorGravity="top"
app:useCompatPadding="true"></android.support.design.widget.FloatingActionButton>
</LinearLayout>
<ListView
android:id="#+id/android:list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
</ListView>
</android.support.design.widget.CoordinatorLayout>

Floating Action Button is translucent for some reason
Move your FloatingActionButton outside linear layout also no need to use of LinearLayout
make your layout like below
SAMPLE CODE
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="#+id/android:list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
</ListView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/add_assignment_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="20dp"
android:src="#drawable/ic_menu_send"
app:useCompatPadding="true" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/start_session_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|end"
android:src="#drawable/ic_menu_send"
app:layout_anchor="#id/add_assignment_button"
app:layout_anchorGravity="top"
app:useCompatPadding="true" />
</android.support.design.widget.CoordinatorLayout>
OUTPUT

Your buttons are not actually translucent, but the listview is above them.
This is because you have placed the listview after the buttons in sequence in your xml and hence the list is drawn over your buttons.
Simple reverse the order of declaration in your xml and the issue will be resolved.

FAB not positioning inside CoordinatorLayout with RecyclerView

I am trying to display a list of items with a FAB to add a new item. The current screen is as below.
I have a CoordinatorLayout which has only a RecyclerView and the FAB. My problem is the FAB is not getting anchored to the bottom of the page, but to the bottom of the RecyclerView whose height seems to behave as if its wrap_content, but I've declared as match_parent. The RecylerView has a silver background for illustrative purposes.
<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"
tools:context="com.ae.apps.tripmeter.fragments.expenses.TripsListFragment">
<android.support.v7.widget.RecyclerView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:background="#color/silver"
android:layout_margin="#dimen/activity_horizontal_margin"
app:layoutManager="LinearLayoutManager"
tools:listitem="#layout/fragment_trip"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_input_add"
app:elevation="8dp"/>
I can't figure out why I am not able to position the FAB at the bottom of the page.

Try putting the RecyclerView in a 'content' layout file and add it to the main layout via
<include layout="#layout/content_recyclerview" />
EDIT:
The FAB should not be placed in the Fragment if it is to reside at the bottom of the Activity. Remove the FAB from the fragment and add it to the main activity. Like this:
<?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="com.your_company.your_project">
<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>
<-- ref. your recycler here -->
<include layout="#layout/content_with_your_list"/>
<-- Put the FAB here -->
<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="#android:drawable/ic_input_add"
/>
</android.support.design.widget.CoordinatorLayout>
Now in your fragment remove the FAB! It should reside in your main activity with the CoordinateLayout. Use a simple LinearLayout in your fragment.
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_your_main_activity"
>
<android.support.v7.widget.RecyclerView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/silver"
android:layout_margin="#dimen/activity_horizontal_margin"
app:layoutManager="LinearLayoutManager"/>
</LinearLayout>
You will need to make changes were appropriate in order to fit you your project.
Toggle FAB visibility
In order to toggle the visibility of the FAB add the following property to the FloatingActionButton in your Parent Activity.
android:visibility="gone"
and make it visible in code with:
mFab.setVisibility(View.VISIBLE);
or invisible, again with
mFab.setVisibility(View.GONE);
Whenever you need, eg. when a fragment is displayed or removed.

You probably want something like this?
Example
<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.v7.widget.RecyclerView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_gravity="bottom|end"
android:src="#android:drawable/ic_input_add"
android:layout_margin="8dp"
app:elevation="8dp"/>
If you want to have some layout under fab, you should use relative layout as root layout. And put my code in this relative layout.

I use the following to anchor the fab at bottom of the recyclerView and it gives me my desired output. Try with this..
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.v7.widget.RecyclerView>
<android.support.design.widget.FloatingActionButton
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_margin="16sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>

Can't place Floating Action Button (FAB) between header and items in DrawerLayout using RecyclerView

I can't get the Floating Action Button (FAB) to appear in the correct position. I want it to appear between the header and the first item in my nav drawer.
Currently, I've got it to appear in the bottom right corner of the header and NOT on top of the line between the 1st and 2nd elements (1st element = header & 2nd element = first item in recyclerview).
My app is using the following appcompat items:
appcompat-v7:23.0.0
recyclerview-v7:23.0.0
design:23.0.0
I'm using a nav drawer but I can't use the NavigationView because I need to customize the item entries and not load a simple menu.
As you know, the drawer is really not 2 different controls. The header is actually the '0' element in the RecyclerView. I don't know if this makes a difference.
Here is my current xml for the header/"0 view in RecyclerView":
<?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"
android:layout_width="match_parent"
android:layout_height="#dimen/navdrawer_image_height">
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/navDrawerHeaderView"
android:layout_width="match_parent"
android:layout_height="#dimen/navdrawer_image_height">
<ImageView
android:id="#+id/navdrawer_image"
android:layout_width="wrap_content"
android:layout_height="#dimen/navdrawer_image_height"
android:contentDescription="#string/cd_navdrawer_image"
android:scaleType="centerCrop"
android:src="#drawable/bg_material_design" />
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/app_image"
android:layout_width="#dimen/navdrawer_user_picture_size"
android:layout_height="#dimen/navdrawer_user_picture_size"
android:src="#drawable/ic_launcher"
android:layout_marginTop="16dp"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
app:border_width="2dp"
app:border_color="#FF000000"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/appNameTextView"
android:text="App Name"
android:textStyle="bold"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_marginBottom="16dp"
android:layout_alignParentBottom="true"
android:textColor="#android:color/white"/>
</RelativeLayout>
<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:src="#drawable/button_account"
app:layout_anchor="#id/navDrawerHeaderView"
app:layout_anchorGravity="bottom|right|end"
app:elevation="4dp"/>
</android.support.design.widget.CoordinatorLayout>
I think I might have the FAB in the wrong location/file. Here is the xml for the drawer.
<?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/drawerLayout"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true">
<!-- Content layout -->
<LinearLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical">
<include
android:id="#+id/toolbar"
layout="#layout/tool_bar"/>
<FrameLayout
android:id="#+id/contentFrame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/init_background">
</FrameLayout>
</LinearLayout>
<!-- Pages -->
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="320dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="#ffffff"
android:scrollbars="vertical"
android:clickable="true"
android:focusable="true"
android:focusableInTouchMode="true">
</android.support.v7.widget.RecyclerView>
</android.support.v4.widget.DrawerLayout>
HELP!!!!!

example drawer fragment layout containing your existing RecyclerView:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="200dp">
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f00"
android:id="#+id/header"/>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:scrollbars="vertical"
android:clickable="true"
android:focusable="true"
android:focusableInTouchMode="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|right|end"
android:layout_margin="5dp"
android:clickable="true"/>
</android.support.design.widget.CoordinatorLayout>

Using Floating Action Button With Tabs

I am using floating action button with slidingtablayout, but when i use fab in fragments every tab will have its own fab, and transition looks bad like this video from google design
http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsNVRkV3FZMktvMWc/components-buttons-fab-behavior_06_xhdpi_009.webm
When i use fab in the viewpager it shrinks fragments like in the link
https://drive.google.com/file/d/0By6vpKpg_w4tcEJQUUlRazd0VEk/view?usp=sharing
Here is my code activity_main.xml
<LinearLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<com.smooth.www.smooth.SlidingTabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="2dp"
android:background="#color/ColorPrimary"/>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_weight="1"
/>
</LinearLayout>
and one of my tabs
<android.support.design.widget.CoordinatorLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#f0f0f0"
>
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/tab_main_swipe_refresh_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<android.support.v7.widget.RecyclerView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:id="#+id/main_recycler"
/>
</android.support.v4.widget.SwipeRefreshLayout>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:fabSize="normal"
android:id="#+id/main_fab"
android:layout_gravity="bottom|right"
android:layout_margin="16dp"
android:transitionName="#string/fab_transition_name"
android:src="#drawable/fab_image"
app:layout_anchor="#id/main_recycler"
app:layout_anchorGravity="bottom|right|end"
/>
</android.support.design.widget.CoordinatorLayout>
what can i do to for transitions to look good??

Looks like you ar using a LinearLayout or something, instead of RelativeLayout. Can you post code snippets?

Bottom navigation bar hides on trying scroll

I have Activity with bottom navigation bar (via roughike BottomBar library). It's look like this:
When i'm trying to scroll page, bottom bar hides automatically. So, I get this:
I want avoid this effect. I do not want hide bottom bar when I'm just trying to scroll content but all content lies on screen.
But if page contains content more than one screen then bottom bar must hides on scroll (and now it's works fine).
My code doesn't have any listeners for scroll and my xml file looks like this:
<android.support.design.widget.CoordinatorLayout
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"
tools:context=".presentation.ui.mainactivity.MainActivity"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/mainCord" >
<android.support.design.widget.AppBarLayout
android:id="#+id/sliderContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:background="#color/primary"
android:theme="#style/ToolbarStyle"
app:titleTextAppearance="#style/ToolbarStyle" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:visibility="gone" />
<com.roughike.bottombar.BottomBar
android:id="#+id/bottomBar"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_gravity="bottom"
app:bb_tabXmlResource="#xml/bottom_bar_tabs"
app:bb_activeTabColor="#color/white"
app:bb_inActiveTabColor="#color/bottom_bar_inactive_tab"
app:bb_inActiveTabAlpha="1"
app:bb_behavior="shy|shifting" />
</android.support.design.widget.CoordinatorLayout>
I'm looked for solution for my problem but found nothing. What can i do for avoid this effect?
UPDATED:
FAB is inside ViewPager. Layout for tab on screenshot look like this:
<?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"
android:id="#+id/eventCoordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/refresh"
android:visibility="visible"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v7.widget.RecyclerView
android:id="#+id/eventsRecyclerView"
android:scrollbars="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.SwipeRefreshLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity = "center"
android:gravity="center" >
<TextView
android:id="#+id/emptyText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/secondary_text"
android:textSize="16sp"
android:gravity="center"
android:text="#string/empty_events_text"
android:drawableTop="#drawable/ic_no_calendar"
android:drawablePadding="4dp"
android:visibility="gone" />
<TextView
android:id="#+id/createEventText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/create_event_text"
android:textColor="#color/secondary_text"
android:textSize="16sp"
android:visibility="gone" />
<TextView
android:id="#+id/createEventButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/primary"
android:text="#string/create_event"
android:textSize="16sp"
android:visibility="gone" />
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/createEvent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:src="#drawable/ic_add_white_24dp"
style="#style/floating_action_button"
app:layout_anchor="#id/eventsRecyclerView"
app:layout_anchorGravity="bottom|end"
app:borderWidth="0dp"
app:elevation="6dp"
app:pressedTranslationZ="12dp" />
<RelativeLayout
android:id="#+id/loadingPanel"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center" >
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:indeterminate="true" />
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

app:bb_behavior="underNavbar"
You have an issue in the following code
<com.roughike.bottombar.BottomBar
android:id="#+id/bottomBar"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_gravity="bottom"
app:bb_tabXmlResource="#xml/bottom_bar_tabs"
app:bb_activeTabColor="#color/white"
app:bb_inActiveTabColor="#color/bottom_bar_inactive_tab"
app:bb_inActiveTabAlpha="1"
app:bb_behavior="shy|shifting" />
replace the
app:bb_behavior="shy|shifting"
with
app:bb_behavior="underNavbar"
Hope this works for you!

Check your manifest FILE and make sure you're not using full screen theme...However, you can use the following code to hide and show the bar on android higher than API 19. To hide the bar, just change VISIBLE to GONE, and make sure you call the showNavBar() method in both your onCreate() and onResume() method
public void showNavBar() {
View view = getWindow().getDecorView();
view.setSystemUiVisibility(View.VISIBLE);
}

I had the same issue, I fixed it by doing this:
In activity_main.xml add this to the CoordinatorLayout:
android:fitsSystemWindows="true"
The viewpager should be like this:
<android.support.v4.view.ViewPager
android:background="#color/colorPrimary"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
And in all your Fragments, they should start with NestedScrollView and must contain (fillViewport):
<android.support.v4.widget.NestedScrollView 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/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
tools:context="com.khan.junaid.phonefans.MainActivity">
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/fans_list_view"
/>
</android.support.v4.widget.NestedScrollView>
These settings will make the fragments scrollable, and the content will no more be hiding behind the Navigation bar buttons.