I'm working on building a coordinator layout that is made up of a toolbar, a relative layout that is to hide on scroll, a layout that is static always above the scrollable list, and a RecyclerView.
I currently have it laid out as I want it to, as seen here:
- Green is the toolbar
- Orange is the relative layout to hide on scroll
- Red is my static layout that is to stay above the recycler view and move up but not hide.
- White is my RecyclerView
This next image is what it looks like once I scroll the whole way up the recycler view.
So my orange view hides as I want it to, which is perfect. The only step i'm missing is moving the "Title 1" textview into becoming the title of the toolbar. I've seen examples where they have done something kind of similar with an image, but haven't been able to duplicate it yet with a custom behavior. I'm assuming thats what this will take?
Does anyone have any advice on if my layout needs to change to make this possible, and any advice for a custom behavior if that is what this will take?
<?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/appBarLayout" 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/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"> <!-- HEADER --> <RelativeLayout android:id="@+id/rel1" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_collapseMode="parallax" android:background="@color/lightGreen" android:layout_marginTop="?attr/actionBarSize" android:paddingTop="10dp" android:paddingBottom="10dp"> <TextView android:id="@+id/title1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:text="Resist the urge" android:textSize="35sp" android:includeFontPadding="true" android:layout_centerInParent="true"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/resistUrgeTitleTextView" android:layout_centerHorizontal="true" android:text="Use a method below to help." android:includeFontPadding="true"/> </RelativeLayout> <FrameLayout android:id="@+id/main.framelayout.title" android:layout_width="match_parent" android:layout_height="100dp" android:layout_gravity="bottom|center_horizontal" android:background="@color/lightOrange" android:orientation="vertical" app:layout_collapseMode="parallax" > <LinearLayout android:id="@+id/main.linearlayout.title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:gravity="bottom|center" android:text="Title 1" android:textColor="@android:color/white" android:textSize="30sp" app:layout_behavior="com.uhg.ent.mobile.quit4life.UrgeIntervention.TitleTextViewBehavior" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="4dp" android:text="Subtitle" android:textColor="@android:color/white" /> </LinearLayout> </FrameLayout> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:backgroundTint="@color/lightGreen" app:layout_collapseMode="pin" app:title=""/> <!--<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical|center_horizontal" android:text="Resist the urge" android:textColor="@android:color/black" android:textSize="30sp" app:layout_behavior="com.uhg.ent.mobile.quit4life.UrgeIntervention.TitleTextViewBehavior" />--> </android.support.design.widget.CollapsingToolbarLayout> <android.support.constraint.ConstraintLayout android:id="@+id/cardConstraintLayout" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" android:background="@android:color/holo_red_dark" android:layout_marginTop="0dp"> <android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="0dp" android:layout_height="175dp" android:layout_alignParentStart="true" android:layout_alignParentTop="true" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0" android:paddingBottom="50dp"/> <android.support.design.widget.TabLayout android:layout_width="wrap_content" android:layout_height="20dp" android:id="@+id/viewPagerIndicator" app:tabBackground="@drawable/pager_indicator_selector_gray" app:tabGravity="center" app:tabIndicatorHeight="0dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintTop_toBottomOf="@id/interventionCategoryViewPager" android:layout_marginBottom="10dp"/> </android.support.constraint.ConstraintLayout> <!-- </android.support.design.widget.CollapsingToolbarLayout>--> <!--<android.support.v7.widget.Toolbar android:id="@+id/main.toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@color/colorPrimary" app:layout_anchor="@id/main.framelayout.title" app:theme="@style/ThemeOverlay.AppCompat.Dark" app:title="" app:layout_collapseMode="pin"> </android.support.v7.widget.Toolbar>--> </android.support.design.widget.AppBarLayout> <android.support.v7.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/white" app:layout_behavior="@string/appbar_scrolling_view_behavior"> </android.support.v7.widget.RecyclerView> </android.support.design.widget.CoordinatorLayout> EDIT:
I've got a little bit of progress made. I think I have the layout how I want, and i've got a behavior started. I am able to move the TextView, but it is getting lost behind the toolbar. I want it to go on top of the toolbar. My goal is to move the title from the yellow block into the green block.
Do I need to adjust my layout so make it possible for the textview to appear on top of the title bar?
New code layout
<?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" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="60dp" android:background="?attr/colorPrimary" android:backgroundTint="@color/lightOrange" app:title="" android:layout_marginTop="20dp"/> <android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@id/toolbar"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:gravity="bottom|center" android:text="Test 1" android:textColor="@android:color/white" android:textSize="30sp" app:layout_behavior="com.uhg.ent.mobile.quit4life.UrgeIntervention.TitleTextViewBehavior" android:elevation="100dp"/> <android.support.design.widget.AppBarLayout android:id="@+id/appBarLayout" 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/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"> <LinearLayout android:id="@+id/main.framelayout.title" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom|center_horizontal" android:background="@color/lightGreen" android:orientation="vertical" app:layout_collapseMode="parallax" android:paddingTop="50dp"> <!--<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:gravity="bottom|center" android:text="Resist The Urge" android:textColor="@android:color/white" android:textSize="30sp" app:layout_behavior="com.uhg.ent.mobile.quit4life.UrgeIntervention.TitleTextViewBehavior" android:paddingTop="20dp"/>--> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="4dp" android:text="Test 2." android:textColor="@android:color/white" android:paddingBottom="20dp" /> </LinearLayout> </android.support.design.widget.CollapsingToolbarLayout> <android.support.constraint.ConstraintLayout android:id="@+id/cardConstraintLayout" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" android:layout_marginTop="0dp"> <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="0dp" android:layout_height="175dp" android:layout_alignParentStart="true" android:layout_alignParentTop="true" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0" android:paddingBottom="50dp"/> <android.support.design.widget.TabLayout android:layout_width="wrap_content" android:layout_height="20dp" android:id="@+id/viewPagerIndicator" app:tabBackground="@drawable/pager_indicator_selector_gray" app:tabGravity="center" app:tabIndicatorHeight="0dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintTop_toBottomOf="@id/interventionCategoryViewPager" android:layout_marginBottom="10dp"/> </android.support.constraint.ConstraintLayout> </android.support.design.widget.AppBarLayout> <android.support.v7.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/white" app:layout_behavior="@string/appbar_scrolling_view_behavior"> </android.support.v7.widget.RecyclerView> </android.support.design.widget.CoordinatorLayout> </RelativeLayout> 4 Answers
Answers 1
My goal is to move the title from the yellow block into the green block.
As your goal is to set the Title from the yellow block into the green there is no need to move Textview in yellow block you can set Title in yellow block with setTitle property of Toolbar.
setCollapseMode with Toolbar you can set it to COLLAPSE_MODE_OFF/COLLAPSE_MODE_PARALLAX/COLLAPSE_MODE_PIN
<android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_scrollFlags="scroll|enterAlways" app:layout_collapseMode="pin" /> // to pin in place until it reaches the bottom of the layout Implement AppBarLayout.OnOffsetChangedListener listener on your AppBarLayout to determine the CollpasingToolbar is collapsed or not and set Title in the Toolbar accordingly.
Call below method on OnCreate() of Activity.
private void setTitleOfLayout() { AppBarLayout appBarLayout = findViewById(R.id.appbar_layout); appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() { boolean isShow; int scrollRange = -1; @Override public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) { if (scrollRange == -1) { scrollRange = appBarLayout.getTotalScrollRange(); } if (scrollRange + verticalOffset == 0) { // orange part is not visible so set The title if (myTitleName != null) toolbar.setTitle(myTitleName); isShow = true; } else if (isShow) { // orange part is visible so remove the title with space here make sure your are not setting null in toolbar. toolbar.setTitle(" "); isShow = false; } } }); } Answers 2
You have to make TextView inside toolbar and set gravity as you want. for your problem it is not necessary to take toolbar, you can also use layout. This is my coordinate layout. In which you can easily adjust TextView inside toolbar.
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:ads="http://schemas.android.com/apk/res-auto" 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:fitsSystemWindows="true" tools:context="com.sashwati.metrimonial.activity.MainActivity"> <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="?attr/actionBarSize" android:background="@drawable/gradientcolor" app:layout_collapseMode="pin" app:popupTheme="@style/AppTheme.PopupOverlay"> <!-- app:layout_scrollFlags="scroll|enterAlways"--> <com.sashwati.metrimonial.utils.CustomFontTextView android:id="@+id/toolbar_title" style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="Dhakar Matrimonial" android:textColor="@android:color/white" android:textSize="@dimen/middium_text_size" app:fontName="raleway_regular" /> <ImageView android:id="@+id/iv_chat" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right" android:layout_marginRight="@dimen/middium_padding" android:padding="@dimen/small_padding" android:src="@android:drawable/stat_notify_chat" /> <ImageView android:id="@+id/iv_universerch" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right" android:padding="@dimen/small_padding" android:src="@mipmap/search" /> </android.support.v7.widget.Toolbar> </android.support.design.widget.AppBarLayout> <include layout="@layout/content_main" /> Answers 3
You have to write a custom behavior for each element you want to move, resize, hide and etc...
just create a class that extends from CoordinatorLayout.Behavior<View> and implement what do you want, finally set widget app:layout_behavior to the custom behavior you wrote.
See my source code on git hub CoordinatorBehavior
And for more information see this GitHub project saulmm CoordinatorExamples
Answers 4
just cut the code which u want to move and place it inside toolbar, to paste you can paste in between toolbar opening and closing tags like this
<android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" 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:popupTheme="@style/AppTheme.PopupOverlay" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="your text here"/> </android.support.v7.widget.Toolbar> </android.support.design.widget.AppBarLayout> 
0 comments:
Post a Comment