Develop Reference

FragmentLayout overlapping content

The FraglemtLayout bar is overlapping the content of the page.
i.e. My TabLayout is overlapping the main content of the page.
This is MainActivity layout
<?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/lib/com.example.feelingoodlivinbeta.socialdreams_a1.MainMenuActivity"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.example.feelingoodlivinbeta.socialdreams_a1.MainMenuActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
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:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" >
</android.support.v4.view.ViewPager>
</android.support.design.widget.CoordinatorLayout>
This is model layout contains cardview; I don't know where the problem is located
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="250dp"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_below="#id/fragmantRecycler">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:orientation="horizontal"
android:weightSum="1">
<LinearLayout
android:layout_width="56dp"
android:layout_height="match_parent"
android:layout_weight="0.06"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/socialdreamlogo" />
</LinearLayout>
<TextView
android:id="#+id/nameTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="3.67"
android:padding="10dp"
android:text="TextView" />
</LinearLayout>
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:src="#drawable/placeholder" />
</LinearLayout>
</android.support.v7.widget.CardView>

Your problem seems to be related to this line:
xmlns:app="http://schemas.android.com/apk/lib/com.example.feelingoodlivinbeta.socialdreams_a1.MainMenuActivity"
replace it with:
xmlns:app="http://schemas.android.com/apk/res-auto"

Place Layout under the AppBar (like in Messenger)

Good afternoon,
I am trying to place a (Relative?Linear?Frame?)Layout under the AppBar and the above the ViewPager, like in the Facebook Messenger App.
Like "TOUS, MESSENGER, SMS" in the picture below :
Here is the code I tried, but it does not work, the Layout is not shown under the AppBar.
<?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/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="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<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/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways|snap" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
app:tabIndicatorColor="#color/fullWhite"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<!-- This is the part I need to put between the AppBar and the content (ViewPager), but it is not shown -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/content_frame">
<include layout="#layout/tous_messenger_sms"/>
</FrameLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:background="#color/separator_color"/>
</android.support.design.widget.CoordinatorLayout>
And here is my "tous_messenger_sms" layout file (the problem is probably not that) :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_horizontal"
android:layout_marginLeft="16sp"
android:layout_marginRight="16sp">
<Button
style="?android:textAppearanceSmall"
android:layout_width="wrap_content"
android:layout_height="28sp"
android:id="#+id/tous_btn"
android:text="TOUS"
android:textColor="#color/colorPrimary"
android:layout_weight="1"
android:background="#drawable/button_shape_tous"
android:stateListAnimator="#null" />
<Button
style="?android:textAppearanceSmall"
android:layout_width="wrap_content"
android:layout_height="28sp"
android:id="#+id/messenger_btn"
android:text="MESSENGER"
android:textColor="#color/colorPrimary"
android:layout_weight="1"
android:background="#drawable/button_shape_messenger"
android:stateListAnimator="#null" />
<Button
style="?android:textAppearanceSmall"
android:layout_width="wrap_content"
android:layout_height="28sp"
android:id="#+id/sms_btn"
android:text="SMS"
android:textColor="#color/colorPrimary"
android:layout_weight="1"
android:background="#drawable/button_shape_sms"
android:stateListAnimator="#null" />
</LinearLayout>

Try this layout
<?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/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="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<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/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways|snap" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
app:tabIndicatorColor="#color/fullWhite"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<!-- This is the part I need to put between the AppBar and the content (ViewPager), but it is not shown -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/content_frame">
<include layout="#layout/tous_messenger_sms"/>
</FrameLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/separator_color" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>

View overlap Toolbar

I am trying do transparent toolbar that has to overlap other view. But conversely other view overlap toolbar.
In xml I specially used margintop for RelativeLayout that show overlapping. Actually I don't use marginTop for RelativeLayout.
xml
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".activity.activitys.ActivityImage">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:gravity="center">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/action_bar_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Фото"/>
</android.support.v7.widget.Toolbar>
<RelativeLayout
android:layout_marginTop="30dp"
android:id="#+id/img_slideshow_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/img_border"
>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<kz.dreamwings.zhaksyadam.activity.util.CircleIndicator
android:id="#+id/indicator"
android:layout_width="fill_parent"
android:layout_height="55dp"
android:padding="3dip"
android:background="#99000000"
android:layout_above="#+id/img_name"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
</FrameLayout>

You are using FrameLayout which is basically for holding a single child. You cant manage the alignment of childrens in FrameLayout.
Your layout should be 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">
<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"
android:gravity="center">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/action_bar_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Фото" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:descendantFocusability="blocksDescendants"
android:scrollbars="none"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<RelativeLayout
android:id="#+id/img_slideshow_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/img_border">
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<kz.dreamwings.zhaksyadam.activity.util.CircleIndicator
android:id="#+id/indicator"
android:layout_width="fill_parent"
android:layout_height="55dp"
android:layout_above="#+id/img_name"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:background="#99000000"
android:padding="3dip" />
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

change your code like this:
<FrameLayout 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"
xmlns:tools="http://schemas.android.com/tools"
android:background="#drawable/img_border"
tools:context=".activity.activitys.ActivityImage">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
android:gravity="center">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/action_bar_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Фото"/>
</android.support.v7.widget.Toolbar>
<RelativeLayout
android:layout_marginTop="30dp"
android:id="#+id/img_slideshow_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
.
.
.

Try this: add toolbar after relative layout and remove top margin .
.i.e:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".activity.activitys.ActivityImage">
<RelativeLayout
android:id="#+id/img_slideshow_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/img_border"
>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<kz.dreamwings.zhaksyadam.activity.util.CircleIndicator
android:id="#+id/indicator"
android:layout_width="fill_parent"
android:layout_height="55dp"
android:padding="3dip"
android:background="#99000000"
android:layout_above="#+id/img_name"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:gravity="center">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/action_bar_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Фото"/>
</android.support.v7.widget.Toolbar>
</FrameLayout>

Layout pushing down content

Not sure what is going on in my layout but after the tabs, the content starts halfway down the screen...
These are the layouts in order from parent to child
<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=".Prof">
<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/tabs_profile" />
</android.support.design.widget.CoordinatorLayout>
tabs profile layout:
<!-- for Tabs -->
<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">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorTabs"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabTextColor="#color/tabsTxtColor"
app:tabMode="fixed"
app:tabGravity="fill"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<include layout="#layout/content_profile" />
</android.support.design.widget.CoordinatorLayout>
content xml layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:gravity="center"
android:text="click THIS"
android:layout_alignParentBottom="true"
android:textColor="#color/tabsTxtColor"
android:background="#color/colorPrimary"/>
</RelativeLayout>
fragment layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical">
<RelativeLayout android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="fill_parent"
android:layout_height="300dp"
android:adjustViewBounds="true"
android:id="#+id/productDefaultPicture"
android:src="#drawable/default_product"
android:layout_above="#+id/hashes"/>
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:id="#+id/previousPicture"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_circled_left_48"/>
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:id="#+id/nextPicture"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_circled_right_48"/>
<View
android:background="#16000000"
android:layout_width="fill_parent"
android:layout_height="5dip"
android:id="#+id/break2"
android:layout_below="#+id/productDefaultPicture"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:id="#+id/hashes"
android:layout_alignParentBottom="true"
android:textSize="18sp"
android:textColor="#color/primary_dark_material_dark"
android:text="iPhone 6"/>
</RelativeLayout>
</LinearLayout>

Your 'hashes' (id) view is anchored to the bottom of the RelativeLayout, which fills the fragment.
It looks like everything else is positioned above the hashes view, so it is all anchored to the bottom of the fragment.
You can try and position things relative to the center or top of the RelativeLayout.

Align Bottom almost get out of the screen to bottom when Using Toolbar Sliding

I have recently migrated my listview to recyclerview, so that I could have the effect on the toolbar that disappear to show only tabs / RecyclerView.
Thing is now, when I try to align an element to bottom, that element is getting out of the screen from the bottom.
I have to add like 60dp of margin bottom to fix it.
But in my FloatingActionButton, those 60dp affect animation, so I don't like it so much...
Does anyone know the trick???
Here is my code:
First Tab
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#CCC">
<android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/lista_tiendas"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:divider="#android:color/transparent"
android:dividerHeight="1.0sp" />
<com.melnykov.fab.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginTop="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="76dp"
android:src="#drawable/ic_add_white_24dp"
app:fab_type="normal"
app:fab_shadow="true"
app:fab_colorNormal="#color/spg_rosa"
app:fab_colorPressed="#color/spg_rosa_dark"
/>
<!--<android.support.design.widget.FloatingActionButton-->
<!--android:id="#+id/fab"-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content"-->
<!--android:layout_gravity="right|bottom"-->
<!--android:src="#drawable/ic_add_white_48dp"-->
<!--app:backgroundTint="#color/spg_rosa"-->
<!--android:transitionName="#string/transition_add_pdv"-->
<!--app:borderWidth="0dp"-->
<!--app:elevation="8dp"-->
<!--app:fabSize="normal" />-->
</FrameLayout>
Second tab
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="50">
<com.google.android.gms.maps.MapView
android:id="#+id/map"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:id="#+id/maps_unavailable"
style="#style/placeholder_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/maps_unavailable"
android:visibility="gone" />
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="#dimen/map_pager_height"
android:layout_gravity="bottom"
android:layout_marginBottom="55dp"/>
</FrameLayout>
And the CoordinatorLayout
<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="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Any Idea???