Develop Reference

Can't understand the way BasicActivity project shows the layout it auto generated

I'm pretty new with Android. I'm trying the understand the look that is shown from the auto-generated xml code when creating Basic Activity project.
The files that are auto generated:
1.activity_main:
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<androidx.appcompat.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" />
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/content_main" />
<com.google.android.material.floatingactionbutton.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"
app:srcCompat="#android:drawable/ic_dialog_email" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
2.content_main:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".MainActivity"
tools:showIn="#layout/activity_main">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
The way i understand xml, i expected not to see the FloatingActionButton widget at all, because when including content_main , the root of the content_main xml has attributes android:layout_width="match_parent" and android:layout_height="match_parent", so this xml should take all the place that is left in the main_activity xml (after placing his first child: the Toolbar). Instead according to android designer it seems that the content_activity contains the FloatingActionButton, how is it possible? isn't it brother of content_activity and son of the root CoordinatorLayout?
attached a screen shot to emphasize the situation:

You should read about how 'CoordinatorLayout' View Work and the same concept of it is FrameLayout is support 'z-index' position .
so when the auto generate layout is overload is accept because the reason i mention it .
Try switch between :
<include layout="#layout/content_main" />
<com.google.android.material.floatingactionbutton.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"
app:srcCompat="#android:drawable/ic_dialog_email" />
to be show as :
<com.google.android.material.floatingactionbutton.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"
app:srcCompat="#android:drawable/ic_dialog_email" />
<include layout="#layout/content_main" />
if floationButton not show , that's mean it'w work in z-index .

Android Studio Design not correct

I have a weird issue where my design does not render correctly in my emulator? I have tried editting activity_main.xml and it only lets me place items in specific areas and no free move. content_main.xml allows me to free move items but they render completely different.
I am new to Android Studio and want to spend time learning it but I have met this hurdle.
Here is an example of what it looks like...
(Left - Android Studio, Right - Emulator)
Image Example
<?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"
tools:context="com.nathankent.design2.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>
<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"
app:srcCompat="#android:drawable/ic_dialog_email" />
<include layout="#layout/content_main"
android:id="#+id/include" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:text="Sign In"
app:layout_anchor="#+id/include"
app:layout_anchorGravity="top|left" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:text="Button"
app:layout_anchor="#+id/include"
app:layout_anchorGravity="center_vertical|center_horizontal" />
<EditText
android:id="#+id/editText3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textEmailAddress" />
</android.support.design.widget.CoordinatorLayout>

From your questions i can understand you're using new Android studio. So maybe it using constraints layout make sure you're giving constraints for both horizontal and vertical. Otherwise it'll display like this Constraints layout

Error String types not allowed (at 'src' with value 'drawable/ic_dialog_email')

i am new to this and this is the first project i have started and at very first time i am getting this error.
i havnt had any image added to it.its just first "hello world" one.
<?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"
tools:context="com.example.nehal.testandroid1.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
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/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_dialog_email" />
</android.support.design.widget.CoordinatorLayout>

<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/ic_dialog_email" />
In the above FAB Button,
Replace: android:src="drawable/ic_dialog_email"
With: android:src="#android:drawable/ic_dialog_email"
It will work.

Put # before drawable/ic_dialog_email like this
android:src="#drawable/ic_dialog_email"

Android floating action button hidden behind of bottom navigation bar

New to android programming & struggling with right now. I'm using android studio's default "Navigation Drawer Activity". On top of that, I've added a Bottom Bar from https://github.com/roughike/BottomBar. But, after adding that my FAB has hidden behind the Bottom Bar.
Here is the Scrrenshot -
I know it's some kind of style issue. I tried to give bottomMargin for FAB. But, it's not working.
Here is my code -
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="com.bhramaan.android.bhramaan.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/BhramaanTheme.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/BhramaanTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_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="#android:drawable/ic_dialog_email" />
<com.roughike.bottombar.BottomBar
android:id="#+id/bottomBar"
android:layout_width="match_parent"
android:layout_gravity="bottom|end"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
app:bb_behavior="shy"
android:background="#color/bottomBar"
app:bb_activeTabColor="#color/white"
app:bb_tabXmlResource="#xml/bottombar_tabs" />
</android.support.design.widget.CoordinatorLayout>
Need Some Guidance to solve this.

Add app:elevation="#dimen/text_margin" like this:
<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_dialog_email"
app:elevation="#dimen/text_margin" /><!--adding this line should resolve your problem-->

Here is a solution that works for our use case. Basically we wanted to hide bottom navigation view and the fab that belongs to it whenever the user scrolls in the screen.
For that purpose we have decided to use the app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior" that comes out of the box for BottomNavigationView. All that is left is to anchor the fab to the BottomNavigationView and use the same layout_behavior on fab, too.
Here is an example of it:
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context=".MainActivity">
<include layout="#layout/inc_app_bar"/>
<fragment
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/main_nav_host_fragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
android:name="androidx.navigation.fragment.NavHostFragment"
app:navGraph="#navigation/bottom_nav_graph"/>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/main_bottom_nav_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
style="#style/Theme.BottomNavigationView"
app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"
app:labelVisibilityMode="labeled"
android:background="?android:attr/windowBackground"
app:menu="#menu/bottom_nav_menu"/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/main_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="#id/main_bottom_nav_view"
app:layout_anchorGravity="top|end"
android:layout_marginBottom="#dimen/fab_margin_bottom"
android:layout_marginEnd="#dimen/fab_margin_end"
app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"
app:srcCompat="#drawable/ic_add_24px"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Other than that you can define your own layout_behavior for fab as explained in GitHub: BlogPosts / android-coordinatorlayout-scrolling-hide-fab-behavior.md too.
I hope that it helps :)

In advance I let other know this solution fits to my needs. I don't need fancy animations(which is ok, but not for my project requirements). What I did is to wrap the main content(FrameLayout), the FAB and the BottomNavigationView inside a RelativeLayout. Again, I think this could be done in a better way, so i'm open to suggestions.
<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:id="#+id/admin_appbar_layout"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:layout_width="fill_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentTop="true"
tools:elevation="4dp">
<!-- The toolbar -->
<android.support.v7.widget.Toolbar
android:id="#+id/admin_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/customActionBar"
app:theme="#style/customActionBar"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal">
<TextView
android:id="#+id/tv_toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/H2_bold"
android:text="#string/activity_admin_name"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize">
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottom_navigation_bar"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_add_new_item"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/ic_action_new"
android:layout_alignParentEnd="true"
android:layout_above="#+id/bottom_navigation_bar"
android:layout_margin="#dimen/fab_dimen"
tools:elevation="2dp"/>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:itemBackground="#color/black"
app:itemIconTint="#color/white"
app:itemTextColor="#color/white"
app:menu="#menu/admin_bottom_navigation_items"
tools:elevation="2dp"/>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
I know the question may seems old, but hope this helps to someone else.

Its just margin issue. Just try to implement this code in your coordinatorLayout
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginBottom="?attr/actionBarSize">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
style="#style/floating_action_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_add_plus" />
</FrameLayout>
And use this style in your style.xml file.
<style name="floating_action_button">
<item name="android:layout_marginBottom">16dp</item>
</style>
We're just doubling the margin. First BottomNavigationView, and Second the default margin of FAB.

Change your xml as this. Add some more properties to your Floating Action Button.
<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_gravity="bottom|end"
android:layout_marginBottom="70dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:src="#android:drawable/ic_dialog_email" />

AppBarLayout scrolling content below Toolbar

I'd like to have a content area below my Toolbar. Its behavior should be to scroll while scrolling up and to enter immediately while scrolling down. Toolbar should stay on its place without any scrolling.
My layout is like that:
<?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:id="#+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.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" />
<RelativeLayout
android:id="#+id/box_search"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
app:layout_scrollFlags="scroll|enterAlways">
<TextView
android:id="#+id/text_search_filter"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Line 1"
android:textColor="#FFF" />
<TextView
android:id="#+id/text_search_category"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/text_search_filter"
android:text="Line 2"
android:textColor="#FFF" />
<TextView
android:id="#+id/text_search_location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/text_search_category"
android:text="Line 3"
android:textColor="#FFF" />
</RelativeLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_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/ic_add_white_24dp" />
</android.support.design.widget.CoordinatorLayout>
If I put content area above Toolbar I am able to get the desired effect, but obviously it's in the wrong position.
If I put content area below Toolbar nothing scrolls...

If I put content area above Toolbar I am able to get the desired
effect, but obviously it's in the wrong position.
Of course it is in the wrong position since: http://www.google.com/design/spec/layout/structure.html#structure-app-bar
The app bar, formerly known as the action bar in Android, is a special
kind of toolbar that’s used for branding, navigation, search, and
actions.
So, you need to add a CollapsingToolbarLayout and the contents on it.
And:
I'd like to have a content area below my Toolbar. Its behavior should
be to scroll while scrolling up and to enter immediately while
scrolling down, Toolbar should stay on its place without any
scrolling.
To not to scrolling the Toolbar after adding that CollapsingToolbarLayout, you may want to add app:layout_collapseMode="pin" to that Toolbar.

Update:
Since my original suggestion did not work, another method to achieve the desired outcome would be to break out the Toolbar from the CoordinatorLayout. You can structure your layout XML as follows:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<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.CoordinatorLayout
android:id="#+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="#style/AppTheme.AppBarOverlay">
<RelativeLayout
android:id="#+id/box_search"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="16dp"
app:layout_scrollFlags="scroll|enterAlways">
<TextView
android:id="#+id/text_search_filter"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Line 1"
android:textColor="#FFF" />
<TextView
android:id="#+id/text_search_category"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/text_search_filter"
android:text="Line 2"
android:textColor="#FFF" />
<TextView
android:id="#+id/text_search_location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/text_search_category"
android:text="Line 3"
android:textColor="#FFF" />
</RelativeLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<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/ic_add_white_24dp" />
</android.support.design.widget.CoordinatorLayout>
</LinearLayout>
If it's still not working, you should consider not using the include statement as this might be the source of the issues. Rather, bring in the layout definition directly into this layout and place under a NestedScrollView (apply app:layout_behavior="#string/appbar_scrolling_view_behavior" to this NestedScrollView). If you need additional help, post the contents of your content_main layout XML in your OP.
Original Response:
Make sure you define the app:layout_behavior for your main content, which defines that the scrolling of the main content should affect the AppBarLayout. Specifically, try this:
<include layout="#layout/content_main"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />