Skip to content

Instantly share code, notes, and snippets.

@MensObscura
Last active June 1, 2016 08:41
Show Gist options
  • Save MensObscura/da27703fa39bd663ff0113dec07f9b7d to your computer and use it in GitHub Desktop.
Save MensObscura/da27703fa39bd663ff0113dec07f9b7d to your computer and use it in GitHub Desktop.
Scrolling Header with menu and Image background and text content
<?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/appbar"
android:layout_width="match_parent"
android:layout_height="190dp"
android:fitsSystemWindows="true"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/iv_pic_blur"
android:layout_width="match_parent"
android:adjustViewBounds="true"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<ImageView
android:id="@+id/iv_pic"
android:layout_width="match_parent"
android:adjustViewBounds="true"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="30dp"
android:orientation="vertical"
android:gravity="center_horizontal">
<TextView
android:id="@+id/tv_street"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:paddingTop="20dp"
android:gravity="center_horizontal"
android:textColor="@android:color/white"
android:textStyle="bold"
android:textSize="16sp" />
<LinearLayout
android:id="@+id/ll_code_town"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/tv_postcode"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@android:color/white"
android:textSize="16sp" />
<TextView
android:id="@+id/tv_town"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="5dp"
android:textColor="@android:color/white"
android:textSize="16sp"
android:textAllCaps="true" />
</LinearLayout>
<TextView
android:id="@+id/tv_phone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:textColor="@android:color/white"
android:textSize="16sp"
android:textStyle="bold" />
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:titleTextColor="@android:color/white"
app:popupTheme="@style/AppTheme.PopupOverlay"
app:layout_collapseMode="pin">
<TextView
android:id="@+id/tv_title"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:maxLines="1"
android:textStyle="bold"
android:textSize="20sp"
android:gravity="center"
android:textColor="@android:color/white" />
</android.support.v7.widget.Toolbar>
</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">
<include layout="@layout/content_view" />
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
@MensObscura
Copy link
Author

AppBar Listener :

  AppBarLayout.OnOffsetChangedListener listener = new AppBarLayout.OnOffsetChangedListener() {
        @Override
        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {

            if (collapsingToolbarLayout.getHeight() + verticalOffset < 3 * ViewCompat.getMinimumHeight(collapsingToolbarLayout)) {

                float alpha = ((float) collapsingToolbarLayout.getHeight() + verticalOffset) / ((float) 3 * ViewCompat
                        .getMinimumHeight(collapsingToolbarLayout));
                alpha -= 0.5;
                textViewStreet.animate().alpha(alpha).setDuration(0);
                textViewPostCode.animate().alpha(alpha).setDuration(0);
                textViewPhone.animate().alpha(alpha).setDuration(0);
                textViewTown.animate().alpha(alpha).setDuration(0);
                imageViewPic.animate().alpha(alpha).setDuration(0);
            } else {
                textViewStreet.animate().alpha(1).setDuration(300);
                textViewPostCode.animate().alpha(1).setDuration(300);
                textViewPhone.animate().alpha(1).setDuration(300);
                textViewTown.animate().alpha(1).setDuration(300);
                imageViewPic.animate().alpha(1).setDuration(300);
            }
        }
    };

    appBarLayout.addOnOffsetChangedListener(listener);

@MensObscura
Copy link
Author

MensObscura commented Jun 1, 2016

An example of preparing image :

    picasso.load(imageUrl).into(new Target() {
        @Override
        public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {
            imageViewPic.setImageBitmap(bitmap);
            storeImage = bitmap;
            Bitmap baseImage = storeImage.copy(storeImage.getConfig(), true);

           // du to MVP model i externalize the blur action
            blurImage = new ActivityPresenter.BlurTransformation((float) 20, getApplicationContext()).transform(baseImage);
            imageViewBlurPic.setImageBitmap(blurImage);
         }

        @Override
        public void onBitmapFailed(Drawable errorDrawable) {

        }

        @Override
        public void onPrepareLoad(Drawable placeHolderDrawable) {

        }
    });

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment