Is there a way or a third party library that supports the image to be resizable while scrolling in Android, the same way contact images work in iPhone? I want the image to be large at first and to get smaller and smaller while scrolling down till it becomes of the smallest size and vise versa.
You can use a CoordinatorLayout. It allows you to specify how a view will behave as you scroll. In the example below, you can see that the view collapses, using layout_collapseMode. I suggest you check out this tutorial to learn more about what you can achieve with this kind of layout.
Here is the example XML (This example was taken 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:background="#android:color/background_light"
android:fitsSystemWindows="true"
>
<android.support.design.widget.AppBarLayout
android:id="#+id/main.appbar"
android:layout_width="match_parent"
android:layout_height="300dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
>
<ImageView
android:id="#+id/main.backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
android:src="#drawable/material_flat"
app:layout_collapseMode="parallax"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/main.toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:lineSpacingExtra="8dp"
android:text="#string/lorem"
android:padding="#dimen/activity_horizontal_margin"
/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Related
My CollapsingToolbarLayout is not working accurate enough. Image 1 shows the initial state and image 2 the one, when I was scrolling down a little. The transition happens too early and it will end up in a (in this case) pink blank space. The same happens when scrolling up again.
Any way to fix that?
My layout:
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/activity_main_cover_height"
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">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/transparent_background_dark"
android:orientation="vertical"
android:paddingLeft="#dimen/box_headline_padding"
android:paddingStart="#dimen/box_headline_padding">
<!-- ... -->
</LinearLayout>
</RelativeLayout>
<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>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="0dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<!-- ... -->
</android.support.v4.widget.NestedScrollView>
Thanks to when the morning comes I figured out the correct parameter app:scrimVisibleHeightTrigger
In the end I combined both
app:scrimAnimationDuration="300"
app:scrimVisibleHeightTrigger="60dp"
Use this attribute in your CollapsingToolbarLayout:
app:scrimAnimationDuration="600"
The time is in milliseconds.
I need to load an image of specific size in the corner of Imageview
I don't want to add several Imageviews because i don't want to lose my collapsing toolbar animations
UPDATE: Added xml part
<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="#android:color/background_light"
android:fitsSystemWindows="true">
<net.opacapp.multilinecollapsingtoolbar.CollapsingToolbarLayout
android:id="#+id/collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="#color/darkGray"
app:expandedTitleTextAppearance="#style/CollapsedAppBarTopic"
app:expandedTitleMarginStart="10dp"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginBottom="5dp"
>
<ImageView
android:id="#+id/Image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
app:layout_collapseMode="parallax"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/main.toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin"
/>
</net.opacapp.multilinecollapsingtoolbar.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
Try to use Relative layout inside the Coordinator Layout.
I would like to achieve something similar to the following in my app, but I want the whole red area (where it says "Guardians Of The Gala..." in the screenshots below) to be a custom view. (Some elements would fade out as the toolbar is collapsed.)
``
`
I've been trying for hours and hours to get it to work, but to no avail.
Obviously, just putting it into <Toolbar> doesn't work, since it doesn't know that it's supposed to animate it:
<android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.AppBarLayout>
<android.support.design.widget.CollapsingToolbarLayout>
<ImageView/>
<android.support.v7.widget.Toolbar>
<include layout="#layout/link_view_title_bar"/>
I've tried doing most of the answers from here and here but nothing actually worked.
How could I do this, preferably using mostly XML and the Android Design Support library. Any help would be appreaciated.
<android.support.design.widget.CoordinatorLayout
android:id="#+id/homeCoordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/homeAppBarLayout"
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:id="#+id/homeCollapseToolbar"
android:layout_width="match_parent"
android:layout_height="350dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
//This can be changed to ImageView
<com.daimajia.slider.library.SliderLayout
android:id="#+id/homeSliderLayout"
app:layout_collapseMode="parallax"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="350dp"/>
<android.support.v7.widget.Toolbar
android:id="#+id/homeToolbar"
android:title=""
android:layout_width="match_parent"
android:layout_height="115dp"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="15dp" >
<ImageView
android:src="#drawable/ic_logo"
android:paddingLeft="10dp"
android:layout_gravity="center|top"
android:layout_width="wrap_content"
android:layout_height="35dp" />
</android.support.v7.widget.Toolbar>
//Instead of the TabLayout, put your Red Layout
<android.support.design.widget.TabLayout
android:id="#+id/homeTabLayout"
android:layout_marginBottom="15dp"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:tabGravity="center"
app:tabIndicatorColor="#color/colorAccent" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/homeViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
I want to implement a collapsing toolbar like google Play Store. I have achieved functionality somewhat but that is only working for portrait Screen. Here is a sample of screenshot of what i was able to do.
Now what i want to do is when i change my device orientation to LandScape mode it should look Exactly Like This.
So what my main question is how to handle these orientation changes. Is there any official android component available that can do this kind of thing or I will have to Z-index my Layouts to achieve this kind of Layout behavior. Please note that I want the layout to be exactly like this with Margins on Both Sides and Z-indexing on top of picture also the scrolling behavior needs to be exactly like Google Play Store.
I am attaching my sample xml that I have written so far.
<?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:fitsSystemWindows="true">
<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:id="#+id/collapsing_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|exitUntilCollapsed">
<com.group3amd.materializeyourapp.widgets.SquareImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
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"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</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:clipToPadding="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
app:cardElevation="#dimen/spacing_medium"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/spacing_large"
android:layout_marginRight="#dimen/spacing_large"
android:layout_marginTop="#dimen/spacing_large"
android:textAppearance="#style/TextAppearance.AppCompat.Headline" />
<TextView
android:id="#+id/description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/spacing_large"
android:text="#string/lorem_ipsum"
android:textAppearance="#style/TextAppearance.AppCompat.Body1" />
</LinearLayout>
</android.support.v7.widget.CardView>
</FrameLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
style="#style/FabStyle"
app:layout_anchor="#id/app_bar_layout"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>
In this pretty similar issue: collapsing toolbar layout like google play store, you would find an answer as below:
View inside CollapsingToolbarLayout no need to set
app:layout_scrollFlags. No effect. Base on my code, change
app:layout_scrollFlags in CollapsingToolbarLayout to
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" and
set minHeight for it.
As your toolbar is "pin", so enterAlwaysCollapsed will call it when
you scroll down.
<android.support.design.widget.CoordinatorLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusableInTouchMode="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/seffafCollapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="240dp"
android:minHeight="?attr/actionBarSize"
app:expandedTitleMarginEnd="164dp"
app:expandedTitleMarginStart="148dp"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">
<ImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/haber_icerik_resim"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/haber_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="#style/ToolbarColoredBackArrow"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/newsRecyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
android:clickable="true"
android:background="#color/mainBackground"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
In the comment to that post, you would find also a hint:
add app:contentScrim="?attr/colorPrimary" to your
collapsingtoolbarlayout. It is no need two toolbars to implement this
effect
EDIT: Here you would find an interview with a guy responsible for Google Play Store, he's talking about how he build design in Play Store App:
[UDACITY] Interview with Kirill Grouchnikov, part 1
[UDACITY] Interview with Kirill Grouchnikov, part 2
Hope it help
I use ImageView inside CollapsingToolbarLayout and need to have control,over ImageView,hide it at the end of collapsing of CollapsingToolbarLayout and do some over ImageView,Please any ideas could help me.
There are such options
app:layout_scrollFlags="scroll|exitUntilCollapsed"
but not any options like "exitEndCollapsed".
I spent nearly two days trying to get exactly this working. I've read a lot of guides and others. now I finally resolved that! Those are steps I did:
First of all you need to move your ImageView in front of your Toolbar (still inside of CollapsingToolbarLayout. Next, you have to add app:contentScrim="?attr/colorPrimary" into tour CollapsingToolbarLayout (It does that nice scrim effect at the end of scrolling.
At the end, you have to add android:background="#android:color/transparent" into your Toolbar.
And that's all... This way it worked for me. Hope it will help you.
Here is part of my activity_main.xml:
<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/sceneRoot"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="168dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#mipmap/ic_launcher"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="#android:color/transparent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:paddingBottom="16dp"
android:paddingStart="16dp"
android:text="AppBar Title"
android:textSize="25dp" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/scrollView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
In your image view just add ,
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0"