scrollview with recyclerview in fragment - android

This is the fragment that I put in the viewPager
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:fab="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/fragment_own_product_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/profile_bg"
tools:context="fyp.hkust.facet.fragment.OwnProductFragment">
<android.support.v7.widget.RecyclerView
android:id="#+id/ownproductlist"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentEnd="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentStart="true"
android:padding="5dp">
</android.support.v7.widget.RecyclerView>
<com.melnykov.fab.FloatingActionButton
android:id="#+id/add_product_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="16dp"
android:elevation="6dp"
android:src="#mipmap/ic_plus_white_36dp"
fab:fab_colorNormal="#color/colorPrimary"
fab:fab_colorPressed="#color/primary_pressed"
fab:fab_colorRipple="#color/ripple"
fab:fab_shadow="true" />
The following is the activity
Updated:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/profile_coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".activity.MainActivity">
<!-- your content layout -->
<LinearLayout
android:id="#+id/profile_linear_layout"
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:theme="#style/AppTheme.AppBarOverlay"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
app:elevation="0dp" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/profile_scrollview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<RelativeLayout
android:id="#+id/activity_profile"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/profile_bg"
tools:context="fyp.hkust.facet.activity.ProfileActivity">
<RelativeLayout
android:id="#+id/profile_layout"
android:layout_width="match_parent"
android:layout_height="150dp"
android:orientation="vertical"
android:weightSum="1">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_picture"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginBottom="25dp"
android:layout_marginLeft="20dp"
android:layout_marginTop="25dp"
android:elevation="6dp"
android:src="#mipmap/app_icon" />
<Button
android:id="#+id/btn_edit"
android:layout_width="60dp"
android:layout_height="35dp"
android:layout_alignBottom="#+id/profile_email"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_marginBottom="5dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="20dp"
android:adjustViewBounds="true"
android:background="#drawable/border_button_no_bg"
android:clickable="true"
android:contextClickable="true"
android:scaleType="fitCenter"
android:text="#string/edit_btn_text"
android:textColor="#color/font_color_pirmary" />
<TextView
android:id="#+id/profile_username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="47dp"
android:layout_toEndOf="#+id/profile_picture"
android:layout_toStartOf="#+id/btn_edit"
android:text="#string/profile_username"
android:textSize="12sp" />
<TextView
android:id="#+id/profile_email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/profile_username"
android:layout_toEndOf="#+id/profile_picture"
android:layout_toStartOf="#+id/btn_edit"
android:paddingLeft="20dp"
android:paddingTop="10dp"
android:text="#string/profile_email"
android:textColor="#color/profile_email_text_color"
android:textSize="10sp" />
</RelativeLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/profile_layout"
android:background="#color/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:tabGravity="fill"
app:tabIndicatorColor="#color/white"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/white"
app:tabTextColor="#color/grey_title" />
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/tabs"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
How can I make it to let me scroll the whole view instead of scrolling only in the recycler view like instragram? Thank you.


Use NestedScrollview
Instead of scrollview.
You can enable / disable recyclerview's nested scrolling feature according to you need.
Scroll view doesn't support nested scrolling. Where as nested scroll view will give you what you need.
You should try following this hierarchy
<?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"
android:id="#+id/coordinator_layout"
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="192dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
app:contentScrim="#color/action_bar"
app:expandedTitleGravity="right"
app:layout_scrollFlags="scroll|enterAlways">
<RelativeLayout
android:id="#+id/app_images_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
app:layout_collapseMode="parallax">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="below will be your elements" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/accent"
app:tabGravity="fill"
app:tabIndicatorHeight="2dp"
app:tabMode="fixed" />
</RelativeLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>


Change this ,at the end of the xml layout close the ScrollView .Place it below the Relative layout.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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/profile_scrollview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<RelativeLayout
android:id="#+id/activity_profile"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/profile_bg"
tools:context="fyp.hkust.facet.activity.ProfileActivity">
<RelativeLayout
android:id="#+id/profile_layout"
android:layout_width="match_parent"
android:layout_height="150dp"
android:orientation="vertical"
android:weightSum="1">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_picture"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginBottom="25dp"
android:layout_marginLeft="20dp"
android:layout_marginTop="25dp"
android:elevation="6dp"
android:src="#mipmap/app_icon" />
<Button
android:id="#+id/btn_edit"
android:layout_width="60dp"
android:layout_height="35dp"
android:layout_alignBottom="#+id/profile_email"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_marginBottom="5dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="20dp"
android:adjustViewBounds="true"
android:background="#drawable/border_button_no_bg"
android:clickable="true"
android:contextClickable="true"
android:scaleType="fitCenter"
android:text="#string/edit_btn_text"
android:textColor="#color/font_color_pirmary" />
<TextView
android:id="#+id/profile_username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="47dp"
android:layout_toEndOf="#+id/profile_picture"
android:layout_toStartOf="#+id/btn_edit"
android:text="#string/profile_username"
android:textSize="12sp" />
<TextView
android:id="#+id/profile_email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/profile_username"
android:layout_toEndOf="#+id/profile_picture"
android:layout_toStartOf="#+id/btn_edit"
android:paddingLeft="20dp"
android:paddingTop="10dp"
android:text="#string/profile_email"
android:textColor="#color/profile_email_text_color"
android:textSize="10sp" />
</RelativeLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/profile_layout"
android:background="#color/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:tabGravity="fill"
app:tabIndicatorColor="#color/white"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/white"
app:tabTextColor="#color/grey_title" />
<LinearLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/tabs"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</LinearLayout>
</RelativeLayout>
</ScrollView>

Related

Smooth Scrolling on Collapsing toolbar with tablayout

I am trying to create a Tablayout with ViewPager that collapse at the top on scroll but the scrolling is not smooth and the tab swiping as well. This is my layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/htab_maincontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/htab_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/htab_collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
android:background="#drawable/profile_gradient"
app:titleEnabled="false">
<RelativeLayout
android:id="#+id/htab_header2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax">
<LinearLayout
android:id="#+id/profile_background"
android:layout_width="match_parent"
android:layout_height="250dp"
android:layout_alignParentTop="true"
android:background="#drawable/girl"
android:orientation="vertical"/>
<LinearLayout
android:id="#+id/profile_gradient"
android:layout_width="match_parent"
android:layout_height="250dp"
android:layout_alignParentTop="true"
android:background="#drawable/profile_gradient"
android:orientation="vertical"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="#numerouno"
android:textColor="#color/white"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_marginEnd="10dp"
android:background="#drawable/ic_settings_black_24dp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignStart="#id/profile_image"
android:layout_centerVertical="true"
android:layout_marginStart="30dp"
android:orientation="vertical">
<TextView
android:id="#+id/followers_count_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="200K"
style="#style/follower_following_count"
android:textAlignment="center" />
<TextView
android:id="#+id/followers_text"
style="#style/follower_following"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Followers" />
</LinearLayout>
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/profile_image"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:src="#drawable/girl" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="#id/profile_image"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_marginEnd="30dp"
android:orientation="vertical">
<TextView
android:id="#+id/following_count_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="200K"
style="#style/follower_following_count"
android:textAlignment="center" />
<TextView
android:id="#+id/following_text"
style="#style/follower_following"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Following" />
</LinearLayout>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:id="#+id/name_layout">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Bradt Daniels"
android:id="#+id/full_name"
style="#style/profileFullName"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableStart="#drawable/ic_location_on"
android:text="Hilltop, Mount View"
style="#style/profileFullName"
android:textSize="15sp"
android:textColor="#color/yellow"/>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
<!--<View-->
<!--android:layout_width="match_parent"-->
<!--android:layout_height="match_parent"-->
<!--android:alpha="0.3"-->
<!--android:background="#android:color/black"-->
<!--android:fitsSystemWindows="true"/>-->
<android.support.v7.widget.Toolbar
android:id="#+id/htab_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="top"
android:layout_marginBottom="48dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<android.support.design.widget.TabLayout
android:id="#+id/htab_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:tabIndicatorColor="#android:color/white"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#color/white_70"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/htab_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
Evertyhing works fine without the RelativeLayout. And I need that layout for other implementation.
I am trying to create something synonymous to twitter profile page
Any help will be appreciated

I have the same problem with you, make it like 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"
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:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="350dp"
android:fitsSystemWindows="true"
app:contentScrim="#color/colorPrimary"
app:expandedTitleTextAppearance="#android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/iv_stadium"
android:layout_width="match_parent"
android:layout_height="350dp"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<ImageView
android:layout_width="match_parent"
android:layout_height="350dp"
android:src="#color/blackTransparent"
app:layout_collapseMode="parallax" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="#+id/iv_badge"
android:layout_width="100dp"
android:layout_height="100dp"
app:layout_collapseMode="parallax" />
<TextView
android:id="#+id/tv_year"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:gravity="center"
android:textColor="#android:color/white" />
<TextView
android:id="#+id/tv_stadium"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="#android:color/white" />
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.design.widget.TabLayout
android:id="#+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMode="fixed" />
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>

How can I dynamically change the background of the toolbar?

I have a toolbar and I want to change the background image when switching between this toolbar in activity. In addition, the toolbar is fixed and contained in an < include >.
layout_toolbar.xml
<android.support.v7.widget.Toolbar 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/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#drawable/ic_customer_toolbar"
android:gravity="center"
app:navigationIcon="#drawable/ic_left_arrow"
app:popupTheme="#style/AppTheme.PopupOverlay">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/linearLayoutToolbarContent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:paddingEnd="75dp"
android:paddingRight="75dp"
tools:ignore="Orientation">
<TextView
android:id="#+id/textViewSectionTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:fontFamily="#font/roboto_regular"
android:gravity="center"
android:textAlignment="center"
android:textColor="#color/white"
android:textSize="18sp"
android:textStyle="bold"
android:visibility="gone"
tools:text="Section Title" />
</RelativeLayout>
<ProgressBar
android:id="#+id/toolbarProgressbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:padding="#dimen/app_padding_tiny"
android:visibility="invisible" />
<Button
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_marginEnd="22dp"
android:background="#drawable/ic_menu_button" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
and my
activity_customer.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include layout="#layout/layout_toolbar"></include>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#drawable/ic_tabview"
app:tabGravity="fill"
app:tabIndicatorHeight="4dp"
app:tabMode="scrollable"
app:tabTextAppearance="#style/TabLayoutTextStyle"
app:tabTextColor="#color/textmavi"
app:theme="#style/ThemeOverlay.AppCompat.Light">
</android.support.design.widget.TabLayout>
</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_below="#+id/appbarLayout">
</android.support.v4.view.ViewPager>
<android.support.design.widget.FloatingActionButton
android:id="#+id/editCustomerButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_marginBottom="16dp"
android:layout_marginEnd="16dp"
android:clickable="true"
app:srcCompat="#drawable/ic_icon_edit"
tools:ignore="VectorDrawableCompat" />
</RelativeLayout>
I have an activity_sale.xml file like this one and I want it to be different from the toolbar color for the activity_customer toolbar. How can I do that?

Collapsing header view while scrolling up the viewpager

I'm trying to collapse my header view while scrolling up the view pager.
In the following image relativelayout3 is the layout I want to collapse..
Something like playstore preview image collapse in app page..
I tried searching and the following line in relativelayout3, But it didnt work
app:layout_scrollFlags="scroll|enterAlways"
And this my complete xml,
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/relativeLayout3"
app:layout_scrollFlags="scroll|enterAlways"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="55dp"
android:id="#+id/toolbar"
android:background="#color/cornflower_blue_two"
android:elevation="5dp">
<ImageButton
android:id="#+id/more"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_marginEnd="10dp"
android:background="#null"
android:src="#drawable/ic_dots_vertical" />
<ImageButton
android:id="#+id/back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_marginEnd="5dp"
android:layout_marginStart="10dp"
android:background="#null"
android:src="#drawable/ic_arrow_left" />
</RelativeLayout>
<ss.com.bannerslider.views.BannerSlider
android:id="#+id/slider"
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="#color/blue"
android:layout_below="#id/toolbar"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_below="#+id/relativeLayout3">
<TextView
android:id="#+id/product"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="Blah Blah"
android:textColor="#color/dark_gray"
android:textSize="25sp"
android:textStyle="bold" />
<TextView
android:id="#+id/brand"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignStart="#+id/product"
android:layout_below="#+id/product"
android:text="Blah inc."
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:id="#+id/ratings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/brand"
android:layout_alignBottom="#+id/brand"
android:layout_marginStart="10dp"
android:layout_toEndOf="#+id/brand"
android:background="#color/ratings"
android:paddingEnd="10dp"
android:paddingStart="10dp"
android:text="4.7"
android:textColor="#color/white"
android:textSize="20sp"
android:textStyle="bold" />
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_below="#+id/brand"
android:layout_marginTop="14dp"
app:tabGravity="fill"
app:tabMode="fixed" />
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_below="#+id/tabLayout" />
</RelativeLayout>
</RelativeLayout>
</ScrollView>
</RelativeLayout>

Consider using CollapsingToolbarLayout. Please refer Collapsing Toolbar Example.

<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:layout_width="match_parent"
android:layout_height="250dp"
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"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/cartoon"
android:scaleType="centerCrop"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
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.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="#ffe5e5"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="10dp">
<include layout="#layout/card_layout" />
<include layout="#layout/card_layout" />
<include layout="#layout/card_layout" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Output
More Reference

android: Expandable listview going inside tablayout

i have a coordinator layout with collapsable toolbar and below it i have a tablayout and a viewpager and the viewpager contains an expandable listview. When the toolbar collapses the viewpager goes inside the tablayout even if i have specified margins. I have attached links to images below.
Any help is appreciated. Pls help.
http://imgur.com/aK1gyAj.jpg
http://imgur.com/aoa6aUL.jpg
<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/coordinatorlayout_asset"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
tools:ignore="RtlHardcoded">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar_asset"
android:layout_width="match_parent"
android:layout_height="330dp"
android:layout_marginBottom="56dp"
android:background="#android:color/transparent"
android:fitsSystemWindows="true"
android:theme="#style/Theme.AppCompat.Light.NoActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingtoolbar_asset"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:fitsSystemWindows="true"
app:contentScrim="#color/white"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax">
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout_charts_asset"
android:layout_width="match_parent"
android:layout_height="0dp" />
<android.support.v4.view.ViewPager
android:id="#+id/pager_charts_asset"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignBottom="#+id/imageView_dots_asset"
android:paddingTop="0dp" />
<ImageView
android:id="#+id/imageView_dots_asset"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="96dp"
android:src="#drawable/united1"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
<FrameLayout
android:id="#+id/frame_layout_asset"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="bottom|center_horizontal"
android:background="#color/colorPrimary"
android:orientation="vertical"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier=".11">
<LinearLayout
android:id="#+id/linear_layout_asset"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:gravity="center"
android:text="Quila"
android:textColor="#android:color/white"
android:textSize="20sp" />
</LinearLayout>
</FrameLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/nestedscrollview_asset"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:layout_marginTop="56dp"
app:layout_anchor="#id/appbar_asset"
app:layout_anchorGravity="bottom"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.view.ViewPager
android:id="#+id/pager_asset"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.NestedScrollView>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_asset"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#color/tab_color"
app:layout_anchor="#id/frame_layout_asset"
app:theme="#style/ThemeOverlay.AppCompat.Dark"
app:title="">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<Space
android:layout_width="#dimen/image_final_width"
android:layout_height="#dimen/image_final_width" />
<TextView
android:id="#+id/tv_toolbar_title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="8dp"
android:gravity="center_vertical"
android:text="Bank Name"
android:textColor="#android:color/white"
android:textSize="20sp" />
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout_asset"
android:layout_width="match_parent"
android:layout_height="32dp"
android:background="#color/tab_color"
android:elevation="6dp"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_anchor="#id/toolbar_asset"
app:layout_anchorGravity="bottom"
app:tabIndicatorColor="#color/white" />
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="#dimen/image_width"
android:layout_height="#dimen/image_width"
android:layout_gravity="center_horizontal"
android:src="#drawable/newUser"
app:finalHeight="#dimen/image_final_width"
app:finalYPosition="2dp"
app:layout_behavior="com.aswin.AvatarImageBehavior"
app:startHeight="2dp"
app:startToolbarPosition="2dp"
app:startXPosition="2dp" />
<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"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ExpandableListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/expandable_listview"
android:divider="#color/black"
android:layout_gravity="top">
</ExpandableListView>
</LinearLayout>

last item in the listview inside view pager does not appear correctly

in my android application
i used list view inside ViewPager but the last item does not appear as a full item, the scroll befor the last item appear as shown in the screenshot
message_item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:layout_marginTop="7dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="1dp"
android:elevation="1.4dp"
android:foreground="?android:attr/selectableItemBackground"
>
<ImageView
android:id="#+id/message_icon"
android:layout_width="70dp"
android:layout_height="50dp"
android:src="#drawable/inbox_photo"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:paddingRight="8dp"
android:paddingLeft="8dp"
android:contentDescription="Message icon"
/>
<TextView
android:id="#+id/sender_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/primaryText"
android:textSize="16sp"
android:layout_toLeftOf="#id/message_icon"
android:layout_alignParentLeft="true"
android:paddingLeft="8dp"
android:paddingTop="8dp"
/>
<TextView
android:id="#+id/time_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/sender_label"
android:textColor="#color/seconderyTexy"
android:textSize="12sp"
android:layout_alignParentLeft="true"
android:paddingLeft="8dp"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:text="sample"
/>
</RelativeLayout>
</LinearLayout>
inbox_fragment.xml
<RelativeLayout 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">
<android.support.v4.widget.SwipeRefreshLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/swipeRefreshLayout"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:scrollbarAlwaysDrawVerticalTrack="true">
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:paddingBottom="8dp"
android:clipToPadding="false">
</ListView>
</android.support.v4.widget.SwipeRefreshLayout>
<TextView
android:id="#android:id/empty"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/empty_inbox" />
</RelativeLayout>
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.fadi.fadiqua.follow.MainActivity">
<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">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
android:isScrollContainer="true"
android:scrollbarAlwaysDrawVerticalTrack="true"
android:nestedScrollingEnabled="true"
/>
</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="#drawable/ic_camera_alt_black_24dp"
app:layout_anchor="#id/container"
app:layout_anchorGravity="bottom|right|end"
/>
</android.support.design.widget.CoordinatorLayout>

Categories

Resources