Scrolling to an off screen item in a recycler view with espresso - android

I'm doing some UI tests using Espresso with an app that was created by someone else and i'm encountering some difficulties.
I need to click on a button in a recycler view. this button is off screen. This is the layout file :
<android.support.design.widget.AppBarLayout
android:id="#+id/activity_asset_profile_appbar_layout"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true"
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"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="true">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:orientation="vertical"
app:layout_scrollFlags="scroll|enterAlways"
android:fitsSystemWindows="true"
app:layout_collapseParallaxMultiplier="0.3">
<RelativeLayout
android:id="#+id/activity_asset_profile_content_rl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/small_vertical_margin"
android:layout_marginLeft="#dimen/asset_profile_section_title_vertical_margin"
android:layout_marginRight="#dimen/small_horizontal_margin">
<TextView
android:id="#+id/layout_asset_profile_header_name_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/layout_asset_profile_header_serial_number_text_view"
android:layout_alignParentLeft="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:textColor="#android:color/white"
android:textSize="22sp" />
<TextView
android:id="#+id/layout_asset_profile_header_serial_number_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/layout_asset_profile_header_description_text_view"
android:layout_marginTop="3dp"
android:textColor="#android:color/white"
android:textSize="#dimen/big_text_size" />
<TextView
android:id="#+id/layout_asset_profile_header_description_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/item_list_asset_profile_header_photo_image_button"
android:layout_marginTop="5dp"
android:textColor="#android:color/white"
android:textSize="#dimen/medium_text_size" />
<ImageButton
android:id="#+id/item_list_asset_profile_header_photo_image_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginLeft="#dimen/small_horizontal_margin"
android:background="#color/colorPrimary"
android:src="#drawable/ic_camera" />
</RelativeLayout>
</FrameLayout>
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/photo"
android:visibility="gone"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/activity_asset_profile_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/activity_asset_profile_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ProgressBar
android:id="#+id/activity_asset_profile_progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
</RelativeLayout>
There is also another file with that :
<?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:orientation="vertical">
<LinearLayout
android:id="#+id/item_list_asset_profile_section_title_top_divider_ll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="#dimen/asset_profile_content_vertical_margin" />
<View
android:layout_width="match_parent"
android:layout_height="#dimen/asset_profile_divider_height"
android:background="#color/divider_background" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="#dimen/asset_profile_section_title_vertical_margin"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin">
<RelativeLayout
android:id="#+id/item_list_asset_profile_section_title_main_rl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/asset_profile_section_title_vertical_margin">
<TextView
android:id="#+id/layout_profile_section_header_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerInParent="true"
android:text="#string/comment_section_header"
android:textColor="#color/base_text"
android:textSize="#dimen/big_text_size"
android:textStyle="bold" />
<ImageButton
android:id="#+id/item_list_asset_profile_section_title_expand_image_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="#dimen/small_horizontal_margin"
android:layout_toRightOf="#+id/layout_profile_section_header_text_view"
android:background="#drawable/selector_white_background"
android:src="#drawable/ic_disclosure_indicator" />
<ImageButton
android:id="#+id/item_list_asset_profile_section_title_add_image_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:background="#drawable/selector_white_background"
android:src="#drawable/ic_asset_profile_add" />
</RelativeLayout>
<LinearLayout
android:id="#+id/item_list_asset_profile_section_title_no_items_ll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:visibility="visible">
<TextView
android:id="#+id/item_list_asset_profile_section_title_no_items_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:includeFontPadding="false"
android:text="No labels"
android:textColor="#color/secondary_text"
android:textSize="#dimen/big_text_size" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
As it is not my code, I don't know why there is the need for these two files, so if someone know exactly why... I would love to know.
Here's the part of code that doesn't work :
onView(allOf(withId(R.id.item_list_asset_profile_section_title_add_image_button),hasSibling(withText("Tags"))))
.perform(NestedScrollViewScrollToAction.scrollTo(),click());
I'm using NestedScrollViewScrollViewActions as seen here : https://gist.github.com/miszmaniac/12f720b7e898ece55d2464fe645e1f36
I have tried multiple things found in other topics but none of them solved my problem.
I'm new to this so please be kind and tell me what i could improve in my ask.
Thank you.

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.

Issue with collapsing toolbar in marshmallow and above

I am facing a little issue with Collapsing toolbar and only for the devices having OS marshmallow and above, for lower versions its working fine
following is my layout
<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:background="#color/fp_dashboard_backgrd"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/transparent"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|enterAlways">
<include
layout="#layout/filter_search"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="?attr/actionBarSize"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/MyToolbar"
android:layout_width="match_parent"
android:background="#color/fund_screener_toolbar"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:theme="#style/ActionBar">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:maxLines="1"
android:text=" Fund Screener "
android:textColor="#color/color_white"
android:textSize="#dimen/dimen_txt_20" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include
android:id="#+id/scrolll"
layout="#layout/recycle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
android:clipToPadding="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<include
android:id="#+id/imageViewProgress"
layout="#layout/layout_bull_progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</android.support.design.widget.CoordinatorLayout>
And here are the first image showing when i scroll up
and when i scroll down i get this extra white space above my toolbar I am not sure what is going wrong. check below image. As you guys can see white space above my Fund Screener toolbar
Guys please help me I have done lot of changes and research but not able to get any solution. Please help
EDIT
filter_search.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="#color/white"
android:orientation="vertical"
android:padding="10dp">
<android.support.v7.widget.AppCompatSpinner
android:id="#+id/spnAMCName"
style="#style/Base.Widget.AppCompat.Spinner.Underlined"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/SpinnerBottomLine" />
<com.app.widgets.TextViewRobotoRegular
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="5dp"
android:paddingTop="5dp"
android:text="#string/lbl_asset_type"
android:textColor="#color/fp_light_gray"
android:textSize="13sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3">
<com.app.widgets.TextViewRobotoLight
android:id="#+id/btnequity"
android:layout_width="#dimen/dimen_0"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/btn_border_default"
android:gravity="center"
android:paddingBottom="7dp"
android:paddingTop="7dp"
android:text="#string/equity"
android:textColor="#color/fp_light_gray"
android:textSize="13sp" />
<com.app.widgets.TextViewRobotoLight
android:id="#+id/btndebt"
android:layout_width="#dimen/dimen_0"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/btn_border_default"
android:gravity="center"
android:paddingBottom="7dp"
android:paddingTop="7dp"
android:text="#string/debt"
android:textColor="#color/fp_light_gray"
android:textSize="13sp" />
<com.app.widgets.TextViewRobotoLight
android:id="#+id/btnhybrid"
android:layout_width="#dimen/dimen_0"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/btn_border_default"
android:gravity="center"
android:paddingBottom="7dp"
android:paddingTop="7dp"
android:text="#string/hybrid"
android:textColor="#color/fp_light_gray"
android:textSize="13sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal"
android:weightSum="1">
<android.support.v7.widget.AppCompatSpinner
android:id="#+id/spnFundSubCategory"
style="#style/Base.Widget.AppCompat.Spinner.Underlined"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:layout_weight="0.5"
android:paddingRight="2dp"
android:theme="#style/SpinnerBottomLine" />
<android.support.v7.widget.AppCompatSpinner
android:id="#+id/spnFundNature"
style="#style/Base.Widget.AppCompat.Spinner.Underlined"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:layout_weight="0.5"
android:paddingLeft="2dp"
android:theme="#style/SpinnerBottomLine" />
</LinearLayout>
</LinearLayout>

You are using android:layout_marginTop="?attr/actionBarSize" where you are including your layout="#layout/filter_search". This is causing actionBarSize space above your CollapsingToolbarLayout in expanded mode. Just remove it as follows.
<include
layout="#layout/filter_search"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
I hope this works for you.Thank You

Custom views in toolbar like Airbnb explore screen

I want to add multiple input fields in top bar area of application (toolbar) for search purposes of my app. I see that Airbnb does that at its best! I have tried various scenarios using AppBarLayout in CoordinatorLayout but it all failed. Is it possible to get the same or similar effect? If yes, how do we do that?
Here are the screenshots when I swipe down the top bar:

Yes it is possible to create using appbar layout, I have tried same task, Finally i have figured-out in this way, I guess below code is helpful for you
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--your toolbar-->
<include
android:id="#+id/toolbar_wrapper"
layout="#layout/common_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.design.widget.CoordinatorLayout
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:background="#color/color_fafafa"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/color_ffffff"
android:orientation="vertical"
app:layout_scrollFlags="scroll">
<!--your scrolling layout, in your case it will be edit texts and search fields-->
</LinearLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="#dimen/dp_49"
android:background="#color/color_ffffff"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabIndicatorColor="#color/colorAccent"
app:tabSelectedTextColor="#color/color_727272"
app:tabTextColor="#color/color_b6b6b6" />
<View
android:layout_width="match_parent"
android:layout_height="#dimen/dp_1"
android:background="#color/color_d9d9d9" />
<!--your main layout-->
<android.support.v4.view.ViewPager
android:id="#+id/detail_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:nestedScrollingEnabled="true" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
</LinearLayout>
</layout>

If you are still looking for an answer, I tried to do something similar. My layout is
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="RtlHardcoded">
<android.support.design.widget.AppBarLayout
android:id="#+id/main.appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="invisible"
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp">
<LinearLayout
android:id="#+id/summarized_search_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top|center_horizontal"
android:layout_marginEnd="12dp"
android:layout_marginStart="12dp"
android:background="#drawable/background_blue_light_rounded"
android:orientation="horizontal"
android:padding="12dp"
app:layout_collapseMode="none">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:src="#drawable/menu_search" />
<TextView
android:id="#+id/summarized_search_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_marginStart="12dp" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
<LinearLayout
android:id="#+id/extended_search_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:layout_marginTop="6dp"
android:orientation="vertical"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="12dp"
android:layout_marginStart="12dp"
android:background="#drawable/background_blue_light_rounded"
android:orientation="horizontal"
android:padding="12dp">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:src="#drawable/menu_profile" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginStart="12dp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="12dp"
android:layout_marginStart="12dp"
android:layout_marginTop="12dp"
android:background="#drawable/background_blue_light_rounded"
android:orientation="horizontal"
android:padding="12dp">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:src="#drawable/menu_calendar" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginStart="12dp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="12dp"
android:layout_marginStart="12dp"
android:layout_marginTop="12dp"
android:background="#drawable/background_blue_light_rounded"
android:orientation="horizontal"
android:padding="12dp">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:src="#drawable/menu_poi" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginStart="12dp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="12dp"
android:layout_marginStart="12dp"
android:layout_marginTop="12dp"
android:background="#drawable/background_blue_light_rounded"
android:orientation="horizontal"
android:padding="12dp">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:src="#drawable/menu_poi" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginStart="12dp" />
</LinearLayout>
<Button
android:id="#+id/validation_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginEnd="12dp"
android:layout_marginTop="12dp"
android:text="GO" />
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
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.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Search" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Popular" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Favorites" />
</android.support.design.widget.TabLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none">
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
app:cardElevation="8dp"
app:contentPadding="16dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:lineSpacingExtra="8dp"
android:text="#string/lorem"
android:textSize="18sp" />
</android.support.v7.widget.CardView>
</android.support.v4.widget.NestedScrollView>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
You can see I use a Toolbar with visibility = invisible to force my layout to stay partialy visible. I am not really proud of that trick but I failed to find an other solution.
Once you have your layout it's just a matter of animation depending on the progress of the offset.
If you succeed, I would be happy to see your code because I'm not really happy with mine.
I hope it can help you.

App UI gets distorted on API 19 below

I just completed an app which is working as expected but when i run it on API 19 ---> API 16, i get a distorted UI where some of the views will overlap each other, the arrangement is disorganized and when you open another activity, the last activity UI is shown below the current activity. This error is weird to me because when i tested the app on API 22 + , it was working fine.
I tried to figure out the error but couldn't because i can't tell where the error is which left me in a confused state.
Below is the Screenshots of the aforementioned UI Behavior.
The UI XML Files
Cardview_row_article.xml
<?xml version="1.0" encoding="utf-8"?><!-- A CardView that contains a TextView -->
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/cv"
android:layout_width="match_parent"
android:layout_height="110dp"
android:layout_marginTop="3dp"
card_view:cardCornerRadius="3dp"
card_view:cardPreventCornerOverlap="true"
android:foreground="?android:attr/selectableItemBackground"
card_view:cardUseCompatPadding="true"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/art_image"
android:layout_width="110dp"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:scaleType="fitXY"
android:src="#drawable/loading_item_img"
/>
<TextView
android:id="#+id/art_title"
android:layout_width="230dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:textAlignment="center"
android:textSize="30dp"
android:layout_alignTop="#+id/art_image"
/>
<TextView
android:id="#+id/art_subTitle"
android:layout_width="220dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:textSize="15sp"
android:textStyle="italic"
android:textColor="#android:color/holo_red_dark"
android:textAlignment="center"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
NewsDetail.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"
android:id="#+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<!-- App Bar -->
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/detail_backdrop_height"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<!-- Collapser -->
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapser"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/image_paralax"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
android:src="#drawable/kenny"/>
<!-- Toolbar -->
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/CustomActionBar"
/>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|right|end"
android:src="#drawable/ic_add"
android:layout_margin="#dimen/fab_margin"
android:clickable="true"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/scroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/app_bar"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="24dp">
<LinearLayout
style="#style/Widget.CardContent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/titleDetailTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minLines="1"
android:text="Title"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/colorBlack"
android:textStyle="bold"
android:textSize="20dp"/>
<TextView
android:id="#+id/detailDetailTxt"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="DATE"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/timeDetailTxt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minLines="4"
android:padding="2dp"
android:text="details"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#0f0f0f" />
</LinearLayout>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabsocial"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|right|end"
android:src="#drawable/ic_share"
android:layout_margin="#dimen/fab_margin"
android:clickable="true"/>
</android.support.design.widget.CoordinatorLayout>
EmergencyActivity.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:support="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:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.example.domain.navdrawer.InerFragment"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="150dp"
android:orientation="vertical" >
<ImageView
android:id="#+id/emer_img"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/emergencyback"
android:layout_marginTop="6dp"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/emertop"
android:text="Emergency Report"
android:textSize="25sp"
android:textColor="#color/Color_Red"
android:gravity="center"/>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/input_layout_name"
>
<EditText
android:id="#+id/input_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/question_name_input_hint"
android:inputType="textAutoComplete" />
</android.support.design.widget.TextInputLayout>
<RadioGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RadioButton
android:id="#+id/emergency_type_fire"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/type_fire" />
<RadioButton
android:id="#+id/emergency_type_accident"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/type_accident" />
<RadioButton
android:id="#+id/emergency_type_robbery"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/type_robbery" />
<RadioButton
android:id="#+id/emergency_type_others"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/type_other" />
</RadioGroup>
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_emergency"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<EditText
android:id="#+id/input_emergency"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:hint="#string/hint_emergency" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_email"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/input_email"
android:layout_width="match_parent"
android:inputType="textEmailAddress"
android:layout_height="wrap_content"
android:hint="#string/hint_mobile" />
</android.support.design.widget.TextInputLayout>
</LinearLayout>
<Button
android:id="#+id/btn_send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Send"
android:layout_centerHorizontal="true"
android:textColor="#color/finestWhite"
android:background="#android:color/holo_red_dark"
android:layout_gravity="center"
android:layout_marginTop="15dp"
/>
</LinearLayout>

Well, i finally figured out the fix to the UI glitches.
All you have to do is Set the background of the root activity to 'White' in your activity xml files.
Thats just it!

Coordinator Layout with RecyclerView

I am using a CoordinatorLayout with RecyclerView.The app runs fine but my problem is the the view should only scroll as the items in RecyclerView.In my case i have only 3 items but the CordinatorLayout will scroll the RecyclerView till it will snap to the top because of this i am getting the below part as white as the listsize is only 3.
XMl
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="#android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/textView38"
android:layout_alignParentTop="true"
android:padding="20dp"
android:src="#drawable/ic_filter_back" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_event_details"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#fff"
android:orientation="horizontal"
android:paddingBottom="03dp">
<RelativeLayout
android:id="#+id/rl_tab1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<ImageView
android:id="#+id/tab1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:padding="05dp"
android:src="#drawable/ic_create_wedding_admin" />
<TextView
android:id="#+id/tv_tab_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/tab1"
android:layout_marginLeft="05dp"
android:layout_marginRight="05dp"
android:gravity="center"
android:text="Admin" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/rl_tab2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<ImageView
android:id="#+id/tab2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:padding="05dp"
android:src="#drawable/ic_create_wedding_guests" />
<TextView
android:id="#+id/tv_tab_2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/tab2"
android:layout_marginLeft="05dp"
android:layout_marginRight="05dp"
android:gravity="center"
android:text="Guests" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/rl_ed_tab_guests"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<ImageView
android:id="#+id/iv_ed_iv_budget"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:padding="05dp"
android:src="#drawable/ic_create_wedding_budget" />
<TextView
android:id="#+id/tvbud"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/iv_ed_iv_budget"
android:layout_marginLeft="05dp"
android:layout_marginRight="05dp"
android:gravity="center"
android:text="Budget" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/rl_ed_tab_tasks"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<ImageView
android:id="#+id/iv_ed_iv_tasks"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:padding="05dp"
android:src="#drawable/ic_create_wedding_tasks" />
<TextView
android:id="#+id/tv_ed_tasks"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/iv_ed_iv_tasks"
android:layout_marginLeft="05dp"
android:layout_marginRight="05dp"
android:gravity="center"
android:text="Tasks" />
</RelativeLayout>
</LinearLayout>
What i want is to scroll the view only till the item size.

This issue has already been brought up.
Please check other questions before posting another.
You need to provide a custom behavior to your child layout in the Coordinator Layout.
Check this if it helps:
https://stackoverflow.com/a/33461064/2346980

Categories

Resources