Add icon with title in CollapsingToolbarLayout
Solution 1
You may try the following
Reference for Co-Ordinator Layout
Now inside your MainActivity.java
private void handleToolbarTitleVisibility(float percentage) {
if (percentage >= PERCENTAGE_TO_SHOW_TITLE_AT_TOOLBAR) {
if(!mIsTheTitleVisible) {
startAlphaAnimation(textviewTitle, ALPHA_ANIMATIONS_DURATION, View.VISIBLE);
toolbar.setAlpha(0.9f);
toolbar.setBackgroundDrawable(new ColorDrawable(getResources().getColor(R.color.Primary)));
mIsTheTitleVisible = true;
}
}
else {
if (mIsTheTitleVisible) {
startAlphaAnimation(textviewTitle, ALPHA_ANIMATIONS_DURATION, View.INVISIBLE);
toolbar.setBackgroundDrawable(new ColorDrawable(getResources().getColor(android.R.color.transparent)));
mIsTheTitleVisible = false;
}
}
}
Note: Keep the toolbars background transparent when expanded.
Solution 2
May be this solve your problem :
You can position the expanded title wherever you want by using these CollapsingToolbarLayout
attributes:
app:expandedTitleGravity default is bottom|left -or- bottom|start
app:expandedTitleMargin
app:expandedTitleMarginBottom
app:expandedTitleMarginStart
app:expandedTitleMarginEnd
Code for layout File :
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true">
<ImageView
android:id="@+id/bgheader"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
android:background="@drawable/sunflowerpic"
app:layout_collapseMode="pin" />
<android.support.v7.widget.Toolbar
android:id="@+id/MyToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="parallax" />
</android.support.design.widget.CollapsingToolbarLayout>
Then in your java file SetTitle:
CollapsingToolbarLayout collapsingToolbar =
(CollapsingToolbarLayout) findViewById(R.id.collapse_toolbar);
collapsingToolbar.setTitle("Title");
Add icon to Top corner :
use app:layout_collapseMode="pin"
with ImagView. For e.g.
<ImageView
android:id="@+id/someImage"
android:layout_width="56dp"
android:layout_height="wrap_content"
android:src="@drawable/someDrawable"
android:padding="16dp"
android:layout_gravity="top|end"
app:layout_collapseMode="pin"
/>
Reference to this link Collapsing Toolbar Example
Solution 3
You can take reference from this example:-
android ParallaxHeaderViewPager
Solution 4
I suggest you to try Childs and dependencies
public boolean onDependentViewChanged(
CoordinatorLayout parent,
CircleImageView avatar,
View dependency) {
modifyAvatarDependingDependencyState(avatar, dependency);
}
private void modifyAvatarDependingDependencyState(
CircleImageView avatar, View dependency) {
// avatar.setY(dependency.getY());
// avatar.setBlahBlat(dependency.blah / blah);
}
http://www.devexchanges.info/2016/03/android-tip-custom-coordinatorlayout.html
CollapsingToolbarLayout with a custom view
Solution 5
In Kotlin
private fun handleToolbarTitleVisibility(percentage: Float) {
if (percentage >= PERCENTAGE_TO_SHOW_TITLE_AT_TOOLBAR) {
if (!mIsTheTitleVisible) {
startAlphaAnimation(textviewTitle, ALPHA_ANIMATIONS_DURATION, View.VISIBLE)
toolbar.alpha = 0.9f
toolbar.setBackgroundDrawable(ColorDrawable(resources.getColor(R.color.Primary)))
mIsTheTitleVisible = true
}
} else {
if (mIsTheTitleVisible) {
startAlphaAnimation(textviewTitle, ALPHA_ANIMATIONS_DURATION, View.INVISIBLE)
toolbar.setBackgroundDrawable(ColorDrawable(resources.getColor(android.R.color.transparent)))
mIsTheTitleVisible = false
}
}
}
Devendra Singh
I am neither especially clever nor especially gifted. I am only very, very curious.
Updated on July 04, 2022Comments
-
Devendra Singh almost 2 years
I am using
CoordinatorLayout
to get this effect :Here is the layout code:
<?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:id="@+id/coordinatorRootLayout" android:background="@android:color/background_light" android:fitsSystemWindows="true" > <android.support.design.widget.AppBarLayout android:id="@+id/android_appbar_layout" android:layout_width="match_parent" android:layout_height="220dp" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsingToolbarLayoutAndroidExample" android:layout_width="match_parent" android:background="#fff" app:collapsedTitleGravity="left" app:expandedTitleTextAppearance="@color/card_outline" android:layout_height="match_parent" app:layout_scrollFlags="scroll|exitUntilCollapsed" android:fitsSystemWindows="true" app:expandedTitleGravity="center_horizontal" app:contentScrim="?attr/colorPrimary" app:statusBarScrim="?attr/colorPrimary" app:expandedTitleMarginStart="32dp" app:expandedTitleMarginEnd="48dp"> <ImageView android:id="@+id/parallax_header_imageview" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="fitXY" android:src="@drawable/orange_triangle" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.8"/> <ImageView app:expandedTitleGravity="center_horizontal" android:id="@+id/someImage" android:layout_width="100dp" android:layout_height="100dp" android:src="@drawable/circle" android:layout_gravity="center_horizontal" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="-1" /> <android.support.v7.widget.Toolbar android:id="@+id/toolbar_android" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="none" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.NestedScrollView android:id="@+id/nested_scroll_view" android:layout_width="match_parent" android:layout_height="match_parent" android:fillViewport="true" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <LinearLayout android:id="@+id/linear_layout_android" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="15dp" android:background="@color/off_white" android:layout_gravity="center_horizontal" android:gravity="center_horizontal" android:orientation="vertical"> <GridView android:id="@+id/gridview_parallax_header" android:layout_width="fill_parent" android:layout_height="fill_parent" android:columnWidth="100dp" android:gravity="center" android:numColumns="auto_fit" android:stretchMode="columnWidth" /> </LinearLayout> </android.support.v4.widget.NestedScrollView> </android.support.design.widget.CoordinatorLayout>
and here is what I am getting as output How can use an icon with the title text?
-
Devendra Singh over 7 yearsno its not what i m looking for. its not working with gridview
-
Pawanpreet over 7 yearsgithub.com/saulmm/CoordinatorBehaviorExample try this one its working for me
-
Devendra Singh over 7 years@Pawantpreet this is also not. I've tried this as well.
-
Devendra Singh over 7 yearsplease read my question correctly i need an imageview with the title.
-
Devendra Singh over 7 yearsand how i add an small icon that will animate with the title from centre to toolbar. as you can see the image. in the second image you can see the image added but its going to top when scrolling i just want image with the title.
-
Devendra Singh over 7 yearsi've written this code if you can see. would you focus on adding an icon? please
-
Devendra Singh over 7 yearsi tried that code but in that the toolbar is in lower side.
-
Aditya Vyas-Lakhan over 7 yearssee my edited answer,i suggest that try to follow that,and you need to change for toolbar
-
Devendra Singh over 7 yearsI done a long work-around and yes i got what i wanted.