How to implement soundcloud header layout for profile - android

how to implement above layout using mostly the fact that the toolbar doesn't move while the image under it slide up and down, i want achieve the same effect ,am currently implementing using the new cordinatorlayout and collapsing toolbar and Relative layout containing and image
<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="true"
tools:context="com.example.madiba.listmulti.TabbedActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
app:titleEnabled="false"
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/banner"
android:fitsSystemWindows="true"
android:src="#android:color/holo_red_light"
android:layout_width="match_parent"
android:layout_height="180dp" />
<LinearLayout
android:layout_alignParentRight="true"
android:orientation="vertical"
android:padding="10dp"
android:gravity="right"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:text="Follow"
android:textColor="#android:color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<TextView
android:id="#+id/main_title"
android:layout_below="#id/banner"
android:gravity="center"
android:textColor="#android:color/black"
android:paddingTop="12dp"
android:paddingBottom="8dp"
android:textStyle="bold"
android:text="Flume Concert"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<LinearLayout
android:layout_below="#id/main_title"
android:orientation="horizontal"
android:paddingBottom="8dp"
android:layout_gravity="center"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:textColor="#android:color/darker_gray"
android:text="12 event | "
android:textAppearance="#style/TextAppearance.AppCompat.Small"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:textColor="#android:color/darker_gray"
android:text="4 members "
android:textAppearance="#style/TextAppearance.AppCompat.Small"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>
<TextView
android:gravity="center"
android:textColor="#android:color/black"
android:paddingTop="12dp"
android:paddingBottom="8dp"
android:textStyle="bold"
android:text="Flume Concert"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<!--</LinearLayout>-->
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
app:tabSelectedTextColor="#android:color/black"
app:tabTextColor="#android:color/darker_gray"
android:background="#android:color/white"
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>

Related

Changing from one view to another view onScroll

I am working a project. I have a a layout with a view at top and a Scrollview at the bottom of the view. Initially the layout will look like this.
After I scroll up the bottom layout. The view should smoothly change the the below view. And if I scroll down the view should come back to its previous layout.
As you can see there is a change in the position and size of the textviews. How can I achieve this ?
Here is the layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/home_parentLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
android:background="#color/AT_charcoal">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginBottom="9dp"
android:background="#drawable/topographybackgroundx">
<RelativeLayout
android:id="#+id/layout_header_profile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="20dp">
<RelativeLayout
android:id="#+id/top_ExpandedHeader"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageButton
android:id="#+id/image_invisalignLogo"
android:layout_width="108dp"
android:layout_height="26dp"
android:background="#drawable/invis_logo"
android:contentDescription="#null" />
<ImageButton
android:id="#+id/image_profile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:background="#drawable/ic_profile_wht"
android:contentDescription="#null" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/number_RelativeLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/layout_aligner_expanded_change"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp">
<TextView
android:id="#+id/image_alignerNumber"
style="#style/BigNumber"
android:layout_width="wrap_content"
android:layout_height="138dp"
android:layout_alignParentStart="true"
android:layout_below="#+id/textview_alignerTimeChange"
android:maxLength="2"
android:maxLines="1"
android:text="#string/three"
android:textSize="124sp" />
<TextView
android:id="#+id/textview_alignerChange"
style="#style/BodyWhite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginTop="80dp"
android:layout_toEndOf="#id/image_alignerNumber"
android:letterSpacing="0.03"
android:text="#string/days_alignerchange" />
<de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/image_selfie_icon"
android:layout_width="96dp"
android:layout_height="96dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
app:civ_border_color="#FFFFFFFF"
app:civ_border_width="2dp" />
<TextView
android:id="#+id/textview_6alignerNumber"
style="#style/HeaderWhite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/image_alignerNumber"
android:layout_below="#id/image_alignerNumber"
android:layout_marginTop="2dp"
android:letterSpacing="0.03"
android:text="#string/aligner_number" />
<TextView
android:id="#+id/textview_expanalignerNumber"
style="#style/HeaderWhite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/image_alignerNumber"
android:layout_toEndOf="#id/textview_6alignerNumber"
android:text="5" />
<TextView
android:id="#+id/textview_alignerTimeChange"
style="#style/LargeHeaderWhite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="17dp"
android:letterSpacing="0.03"
android:text="#string/aligner_change"
android:visibility="gone" />
<Button
android:id="#+id/button_change"
style="#style/TextButtonWhite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textview_alignerTimeChange"
android:layout_marginTop="15dp"
android:background="#color/AT_lushGreen"
android:gravity="center_vertical"
android:paddingLeft="30dp"
android:paddingRight="30dp"
android:text="#string/changenow"
android:visibility="gone" />
</RelativeLayout>
<View
android:id="#+id/dividerline"
android:layout_width="fill_parent"
android:layout_height="2dp"
android:layout_below="#id/number_RelativeLayout"
android:layout_marginTop="12dp"
android:background="#color/AT_line" />
<TextView
android:id="#+id/addPhoto_TextView"
style="#style/BtnTextBlue18"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/dividerline"
android:layout_marginTop="10dp"
android:text="#string/add_photo" />
<TextView
android:id="#+id/goCalendar_TextView"
style="#style/BtnTextGold18"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_below="#id/dividerline"
android:layout_marginTop="7dp"
android:text="#string/go_calendar" />
</RelativeLayout>
</RelativeLayout>
<include
layout="#layout/homescreen_scrollview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/layout_header_profile"
android:layout_marginTop="15dp" />
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
You can use the Collapsing Toolbar Layout
Example Here and here
Edit: some piece of code
<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.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary">
<ImageView
android:id="#+id/expandedImage"
android:layout_width="match_parent"
android:layout_height="200dp"
android:src="#drawable/beach_scene"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" >
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/sample_string"/>
</android.support.v4.widget.NestedScrollView>
Using a Collapse Tool Bar as João said, your code should be like this
and getting my answer as base from here
<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:clipToPadding="false">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="210dp"
android:background="#color/WHITE">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:collapsedTitleTextAppearance="#style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
app:expandedTitleMarginStart="72dp"
app:expandedTitleTextAppearance="#style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<Your Content>
<android.support.v7.widget.Toolbar
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="40dp"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include
layout="#layout/homescreen_scrollview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/layout_header_profile"
android:layout_marginTop="15dp" />
On <Your Content> is the place where you should put your string.
Sorry that I can't help more. Your Cody is a little messy and really hard to understand.
Maybe if you edit leaving only the important codes will help.
But maybe this library can help you.

Why scrolling stops at collapsed toolbar when scrolling up? (Not expanding to show image)

As I explained on the title, if I scroll from the bottom to top fastly with removing my finger immediately after pulling down, scrolling stops at collapsed toolbar. I want it to expand. If I pull smootly the nestedscrollview, there is no problem, toolbar expands properly.
I have recycler view in nestedscrollview.
Here is my layout
<android.support.design.widget.CoordinatorLayout
android:id="#+id/detail_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
>
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="160dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="#dimen/article_keylines"
app:expandedTitleMarginStart="#dimen/md_keylines"
app:expandedTitleMarginBottom="#dimen/article_keylines"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:expandedTitleTextAppearance="#dimen/tile_padding"
>
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/a"
android:fitsSystemWindows="true"
android:foreground="#drawable/scrim_profile"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
android:elevation="4dp"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/nestedscrollview"
android:background="#color/background"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<RelativeLayout
android:id="#+id/inner_relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/md_keylines"
android:paddingRight="#dimen/md_keylines"
android:background="#color/white"
android:paddingBottom="#dimen/article_keylines"
android:paddingTop="#dimen/article_keylines"
android:focusableInTouchMode="true"
>
<TextView
android:id="#+id/tw1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/text"
android:textSize="16sp"
android:lineSpacingExtra="4sp"
android:text="Text"
android:layout_marginBottom="#dimen/md_keylines"/>
<View
android:id="#+id/divider_1"
android:layout_width="2dp"
android:layout_height="50dp"
android:background="#color/divisor"
android:layout_below="#id/tw1"
/>
<View
android:id="#+id/divider_2"
android:layout_width="2dp"
android:layout_height="50dp"
android:background="#color/divisor"
android:layout_below="#id/tw1"
android:layout_toRightOf="#+id/tw2"
android:layout_toEndOf="#+id/tw2" />
<View
android:id="#+id/divider_3"
android:layout_width="2dp"
android:layout_height="50dp"
android:background="#color/divisor"
android:layout_below="#+id/tw1"
android:layout_toRightOf="#+id/followers"
android:layout_toEndOf="#+id/followers"/>
<TextView
android:id="#+id/count"
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="#color/text"
android:textSize="20sp"
android:text="14"
android:lineSpacingExtra="-4sp"
android:layout_alignTop="#id/divider_1"
android:layout_marginTop="6dp"
android:layout_alignRight="#+id/experience"
android:layout_alignEnd="#+id/experience"
/>
<TextView
android:id="#+id/tw3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/text"
android:textSize="14sp"
android:text="Text"
android:paddingRight="12dp"
android:paddingEnd="12dp"
android:paddingLeft="12dp"
android:paddingStart="12dp"
android:layout_below="#id/tw2"
android:layout_toRightOf="#id/divider_1"
/>
<TextView
android:id="#+id/count2"
android:layout_toRightOf="#id/divider_2"
android:layout_toLeftOf="#id/divider_3"
android:layout_below="#id/tw1"
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="#color/text"
android:textSize="20sp"
android:layout_alignTop="#id/divider_1"
android:layout_marginTop="6dp"
android:text="200"
/>
<TextView
android:id="#+id/tw4"
android:layout_below="#id/tw3"
android:layout_toRightOf="#id/divider_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:textColor="#color/text"
android:textSize="14sp"
android:text="text"
android:paddingLeft="12dp"
android:paddingRight="12dp"
/>
<Button
android:id="#+id/button"
android:layout_toRightOf="#id/divider_3"
android:layout_below="#id/tw1"
android:layout_marginLeft="12dp"
android:layout_width="match_parent"
android:layout_height="38dp"
android:textColor="#color/orange_button"
android:gravity="center_vertical|start"
android:text="text"
android:textSize="16sp"
android:textAllCaps="false"
android:paddingLeft="18dp"
android:drawableLeft="#drawable/i"
android:drawablePadding="4dp"
android:layout_alignTop="#id/count"
style="?android:attr/borderlessButtonStyle"
android:background="#drawable/button"/>
</RelativeLayout>
<android.support.v7.widget.RecyclerView
android:padding="#dimen/md_keylines"
android:id="#+id/recycler_view"
android:layout_below="#id/inner_relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<ProgressBar
android:id="#+id/progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#id/inner_relativeLayout"
android:layout_marginTop="30dp"/>
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Thanks in advance.
After I tried a lot with overriding AppBarLayout.Behavior in another stackoverflow answer,
I have found a library that resolves my problem. ( smooth-app-bar-layout
)
There are 3 steps in usage. Be careful about the 3rd step. You should put nestedscrollview above the smoothappbarlayout below the coordinatorlayout.
<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.support.v7.widget.NestedScrollView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<me.henrytao.smoothappbarlayout.SmoothAppBarLayout
android:id="#+id/smooth_app_bar_layout"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
app:layout_collapseMode="pin"
app:navigationIcon="#drawable/ic_toolbar_arrow_back"
style="#style/AppStyle.MdToolbar" />
</android.support.design.widget.CollapsingToolbarLayout>
</me.henrytao.smoothappbarlayout.SmoothAppBarLayout>
</android.support.design.widget.CoordinatorLayout>

CollapsingToolbarLayout was not scrolling smooth

I am new to CollapsingToolbarLayout when i scroll my content was not scroll smoothly any one please help where i did wrong were below my layout,when i scrooll up it my layout was not scrolling smoothly
<android.support.design.widget.AppBarLayout android:layout_height="wrap_content"
android:layout_width="match_parent" android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp" >
<ImageView
android:id="#+id/fulldec_image"
android:layout_width="match_parent"
android:layout_height="350dp"
android:scaleType="fitXY"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="170dp"
android:layout_gravity="bottom">
<TextView
android:id="#+id/fulldectext"
android:layout_width="match_parent"
android:layout_height="160dp"
android:layout_gravity="center"
android:text="The problem is not the problem. The problem is your attitude about the problem"
android:textSize="25sp"
android:lineSpacingMultiplier="1.2"
android:gravity="center"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/fullde_descriptiontect"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:text="Hello"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="20dp"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="130dp"
android:paddingLeft="30dp"
android:background="#FFFFFF"
android:orientation="vertical">
<TextView
android:layout_marginLeft="10dp"
android:gravity="center_vertical"
android:text="More Links"
android:layout_width="fill_parent"
android:layout_height="35dp"
android:textStyle="bold"
android:textSize="15dp"/>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/text_one_t"
android:gravity="center"
android:layout_marginTop="10dp"
android:textSize="20dp"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>
<TextView
android:id="#+id/text_two_t
android:layout_marginTop="10dp"
android:textSize="20dp"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>

AppbarLayout and NestedScrollView Overlaps while opening the Activity

Nested ScrollView has fragments which have RecyclerView and AppbarLayout does not scroll when dragged.
I have even added app:layout_behavior="#string/appbar_scrolling_view_behavior" in my RecyclerView as suggested in some answer but that does not work.
<android.support.design.widget.CoordinatorLayout
android:id="#+id/profile_view_cl"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/color_control_highlight"
android:fitsSystemWindows="true"
android:focusableInTouchMode="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/margin_8dp"
app:layout_behavior="com.practo.docnet.widgets.FlingBehavior"
android:theme="#style/Theme.AppCompat.NoActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_tool_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="#color/color_primary"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/color_white"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.5">
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|center_horizontal"
android:layout_marginBottom="#dimen/profile_pic_margin_bottom"
android:layout_marginTop="#dimen/profile_pic_margin_top"
android:background="#android:color/white"
android:elevation="#dimen/card_padding"
android:gravity="center_horizontal|top"
app:cardCornerRadius="#dimen/default_elevation"
app:cardUseCompatPadding="false">
<ImageView
android:id="#+id/profile_pic_iv"
android:layout_width="#dimen/profile_pic_size"
android:layout_height="#dimen/profile_pic_size"
android:layout_gravity="center_horizontal"
android:layout_margin="#dimen/profile_pic_margin"
android:adjustViewBounds="true"
android:scaleType="fitXY"
/>
</android.support.v7.widget.CardView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:orientation="vertical">
<ImageView
android:id="#+id/cover_pic"
android:layout_width="match_parent"
android:layout_height="#dimen/cover_pic_height"
android:layout_gravity="top"
android:fitsSystemWindows="true"
android:scaleType="fitXY"
android:src="#drawable/profile_placeholder"
android:tint="#color/cover_pic_tint" />
<LinearLayout
android:id="#+id/layout_titles"
android:layout_width="wrap_content"
android:layout_height="#dimen/titles_layout_height"
android:layout_gravity="center_horizontal"
android:layout_marginTop="#dimen/titles_layout_margin_top"
android:orientation="vertical">
<TextView
android:id="#+id/first_name_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:fontFamily="sans-serif"
android:gravity="bottom|center"
android:textColor="#color/color_black"
android:textSize="#dimen/text_sz_xxxlarge" />
<TextView
android:id="#+id/designation_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="#dimen/designation_text_margin_top"
android:fontFamily="sans-serif-light"
android:textColor="#color/color_black"
android:textSize="#dimen/text_sz_xlarge" />
<TextView
android:id="#+id/location_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="#dimen/location_text_margin_top"
android:fontFamily="sans-serif-light"
android:textColor="#color/color_black"
android:textSize="#dimen/text_sz_xlarge" />
<TextView
android:id="#+id/no_of_connections_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="#dimen/card_padding_more"
android:background="?selectableItemBackground"
android:fontFamily="sans-serif-medium"
android:textColor="#color/color_primary"
android:textSize="#dimen/text_sz_xxlarge" />
<TextView
android:id="#+id/connections_text_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="#dimen/connections_text_margin_top"
android:background="?selectableItemBackground"
android:fontFamily="sans-serif-light"
android:text="#string/connections"
android:textColor="#color/color_black"
android:textSize="#dimen/text_sz_xlarge" />
</LinearLayout>
</LinearLayout>
</FrameLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/main_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="center_horizontal"
app:layout_collapseMode="pin"
app:navigationIcon="#drawable/back_icon"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<TextView
android:id="#+id/title_textview"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="#dimen/margin_8dp"
android:gravity="center_vertical"
android:textColor="#android:color/white"
android:textSize="#dimen/text_sz_xxlarge" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:foregroundGravity="fill_vertical"
android:layout_marginTop="#dimen/margin_8dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:id="#+id/cards_layout_ll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:focusableInTouchMode="true"
android:orientation="vertical">
<include layout="#layout/profile_connect_layout" />

Issues with Coordinator Layout

I do not want the toolbar to collapse in the coordinator layout below. No matter what I do it collapses (the tabs do not collapse but the toolbar with the title does).
Second issue is that the nestedscrollview in the viewpager has a few EditTexts. On opening of softkeyboard when an edittext at the bottom is clicked the softkeyboard goes over the edittext. On closing the softkeyboard and then doing second attempt it successfully moves the edittext text up.
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_collapseMode="none">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="36dp"
android:paddingLeft="6dp"
app:tabMode="scrollable" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
android:layout_marginBottom="?attr/actionBarSize"/>
<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="#drawable/ic_add_white_48dp"
android:visibility="gone" />
This is one of the views within the viewpager:
<android.support.v4.widget.NestedScrollView 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"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="22dp"
android:layout_marginRight="22dp"
android:layout_marginTop="15dp"
android:orientation="vertical">
<AutoCompleteTextView
android:id="#+id/symbolAutoCompleteBuy"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:hint="Enter Symbol Here"
android:inputType="textCapCharacters" />
<TextView
android:id="#+id/companyNameBuy"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginLeft="4dp"
android:textColor="#color/gray2"
android:textStyle="bold"
android:textSize="14sp" />
<TextView
android:id="#+id/currentPriceBuy"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginLeft="4dp"
android:textColor="#color/gray2"
android:textStyle="bold"
android:textSize="14sp" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:orientation="horizontal">
<TextView
android:layout_weight="0.45"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="PURCHASE PRICE"/>
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.55" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="80dp"
android:orientation="horizontal">
<TextView
android:layout_weight="0.45"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="NUMBER OF SHARES"/>
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.55" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="18dp"
android:orientation="horizontal">
<TextView
android:layout_weight="0.45"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="PURCHASE DATE"
android:layout_gravity="center_vertical" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.35"
android:id="#+id/dateText"
android:layout_gravity="center_vertical" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.2"
android:id="#+id/datePickerImage"
android:src="#drawable/ic_event_note_black_24dp" />
</LinearLayout>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
Try this
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="#color/primary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="300dp"
android:scaleType="centerCrop"
android:src="#drawable/collapsing_toolbar_bg"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tab_layout"
android:background="?attr/colorPrimary"/>
</android.support.design.widget.AppBarLayout>
The atrribute:
app:layout_scrollFlags="scroll|exitUntilCollapsed"
prevents the collapsing toolbar layout from getting completely collapsed.
And replace android:src="#drawable/collapsing_toolbar_bg" with your image resource

Categories

Resources