saulmm / coordinatorbehaviorexample Goto Github PK

View Code? Open in Web Editor NEW

2.7K 2.7K 590.0 41.03 MB

Java 100.00%

coordinatorbehaviorexample's People

Contributors

Stargazers

Watchers

Forkers

rgocal murugespandian marianosalvetti cutelayout eneim tieusangaka k0shk0sh datalink747 dylanmay dalufine zhangswings jeese1226 widegalaxy niuxdexiaobai rvganesh taimur97 ljnalex luwei2012 mistrydarshan99 yzp531 cattalk2 blackmoont92 neil-orzzh stgeo88 ajaykoppisetty niujianming hejunbinlan matrixy coolstar1204 fomdeveloper krzysztofwrobel hardikamal lbalmaceda amit-gupta26 yonghuiluo jiyuren vihuela rhespanhol mingtang1079 ericshao justomiguel kingslou qingsong-xu felixzhang00 xu-tikt nishantbabaria langelee xuhuawei131 morningchu tata8k droidxiao hiram-y cooliean rizvan frnkbaum androidalphabet suen8228994 ajaypatidar20 datalinkdev leerduo chetwyn xburnerair mobiledevelopgroup qingyangcode zcwk hd-cipl skill20 anguyenqd apcwowo houjinyun linqingwei vkotovv tubb cjpx00008 androidstudioist pollux- sangupandi guymaor86 jelychow lsclst mkodekar yuzurihainori brandlee tudoubudou thiagocard nove1398 rangertao tanlocle0495 wangxp423 lymons hareshsandeep atleastic khrystal nathanjones radwahassan nak411 adozenlines qiwx2012 ashokkumarreddy1987 yzionted

coordinatorbehaviorexample's Issues

The ImageView has a bug when we scroll the contents quickly

Hello, what generated gif software name?

thanks！

unable to remove share and settings option :/

Stress scrolling breaks proper image sizing

Hello.
If you will make some stress scrolling of this screen, you can get several different states where image isn't resized and placed properly. See an example. I use Samsung S4 with GearCM12.1.

Fix toolbar at the top of the screen?

Hey Saúl, this is a great example! What if I need to fix the toolbar at the top of the screen? Can you give me some tips to handle this?

Thanks in advance!

Could not inflate Behavior subclass .AvatarImageBehavior

Getting an error while running this project.

Caused by: android.view.InflateException: Binary XML file line #0: Could not inflate Behavior subclass saulmm.myapplication.AvatarImageBehavior.

API 25 issue

In using API 25, the AvatarImageBehavior doesnt really work well. I always get this when i quickly scroll up.

I run with this config:
compile 'com.android.support:appcompat-v7:25.3.1'
compile 'com.android.support:design:25.3.1'
compile 'com.android.support:cardview-v7:25.3.1'

But changing to this project's config (using 23.2.1), the behavior works perfectly.

Sorry for my question. I'm a total beginner in using CoordinatorLayout. Thank you!

Why CoordinatorLayout is wrapped with LinearLayout?

https://github.com/saulmm/CoordinatorBehaviorExample/blob/master/app/src/main/res/layout/activity_main.xml

Half-screen activity like Hangouts profile

How can I make the activity half screen like the hangouts profile so that the user may scroll down to close the activity or scroll up to continue using the activity?

Thanks in advance!

Hi, I have a problem not as I fix, I have a EditText within the NestedScrollView, and when this element contains several lines, makes the action bar to collapse and then lose the focus of the EditText, as you fix it? Thanks in advance

This is my code

<RelativeLayout
    android:id="@+id/screen"
    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"
    tools:context="com.cathi.speakout.libs.RippleEffect"
    android:descendantFocusability="beforeDescendants"
    android:background="#ffffff"
    android:focusableInTouchMode="true"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:ignore="RtlHardcoded">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <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">

    <FrameLayout
        android:id="@+id/main.framelayout.title"
        android:layout_width="match_parent"
        android:layout_height="230dp"
        android:layout_gravity="bottom|center_horizontal"
        android:orientation="vertical"
        android:background="@drawable/background_lat"
        app:layout_collapseMode="parallax"
        app:layout_collapseParallaxMultiplier="0.3">

    <LinearLayout
        android:id="@+id/main.linearlayout.title"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:gravity="bottom|end|right"
        android:layout_marginRight="30dp"
        android:layout_marginBottom="30dp"
        android:layout_gravity="bottom"
        android:layout_marginLeft="40dp">

        <TextView
            android:id="@+id/tituloContacto"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fontFamily="sans-serif"
            android:textStyle="bold"
            android:textSize="35sp"
            android:textColor="@android:color/white"
            android:text="@string/contact"
            android:gravity="right" />

        <TextView
            android:id="@+id/textInstrucciones"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="right"
            android:text="@string/fields"
            android:layout_marginTop="10dp"
            android:fontFamily="sans-serif"
            android:textStyle="italic"
            android:textSize="15sp"
            android:textColor="#99ffffff" />
        </LinearLayout>

    </FrameLayout>
    </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/linear_end"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none"
        app:behavior_overlapTop="1dp"
        android:layout_marginBottom="58dp"
        android:background="#FFFFFF"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <LinearLayout
       android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:orientation="vertical">

    <LinearLayout
        android:id="@+id/linear_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:paddingLeft="30dp"
        android:paddingRight="30dp"
        android:paddingBottom="20dp">

            <com.rengwuxian.materialedittext.MaterialEditText
                android:id="@+id/name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:textSize="17sp"
                android:hint="@string/name_contact"
                android:clickable="true"
                android:focusableInTouchMode="true"
                android:inputType="textPersonName"
                app:met_baseColor="@color/colorPrimaryDark"
                app:met_floatingLabel="highlight"
                app:met_primaryColor="@color/colorPrimary"/>

            <com.rengwuxian.materialedittext.MaterialEditText
                android:id="@+id/mail"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="1dp"
                android:textSize="17sp"
                android:inputType="textEmailAddress"
                android:clickable="true"
                android:focusableInTouchMode="true"
                android:hint="@string/mail_contact"
                android:maxLength="50"
                app:met_baseColor="@color/colorPrimaryDark"
                app:met_floatingLabel="highlight"
                app:met_primaryColor="@color/colorPrimary"/>

            <com.rengwuxian.materialedittext.MaterialEditText
                android:id="@+id/message"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="1dp"
                android:textSize="17sp"
                android:inputType="textMultiLine"
                android:clickable="true"
                android:focusableInTouchMode="true"
                android:hint="@string/message_contact"
                app:met_baseColor="@color/colorPrimaryDark"
                app:met_floatingLabel="highlight"
                app:met_primaryColor="@color/colorPrimary"/>
   </LinearLayout>
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="#00000000"
        app:layout_anchor="@id/main.framelayout.title"
        app:theme="@style/ThemeOverlay.AppCompat.Dark"
        app:title="">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:gravity="right">

            <TextView
                android:id="@+id/main.textview.title"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:gravity="center_vertical"
                android:layout_gravity="right"
                android:text="Contacta con nosotros"
                android:layout_marginRight="30dp"
                android:textColor="@android:color/white"
                android:textSize="18sp" />
        </LinearLayout>
    </android.support.v7.widget.Toolbar>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="58dp"
        android:orientation="horizontal"
        android:layout_marginRight="6dp"
        android:gravity="right"
        android:background="#FFFFFF"
        android:layout_gravity="bottom"
        android:layout_alignParentBottom="true">

        <com.cathi.speakout.libs.RippleEffect
            android:id="@+id/accept"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginRight="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            app:rv_type="rectangle"
            app:rv_color="#cccccc"
            rv_centered="true">

            <CheckedTextView
                android:id="@+id/btnSend"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:textColor="@color/colorPrimaryDark"
                android:fontFamily="sans-serif"
                android:textStyle="bold"
                android:paddingLeft="16dp"
                android:paddingRight="16dp"
                android:textSize="18sp"
                android:text="@string/send"
                android:layout_gravity="center"
                android:gravity="center_vertical"
                android:clickable="true" />
        </com.cathi.speakout.libs.RippleEffect>
    </LinearLayout>
    </android.support.design.widget.CoordinatorLayout>
</RelativeLayout>

Menu onOptionsItemSelected issue

For this example if you directly add onOptionsItemSelected it will not work. To solve this you need to add one line of code:

...
mToolbar.inflateMenu(R.menu.menu_main);
// add this line
setSupportActionBar(mToolbar);
...

And now it works! But the default title is annoying, so add another line to remove default title.

...
mToolbar.inflateMenu(R.menu.menu_main);
// add this line
setSupportActionBar(mToolbar);
setTitle("");
...

Cheers!

Border Color

When I try to use
app:border_color="@android:color/white"
app:border_width="2dp"

in the circle image view i get the error
No resource identifier found for attribute 'border_color' in package com.xxxxxx.xxxxxxx
No resource identifier found for attribute 'border_width' in package com.xxxxxx.xxxxxxx

Any particular reason as to why this could be happening? Everything else works perfectly!

Thanks

The ImageView is skipped by the FrameLayout how to display the full ImageView and the FrameLayout bottom

Center profile image not appearing

Hi there! I tried to get the codes of your example but the problem is no matter how I try to set a drawable image to the center profile image, it won't appear. Please help me

Set the Image in the left or right side

When I set the gravity of image, and scroll the page quickly, it not appear properly.

this is before scrolling quickly:

this after scroll:

How can I use mFinalLeftAvatarPadding?

I'm working with NavigationIcon (?homeAsUpIndicator), can I set the left margin to avatar to avoid overlapping of the image above the indicator?

I've added:

        child.setY(mStartYPosition - distanceYToSubtract);
        if(mStartXPosition - distanceXToSubtract > mFinalLeftAvatarPadding) {
            child.setX(mStartXPosition - distanceXToSubtract);
        }

into onDependentViewChanged.
My spacing_normal size is 32dp + 8dp (size of indicator + default padding).

How do I get Android Studio/IDEA to align adjacent variable assignments on the “=” sign like yours

Your code style looks so good, how can I format code like yours? I have tried to set Group declarations but it still looks not so good.
just like:

private static final float PERCENTAGE_TO_SHOW_TITLE_AT_TOOLBAR = 0.9f;
private static final float PERCENTAGE_TO_HIDE_TITLE_DETAILS    = 0.3f;
private static final int   ALPHA_ANIMATIONS_DURATION           = 200;
private boolean mIsTheTitleVisible          = false;
private boolean mIsTheTitleContainerVisible = true;
...
mToolbar = (Toolbar) findViewById(R.id.main_toolbar);
mTitle = (TextView) findViewById(R.id.main_textview_title);
mTitleContainer = (LinearLayout) findViewById(R.id.main_linearlayout_title);
mAppBarLayout = (AppBarLayout) findViewById(R.id.main_appbar);

what I want:

private static final float PERCENTAGE_TO_SHOW_TITLE_AT_TOOLBAR  = 0.9f;
private static final float PERCENTAGE_TO_HIDE_TITLE_DETAILS     = 0.3f;
private static final int ALPHA_ANIMATIONS_DURATION              = 200;
private boolean mIsTheTitleVisible          = false;
private boolean mIsTheTitleContainerVisible = true;
...
mToolbar        = (Toolbar) findViewById(R.id.main_toolbar);
mTitle          = (TextView) findViewById(R.id.main_textview_title);
mTitleContainer = (LinearLayout) findViewById(R.id.main_linearlayout_title);
mAppBarLayout   = (AppBarLayout) findViewById(R.id.main_appbar);

thanks:D

Layout Not Support For Tablet

CoordinatorLayout Not Supported for Tablet Layout

Would it be possible to get an explanation video/tutorial on the behavior code?

Bug: bad snapping behavior , which also blocks scrolling on fast-scroll gesture

When I perform the fling gesture (to scroll), the upper area gets scrolled and back:

Also, even when performing the fling gesture to the top, the upper area will block further scrolling when it changes phases:

Is it possible to have the same behavior as shown on the contacts app? Or Google Maps and G+ ?

Unhardcode layout values

Unhardcode forced values on the following components

    <android.support.design.widget.CollapsingToolbarLayout
                android:layout_height="450dp"
                ....
                >

                <ImageView
                    android:layout_height="@dimen/image_margin"
                    ....
                    />

                <FrameLayout
                    android:layout_height="150dp"
                    ...
                    >

                </FrameLayout>
    </android.support.design.widget.CollapsingToolbarLayout>

CircularImageView issue

Release

Can you inform me when you release the next version?

Pin Toolbar to top?

Is it possible to use this Behavior, while having the Toolbar pinned to the top? I'd like to be able to use the "quick return" toolbar, but with my ImageView shrinking into it. I've been playing with layouts all week, but the only time it works is if my layout is exactly like the one in the example.

I'm also not really following the Behavior code enough to adapt it, but it seems to me like the custom attributes aren't even really being used correctly, if at all.

How does this work?

Unable to put Back arrow button, Output is weird

Hello,

I have tried all possible ways to put Back Arrow but it don't work.
I have seen everywhere that Toolbar should be inside CollapsingToolbarLayout but in your code it's not.

other issue is i have to drag and scroll to make animation work, it won't work if i just touch and slide it..
i continuously have to touch the screen to make it work, that is bad for User Experience.
If you can provide solution for this, i would love to include it in my app..

Awesome work by the way..
Thanks :)

Scrolling issue

I'm including a custom layout into the CardView, but it's short and when I scoll the view, I get a wide void space between the toolbar and the CardView. Could you block the animation when the scrolling is terminated?

Thanks in advance

P.S: Sorry for my bad English.

What's the value of maybeInitProperties()?

Why check if any of the private fields need to be initialized every time onDependentViewChanged is called? Do you expect the values to be reset to 0 by something?

@Override public boolean onDependentViewChanged(CoordinatorLayout parent, CircleImageView child, View dependency) { maybeInitProperties(child, dependency);

I would think initializing them once would be enough so I'm wondering if I'm missing something that requires this approach?

does this only work with circularImageView ? if not how can I change this to ImageView?

I want my avatar image to be an ImageView so I wouldn't have to load an extra lib.

can you please help me to do so?

I tried simply changing it but after the animation it would disappear completely

Could not inflate Behavior subclass .AvatarImageBehavior Caused by: java.lang.RuntimeException: Could not inflate Behavior subclass .AvatarImageBehavior

Licensing terms and conditions

I noticed you haven't added a license to the project stating how others can use this project, adding this shall be much appreciated

CircularImageView issue

change to support righ to left

can any body help me how can i modify source code ti support right to left? reference is on this link, but i can't understand me how can i modify that:

@3llomi @abbasalim

private void maybeInitProperties(CircleImageView child, View dependency) {
        if (mStartYPosition == 0)
            mStartYPosition = (int) (dependency.getY());

        if (mFinalYPosition == 0)
            mFinalYPosition = (dependency.getHeight() / 2);

        if (mStartHeight == 0)
            mStartHeight = child.getHeight();

        if (mStartXPosition == 0)
            mStartXPosition = (int) (child.getX() + (child.getWidth() / 2));

        if (mFinalXPosition == 0)
            mFinalXPosition = mContext.getResources().getDimensionPixelOffset(R.dimen.abc_action_bar_content_inset_material) + ((int) mCustomFinalHeight / 2);

        if (mStartToolbarPosition == 0)
            mStartToolbarPosition = dependency.getY();

        if (mChangeBehaviorPoint == 0) {
            mChangeBehaviorPoint = (child.getHeight() - mCustomFinalHeight) / (2f * (mStartYPosition - mFinalYPosition));
        }
    }

How to make this type of layout ?

Can this be used with a RecyclerView instead TextView?

How can I display a list of items instead of lorem ipsum text? If the recyclerview's height is set to wrap_content it doesn't show any views.

Some issues...

Importing via git (directly via Android-Studio) caused this issue to appear:

scrolling up too much causes a crash:

java.lang.NullPointerException: Attempt to invoke virtual method 'float android.view.MotionEvent.getX()' on a null object reference
at android.view.View.onTouchEvent(View.java:10316)
at android.support.design.widget.CoordinatorLayout.onTouchEvent(CoordinatorLayout.java:449)
at android.view.View.dispatchTouchEvent(View.java:8968)
at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2698)
at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2410)
at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2709)
at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2371)
at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2709)
at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2371)
at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2709)
at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2371)
at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2709)
at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2371)
at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2709)
at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2371)
at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2709)
at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2371)
at com.android.internal.policy.impl.PhoneWindow$DecorView.superDispatchTouchEvent(PhoneWindow.java:2568)
at com.android.internal.policy.impl.PhoneWindow.superDispatchTouchEvent(PhoneWindow.java:1776)
at android.app.Activity.dispatchTouchEvent(Activity.java:2866)
at android.support.v7.internal.view.WindowCallbackWrapper.dispatchTouchEvent(WindowCallbackWrapper.java:60)
at android.support.v7.internal.view.WindowCallbackWrapper.dispatchTouchEvent(WindowCallbackWrapper.java:60)
at com.android.internal.policy.impl.PhoneWindow$DecorView.dispatchTouchEvent(PhoneWindow.java:2529)
at android.view.View.dispatchPointerEvent(View.java:9173)
at android.view.ViewRootImpl$ViewPostImeInputStage.processPointerEvent(ViewRootImpl.java:4706)
at android.view.ViewRootImpl$ViewPostImeInputStage.onProcess(ViewRootImpl.java:4544)
at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:4068)
at android.view.ViewRootImpl$InputStage.onDeliverToNext(ViewRootImpl.java:4121)
at android.view.ViewRootImpl$InputStage.forward(ViewRootImpl.java:4087)
at android.view.ViewRootImpl$AsyncInputStage.forward(ViewRootImpl.java:4201)
at android.view.ViewRootImpl$InputStage.apply(ViewRootImpl.java:4095)
at android.view.ViewRootImpl$AsyncInputStage.apply(ViewRootImpl.java:4258)
at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:4068)
at android.view.ViewRootImpl$InputStage.onDeliverToNext(ViewRootImpl.java:4121)
at android.view.ViewRootImpl$InputStage.forward(ViewRootImpl.java:4087)
at android.view.ViewRootImpl$InputStage.apply(ViewRootImpl.java:4095)
at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:4068)
at android.view.ViewRootImpl.deliverInputEvent(ViewRootImpl.java:6564)
at android.view.ViewRootImpl.doProcessInputEvents(ViewRootImpl.java:6454)
at android.view.ViewRootImpl.enqueueInputEvent(ViewRootImpl.java:6425)
at android.view.ViewRootImpl$WindowInputEventReceiver.onInputEvent(ViewRootImpl.java:6654)
at android.view.InputEventReceiver.dispatchInputEvent(InputEventReceiver.java:185)
at android.os.MessageQueue.nativePollOnce(Native Method)
at android.os.MessageQueue.next(MessageQueue.java:143)
at android.os.Looper.loop(Looper.java:130)
at android.app.ActivityThread.main(ActivityThread.java:5942)
at java.lang.reflect.Method.invoke(Native Method)
at java.lang.reflect.Method.invoke(Method.java:372)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1400)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1195)
scrolling is very weird and "jumpy", and I can cause it to show weird things, like having the circular image above the title (really outside of it, not even touching it).

Scrolling Issue

Hi
I am developing app in which I am having a view similar to Instagram
(https://user-images.githubusercontent.com/35765225/35329279-4444b0ee-00f7-11e8-8408-95c6d0bfb04d.jpeg)
I want a scrolling effect similar to instagram.
When it is scrolled up its working perfectly fine,the above view is auto-collapsing.
But when i am clicking on any item in recyclerview I want the above auto collapsed view should expand that i achieved from
appbar.setExpanded(true)
But when it is expanding it is scrolling the recyclerview also.I don't want the recyclerview to scroll with it.The clicked item should be on top like instagram.
Please Help.

Also how can we use tablayout with this layout, can you please explain me that...

Right-To-Left Support

The sample code does not support rtl support.

How to display image into center of toolbar after collasping the layout

Can you please let me know what we can do for this solution

Could not inflate Behavior subclass .AvatarImageBehavior Caused by: java.lang.RuntimeException: Could not inflate Behavior subclass .AvatarImageBehavior

Support 24.1.1

Hello,

The new support 24.1.1 libraries has some flicker issues.

Thanks,
Cerg

How do l force the child to remain in the middle on scroll many times within seconds

On Scroll many times (like 10 times within 5 seconds), the rounded image (child) keeps moving up and up. Then moves to normal position and it keeps moving again..However, if you scroll slowly and slowly, the issue doesn't show. Scrolling really fast repeatedly causes this issue

How to add tabs in this layout ?

When I am trying to add tabs in this layout, image and text in toolbar on collapse not shown ? How to add tabs in this layout with image and text shown in toolbar on collapse.