Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Position of NestedScrollView and AppBarLayout #164

Open
bytewired opened this issue Nov 15, 2016 · 12 comments
Open

Position of NestedScrollView and AppBarLayout #164

bytewired opened this issue Nov 15, 2016 · 12 comments

Comments

@bytewired
Copy link

Hello, in my layout I have this hierarchy:

<CoordinatorLayout>
  <AppBarLayout/>
  <NestedScrollView/>
</CoordinatorLayout>

And I can't use SmoothAppBarLayout, because I get incorrect position of views. NestedScrollView draw over AppBarLayout in match_parent of screen. You can fix this?

P.S.: I can't use this hierarchy, because this feature of screen.

<CoordinatorLayout>
  <NestedScrollView/>
  <AppBarLayout/>
</CoordinatorLayout>
@bytewired
Copy link
Author

Also not working app:behavior_overlapTop in NestedScrollView

@henrytao-me
Copy link
Owner

Hi @Ne1c
If you can change the order in your layout, then it may not possible with SmoothAppBarLayout unfortunately.

@bytewired
Copy link
Author

@henrytao-me i can't do it

@henrytao-me
Copy link
Owner

@Ne1c
Can you show me the mockup of the screen you want to implement?

@bytewired
Copy link
Author

bytewired commented Nov 21, 2016

@henrytao-me

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:piv="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/parent"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ebedf0">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="gone"
        app:elevation="0dp">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:scrimAnimationDuration="0">

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="420dp"
                app:layout_collapseMode="parallax">
                <android.support.v4.view.ViewPager
                    android:id="@+id/photos_viewPager"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"/>

                <com.rd.PageIndicatorView
                    android:id="@+id/photosIndicator_view"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|center_horizontal"
                    android:layout_margin="30dp"
                    piv:piv_animationType="worm"
                    piv:piv_viewPager="@id/photos_viewPager"/>

                <TextView
                    android:id="@+id/markedProduct_textView"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="left|bottom"
                    android:layout_marginBottom="40dp"
                    android:layout_marginLeft="12dp"
                    android:background="@drawable/rounded_corner_red_bg"
                    android:drawableLeft="@drawable/ic_top_sales"
                    android:drawablePadding="8dp"
                    android:textColor="@color/white"
                    android:visibility="gone"/>
            </FrameLayout>

            <View
                android:layout_width="match_parent"
                android:layout_height="80dp"
                android:background="@drawable/toolbar_gradient"
                app:layout_collapseMode="pin"/>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/info_scrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingLeft="8dp"
        android:paddingRight="8dp"
        android:visibility="gone"
        app:behavior_overlapTop="26dp"
        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="?attr/actionBarSize"
        android:layout_marginTop="@dimen/status_bar_margin"
        android:background="@android:color/transparent"
        android:theme="@style/ThemeOverlay.AppCompat.Dark"
        android:visibility="gone"
        app:navigationIcon="@drawable/ic_back"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:title="@string/product_descr_title"
        app:titleTextAppearance="@style/Toolbar.TitleText"/>

    <LinearLayout
        android:id="@+id/llBottomView"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_gravity="bottom"
        android:background="@drawable/buy_button_gradient"
        android:gravity="center"
        android:orientation="horizontal"
        android:padding="8dp"
        android:visibility="gone">
        
        <LinearLayout
            android:id="@+id/call_layout"
            android:layout_width="0dp"
            android:layout_height="40dp"
            android:layout_marginRight="4dp"
            android:layout_weight="1"
            android:background="@drawable/white_border_button_selector"
            android:clickable="true"
            android:gravity="center"
            android:orientation="horizontal">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_call"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="8dp"
                android:fontFamily="sans-serif-medium"
                android:text="@string/call"
                android:textAllCaps="true"
                android:textColor="@color/colorAccent"/>
        </LinearLayout>

        <ProgressBar
            android:id="@+id/buy_progressBar"
            android:layout_width="0dp"
            android:layout_height="40dp"
            android:layout_marginLeft="4dp"
            android:layout_weight="1"
            android:background="@drawable/blue_border_button_selector"
            android:indeterminate="true"
            android:padding="8dp"
            android:clickable="true"
            android:visibility="gone"/>

        <LinearLayout
            android:id="@+id/buy_layout"
            android:layout_width="0dp"
            android:layout_height="40dp"
            android:layout_marginLeft="4dp"
            android:layout_weight="1"
            android:background="@drawable/blue_border_button_selector"
            android:clickable="true"
            android:gravity="center"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/buy_icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_call"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="8dp"
                android:fontFamily="sans-serif-medium"
                android:text="@string/in_basket"
                android:textAllCaps="true"
                android:textColor="@color/white"/>
        </LinearLayout>
    </LinearLayout>

    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"/>
</android.support.design.widget.CoordinatorLayout>

@henrytao-me
Copy link
Owner

Hi @Ne1c

Can you try this layout?

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:piv="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/parent"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ebedf0">

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/info_scrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingLeft="8dp"
        android:paddingRight="8dp" />

    <me.henrytao.smoothappbarlayout.SmoothAppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="gone"
        app:elevation="0dp">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:scrimAnimationDuration="0">

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="420dp"
                app:layout_collapseMode="parallax">
                <android.support.v4.view.ViewPager
                    android:id="@+id/photos_viewPager"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"/>

                <com.rd.PageIndicatorView
                    android:id="@+id/photosIndicator_view"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|center_horizontal"
                    android:layout_margin="30dp"
                    piv:piv_animationType="worm"
                    piv:piv_viewPager="@id/photos_viewPager"/>

                <TextView
                    android:id="@+id/markedProduct_textView"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="left|bottom"
                    android:layout_marginBottom="40dp"
                    android:layout_marginLeft="12dp"
                    android:background="@drawable/rounded_corner_red_bg"
                    android:drawableLeft="@drawable/ic_top_sales"
                    android:drawablePadding="8dp"
                    android:textColor="@color/white"
                    android:visibility="gone"/>
            </FrameLayout>

            <View
                android:layout_width="match_parent"
                android:layout_height="80dp"
                android:background="@drawable/toolbar_gradient"
                app:layout_collapseMode="pin"/>
        </android.support.design.widget.CollapsingToolbarLayout>
    </me.henrytao.smoothappbarlayout.SmoothAppBarLayout>

    <android.support.v7.widget.Toolbar
        android:id="@id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_marginTop="@dimen/status_bar_margin"
        android:background="@android:color/transparent"
        android:theme="@style/ThemeOverlay.AppCompat.Dark"
        android:visibility="gone"
        app:navigationIcon="@drawable/ic_back"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:title="@string/product_descr_title"
        app:titleTextAppearance="@style/Toolbar.TitleText"/>

    <LinearLayout
        android:id="@+id/llBottomView"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_gravity="bottom"
        android:background="@drawable/buy_button_gradient"
        android:gravity="center"
        android:orientation="horizontal"
        android:padding="8dp"
        android:visibility="gone">
        
        <LinearLayout
            android:id="@+id/call_layout"
            android:layout_width="0dp"
            android:layout_height="40dp"
            android:layout_marginRight="4dp"
            android:layout_weight="1"
            android:background="@drawable/white_border_button_selector"
            android:clickable="true"
            android:gravity="center"
            android:orientation="horizontal">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_call"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="8dp"
                android:fontFamily="sans-serif-medium"
                android:text="@string/call"
                android:textAllCaps="true"
                android:textColor="@color/colorAccent"/>
        </LinearLayout>

        <ProgressBar
            android:id="@+id/buy_progressBar"
            android:layout_width="0dp"
            android:layout_height="40dp"
            android:layout_marginLeft="4dp"
            android:layout_weight="1"
            android:background="@drawable/blue_border_button_selector"
            android:indeterminate="true"
            android:padding="8dp"
            android:clickable="true"
            android:visibility="gone"/>

        <LinearLayout
            android:id="@+id/buy_layout"
            android:layout_width="0dp"
            android:layout_height="40dp"
            android:layout_marginLeft="4dp"
            android:layout_weight="1"
            android:background="@drawable/blue_border_button_selector"
            android:clickable="true"
            android:gravity="center"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/buy_icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_call"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="8dp"
                android:fontFamily="sans-serif-medium"
                android:text="@string/in_basket"
                android:textAllCaps="true"
                android:textColor="@color/white"/>
        </LinearLayout>
    </LinearLayout>

    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"/>
</android.support.design.widget.CoordinatorLayout>

@bytewired
Copy link
Author

@henrytao-me no, because app:behavior_overlapTop="26dp" will not working

@JCarlosR
Copy link

@Ne1c Hi. How did you solve this?

@ivevasiljevic
Copy link

Does anyone have a solution to this in 2019?

@vimalcvs
Copy link

<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:piv="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/parent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ebedf0">

<android.support.v4.widget.NestedScrollView
    android:id="@+id/info_scrollView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="8dp"
    android:paddingRight="8dp" />

<me.henrytao.smoothappbarlayout.SmoothAppBarLayout
    android:id="@+id/appBarLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:visibility="gone"
    app:elevation="0dp">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:scrimAnimationDuration="0">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="420dp"
            app:layout_collapseMode="parallax">
            <android.support.v4.view.ViewPager
                android:id="@+id/photos_viewPager"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>

            <com.rd.PageIndicatorView
                android:id="@+id/photosIndicator_view"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|center_horizontal"
                android:layout_margin="30dp"
                piv:piv_animationType="worm"
                piv:piv_viewPager="@id/photos_viewPager"/>

            <TextView
                android:id="@+id/markedProduct_textView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="left|bottom"
                android:layout_marginBottom="40dp"
                android:layout_marginLeft="12dp"
                android:background="@drawable/rounded_corner_red_bg"
                android:drawableLeft="@drawable/ic_top_sales"
                android:drawablePadding="8dp"
                android:textColor="@color/white"
                android:visibility="gone"/>
        </FrameLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:background="@drawable/toolbar_gradient"
            app:layout_collapseMode="pin"/>
    </android.support.design.widget.CollapsingToolbarLayout>
</me.henrytao.smoothappbarlayout.SmoothAppBarLayout>

<android.support.v7.widget.Toolbar
    android:id="@id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:layout_marginTop="@dimen/status_bar_margin"
    android:background="@android:color/transparent"
    android:theme="@style/ThemeOverlay.AppCompat.Dark"
    android:visibility="gone"
    app:navigationIcon="@drawable/ic_back"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:title="@string/product_descr_title"
    app:titleTextAppearance="@style/Toolbar.TitleText"/>

<LinearLayout
    android:id="@+id/llBottomView"
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:layout_gravity="bottom"
    android:background="@drawable/buy_button_gradient"
    android:gravity="center"
    android:orientation="horizontal"
    android:padding="8dp"
    android:visibility="gone">
    
    <LinearLayout
        android:id="@+id/call_layout"
        android:layout_width="0dp"
        android:layout_height="40dp"
        android:layout_marginRight="4dp"
        android:layout_weight="1"
        android:background="@drawable/white_border_button_selector"
        android:clickable="true"
        android:gravity="center"
        android:orientation="horizontal">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_call"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="8dp"
            android:fontFamily="sans-serif-medium"
            android:text="@string/call"
            android:textAllCaps="true"
            android:textColor="@color/colorAccent"/>
    </LinearLayout>

    <ProgressBar
        android:id="@+id/buy_progressBar"
        android:layout_width="0dp"
        android:layout_height="40dp"
        android:layout_marginLeft="4dp"
        android:layout_weight="1"
        android:background="@drawable/blue_border_button_selector"
        android:indeterminate="true"
        android:padding="8dp"
        android:clickable="true"
        android:visibility="gone"/>

    <LinearLayout
        android:id="@+id/buy_layout"
        android:layout_width="0dp"
        android:layout_height="40dp"
        android:layout_marginLeft="4dp"
        android:layout_weight="1"
        android:background="@drawable/blue_border_button_selector"
        android:clickable="true"
        android:gravity="center"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/buy_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_call"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="8dp"
            android:fontFamily="sans-serif-medium"
            android:text="@string/in_basket"
            android:textAllCaps="true"
            android:textColor="@color/white"/>
    </LinearLayout>
</LinearLayout>

<ProgressBar
    android:id="@+id/progressBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"/>

</android.support.design.widget.CoordinatorLayout>

@vimalcvs
Copy link

vimala

@vimalcvs
Copy link

__********** ** ** _ ** ** _ _ _ **

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants