i am trying to add a custom tool bar
this is my toolbar.xml
<?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"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
app:subtitleTextColor="#color/sub_text_color"
app:navigationContentDescription="#string/abc_action_bar_up_description"
android:background="#color/sub_text_color"
app:navigationIcon="?attr/homeAsUpIndicator"
/>
this is my style
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
i have included it in my activity main
<RelativeLayout 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.myproj.activities.RegisterActivity">
<include layout="#layout/toolbar"/>
in my main activity class i called
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_register);
toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
toolbar.setTitle(R.string.create_account);
}
but still i am not able to see the toolbar in my class.
Can some one help me to figure out the error
Use LinearLayout as parent , the child layout might be hiding the toolBar
<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"
tools:context="com.example.myproj.activities.RegisterActivity">
<include layout="#layout/toolbar"/>
//other childs
</LinearLayout>
To set title to tool bar use getSupportActionBar().setTitle(title);
toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle(title);
Quite a number of things could be responsible for this.
Firstly, It is possible that the views placed after the custom toolbar are overlayed on it, hence blocking it from view. Remenber that you are using RelativeLayout as your root element. So you'll want to ensure that views after the toolbar have android:layout_below="#+id/toolbar" attribute.
Secondly, I'll advice you to use a coordinator layout as your rootview and wrap your custom toolbar in AppBarLayout view. So that your layout file resembles this:
<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="ng.shoppi.lafarge_app.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>
<include
android:id="#+id/content_main"
layout="#layout/content_main" />
This will keep the toolbar at the top and ensure other views are below the toolbar.
Goodluck.
Try this,
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/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="?actionBarSize"
android:background="?attr/colorPrimary"
app:contentInsetStartWithNavigation="0dp"
app:popupTheme="#style/AppTheme.PopupOverlay">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<com.itc.classmate.utils.FontTextView
android:id="#+id/textview_toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="#dimen/gap_btn_logo"
android:layout_toLeftOf="#+id/rel_toolbar_options"
android:ellipsize="marquee"
android:paddingRight="5dp"
android:singleLine="true"
android:text=""
android:textColor="#color/colorWhite"
android:textSize="#dimen/comm_text_size_normal" />
<LinearLayout
android:id="#+id/rel_toolbar_options"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/rel_toolbar_right_cornor_item"
android:gravity="center_vertical">
<ImageView
android:id="#+id/imgview_toolbar_share"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="#dimen/toolbar_notification_right_margin"
android:layout_toLeftOf="#+id/imgview_toolbar_choose_class"
android:padding="#dimen/inc_toolbar_icon_padding"
android:src="#drawable/ic_menu_share"
android:visibility="gone" />
<ImageView
android:id="#+id/imgview_toolbar_choose_class"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="#dimen/toolbar_notification_right_margin"
android:layout_toLeftOf="#+id/imgview_toolbar_edit"
android:padding="#dimen/inc_toolbar_icon_padding"
android:src="#drawable/selectclass"
android:visibility="gone" />
<ImageView
android:id="#+id/imgview_toolbar_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="#dimen/toolbar_notification_right_margin"
android:layout_toLeftOf="#+id/imgview_toolbar_done"
android:padding="#dimen/inc_toolbar_icon_padding"
android:src="#drawable/profile_edit_icon"
android:visibility="gone" />
<ImageView
android:id="#+id/imgview_toolbar_done"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="14dp"
android:layout_toLeftOf="#+id/textview_toolbar_delete_bookmark"
android:padding="#dimen/inc_toolbar_icon_padding"
android:src="#drawable/done"
android:visibility="gone" />
<com.itc.classmate.utils.FontTextView
android:id="#+id/textview_toolbar_delete_bookmark"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="14dp"
android:layout_toLeftOf="#+id/imageview_toolbar_delete"
android:padding="#dimen/inc_toolbar_icon_padding"
android:text="#string/clear_all"
android:textColor="#color/colorWhite"
android:textSize="#dimen/comm_text_size_mediam"
android:visibility="gone" />
<ImageView
android:id="#+id/imageview_toolbar_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="14dp"
android:layout_toLeftOf="#+id/textview_toolbar_done"
android:padding="#dimen/inc_toolbar_icon_padding"
android:src="#drawable/delete"
android:visibility="gone" />
<com.itc.classmate.utils.FontTextView
android:id="#+id/textview_toolbar_done"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="#dimen/toolbar_notification_right_margin"
android:layout_toLeftOf="#+id/imgview_toolbar_notification"
android:padding="#dimen/inc_toolbar_icon_padding"
android:text="Done"
android:textColor="#color/colorWhite"
android:textSize="#dimen/comm_text_size_normal"
android:visibility="gone"
app:textAllCaps="true" />
<RelativeLayout
android:id="#+id/rl_notification"
android:layout_width="wrap_content"
android:layout_height="?actionBarSize"
android:layout_marginRight="#dimen/toolbar_notification_right_margin"
>
<ImageView
android:id="#+id/imgview_toolbar_notification"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:padding="#dimen/inc_toolbar_icon_padding"
android:src="#drawable/bell"
android:visibility="gone" />
<TextView
android:id="#+id/txtview_toolbar_notification"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/colorWhite"
android:background="#drawable/shape_notification_dot"
android:textSize="#dimen/comm_text_size_very_small"
android:padding="2dp"
android:gravity="center"
android:visibility="gone"
android:layout_marginTop="10dp"
android:layout_marginStart="10dp"/>
</RelativeLayout>
</LinearLayout>
<RelativeLayout
android:id="#+id/rel_toolbar_right_cornor_item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:layout_marginRight="#dimen/toolbar_notification_right_margin"
android:padding="#dimen/inc_toolbar_icon_padding"
android:visibility="visible">
<com.itc.classmate.utils.CircularImage
android:id="#+id/imgview_toolbar_profile"
android:layout_width="#dimen/toolbar_profile_width_height"
android:layout_height="#dimen/toolbar_profile_width_height"
android:layout_centerInParent="true"
android:src="#drawable/profile_icon"
android:visibility="invisible" />
<com.itc.classmate.utils.FontTextView
android:id="#+id/textview_toolbar_save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="#string/save"
android:textColor="#color/colorWhite"
android:textSize="#dimen/comm_text_size_mediam"
android:visibility="gone"
app:textAllCaps="true" />
<ImageView
android:id="#+id/imgview_toolbar_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginRight="#dimen/toolbar_notification_right_margin"
android:padding="#dimen/inc_toolbar_icon_padding"
android:src="#drawable/profile_delete_icon"
android:visibility="gone" />
</RelativeLayout>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
Try to remove theme in your custom toolbar:
<?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"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" //REMOVE THIS
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
app:subtitleTextColor="#color/sub_text_color"
app:navigationContentDescription="#string/abc_action_bar_up_description"
android:background="#color/sub_text_color"
app:navigationIcon="?attr/homeAsUpIndicator"
/>
i think the theme is influential....
Please update your code a bit:
Style:
<style name="AppTheme" parent="Theme.AppCompat.Light">
XML file:
<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="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
Related
I have action bar along with app logo and app name.
So I want to reduce space between app logo and app name.
Below I have attached some screenshot.
A) Action bar I have
B) Action bar I want
Use Toolbar for this, it will provide greater customization.
Here is the sample example.
toolbar.xml
<?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_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways"
app:layout_collapseMode="pin">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- This is a centered logo -->
<ImageView
android:id="#+id/toolbar_logo"
android:src="#drawable/logo"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="?attr/actionBarSize"
android:layout_marginTop="4dp"
android:layout_marginBottom="4dp"
android:layout_gravity="center" />
<!-- This is a centered title -->
<!--
<TextView
android:id="#+id/toolbar_title"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="?attr/actionBarSize"
android:layout_gravity="center"
android:gravity="center_vertical"
android:visibility="gone"
android:text="#string/app_name"
android:textColor="#color/white"
style="#style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
/>
-->
<!-- This is a custom left side button -->
<!--
<ImageButton
android:id="#+id/btn_settings"
android:layout_width="?attr/actionBarSize"
android:layout_height="?attr/actionBarSize"
android:layout_marginRight="?attr/actionBarSize"
android:layout_gravity="start|center_vertical"
android:visibility="invisible"
android:src="#drawable/ic_settings_white_24dp"
style="#style/Widget.AppCompat.ActionButton" />
-->
<!-- This is a custom right side button -->
<!--
<ImageButton
android:id="#+id/btn_search"
android:layout_width="?attr/actionBarSize"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="end"
android:src="#drawable/ic_magnify_white_24dp"
style="#style/Widget.AppCompat.ActionButton" />
-->
</FrameLayout>
</android.support.v7.widget.Toolbar>
Add any view inside toolbar as it is a viewgroup. Hopw this helps
Try adding these properties to toolBar
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
final toolbar should be something like this
<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_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#drawable/paper9patch"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
/>
Use this
getActionBar().setDisplayHomeAsUpEnabled(false)
Try this
<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="?android:attr/actionBarSize"
android:supportsRtl="false"
app:popupTheme="#style/AppTheme.PopupOverlay">
<include layout="#layout/header_with_back"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
header_with_back.xml code
<?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="?android:attr/actionBarSize"
android:background="#color/colorPrimary"
android:orientation="vertical">
<ImageView
android:id="#+id/image_back_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/threedp"
android:padding="#dimen/tendp"
android:layout_marginRight="-20dp"
android:src="#drawable/ic_arrow_back_black_24dp"/>
<TextView
android:id="#+id/txt_title_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/image_back_header"
android:layout_centerVertical="true"
android:ellipsize="end"
android:paddingTop="#dimen/tendp"
android:paddingBottom="#dimen/tendp"
android:layout_marginLeft="#dimen/twentydp"
android:maxLength="26"
android:text="dsdsdsa"
android:gravity="center"
android:maxLines="1"
android:textColor="#color/white"
android:textSize="#dimen/text_18"
android:typeface="normal"/>
<TextView
android:id="#+id/txt_right_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:ellipsize="none"
android:gravity="center"
android:maxLines="1"
android:textColor="#color/white"
android:textSize="#dimen/text_16"
android:layout_alignParentRight="true"
android:paddingTop="#dimen/tendp"
android:paddingBottom="#dimen/tendp"
android:paddingLeft="#dimen/tendp"
android:paddingRight="#dimen/fifteendp"
android:text="#string/save"
android:typeface="normal"/>
</RelativeLayout>
Java code
Toolbar toolbar;
toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setPadding(0, 0, 0, 0);//for tab otherwise give space in tab
toolbar.setContentInsetsAbsolute(0, 0);
setSupportActionBar(toolbar);
I'm using custom action bar in AppCompatActivity. I give the my code below as well as the pitcher. i tried all solution available in stack over flow. But till i can't fix this issue.please assist me.
action_toolbar.xml
<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"
style="#style/toolBarTheme"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
app:contentInsetStart="0dp"
app:theme="#style/AppTheme.AppBarOverlay">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/appLogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/app_name"
android:src="#mipmap/ic_launcher" />
<TextView
android:id="#+id/tvToolbarTitle"
style="#style/textViewTheme"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/appLogo"
android:layout_toEndOf="#+id/appLogo"
android:layout_marginLeft="14dp"
android:layout_marginStart="14dp" />
</RelativeLayout>
you can use toolbar property for this
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
like this use in toolbar
<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"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp" />
if you are using Toolbar then add the following line in Toolbar in xml
app:contentInsetStart="0dp"
Update:
You mean you want toolbar like Whatsapp. but it's not done by using App-compat Support Library Toolbar you have to use Custom Action Bar.
You can get the following result as shown in the Picture below
by using following code.
activity.xml
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_chats"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<include layout="#layout/custom_toolbar"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
custom_toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:background="?attr/selectableItemBackgroundBorderless"
android:layout_width="fill_parent"
android:layout_height="?actionBarSize"
>
<!-- android:background="?attr/selectableItemBackgroundBorderless" will cause this Custom View to make ripple effect -->
<LinearLayout
android:id="#+id/conversation_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:contentDescription="#string/abc_action_bar_up_description"
android:orientation="horizontal">
<ImageView
android:id="#+id/conversation_contact_photo"
android:layout_width="35.0dip"
android:layout_height="35.0dip"
android:src="#drawable/icon"
android:scaleType="fitCenter" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#id/conversation_image"
android:orientation="vertical"
android:paddingBottom="2.0dip"
android:paddingLeft="4.0dip"
android:paddingRight="0.0dip"
android:paddingTop="0.0dip" >
<TextView
android:id="#+id/action_bar_title_1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="6dp"
android:layout_weight="0.6"
android:ellipsize="end"
android:gravity="center_vertical"
android:maxLines="1"
android:textSize="18sp"
android:text="shanraisshan"
android:textStyle="bold" />
<TextView
android:id="#+id/action_bar_title_2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginLeft="6dp"
android:layout_weight="0.4"
android:ellipsize="end"
android:text="last seen 1 hour ago"
android:maxLines="1"
android:textSize="12sp" />
</LinearLayout>
YourActivity.java
final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar_chats);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
toolbar.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Log.e("Toolbar","Clicked");
}
});
I tried this answer, but I could not achieve the same look & behavior as my current main activity.
What changes should I make to my existing main activity to add a fixed tab bar pinned to top with scrolled content like in the image below?
Here's a .GIF of my current main activity: i.stack.imgur.com/Yj0cv.gif
Here's a link to the full project called android: https://github.com/firebase/friendlychat/tree/master/android
Here's styles.xml:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:colorButtonNormal">#drawable/button_selector</item>
<item name="colorButtonNormal">#drawable/button_selector</item>
<item name="android:buttonStyle">#style/FriendlyButtonStyle</item>
</style>
<style name="FriendlyButtonStyle" parent="Widget.AppCompat.Button">
<item name="android:textColor">#color/colorTitle</item>
</style>
</resources>
Here's activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.google.firebase.codelab.friendlychat.MainActivity">
<com.google.android.gms.ads.AdView
android:id="#+id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true"
ads:adSize="BANNER"
ads:adUnitId="#string/banner_ad_unit_id">
</com.google.android.gms.ads.AdView>
<android.support.v7.widget.RecyclerView
android:id="#+id/messageRecyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/linearLayout"
android:layout_below="#+id/adView"/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:id="#+id/linearLayout">
<ImageView
android:id="#+id/addMessageImageView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/ic_add_black_24dp"/>
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/messageEditText"
android:layout_gravity="center_vertical"
android:layout_weight="1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="SEND"
android:enabled="false"
android:id="#+id/sendButton"
android:layout_gravity="bottom"/>
</LinearLayout>
<ProgressBar
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/progressBar"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
Put your fixed view's in RelativeLayout and move scrolling content inside CoordinatorLayout. Like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
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:layoutDirection="ltr"
tools:context=".MainActivity">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/linearLayout">
<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"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.PopupOverlay"
app:tabMode="fixed" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.gms.ads.AdView
android:id="#+id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true"
ads:adSize="BANNER"
ads:adUnitId="#string/banner_ad_unit_id">
</com.google.android.gms.ads.AdView>
<android.support.v7.widget.RecyclerView
android:id="#+id/messageRecyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:nestedScrollingEnabled="false"
android:layout_below="#+id/adView" />
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:orientation="horizontal">
<ImageView
android:id="#+id/addMessageImageView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/ic_add_black_24dp" />
<EditText
android:id="#+id/messageEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1" />
<Button
android:id="#+id/sendButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:enabled="false"
android:text="SEND" />
</LinearLayout>
<ProgressBar
android:id="#+id/progressBar"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" />
</RelativeLayout>
Google has Design support library and with it you can implement Collapsing Toolbar and you do not need any 3rd party libraries!!
In addition to pinning a view, you can use app:layout_collapseMode="parallax" (and optionally app:layout_collapseParallaxMultiplier="0.7" to set the parallax multiplier) to implement parallax scrolling (say of a sibling ImageView within the CollapsingToolbarLayout)
And as example you can use this:
<android.support.design.widget.AppBarLayout
android:layout_height="186dp"
android:layout_width="match_parent">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
And do not forget to add compile "com.android.support:design:25.3.1" in your module build.gradle
UPDATE 1:
First of all, you need to create a CoordinatorLayout.
All the new components use a new concept called Behavior that is used by the Coordinator Layout to take some actions based on different interactions.
<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:fitsSystemWindows="true">
</android.support.design.widget.CoordinatorLayout>
You can use fitsSystemWindows on any item you want to be painted below the status bar.
Then you need to add an AppBarLayout:
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
</android.support.design.widget.AppBarLayout>
And then inside that, you can add something like:
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
Just created behavior, what you want. Shouldn't be so complicated. So here is main XML for all Views. But I also have already created project for this sample, please write here, if I need to share full project.
SCREENS
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"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white">
<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"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:scrollbars="none"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_collapseMode="pin"
app:tabMode="fixed" />
</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.design.widget.CoordinatorLayout>
TO YOUR EXAMPLE
I share here another example, which should suite your code. I attached all view Ids for your examples. Check it.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/tools"
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:background="#android:color/white">
<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"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<com.google.android.gms.ads.AdView
android:id="#+id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_below="#+id/toolbar"
android:layout_centerHorizontal="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
ads:adSize="BANNER"
ads:adUnitId="#string/banner_ad_unit_id"
app:layout_collapseMode="pin"></com.google.android.gms.ads.AdView>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="#+id/messageRecyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom |center_horizontal"
android:layout_marginBottom="100dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/addMessageImageView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#android:drawable/ic_dialog_alert" />
<EditText
android:id="#+id/messageEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1" />
<Button
android:id="#+id/sendButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:enabled="false"
android:text="SEND" />
</LinearLayout>
<ProgressBar
android:id="#+id/progressBar"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:layout_centerHorizontal="true"
android:layout_marginBottom="100dp"
android:layout_centerVertical="true" />
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
try above code
Style.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:colorButtonNormal">#drawable/button_selector</item>
<item name="colorButtonNormal">#drawable/button_selector</item>
<item name="android:buttonStyle">#style/FriendlyButtonStyle</item>
</style>
<style name="FriendlyButtonStyle" parent="Widget.AppCompat.Button">
<item name="android:textColor">#color/colorTitle</item>
</style>
here if you don't want to change property to 'NoActionBar' then alternatively set it in AndroidManifest.xml file like above
<activity android:name=".MainActivity"
android:theme="#style/Theme.AppCompat.NoActionBar"/>
activity_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.google.firebase.codelab.friendlychat.MainActivity"
android:id="#+id/coordinatorLayout">
<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="?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"
app:tabMode="scrollable"
app:tabGravity="center"
app:tabTextAppearance="#android:style/TextAppearance.Widget.TabWidget"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#android:color/white"
app:tabIndicatorHeight="2dp"
app:tabIndicatorColor="#android:color/white"/>
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.google.firebase.codelab.friendlychat.MainActivity">
<com.google.android.gms.ads.AdView
android:id="#+id/adView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
app:adSize="BANNER"
app:adUnitId="#string/banner_ad_unit_id">
</com.google.android.gms.ads.AdView>
<include
layout="#layout/maincontent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/adView"/>
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:orientation="horizontal"
android:layout_marginBottom="50dp">
<ImageView
android:id="#+id/addMessageImageView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/ic_add_black_24dp"/>
<EditText
android:id="#+id/messageEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1"/>
<Button
android:id="#+id/sendButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:enabled="false"
android:text="SEND"/>
</LinearLayout>
<ProgressBar
android:id="#+id/progressBar"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"/>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
maincontent.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:id="#+id/messageRecyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
I am trying to get a view (LinearLayout) to feel like an extension of the ActionBar. I am using AppCompat objects btw.
This is my xml:
<android.support.design.widget.CoordinatorLayoutt 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=".RegisterActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay.Colored">
<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_register" />
</android.support.design.widget.CoordinatorLayout>
And now the content_register layout:
<LinearLayout 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:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:elevation="4dp"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp"
android:text="text1"
android:textColor="#color/white" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp"
android:text="text2"
android:textColor="#color/white" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#40FFFFFF" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp"
android:text="text3"
android:textColor="#color/white" />
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="8dp"
android:text="insert awesome stuff here" />
</LinearLayout>
What am I trying to do with represented in the following image:
And this is what I am getting.
Any ideas on how I can fix this layout? Am I using the wrong components?
Also, should I be using a CardView for the layout with text1 2 3?
Add this in the styles (for pre-Lolipop devices)
<item name="android:windowContentOverlay">#null</item>
Add this line in your AppBarLayout
app:elevation="0dp"
Add to appbar layout and to included layout app:elevation="4dp" this way they will be on same depth level and you will see just elevation of included layout
My layout is a Main activity in which I replace the content by fragments. I am trying to add a FloatingActionButton which I want the half of button to be in toolbar and the other half I want to be in the fragment content. I attach a picture of the result which I want.
But I am getting this
The toolbar overlap the half of the fab.
I have try to make transparent the toolbar but nothing changes.
The code of fragment is
<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:fitsSystemWindows="true">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/home_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- contains archived and liked buttons -->
<LinearLayout
android:id="#+id/home_buttons"
android:layout_width="match_parent"
android:layout_height="40dp"
android:baselineAligned="false"
android:orientation="horizontal">
<!-- archived button -->
<FrameLayout
android:id="#+id/home_archived_button"
android:layout_width="0.0dp"
android:layout_height="match_parent"
android:layout_marginEnd="2dp"
android:layout_marginRight="2dp"
android:layout_weight="1"
android:background="#color/orange">
<!-- archived button icon -->
<ImageView
android:id="#+id/home_archived_button_icon"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_gravity="center_vertical|start"
android:layout_marginLeft="3dp"
android:layout_marginStart="3dp"
android:background="#mipmap/down_white_cyrcle_arrow"
android:contentDescription="#string/app_name" />
<!-- archived button -->
<TextView
android:id="#+id/home_archived_button_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="40dp"
android:layout_marginStart="40dp"
android:text="#string/home_archived"
android:textColor="#color/white" />
</FrameLayout>
<!--liked button -->
<FrameLayout
android:id="#+id/home_liked_button"
android:layout_width="0.0dp"
android:layout_height="match_parent"
android:layout_marginEnd="2dp"
android:layout_marginRight="2dp"
android:layout_weight="1"
android:background="#color/orange">
<!-- liked button icon -->
<ImageView
android:id="#+id/home_liked_button_icon"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_gravity="center_vertical|end"
android:layout_marginEnd="3dp"
android:layout_marginRight="3dp"
android:background="#mipmap/down_white_cyrcle_arrow"
android:contentDescription="#string/app_name" />
<!-- liked button text-->
<TextView
android:id="#+id/home_liked_button_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|end"
android:layout_marginEnd="40dp"
android:layout_marginRight="40dp"
android:text="#string/home_liked"
android:textColor="#color/white" />
</FrameLayout>
</LinearLayout>
<!-- no matches -->
<RelativeLayout
android:id="#+id/home_no_matches_panel"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<!-- no matches text -->
<TextView
android:id="#+id/home_no_matches"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:gravity="center"
android:text="#string/home_no_matches"
android:textColor="#color/black"
android:visibility="gone" />
<!-- home invite button -->
<Button
android:id="#+id/home_invite_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/home_no_matches"
android:layout_centerHorizontal="true"
android:background="#color/orange"
android:padding="10dp"
android:text="#string/invite_friends"
android:textAllCaps="false"
android:textColor="#color/white"
android:visibility="gone" />
</RelativeLayout>
<!-- recyclerView for home fragment -->
<android.support.v7.widget.RecyclerView
android:id="#+id/home_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/home_buttons"
android:layout_marginBottom="35dp" />
<!-- search button -->
<FrameLayout
android:id="#+id/home_search_button"
android:layout_width="match_parent"
android:layout_height="35dp"
android:layout_alignParentBottom="true"
android:background="#color/orange">
</FrameLayout>
</RelativeLayout>
<!--home add property -->
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
style="#style/floating_action_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:src="#mipmap/home_add_property"
app:backgroundTint="#color/white"
app:borderWidth="0dp"
app:elevation="0dp"
app:layout_anchor="#id/home_buttons"
app:layout_anchorGravity="top|center_horizontal" />
<!-- home search button -->
<android.support.design.widget.FloatingActionButton
android:id="#+id/home_search_fab"
style="#style/floating_action_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="false"
android:src="#mipmap/home_search"
app:backgroundTint="#color/orange"
app:borderWidth="0dp"
app:elevation="0dp"
app:layout_anchor="#id/home_search_button"
app:layout_anchorGravity="bottom|center_horizontal" />
</android.support.design.widget.CoordinatorLayout>
and the code of activity is
<?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=".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"
android:gravity="center"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:titleTextColor="#color/black">
<!-- toolbar title -->
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
and the style for the fab
<style name="floating_action_button">
<item name="android:layout_marginLeft">0dp</item>
<item name="android:layout_marginTop">-500dp</item>
<item name="android:layout_marginRight">0dp</item>
<item name="android:layout_marginBottom">-15dp</item>
</style>
Well, it is impossible to do it in your way. You FAB is in the Fragment, while Toolbar is in Activity. I suggest you to do one of two things:
1) Move FAB code to Activity, and dynamically attach to it actions (if you need to communicate with Fragment)
2) Move Toolbar to Fragment.
Anyway, instead of trying to align your FAB within styles.xml you can use an anchor tag like this(it is a FAB attributes in XML):
Here is how I did it:
Fragment layout:
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/detail_backdrop_height"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/product_details_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
//actual content
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:src="#android:drawable/ic_menu_save"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|center"
android:id="#+id/add_to_cart_fab" />
Activity layout:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
It is collapsing with parallax mode. You may want to change it in order to see your button always, but is is the correct way to attach the FAB.