this is similar to many questions but I got some different scenario . Let me explain scenario first , I have a MainActivity with BottomNavigationView & FrameLayout for switching Fragments according to BottomNavigation items click. One of the fragment has FAB & within this Fragment I need to display Snackbar .
What I have tried so far,
1) Added BottomNavigationView inside another FrameLayout , but SnackBar overlapping .
2) Added BottomBar into sub CoordinatorLayout & snackbar is behind Bottombar
Here are XMLs for MainActivity & Fragment
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activities.HomeActivity">
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:elevation="5dp"
android:background="#android:color/white"
app:itemBackground="#android:color/white"
android:foreground="?attr/selectableItemBackground"
app:labelVisibilityMode="labeled"
app:itemTextColor="#color/darkestGrey"
app:menu="#menu/navigation" />
</android.support.design.widget.CoordinatorLayout>
Here is Fragment layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".fragments.PayloadsFragment">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<FrameLayout
android:id="#+id/toolbar_container"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/payloads_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
app:title="#string/overview"
app:titleTextColor="#color/white"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<com.miguelcatalan.materialsearchview.MaterialSearchView
android:id="#+id/search_view"
android:hint="#string/hint_search_payload"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</FrameLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
<include layout="#layout/bottom_filter_sheet" />
</android.support.design.widget.CoordinatorLayout>
content_main.xml
<?xml version="1.0" encoding="utf-8"?>
<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"
android:layout_marginBottom="51dp"
android:background="#color/white"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".activities.HomeActivity">
<TextView
android:id="#+id/txt_stick_status_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginStart="#dimen/padd_10"
android:layout_marginTop="#dimen/padd_10"
android:fontFamily="sans-serif-medium"
android:maxLines="2"
android:text="#string/str_stick"
android:textColor="#color/item_name"
android:textSize="17sp" />
<TextView
android:id="#+id/txt_stick_status_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginStart="5dp"
android:layout_marginTop="9dp"
android:layout_toEndOf="#id/txt_stick_status_title"
android:fontFamily="sans-serif-medium"
android:maxLines="2"
android:text="#string/str_stick_not_available"
android:textColor="#color/darkestGrey"
android:textSize="18sp" />
<ImageButton
android:id="#+id/btn_connect_stick"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/title_margin"
android:layout_marginTop="9dp"
android:layout_toEndOf="#+id/txt_stick_status_value"
android:background="#null"
android:scaleType="centerCrop"
app:srcCompat="#drawable/ic_disconnected" />
<ImageButton
android:id="#+id/btn_filter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_marginTop="8dp"
android:layout_marginEnd="#dimen/padd_10"
android:background="#drawable/bg_grey_rounded_border"
android:padding="6dp"
app:srcCompat="#drawable/ic_filter" />
<ImageView
android:id="#+id/img_filter_active"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_alignParentEnd="true"
android:padding="#dimen/small_5_margin"
android:src="#drawable/ic_active_filter"
android:visibility="gone" />
<RelativeLayout
android:id="#+id/layout_no_device_configure"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/btn_filter"
android:layout_marginTop="#dimen/row_padding_vertical"
android:background="#color/snackbar_bg"
android:elevation="3dp"
android:padding="#dimen/title_margin"
android:visibility="visible">
<TextView
android:id="#+id/lbl_no_device_configure"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:fontFamily="sans-serif-light"
android:text="#string/lbl_no_device_configure"
android:textColor="#color/white"
android:textSize="16sp" />
<TextView
android:id="#+id/lbl_buy_input_stick_website"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_marginStart="#dimen/activity_horizontal_margin"
android:layout_marginEnd="5dp"
android:ellipsize="end"
android:fontFamily="sans-serif-medium"
android:text="#string/lbl_tap_to_configure"
android:textAllCaps="true"
android:textColor="#color/colorAccent"
android:textSize="16sp" />
</RelativeLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/layout_no_device_configure">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/title_default_payloads"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="#dimen/padd_10"
android:text="#string/default_payloads_title"
android:textColor="#color/item_name"
android:textStyle="bold" />
<android.support.v7.widget.RecyclerView
android:id="#+id/payload_recycler_view_default_payloads"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/small_5_margin"
android:scrollbars="vertical" />
<TextView
android:id="#+id/title_custom_payloads"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:padding="#dimen/padd_10"
android:text="#string/custom_payloads_title"
android:textColor="#color/item_name"
android:textStyle="bold" />
<android.support.v7.widget.RecyclerView
android:id="#+id/payload_recycler_view_custom_payloads"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical" />
</LinearLayout>
</ScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fb_add_payload"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_marginTop="#dimen/activity_horizontal_margin"
android:layout_marginEnd="#dimen/activity_horizontal_margin"
android:layout_marginBottom="10dp"
app:backgroundTint="#color/colorAccent"
app:fabSize="normal"
app:maxImageSize="17dp"
app:srcCompat="#drawable/ic_add" />
</RelativeLayout>
Do let me know if any other information is required .
Any help would be appreciated .
While displaying your snack bar programmatically, try this instead:
Snackbar snack = Snackbar.make(findViewById(R.id.coordinator_layout),
successMessage, Snackbar.LENGTH_INDEFINITE);
snack.setAction("Ok", v -> snack.dismiss());
CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams)
snack.getView().getLayoutParams();
params.setAnchorId(R.id.navigation);
params.anchorGravity = Gravity.TOP;
params.gravity = Gravity.TOP;
snack.getView().setLayoutParams(params);
snack.show();
If you are calling a SnackBar from Fragment you may do something like this:
private fun showSnackBarMessage() {
val bottomNavView: BottomNavigationView = activity?.findViewById(R.id.bottom_nav)!!
Snackbar.make(bottomNavView, "No data available", Snackbar.LENGTH_SHORT).apply {
anchorView = bottomNavView
}.show()
}
You may obtain bottomNavView from the activity's layout and then use it as anchor view for SnackBar. Now it'll be displayed above Bottom Navigation Bar
Related
My current Android application employs
com.google.android.material.bottomnavigation.BottomNavigationView
with app:layout_behavior="#string/hide_bottom_view_on_scroll_behavior"
The view content is a androidx.recyclerview.widget.RecyclerView
I have an issue when the number of items displayed in the list is insufficient to enable scrolling.
I this case the BottomNavigationView does not hide and so the last item in the list is partially hidden.
I resolved this issue by adding a bottom margin to my RecyclerView of android:layout_marginBottom="?attr/actionBarSize"
This fix now causes an issue when my BottomNavigationView is hiding due to scroll and the user
has scrolled to the last item in the list.
The user sees a blank bar at the bottom of the screen due to the bottom margin.
Is there any way I can fix both cases?
My main xml resembles this
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/suggest_home"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MyActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/toolbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
style="#style/Widget.MaterialComponents.Toolbar.Primary"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary">
<View
android:id="#+id/paddingView"
style="?android:attr/progressBarStyle"
android:layout_width="#dimen/size_menu_progressbar"
android:layout_height="#dimen/size_menu_progressbar"
android:layout_gravity="end" />
<ProgressBar
android:id="#+id/myProgressBar"
style="?android:attr/progressBarStyle"
android:layout_width="#dimen/size_menu_progressbar"
android:layout_height="#dimen/size_menu_progressbar"
android:layout_gravity="end"
android:visibility="invisible" />
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/main_area"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<androidx.fragment.app.FragmentContainerView
android:id="#+id/navHostFragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="0dp"
android:layout_height="0dp"
app:defaultNavHost="true"
android:layout_marginBottom="?attr/actionBarSize"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="#navigation/my_graph"
tools:context=".MyActivity" />
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/home_bottom_navigation_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:background="?android:attr/windowBackground"
app:itemIconTint="#color/bottom_navigation_bar_color"
app:itemTextColor="#color/bottom_navigation_bar_color"
app:labelVisibilityMode="unlabeled"
app:layout_behavior="#string/hide_bottom_view_on_scroll_behavior"
app:menu="#menu/bottom_nav_menu" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
My content layout resembles this
<?xml version="1.0" encoding="utf-8"?><!-- Use DrawerLayout as root container for activity -->
<layout 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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="#dimen/margin5"
tools:context=".MyFragment">
<androidx.appcompat.widget.SearchView
android:id="#+id/search"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true" />
<ViewFlipper
android:id="#+id/recyclerViewFlipper"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="#dimen/margin6">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="2">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:src="#drawable/ic_search" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3">
<TextView
android:id="#+id/find_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="#dimen/margin4"
android:textColor="#color/dark_grey"
android:textSize="#dimen/text4"
android:textStyle="bold" />
<TextView
android:id="#+id/find_title_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/find_title"
android:layout_centerHorizontal="true"
android:layout_marginTop="#dimen/margin4"
android:gravity="center_horizontal"
android:textColor="#color/dark_grey"
android:textSize="#dimen/text3"
android:textStyle="normal" />
</RelativeLayout>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
layout="#layout/pager_loading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:listitem="#layout/item_my_item" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="vertical">
<ImageView
android:id="#+id/image"
android:layout_width="90dp"
android:layout_height="80dp"
android:layout_gravity="center_horizontal"
android:src="#drawable/ic_no_found" />
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="#dimen/margin6"
android:textColor="#color/dark_grey"
android:textSize="#dimen/text4"
android:textStyle="bold" />
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="#dimen/margin3"
android:textColor="#color/dark_grey"
android:textSize="#dimen/text4" />
</LinearLayout>
</RelativeLayout>
</ViewFlipper>
</LinearLayout>
</layout>
You can use android:paddingBottomand android:clipToPadding.
Just set android:paddingBottom to the BottomNavigation height and android:clipToPadding tp false
<androidx.recyclerview.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:paddingTop="8dp"
android:paddingBottom="?attr/actionBarSize"
app:layout_behavior="#string/hide_bottom_view_on_scroll_behavior"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
tools:listitem="#layout/item_layout" />
try this-->
recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
private boolean hasFixedLastItemNotVisible = false;
#Override
public void onScrollStateChanged(#NonNull RecyclerView recyclerView, int newState) {
super.onScrollStateChanged(recyclerView, newState);
if (!hasFixedLastItemNotVisible &&
!recyclerView.canScrollVertically(10) &&
newState==RecyclerView.SCROLL_STATE_IDLE) {
hasFixedLastItemNotVisible = true;
recyclerView.getAdapter().notifyDataSetChanged();
}
}
});
I have some issues with parallax for android, where I currently have an image on top (with text content in the center) and a button on the top right.
Now as I scroll, I want the text and button to remain fixed on screen. As I scroll past the appbar (toolbar), the toolbar should be fixed to the top and the button should be on top right of it, fixed to it , while the rest of the content stays scrollable.
Here's my code (without parallax), any clue how i can achieve this ?
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/cl_root_view"
android:background="#color/white"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false">
<LinearLayout
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="0dp"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
style="#style/Toolbar"
android:background="#color/white"
android:contentInsetStart="5dp"
android:contentInsetLeft="5dp"
android:contentInsetEnd="5dp"
android:contentInsetRight="5dp"
app:contentInsetEnd="5dp"
app:contentInsetLeft="5dp"
app:contentInsetRight="5dp"
app:contentInsetStart="5dp"
app:titleTextAppearance="#style/Toolbar.TitleText">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/toolbar_title"
style="#style/Toolbar.AltTitleText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerInParent="true"
android:drawableStart="#drawable/ic_dots"
android:gravity="center_vertical" />
<ImageButton
android:id="#+id/my_button"
style="#style/Widget.AppCompat.Button.Borderless"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="#+id/toolbar_title"
android:layout_marginEnd="20dp"
android:background="#drawable/ic_my_button"
android:tint="#color/black" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<ScrollView
android:id="#+id/scrollView"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF">
<TextView
android:id="#+id/roomsTitle"
style="#style/Headline2LeftBlack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_toStartOf="#+id/btnMore"
android:paddingStart="20dp"
android:paddingEnd="20dp"
android:text="#string/meeting_rooms"
android:textAppearance="#style/TextAppearance.Text.Chronicle"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/btnMore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/transparent"
android:fontFamily="sans-serif"
android:letterSpacing="0.02"
android:lineSpacingExtra="2sp"
android:paddingStart="20dp"
android:paddingEnd="20dp"
android:text="#string/all_rooms"
android:textColor="#color/reddish"
android:textSize="18sp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v4.view.ViewPager
android:id="#+id/roomViewPager"
android:layout_width="match_parent"
android:layout_height="400dp"
android:clipToPadding="false"
android:overScrollMode="never"
android:paddingStart="15dp"
android:paddingTop="16dp"
android:paddingEnd="15dp"
android:paddingBottom="45dp"
app:layout_constraintTop_toBottomOf="#id/roomsTitle" />
<RelativeLayout
android:id="#+id/register_a_visitor_container"
android:layout_width="0dp"
android:layout_height="75dp"
android:layout_margin="5dp"
android:layout_marginTop="35dp"
android:background="#color/white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/roomViewPager">
<ImageView
android:id="#+id/register_visitor_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:tint="#color/reddish"
android:src="#drawable/ic_register_visitor_icon"
/>
<TextView
android:id="#+id/register_a_visitor_button"
style="#style/Body1RegLeftBlack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:letterSpacing="0.01"
android:layout_marginStart="16dp"
android:layout_toEndOf="#+id/register_visitor_icon"
android:lineSpacingExtra="8sp"
android:text="#string/register_a_visitor"
android:textAllCaps="false"
android:textAppearance="#style/TextAppearance.Text.Roboto.Regular" />
<ImageView
android:id="#+id/reset_password_chevron"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_marginEnd="16dp"
android:tint="#color/brownish_grey"
android:background="#drawable/ic_baseline_chevron_right_24px"
/>
</RelativeLayout>
<!-- TODO work on it after MVP -->
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:visibility="gone"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/container">
<TextView
android:id="#+id/upcoming_events"
style="#style/Headline3LeftGrey"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_marginStart="25dp"
android:text="#string/upcoming_events" />
<android.support.v7.widget.RecyclerView
android:id="#+id/event_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/upcoming_events"
android:background="#color/black"
tools:listitem="#layout/item_repo_view" />
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
</ScrollView>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
As you can see from the above layout. I want to add an image (and add the my_button on top right of that image) that is above the toolbar and scrolls off the screen as you scroll up while my button stays in its place until the toolbar gets on top ,after which the toolbar is affixed to the top as you scroll further up, unless you scroll down and the image is visible again and the button is no more fixed.
Please let me know if this is confusing,I will try to explain it better with diagrams if possible.
Any examples will be helpful! thanks!
Please refer below code, i have made something like you.
<?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:id="#+id/view_profile_parent_layout"
android:background="#color/splash_bg_color"
tools:context=".view_profile.ViewProfileActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_barLayout"
android:layout_width="match_parent"
android:layout_height="#dimen/view_profile_profile_app_bar_height"
android:elevation="#dimen/view_profile_app_bar_elevation"
android:theme="#style/ThemeOverlay.AppCompat.Light">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_bar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:titleEnabled="false"
android:fitsSystemWindows="true"
app:layout_scrollFlags="exitUntilCollapsed|scroll">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize">
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/view_profile_imageView"
android:layout_width="#dimen/view_profile_profile_width"
android:layout_height="#dimen/view_profile_profile_height"
android:src="#drawable/ic_profile_icon"
android:layout_centerHorizontal="true"
app:civ_border_width="#dimen/view_profile_profile_border_width"
app:civ_border_color="#color/textPrimary"/>
<TextView
android:id="#+id/view_profile_profile_name_textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/view_profile_profile_name_margin_top"
android:layout_below="#id/view_profile_imageView"
android:fontFamily="#font/roboto_regular"
android:text=""
android:textSize="#dimen/view_profile_profile_name_text_size"
android:gravity="center"
android:textColor="#color/white"/>
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
app:layout_collapseMode="pin"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="#dimen/login_btn_elevation"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
android:contentInsetStart="0dp"
android:contentInsetLeft="0dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:id="#+id/back_button"
android:layout_width="#dimen/back_btn_layout_w"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:layout_alignParentStart="true"
android:orientation="horizontal">
<Button
android:layout_gravity="center_vertical|center_horizontal"
android:layout_width="#dimen/back_btn_w"
android:layout_height="#dimen/back_btn_w"
android:layout_marginStart="#dimen/default_padding"
android:clickable="false"
android:background="#drawable/ic_arrow_back_white_24dp"
android:elevation="#dimen/login_btn_elevation" />
</LinearLayout>
<TextView
android:id="#+id/nav_title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:layout_marginStart="#dimen/nav_outer_h_space"
android:fontFamily="#font/roboto_regular"
android:text=""
android:gravity="center"
android:textColor="#color/white"
android:textSize="#dimen/title_size" />
<Button
android:id="#+id/edit_button"
android:layout_width="#dimen/back_btn_w"
android:layout_height="#dimen/back_btn_w"
android:layout_gravity="right"
android:layout_centerInParent="true"
android:layout_alignParentEnd="true"
android:layout_marginEnd="#dimen/nav_outer_h_space"
android:background="#drawable/edit_white_icon"
android:elevation="#dimen/login_btn_elevation" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
Use
app:layout_scrollFlags="exitUntilCollapsed|scroll"
in collapsing layout
app:layout_collapseMode="pin"
in Toolbar
I trying to add ToolBar to this layout, but I seeing the titleTextView is hidding behind the toolbar becasue the ScrollView is first child in layout, I tried to make ScrollView layout_height="wrap_content" but also not working
here's the full layout 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:id="#+id/detailsActivity"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".DetailsActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:src="#drawable/icons8_share_480"
app:fabSize="auto"
app:layout_anchor="#id/linearLayout"
app:layout_anchorGravity="start|bottom"
/>
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="?android:attr/progressBarStyleLarge"
android:layout_gravity="center"
/>
<ScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/titleTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:textSize="25sp"
android:textStyle="bold" />
<TextView
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:textSize="16sp" />
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="20dp"
android:src="#mipmap/ic_launcher"
android:visibility="gone" />
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="50dp"
android:text="some text"
android:textAllCaps="false"
android:textSize="20sp"
/>
</LinearLayout>
</ScrollView>
</android.support.design.widget.CoordinatorLayout>
this image with AppBarLayout
detailsActivity AppBar issue
this without AppBarLayout
detailsActivity
Change the root layout to LinearLayout and make AppBarLayout the child of it, and put all other layouts insde CoordinatorLayout
here's the xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/detailsActivity"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".DetailsActivity"
android:orientation="vertical"
>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:src="#drawable/icons8_share_480"
app:fabSize="auto"
app:layout_anchor="#id/linearLayout"
app:layout_anchorGravity="start|bottom"
/>
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="?android:attr/progressBarStyleLarge"
android:layout_gravity="center"
/>
<ScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/titleTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:textSize="25sp"
android:textStyle="bold" />
<TextView
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:textSize="16sp" />
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="20dp"
android:src="#mipmap/ic_launcher"
android:visibility="gone" />
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="50dp"
android:text="some text"
android:textAllCaps="false"
android:textSize="20dp"
/>
</LinearLayout>
</ScrollView>
</android.support.design.widget.CoordinatorLayout>
</LinearLayout>
I'm trying to get my LinearLayout to appear at the bottom of the parent (which is the bottom of the screen) but I'm not able to. It always appears at the top of the parent.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="false"
tools:context=".app.ui.tutorial.TutorialActivity">
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00FFFFFF">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:fontFamily="#font/roboto"
android:text="Toolbar Title"
android:textAllCaps="true"
android:textSize="16sp"
android:textStyle="bold" />
</android.support.v7.widget.Toolbar>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<ImageView
android:layout_width="10dp"
android:layout_height="10dp"
android:tint="#color/green500"
android:src="#drawable/ic_pager_section_position" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
Can't anchor LinearLayout to bottom of parent using CoordinatorLayout
Beacause you have added the constraint of ConstraintLayout in your LinearLayout while your root layout is CoordinatorLayout
You need to set android:layout_gravity="bottom" in your LinearLayout
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="false"
tools:context=".app.ui.tutorial.TutorialActivity">
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00FFFFFF">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:fontFamily="#font/roboto"
android:text="Toolbar Title"
android:textAllCaps="true"
android:textSize="16sp"
android:textStyle="bold" />
</android.support.v7.widget.Toolbar>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="horizontal">
<ImageView
android:layout_width="10dp"
android:layout_height="10dp"
android:src="#drawable/ic_pager_section_position"
android:tint="#color/green500" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
OUTPUT
I implemented a floating action button in my layouts. The problem is when I have too much data in my layout, the button not stay in the same position, it scrolls to the bottom of the layout. I need the same like gmail inbox: a floating button that is always accesible no matter the data.
This is my code to show the button
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<include
android:id="#+id/frgOffline"
android:visibility="gone"
layout="#layout/frg_offline"/>
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto" card_view:cardBackgroundColor="#android:color/white"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="5dp"
android:layout_marginLeft="5dp"
android:layout_marginBottom="7dp"
android:layout_marginTop="7dp"
android:gravity="center_vertical|left">
<LinearLayout
android:visibility="gone"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical">
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_marginTop="25dp"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="text"
android:layout_marginBottom="15dp"
android:textStyle="bold"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="15dp"
android:layout_margin="5dp"
android:textAppearance="?android:attr/textAppearanceSmall"/>
<com.exampleapp.expandiblelist
android:id="#+id/expListaResultado"
android:groupIndicator="#null"
android:layout_height="fill_parent"
android:transcriptMode="disabled"
android:layout_width="match_parent"/>
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/btnNueva"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="4dp"
android:layout_marginBottom="5dp"
android:layout_marginLeft="5dp"
android:src="#drawable/ic_nuevo"
android:layout_gravity="bottom|right"
app:backgroundTint="#color/blue"/>
</android.support.v7.widget.CardView>
</LinearLayout>
What's going on?
Thanks for helping!
You can see this code this will work fine with you
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto" card_view:cardBackgroundColor="#android:color/white"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="5dp"
android:layout_marginLeft="5dp"
android:layout_marginBottom="7dp"
android:layout_marginTop="7dp"
android:gravity="center_vertical|left">
<LinearLayout
android:visibility="gone"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical">
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_marginTop="25dp"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="text"
android:layout_marginBottom="15dp"
android:textStyle="bold"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="15dp"
android:layout_margin="5dp"
android:textAppearance="?android:attr/textAppearanceSmall"/>
<com.exampleapp.expandiblelist
android:id="#+id/expListaResultado"
android:groupIndicator="#null"
android:layout_height="fill_parent"
android:transcriptMode="disabled"
android:layout_width="match_parent"/>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/btnNueva"
android:layout_width="48dp"
android:layout_height="48dp"
android:elevation="4dp"
android:layout_marginBottom="16dp"
android:layout_marginLeft="5dp"
android:src="#mipmap/ic_launcher"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginRight="16dp"
/>
</RelativeLayout>
you need coordinatorlayout for this
try this one, It might help
<?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="info.androidhive.fab.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 layout="#layout/content_main" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
in content_main layout put all your necessary code..