1

I need a help with CoordinatorLayout... I need hide/show toolbar when scrolling and together with this hiding behavior I need make smaller text and hide another layout in my AppBarLayout...

My layout looks like this:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:local="http://schemas.android.com/apk/res-auto"
  android:id="@+id/coordinatorLayout"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@color/main_light_gray">
    <include
        layout="@layout/toolbar_layout_filter_sales" />
  <RelativeLayout
    android:id="@+id/relativeLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    local:layout_behavior="@string/appbar_scrolling_view_behavior">
    <LinearLayout
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/main_light_gray">
    <android.support.design.widget.TabLayout
        android:layout_gravity="center"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:id="@+id/tabs"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/tablayout_background"
        local:tabIndicatorColor="@color/main_red"
        local:tabIndicatorHeight="0dp"
        local:tabGravity="center"
        local:tabBackground="@drawable/tab_background_selector"
        local:tabMode="fixed"
        local:tabPaddingStart="20dp"
        local:tabPaddingEnd="20dp"
        local:tabTextColor="@color/main_dark_text"
        local:tabSelectedTextColor="@color/white" />
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        local:layout_behavior="@string/appbar_scrolling_view_behavior" />
      </LinearLayout>
  </RelativeLayout>
<!--</LinearLayout>-->
</android.support.design.widget.CoordinatorLayout>

Layout toolbar_layout_filter_sales looks like this: 

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/layout_rounded_corners"
    android:stateListAnimator="@null"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">    

  <android.support.v7.widget.Toolbar
    local:layout_scrollFlags="scroll|enterAlways"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    local:popupTheme="@style/ThemeOverlay.AppCompat.Light">
        <LinearLayout
            android:layout_marginTop="25dp"
            android:orientation="horizontal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center">
            <TextView
                android:textStyle="bold"
                android:textColor="@color/white"
                android:id="@+id/toolbar_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@android:color/transparent"
                style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
                android:layout_gravity="center" />
        </LinearLayout>
        <LinearLayout
            android:orientation="horizontal"
            android:id="@+id/toolbar_refresh_layout"
            android:layout_marginRight="15dp"
            android:layout_marginLeft="15dp"
            android:layout_gravity="right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            <ImageView
                android:id="@+id/toolbar_refresh"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:scaleType="centerInside"
                android:src="@drawable/ic_refresh" />
        </LinearLayout>
    </android.support.v7.widget.Toolbar>

    <LinearLayout
        android:id="@+id/filterLayout"
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginBottom="5dp">
        <TextView
            android:textSize="18dp"
            android:textStyle="bold"
            android:ellipsize="marquee"
            android:maxLines="1"
            android:text="Today"
            local:MvxBind="Text SelectedFilterText"
            android:textColor="@color/white"
            android:id="@+id/filterTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:gravity="center"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="2dp"
            android:layout_marginBottom="1dp" />
        <Button
            android:textAllCaps="false"
            android:id="@+id/filterButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="14dp"
            android:text="15.5.2018"
            local:MvxBind="Text CurrentPeriod"
            android:ellipsize="marquee"
            android:maxLines="1"
            android:textColor="@color/white"
            android:gravity="center_vertical"
            android:textStyle="normal"
            android:background="@android:color/transparent"
            android:drawableEnd="@drawable/arrow_down_white"
            android:drawablePadding="10dp"
            android:layout_marginLeft="2dp"
            android:layout_marginRight="5dp"
            android:layout_marginBottom="0dp" />
    </LinearLayout>
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/main_dark_line"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="0dp" />
    <LinearLayout
        android:id="@+id/filterLayout"
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginBottom="10dp">
        <TextView
            android:text="58 395,00"
            local:MvxBind="TextFormatted TotalSales, Converter=SpannableStringPriceConverter"
            android:textSize="26dp"
            android:textStyle="bold"
            android:ellipsize="marquee"
            android:maxLines="1"
            android:textColor="@color/white"
            android:id="@+id/salesTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:gravity="center"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginBottom="5dp" />
        <TextView
            local:MvxBind="Text LastUpdate, Converter=LastUpdateConverter"
            android:textSize="12dp"
            android:textStyle="italic"
            android:ellipsize="marquee"
            android:maxLines="1"
            android:text="XX"
            android:textColor="@color/white"
            android:id="@+id/lastUpdateTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:gravity="center"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp" />
    </LinearLayout>
</android.support.design.widget.AppBarLayout>

In default it looks like this: enter image description here

After scrolling I have this: enter image description here

But I need something like this: enter image description here

I need text with value make smaller and text under value hide.

pnk
  • 293
  • 2
  • 14
  • Hi @pnk, you need use custom Behavior, could please update your github project? So I can modify the codes based on your project, because there is a little difficult to reproduce your problem. Is it the same [project](https://github.com/pinkysek/XabluDemoApp/tree/master/XabluAppTest)? – Robbit Feb 21 '18 at 07:47
  • [Here is about custom behavior](https://stackoverflow.com/questions/40493837/coordinatorlayout-custom-behavior-with-appbarlayout). – Robbit Feb 21 '18 at 07:54
  • @JoeLvMSFT I updated my demo app on github (https://github.com/pinkysek/XabluDemoApp).. I have already some solution but I dont know if its good... but still I need hide LastUpdate text and probably line too... but when I used Visibility.Gone it works but when u scrolling slowly its rly laggy effect... I would be glad if u can help me with better solution... – pnk Feb 21 '18 at 08:22
  • Hi, @pnk, I think you have already achieve your goal, but I will still post my answer. By `you need use custom Behavior`, I have mentioned before, I want use custom Behavior to let the `TextView` changes more flexible, because you are using the `CoordinatorLayout`. But after trying many times, I found I can't use custom behavior, because your `toolbar_layout_filter_sales` layout has too much View, I can't extract them to achieve my goal. I want to change your `fragment_home` layout, but I failed, because your `AppBarLayout`'s background color is gradient. So I did some changes based on yours. – Robbit Feb 23 '18 at 09:59

0 Answers0