FloatingActionButton anchor on top of a View - android

i want to anchor FloatingActionButton on top of the view ,
and this is my code :
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".ui.activity.MainActivity">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<com.alirezaafkar.toolbar.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:direction="rtl"
app:navigationIcon="#drawable/ic_arrow_back_white_24dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:title="#string/app_name">
<TextView
android:id="#+id/tv_toolbar_title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:textColor="#android:color/white"
android:textSize="20dp"
android:textStyle="bold" />
</com.alirezaafkar.toolbar.Toolbar>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/container_body"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</FrameLayout>
<ViewSwitcher
android:id="#+id/viewSwitcherBottomBar"
android:layout_width="wrap_content"
android:layout_height="120dp"
android:layout_gravity="bottom"
android:inAnimation="#android:anim/slide_in_left">
<include layout="#layout/bottom_bar_dest" />
<include layout="#layout/bottom_bar_request" />
</ViewSwitcher>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_my_location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="16dp"
android:layout_marginBottom="60dp"
android:paddingBottom="60dp"
android:src="#drawable/ic_my_location_white_24dp"
app:borderWidth="0dp"
app:elevation="6dp"
app:fabSize="mini"
app:layout_anchor="#id/viewSwitcherBottomBar"
app:layout_anchorGravity="top|right" />
</android.support.design.widget.CoordinatorLayout>
and this is the result ,
but the result is not exactly at the top of view :
how can i bring floatingActionButton exactly on top of the view ?
edit :
i want the floatingActionButton to have no overlaping with anchored view .

instead of giving padding and margin to FloatingActionButton , i set the padding in the view and it works :
<ViewSwitcher
android:id="#+id/viewSwitcherBottomBar"
android:layout_width="wrap_content"
android:layout_height="120dp"
android:paddingTop="25dp"
android:layout_gravity="bottom"
android:inAnimation="#android:anim/slide_in_left">
<include layout="#layout/bottom_bar_dest" />
<include layout="#layout/bottom_bar_request" />
</ViewSwitcher>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_my_location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:src="#drawable/ic_my_location_white_24dp"
app:borderWidth="0dp"
app:elevation="6dp"
app:fabSize="mini"
app:layout_anchor="#id/viewSwitcherBottomBar"
app:layout_anchorGravity="top|right" />

Below three lines are essential:
android:layout_gravity="top"
app:layout_anchor="#+id/layout_store_detail"
app:layout_anchorGravity="top|end"
The whole XML looks like 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<!-- This is the bottom sheet which pops up -->
<LinearLayout
android:id="#+id/layout_store_detail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:orientation="vertical"
app:behavior_hideable="true"
app:behavior_peekHeight="0dp"
app:behavior_skipCollapsed="true"
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"
>
...
</LinearLayout>
<!-- This is the Floating action button with a margin of 16dp -->
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
app:layout_anchor="#+id/layout_store_detail"
app:layout_anchorGravity="top|end"
>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab_locate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:src="#drawable/globe"
/>
</FrameLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Related

Does anyone know how to change the layout xml so that the toolbar doesn't cover the items?

Thanks!!
Here is the main xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#EFC6D4"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</com.google.android.material.appbar.AppBarLayout>
<include
android:id="#+id/include"
layout="#layout/content_main" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
app:srcCompat="#android:drawable/ic_dialog_email" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/electric_time_capital"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#FFFFFF"
app:layout_anchor="#+id/appBarLayout"
app:layout_anchorGravity="center" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="669dp"
app:layout_anchor="#+id/include"
app:layout_anchorGravity="center" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
And here is the layout xml:
<?xml version="1.0" encoding="utf-8"?>
<!--<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"-->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="15dp"
android:id="#+id/parent_layout"
app:layout_anchorGravity="center_horizontal">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/image"
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#mipmap/ic_launcher" />
<TextView
android:id="#+id/image_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/image"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_marginStart="31dp"
android:layout_marginLeft="31dp"
android:layout_marginTop="28dp"
android:layout_marginEnd="202dp"
android:layout_marginBottom="29dp"
android:layout_toEndOf="#+id/image"
android:layout_toRightOf="#+id/image"
android:gravity="center"
android:text="Walking"
android:textColor="#000"
android:textSize="17sp" />
</RelativeLayout>
<!--</androidx.coordinatorlayout.widget.CoordinatorLayout>-->
problem
layout xml
Instead of hardcoding the RecyclerView height, just use ConstraintLayout as your root layout and constraint the top of the RecyclerView to the bottom of the AppBarLayout.
Since you have not attached any image about how you want your layout to be, I am assuming that your requirements are:
AppBarLayout with Toolbar containing title "Electric Time Capital"
The layout content_main below the toolbar
The RecyclerView below the layout content_main
FloatingActionButton at the bottom right
<androidx.constraintlayout.widget.ConstraintLayout
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">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#EFC6D4"
app:popupTheme="#style/AppTheme.PopupOverlay">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/electric_time_capital"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#FFFFFF" />
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
<include
android:id="#+id/include"
layout="#layout/content_main"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/appBarLayout" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:srcCompat="#android:drawable/ic_dialog_email" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="669dp"
android:layout_below="#id/include"
app:layout_constraintTop_toBottomOf="#id/include" />
</androidx.constraintlayout.widget.ConstraintLayout>
Note: Use ConstraintLayout as it is easier to make responsive
layouts. It might look tricky when you use it for the first time, but it is the
best approach!
Happy Coding! 🎉

Android making ViewPager scroll with parent activity layout

I have an android app in which I am trying to create the below layout -
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/cl_root_view"
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:background="#color/tab_primary_background"
android:layout_height="wrap_content"
app:elevation="5dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
style="#style/Toolbar"
app:subtitleTextColor="#color/white"
app:title="#string/app_name"
app:titleTextAppearance="#style/Toolbar.TitleText"
app:titleTextColor="#color/white" />
</android.support.design.widget.AppBarLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_weight="1"
android:fillViewport="true"
android:layout_height="0dp">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:paddingStart="15dp"
android:paddingEnd="15dp"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:layout_marginTop="15dp"
android:layout_height="wrap_content">
<ImageView
android:layout_width="60dp"
android:src="#drawable/teacher_onboarding_step2"
android:layout_height="60dp"
android:layout_gravity="center"
android:textAlignment="center"
android:contentDescription="#string/take_test" />
<TextView
android:layout_width="match_parent"
android:id="#+id/tat_title_placeholder"
style="#style/TextAppearance.Text.Light"
android:textSize="14sp"
android:textAlignment="center"
android:padding="15dp"
android:text="#string/tat_title_placeholder"
android:layout_height="wrap_content" />
<com.mindorks.placeholderview.PlaceHolderView
android:layout_width="match_parent"
android:id="#+id/fixed_test_placeholder"
android:layout_height="wrap_content" />
</LinearLayout>
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:id="#+id/tat_tab_layout"
app:tabIndicatorColor="#color/white"
app:tabSelectedTextColor="#color/white"
app:tabBackground="#color/tab_primary_background"
android:layout_height="wrap_content" />
<android.support.v4.view.ViewPager
android:id="#+id/tat_viewpager"
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="0dp" />
</LinearLayout>
</ScrollView>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
style="#style/Widget.Design.NavigationView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/white"
app:headerLayout="#layout/drawer_header"
app:itemBackground="#color/white"
app:itemIconTint="#color/black_effective"
app:itemTextColor="#color/black_effective"
app:menu="#menu/drawer">
<TextView
android:id="#+id/tv_app_version"
style="#style/TextStyle.Title.Sub"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:padding="5dp" />
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
So, in this layout as you can see I want to add a TabLayout and a ViewPager below some views. Now the problem I am facing is my ViewPager is restricted to the available space at the bottom of the screen so, only the viewpager is scrollable and not the full activity layout. Which leaves very little space at the bottom to see the viewpager contents.
So, I want to make the whole layout below the appbar scrollable from the top so that the fragments inside viewpager are easily and conveniently visible.
------------Update---------
I tried using the Nested Scroll View, setFillViewPort, and the collapsing layout as suggested but still getting the same result.
Updated layout xml with Collapsing ToolbarLayout -
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/cl_root_view"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.urtutors.students.mvp.utils.MyNestedScrollView
android:layout_width="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="wrap_content">
<com.urtutors.students.mvp.utils.WrapContentHeightViewPager
android:id="#+id/tat_viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</com.urtutors.students.mvp.utils.MyNestedScrollView>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:background="#color/tab_primary_background"
android:layout_height="wrap_content"
app:elevation="5dp">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:paddingStart="15dp"
app:layout_collapseMode="parallax"
android:paddingEnd="15dp"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:layout_marginTop="15dp"
android:layout_height="wrap_content">
<ImageView
android:layout_width="60dp"
android:src="#drawable/teacher_onboarding_step2"
android:layout_height="60dp"
android:layout_gravity="center"
android:textAlignment="center"
android:contentDescription="#string/take_test" />
<TextView
android:layout_width="match_parent"
android:id="#+id/tat_title_placeholder"
style="#style/TextAppearance.Text.Light"
android:textSize="14sp"
android:textAlignment="center"
android:padding="15dp"
android:text="#string/tat_title_placeholder"
android:layout_height="wrap_content" />
<com.mindorks.placeholderview.PlaceHolderView
android:layout_width="match_parent"
android:id="#+id/fixed_test_placeholder"
android:layout_height="wrap_content" />
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
style="#style/Toolbar"
app:layout_collapseMode="pin"
app:subtitleTextColor="#color/white"
app:title="#string/app_name"
app:titleTextAppearance="#style/Toolbar.TitleText"
app:titleTextColor="#color/white" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:id="#+id/tat_tab_layout"
app:tabIndicatorColor="#color/white"
app:tabSelectedTextColor="#color/white"
app:tabBackground="#color/tab_primary_background"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
style="#style/Widget.Design.NavigationView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/white"
app:headerLayout="#layout/drawer_header"
app:itemBackground="#color/white"
app:itemIconTint="#color/black_effective"
app:itemTextColor="#color/black_effective"
app:menu="#menu/drawer">
<TextView
android:id="#+id/tv_app_version"
style="#style/TextStyle.Title.Sub"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:padding="5dp" />
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
The nested scroll views I copied from - https://github.com/TheLittleNaruto/SupportDesignExample/tree/master/app/src/main/java/com/thelittlenaruto/supportdesignexample/customview
Now, the viewpager is scrolling but my actionbar title is not visible anymore.
Can someone suggest any changes to this layout that could fix this issue ?
I have tried to refine your code and if I am not wrong you wanted it to be scrollable,you can try the following code.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/cl_root_view"
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:background="#color/colorPrimary"
app:elevation="5dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
app:subtitleTextColor="#android:color/white"
app:title="#string/app_name"
app:titleTextColor="#android:color/white" />
</android.support.design.widget.AppBarLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:orientation="vertical"
android:paddingEnd="15dp"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:paddingStart="15dp">
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:contentDescription="#string/take_test"
android:src="#mipmap/ic_launcher"
android:textAlignment="center" />
<TextView
android:id="#+id/tat_title_placeholder"
style="#android:style/TextAppearance.Medium"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="15dp"
android:text="#string/tat_title_placeholder"
android:textAlignment="center"
android:textSize="14sp" />
<View
android:id="#+id/fixed_test_placeholder"
android:layout_width="match_parent"
android:background="#color/colorAccent"
android:layout_height="400dp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="500dp"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/tat_tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"
app:tabPadding="#dimen/s_padding"
app:tabBackground="#color/colorPrimaryDark"
app:tabIndicatorColor="#android:color/white"
app:tabSelectedTextColor="#android:color/white" />
<android.support.v4.view.ViewPager
android:id="#+id/tat_viewpager"
android:layout_width="match_parent"
android:background="#color/colorPrimaryDark"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
style="#style/Widget.Design.NavigationView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#android:color/white"
app:headerLayout="#layout/nav_header_nav"
app:itemBackground="#android:color/white"
app:itemIconTint="#android:color/black"
app:itemTextColor="#android:color/black"
app:menu="#menu/activity_nav_drawer">
<TextView
android:id="#+id/tv_app_version"
style="#style/TextAppearance.AppCompat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:padding="5dp" />
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
I have made minor changes.
Try not to use weights when using scrollView.As they don't work so
well with each other.
I have wrapped Tab layouts in a Linear Layout
and gave it static height(can be replaced easily).
Hope it helps.

appbar is not positioning correctly

In my coordinator layout I included another layout which causes AppBarLayout to move to the top and positioned under the status bar,in other words the toolbar height is the half size of it's real height, why is this happening? And also the title of the toolbar is not positioning properly.
<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:id="#+id/ma_main">
<android.support.design.widget.AppBarLayout
android:id="#+id/ma_appbar_layout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<android.support.v7.widget.Toolbar
android:id="#+id/ma_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/AppTheme.popup"/>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/main_activity_recycler"/>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/ma_fab"
app:layout_anchor="#id/ma_recycler_layout"
app:layout_anchorGravity="bottom|end"
android:layout_margin="15dp"
app:fabSize="normal"
android:src="#drawable/pencil"
android:elevation="8dp" />
</android.support.design.widget.CoordinatorLayout>
and included layout
<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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_main"
android:id="#+id/ma_recycler_layout">
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/ma_recyclerView"
android:visibility="invisible">
</android.support.v7.widget.RecyclerView>
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="2dp"
android:padding="5dp"
android:id="#+id/ma_progressbar"
android:visibility="visible"
android:indeterminate="true"
/></LinearLayout>
make some changes in xml like below ..
<RelativeLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.AppBarLayout
android:id="#+id/ma_appbar_layout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<android.support.v7.widget.Toolbar
android:id="#+id/ma_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/AppTheme.popup" />
</android.support.design.widget.AppBarLayout>
</RelativeLayout>
<include layout="#layout/rl" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/ma_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:elevation="8dp"
android:src="#drawable/pencil"
app:fabSize="normal"
app:layout_anchor="#id/ma_recycler_layout"
app:layout_anchorGravity="bottom|end" />
</android.support.design.widget.CoordinatorLayout>
then after recyler view layout like below ..
<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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/ma_recycler_layout">
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/ma_recyclerView"
android:visibility="invisible">
</android.support.v7.widget.RecyclerView>
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:padding="5dp"
android:id="#+id/ma_progressbar"
android:visibility="visible"
android:indeterminate="true"
android:layout_centerInParent="true"
/></RelativeLayout>

Row of Listview hidden

i need to create a listview into a framelayout.
This is my code:
<FrameLayout
android:id="#+id/layout_ejercicios"
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_alignParentStart="true"
android:layout_below="#+id/layout_info"
android:orientation="vertical">
<ListView
android:id="#+id/listViewEjercicios"
android:layout_width="match_parent"
android:layout_height="match_parent"></ListView>
<include
android:id="#+id/tool_bar_ejercicios"
layout="#layout/toolbar" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabCrearEntrenamiento"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:clickable="true"
android:src="#drawable/ic_action_add"
app:fabSize="normal"
app:layout_anchor="#id/layout_ejercicios"
app:layout_anchorGravity="bottom|right|end" />
</FrameLayout>
It works almost fine but the first row always is hidden by the toolbar.
The rest rows look good.
I try to add padding_top in the row_layout.xml, but is no a solution.
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rowTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:textSize="21sp" >
</TextView>
How can i do that?
try this;
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/holo_light_background"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<include
android:id="#+id/tool_bar_ejercicios"
layout="#layout/toolbar" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/layout_ejercicios"
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_alignParentStart="true"
android:layout_below="#+id/layout_info"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:orientation="vertical">
<ListView
android:id="#+id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/bar"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabCrearEntrenamiento"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:clickable="true"
android:src="#drawable/ic_action_add"
app:fabSize="normal"
app:layout_anchor="#id/layout_ejercicios"
app:layout_anchorGravity="bottom|right|end" />
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
You used a FrameLayout. Yes, all views overlap in a FrameLayout. Use a LinearLayout because you have set orientation="vertical"
You should put Toolbar above other things
CoordinatorLayout would be better
For example,
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/tool_bar_ejercicios"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
</android.support.design.widget.AppBarLayout>
<!-- Some other layout behind the Action Button -->
<include layout="#layout/list_view"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabCrearEntrenamiento"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right|end"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_action_add"/>
</android.support.design.widget.CoordinatorLayout>

How to prevent a layout moving along with toolbar inside a coordinator layout?

I have a HomeActivity which has tabs containing fragments. In which BoardFragment has children RecyclerView and a RelativeLayout(at bottom). My Toolbar collapses when I scroll up. But my RealtiveLayout on the bottom also coordinate with them. Only the upper part part of it is shown on oncreate. It shows up completely when I scroll up.
Here are the sreenshots.
HomeActivity.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_menu_white_24dp"
/>
<Spinner
android:id="#+id/spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="150dp"
app:popupTheme="#style/AppTheme.PopupOverlay"
/>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_input_add"
android:visibility="invisible" />
Board Fragment.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="io.sleeko.fragment.BoardFragment"
android:background="#dadada">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/boardMainContentList"
>
</android.support.v7.widget.RecyclerView>
<com.github.rahatarmanahmed.cpv.CircularProgressView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/spinningProgressView"
android:layout_width="36dp"
android:layout_height="36dp"
android:padding="4dp"
android:background="#drawable/white_circle_drawable"
android:layout_centerHorizontal="true"
android:layout_marginTop="150dp"
app:cpv_thickness="3dp"
app:cpv_color="#ff161a73"
app:cpv_animAutostart="true"
app:cpv_indeterminate="true"
android:elevation="4dp"
/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="96dp"
android:layout_alignParentBottom="true"
android:duplicateParentState="true"
android:background="#ffffff"
android:padding="8dp"
android:id="#+id/sendMessageContainer"
>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Write a Message"
android:padding="8dp"
android:background="#android:color/transparent"
/>
<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:fabSize="mini"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:id="#+id/sendButton"
android:src="#drawable/ic_send_white_24dp"
/>
</RelativeLayout>
</RelativeLayout>
Can anyone help me solve this?
Thanks.
I have encountered a similar problem before. you wont need app:layout_behavior="#string/appbar_scrolling_view_behavior" inside viewpager inside HomeActivity layout. I think this will solve your problem.

Categories

Resources