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.
Related
I want to achieve the hierarchy shown in the preview picture below, I have no prior knowledge of collapsible layout and coordinator layout but what I did caused the view pager to NOT to show it's content.
I am working in a main activity that has a Coordinator layout as a root layout, a collapsing toolbar, a viewpager, a bottom navigation bar and a hidden bottom sheet
PS: I am working with AndroidX support library.
This is my XML Layout activity_main.xml
<androidx.coordinatorlayout.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:id="#+id/parent"
android:fitsSystemWindows="true">
<!-- RETRACTABLE TOOLBAR -->
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/appbar_header_height"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="#dimen/activity_margin_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<ImageView
android:id="#+id/iv_banner_img"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/banner"
android:tintMode="multiply"
app:layout_collapseMode="parallax" />
<View
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_gravity="top"
android:background="#drawable/scrim_topdown"
android:fitsSystemWindows="true"/>
<View
android:layout_width="match_parent"
android:layout_height="160dp"
android:layout_gravity="bottom"
android:background="#drawable/scrim"/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:layout_gravity="end">
<ImageView
android:src="#drawable/ic_user_placeholder"
android:id="#+id/iv_parent_profile_sm"
android:layout_width="32dp"
android:layout_height="32dp"/>
</LinearLayout>
<androidx.appcompat.widget.Toolbar
android:id="#+id/anim_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<LinearLayout
android:gravity="center_vertical"
android:layout_gravity="bottom"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="12dp"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:gravity="center_vertical"
android:layout_gravity="bottom"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:padding="4dp"
android:layout_marginEnd="6dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:id="#+id/tv_name"
android:drawableStart="#drawable/ic_person"/>
<TextView
android:layout_marginEnd="6dp"
android:padding="4dp"
android:id="#+id/tv_birth"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:drawableStart="#drawable/ic_cake"/>
<ImageView
android:padding="8dp"
android:id="#+id/iv_gender"
android:layout_width="32dp"
android:layout_height="32dp" />
</LinearLayout>
</LinearLayout>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<!-- VIEW PAGER -->
<androidx.viewpager.widget.ViewPager
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<!-- NAVIGATION BAR -->
<com.gauravk.bubblenavigation.BubbleNavigationLinearView
android:layout_alignParentBottom="true"
android:id="#+id/bottom_navigation_view_linear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorWhite"
android:elevation="12dp"
android:padding="6dp"
android:animateLayoutChanges="true"
android:layout_gravity="bottom">
<!-- bottom navigation bar elements -->
</com.gauravk.bubblenavigation.BubbleNavigationLinearView>
<!-- BOTTOM SHEETS -->
<include layout="#layout/details_sheet" />
<include layout="#layout/add_sheet"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
This is the desired result:
You can try gravity to align inside the CoordinatorLayout.
android:layout_gravity="end"
This worked for me.
I got what I needed by wrapping everything in a RelativeLayout then I kept tweaking android:layout_above and android:layout_below until I got right
to set element in the beginning add this android:layout_gravity="start"
and to set element in the end add this android:layout_gravity="end"
and to set it in bottom add this: android:layout_gravity="bottom"
I have a collapsing toolbar in my TimelineFragment which I recently added. And there is an already existing collapsing toolbar which previously worked fine in my ProfileFragment until when I added the similar toolbar to the TimelineFragment. Both of these fragments are contained in a view pager.
I have the ff layout for the ProfileFragment
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:popupTheme="#style/AppTheme.PopupOverlay">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/ivProfileAvatar"
android:layout_width="160dp"
android:layout_height="160dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="#dimen/divider_small"
android:src="#drawable/profile_image" />
<Space
android:layout_width="match_parent"
android:layout_height="#dimen/divider_small" />
<TextView
android:id="#+id/tvUserUsername"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="JuanOne"
android:textColor="#android:color/white"
android:textSize="#dimen/text_header"
android:textStyle="bold" />
<TextView
android:id="#+id/tvUserCommunity"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="University Name"
android:textColor="#android:color/white"
android:textSize="#dimen/text_content" />
<TextView
android:id="#+id/tvUserBio"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Still learning to face difficulty"
android:textColor="#android:color/white"
android:textSize="#dimen/text_content" />
<Space
android:layout_width="match_parent"
android:layout_height="#dimen/divider_normal" />
<Button
android:id="#+id/btnEditProfile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="#drawable/btn_gradient_blue"
android:paddingStart="48dp"
android:paddingEnd="48dp"
android:text="Edit Profile"
android:textAllCaps="false"
android:textColor="#android:color/white" />
<!--
DO NOT CHANGE,
CHANGE ONLY IF TOOLBAR SIZE (FOR TAB_LAYOUT) IS ALSO CHANGED
-->
<Space
android:layout_width="match_parent"
android:layout_height="56dp" />
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:layout_collapseMode="pin">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<android.support.design.widget.TabLayout
android:id="#+id/tabsProfile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1"
app:tabBackground="#null"
app:tabGravity="center"
app:tabIndicatorColor="#android:color/white"
app:tabIndicatorHeight="2dp">
<android.support.design.widget.TabItem
android:id="#+id/tabProfileMySSSS"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<android.support.design.widget.TabItem
android:id="#+id/tabProfileMySSSSS"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.design.widget.TabLayout>
<ImageButton
android:id="#+id/ibtnProfileTimelineRefresh"
android:layout_width="128dp"
android:layout_height="match_parent"
android:layout_gravity="right"
android:layout_marginRight="#dimen/divider_normal"
android:layout_weight="1"
android:background="?attr/selectableItemBackground"
android:src="#drawable/ic_autorenew_white_24dp" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
which is inside a CoordinatorLayout
and the ff layout for the TimelineFragment
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="92dp">
<android.support.design.widget.AppBarLayout
android:fitsSystemWindows="true"
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:popupTheme="#style/AppTheme.PopupOverlay">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:id="#+id/cvCreateSSSSS"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/divider_small"
android:layout_marginRight="#dimen/divider_small"
android:clickable="true"
android:focusable="true"
android:foreground="?attr/selectableItemBackground"
app:cardCornerRadius="8dp"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="#dimen/divider_normal">
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:src="#drawable/svg_nav_create_SSSSSS" />
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical"
android:paddingStart="#dimen/divider_normal"
android:text="What's on your mind?"
android:textColor="#android:color/black"
android:textSize="#dimen/text_content" />
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:padding="#dimen/divider_xsmall"
android:src="#drawable/svg_insert_image" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:visibility="gone">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<...some other layouts />
</android.support.design.widget.CoordinatorLayout>
For visuals on what my issue is
** This image is from the ProfileFragment
The extra space which I marked red has not existed before, when I still haven't added the AppBarLayout (containing the toolbar) on the TimelineFragment.
I have tried removing the whole AppBarLayout on the TimelineFragment, and it does fix the weird extra space on the ProfileFragment. Why is it that there is a relation between these fragments when they do not share anything besides being in the same ViewPager?
How do I remove the space that I marked red on the image? It might be related to the toolbar since it is same in color. The AppBarLayout uses a lighter color than the toolbar.
I have already fixed it. Apparently, the Activity that was holding all these fragments is using coordinator layout. So I removed that, and that space was gone. I believe that using a toolbar inside these fragments made the activity holding them create a toolbar on its own.
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>
I have a main Activity with a Drawer Layout and multiple Fragments that I replace on Menu Item click.
In one of the fragment I'm using Bottom Sheet to display some info. The bottom sheet behavior is working fine : I can switch between different STATES with no problem. The problem is that in EXPANDED state the bottom sheet stays below the activity toolbar even though I set it's Height to match_parent. Here is the XMl (I also would like to implement a collapsing toolbar but I don't know how to override the current one).
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinator"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:theme="#style/Theme.AppCompat.NoActionBar"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<RelativeLayout
android:id="#+id/search_relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="#style/Theme.AppCompat.NoActionBar">
<com.google.android.gms.maps.MapView
android:id="#+id/mapView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/Theme.AppCompat.NoActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_bottomSheet"
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:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:elevation="20dp"
app:behavior_hideable="true"
app:behavior_peekHeight="0dp"
app:layout_behavior="#string/bottom_sheet_behavior">
<RelativeLayout
android:id="#+id/bottom_sheet_relative_layout"
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="vertical">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/circle_picture"
android:src="#mipmap/login_background"
android:layout_margin="10dp"
android:layout_width="50dp"
android:layout_height="50dp" />
<TextView
android:id="#+id/name_bottom_sheet"
android:layout_toEndOf="#id/circle_picture"
android:text="Title"
android:textColor="#color/buttonLoginColor"
android:layout_margin="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/address_bottom_sheet"
android:layout_below="#id/name_bottom_sheet"
android:layout_toEndOf="#id/circle_picture"
android:layout_marginStart="10dp"
android:textColor="#color/btn_create"
android:text=""
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_below="#id/circle_picture"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:foreground="?android:attr/selectableItemBackground"
android:layout_margin="5dp"
app:cardCornerRadius="2dp">
</android.support.v7.widget.CardView>
</LinearLayout>
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible"
android:layout_margin="15dp"
app:layout_anchor="#id/bottom_sheet"
app:layout_anchorGravity="top|end"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/floatingButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="15dp"
android:layout_marginBottom="50dp"
android:layout_marginEnd="15dp"
app:backgroundTint="#color/buttonLoginColor"
app:borderWidth="0dp"
app:elevation="6dp"
app:layout_anchor="#id/fab2"
app:layout_anchorGravity="top"/>
Do you have any clue on how to set the bottom sheet's height so it matches the full screen ?
I am using viewpager for Text sliding. If i set visibility of viewPager is GONE my layout is like IMAGE1.otherwise IMAGE2
.
Expected Output is IMAGE3
I need a view of Layout with trasparent Toolbar + ViewPager(Text Sliding)
Please check my xml code...
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
style="#style/LinearLayout_mm"
android:background="#color/black_2"
android:fitsSystemWindows="true"
tools:context="ashik.myapplication.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/one_hundred_dp"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
style="#style/LinearLayout_mm"
android:fitsSystemWindows="true"
android:minHeight="?attr/actionBarSize"
app:contentScrim="?attr/colorPrimary">
<LinearLayout
android:id="#+id/layoutTitle"
style="#style/LinearLayout_mm"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<LinearLayout
android:id="#+id/layoutTitle1"
style="#style/LinearLayout_mw"
android:orientation="horizontal">
<android.support.v4.view.ViewPager // VIEWPAGER
android:id="#+id/reviewpager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone" />
<com.pkmmte.view.CircularImageView
android:id="#+id/imageView_prof"
android:layout_width="75dp"
android:layout_height="75dp"
android:layout_marginLeft="#dimen/two_ten_dp"
android:layout_marginRight="#dimen/ten_dp"
android:contentDescription="Photo"
android:src="#drawable/refresh_icon"
android:visibility="gone"
app:border="true"
app:border_color="#color/white"
app:border_width="#dimen/three_dp" />
<LinearLayout
android:id="#+id/lr_user"
style="#style/LinearLayout_mw_ver"
android:layout_gravity="center"
android:visibility="gone">
<TextView
style="#style/LinearLayout_ww"
android:text="Welcome"
android:textColor="#color/blue_3"
android:textSize="#dimen/thirteen_sp"
android:visibility="gone" />
<LinearLayout
style="#style/LinearLayout_mw_hor"
android:visibility="gone">
<TextView
android:id="#+id/txtUser"
style="#style/LinearLayout_ww"
android:text="User"
android:textColor="#color/transparent_1"
android:textSize="#dimen/fifteen_dp"
android:visibility="gone" />
<TextView
android:id="#+id/txtTotal"
style="#style/LinearLayout_ww"
android:text="0"
android:textColor="#color/blue_3"
android:textSize="#dimen/thirteen_sp"
android:visibility="gone" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/layoutTitle2"
style="#style/LinearLayout_mm"
android:orientation="vertical"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin">
<ImageView
android:id="#+id/imageView_bankimage"
style="#style/LinearLayout_mw"
android:layout_gravity="top"
android:src="#drawable/indian_bank" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right">
<ImageView
android:layout_width="30dp"
android:layout_height="match_parent"
android:background="#drawable/style_text_view_left"
android:src="#drawable/img_net_bank" />
<Button
android:id="#+id/btnNetBanking"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/style_text_view_new"
android:text="Net Banking" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
style="#style/LinearLayout_ww"
android:src="#mipmap/ic_plus"
android:theme="#style/AppTheme_new"
android:tint="#color/black_1"
android:visibility="gone"
app:layout_anchor="#id/toolbar_layout"
app:layout_anchorGravity="bottom|center" />
<ashik.myapplication.CustomFloatingActionButton
android:id="#+id/fab1"
android:layout_width="#dimen/one_twenty_dp"
android:layout_height="#dimen/one_twenty_dp"
android:src="#drawable/refresh_icon"
android:theme="#style/AppTheme_new1"
app:borderWidth="#dimen/zero_dp"
app:elevation="#dimen/zero_dp"
app:layout_anchor="#id/toolbar_layout"
app:layout_anchorGravity="bottom|center" />
</android.support.design.widget.CoordinatorLayout>
Color-hex gives information about colors
So Basically i already mentioned that Problem for your Color Code .
You should change it .Hope this helps
Look at here .Change Both for your Problem .
<color name="colorPrimary">#3F51B5</color> <color name="colorPrimaryDark">#303F9F</color>