Nested scroll profile view

NestedScrollView is just like ScrollView, but it supports acting as both a nested scrolling parent and child on both new and old versions of Android. Nested scrolling is enabled by default.

Nested scroll profile view is used to show large size image on the detail page but when user scroll screen then this image resize to a small circular view.   

Download Demo 

Steps to use Nested scroll profile view in your project.

1. Crate a project in android studio.
   
   
2. Open your build.gradle(app) and add a dependency to it-
   
   

   //_______add design dependencycompile 'com.android.support:design:25.0.+'
   
   
   

   apply plugin: 'com.android.application'
   
   android {
       compileSdkVersion 25
       buildToolsVersion "25.0.0"
   
       defaultConfig {
           applicationId "com.pankaj.nested_scroll_view.demo"
           minSdkVersion 15
           targetSdkVersion 25
           versionCode 1
           versionName "1.0"
           testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
       }
   
       buildTypes {
   
           release {
               minifyEnabled false
               proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
           }
       }
   }
   
   dependencies {
   
       compile fileTree(dir: 'libs', include: ['*.jar'])
       androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
           exclude group: 'com.android.support', module: 'support-annotations'
       })
   
       compile 'com.android.support:appcompat-v7:25.0.1'
       testCompile 'junit:junit:4.12'
   
       //_______add design dependency
       compile 'com.android.support:design:25.0.+'
   
   }
   
   

   
    
   
3.  Open your main_activity.xml and update it-
   
   
   

   <?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"
       xmlns:tools="http://schemas.android.com/tools"
       android:id="@+id/coordinatorLayout"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:fitsSystemWindows="true"
       tools:context=".MainActivity">
   
       <!--add AppBar-->
       <android.support.design.widget.AppBarLayout
           android:id="@+id/appBarLayout"
           android:layout_width="match_parent"
           android:layout_height="250dp"
           android:theme="@style/AppTheme.AppBarOverlay">
   
           <!--add collapsing toolbar-->
           <android.support.design.widget.CollapsingToolbarLayout
               android:id="@+id/collapsing_toolbar"
               android:layout_width="match_parent"
               android:layout_height="match_parent"
               android:background="@color/colorPrimary"
               app:contentScrim="@color/colorPrimary"
               app:layout_scrollFlags="scroll|exitUntilCollapsed">
   
               <!--add large image which will be collapsing-->
               <ImageView
                   android:id="@+id/ivImage"
                   android:layout_width="match_parent"
                   android:layout_height="match_parent"
                   android:fitsSystemWindows="true"
                   android:scaleType="centerCrop"
                   android:src="@drawable/monley"
                   app:layout_collapseMode="pin"
                   app:layout_collapseParallaxMultiplier="0.7" />
   
               <!--add toolbar-->
               <android.support.v7.widget.Toolbar
                   android:id="@+id/toolbar"
                   android:layout_width="match_parent"
                   android:layout_height="50dp"
                   android:minHeight="50dp"
                   app:layout_collapseMode="pin"
                   app:popupTheme="@style/ThemeOverlay.AppCompat.ActionBar">
   
                   <!--back icon-->
                   <ImageView
                       android:layout_width="20dp"
                       android:layout_height="wrap_content"
                       android:onClick="clickOnBack"
                       android:paddingBottom="5dp"
                       android:paddingTop="5dp"
                       android:src="@drawable/back" />
   
                   <!--user circular image-->
                   <com.pankaj.nested_scroll_view.demo.CircleImageView
                       android:id="@+id/ivcImage"
                       android:layout_width="40dp"
                       android:layout_height="40dp"
                       android:layout_margin="5dp"
                       android:onClick="clickOnProfileImage"
                       android:scaleType="fitXY"
                       android:src="@drawable/monley" />
   
                   <!--right side images-->
                   <ImageView
                       android:layout_width="wrap_content"
                       android:layout_height="wrap_content"
                       android:layout_gravity="right"
                       android:layout_marginRight="10dp"
                       android:onClick="clickOnMap"
                       android:padding="5dp"
                       android:src="@android:drawable/ic_dialog_map" />
   
                   <!--right side images-->
                   <ImageView
                       android:layout_width="wrap_content"
                       android:layout_height="wrap_content"
                       android:layout_gravity="right"
                       android:layout_marginRight="10dp"
                       android:onClick="clickOnMail"
                       android:padding="5dp"
                       android:src="@android:drawable/ic_dialog_email" />
               </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"
           android:layout_margin="@dimen/activity_vertical_margin"
           app:layout_behavior="@string/appbar_scrolling_view_behavior">
   
           <!--layout content-->
           <LinearLayout
               android:layout_width="match_parent"
               android:layout_height="match_parent"
               android:orientation="vertical"
               android:paddingBottom="50dp">
   
               <TextView
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:text="You can place all the content here." />
           </LinearLayout>
   
       </android.support.v4.widget.NestedScrollView>
   
   </android.support.design.widget.CoordinatorLayout>
   

     
   
4. Open your MainActivity.JAVA class and update it for change text at run time-
   
   

   package com.pankaj.nested_scroll_view.demo;
   
   import android.os.Bundle;
   import android.support.design.widget.AppBarLayout;
   import android.support.design.widget.CollapsingToolbarLayout;
   import android.support.v4.view.ViewCompat;
   import android.support.v7.app.AppCompatActivity;
   import android.view.View;
   import android.widget.Toast;
   
   public class MainActivity extends AppCompatActivity implements AppBarLayout.OnOffsetChangedListener {
   
       //__________create objects
       private CollapsingToolbarLayout collapsingToolbarLayout = null;
       private AppBarLayout appBarLayout;
       private CircleImageView ivcImage;
   
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
   
           //__________initialization
           collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
           collapsingToolbarLayout.setCollapsedTitleTextAppearance(R.style.collapsedappbar);
    collapsingToolbarLayout.setExpandedTitleTextAppearance(R.style.expandedappbar);
   
           ivcImage = (CircleImageView) findViewById(R.id.ivcImage);
           appBarLayout = (AppBarLayout) findViewById(R.id.appBarLayout);
   
           //__________set title
           collapsingToolbarLayout.setTitle("Pankaj Gurjar");
   
           //__________add OnOffsetChangeListener
           appBarLayout.addOnOffsetChangedListener(this);
       }
   
       //__________methode will be call when click on "Back"
       public void clickOnBack(View view) {
           Toast.makeText(this, "click On Back", Toast.LENGTH_SHORT).show();
       }
   
       //__________methode will be call when click on "Profile Image"
       public void clickOnProfileImage(View view) {
           Toast.makeText(this, "click On Profile Image", Toast.LENGTH_SHORT).show();
       }
   
       //__________methode will be call when click on "Mail"
       public void clickOnMail(View view) {
           Toast.makeText(this, "click OnMail", Toast.LENGTH_SHORT).show();
       }
   
       //__________methode will be call when click on "Map"
       public void clickOnMap(View view) {
           Toast.makeText(this, "click On Map", Toast.LENGTH_SHORT).show();
       }
   
       @Override
       public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
   
           //__________methode will be call when user scroll for show hide main image
           if (collapsingToolbarLayout.getHeight() + verticalOffset < 2 * ViewCompat.getMinimumHeight(collapsingToolbarLayout)) {
   
               //__________show circular profile image
               ivcImage.animate().alpha(1).setDuration(600);
           } else {
   
               //__________hide circular profile image
               ivcImage.animate().alpha(0).setDuration(600);
           }
       }
   }
   
   

   
   
5. Create an class(CircleImageView.java) which will be use to show circuler image. Open your CircleImageView.java and update it-
   
   

   package com.pankaj.nested_scroll_view.demo;
   
   import android.content.Context;
   import android.graphics.Bitmap;
   import android.graphics.Bitmap.Config;
   import android.graphics.Canvas;
   import android.graphics.Paint;
   import android.graphics.PorterDuff.Mode;
   import android.graphics.PorterDuffXfermode;
   import android.graphics.Rect;
   import android.graphics.drawable.BitmapDrawable;
   import android.graphics.drawable.Drawable;
   import android.util.AttributeSet;
   import android.widget.ImageView;
   
   public class CircleImageView extends ImageView {
      
      public CircleImageView(Context context) {
         this(context, null);
      }
   
      public CircleImageView(Context context, AttributeSet attrs) {
         super(context, attrs);
         
      // newWidth = Integer.parseInt( attrs.getAttributeIntValue(1, "50"));
         // = Integer.parseInt(attrs.getAttributeValue(2));
      }
   
      @Override
      protected void onDraw(Canvas canvas) {
         Drawable d = getDrawable();
         if(d == null) {
            return;
         }
   
         if(d.getIntrinsicHeight() == 0 || d.getIntrinsicWidth() == 0) {
            return;
         }
   
         System.out.println("newWidth...."+getWidth());
         int radius = getWidth();
         Bitmap bitmap = ((BitmapDrawable)d).getBitmap();
         Bitmap resized = Bitmap.createScaledBitmap(bitmap, getWidth(), getWidth(), true);
         Bitmap b = createCroppedBitmap(radius, resized);
         canvas.drawBitmap(b, 0, 0, null);
      }
   
      private Bitmap createCroppedBitmap(int radius, Bitmap bitmap) {
         Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
               bitmap.getHeight(), Config.ARGB_8888);
         Canvas canvas = new Canvas(output);
         final int color = 0xff424242;
         final Paint paint = new Paint();
         final Rect rect = new Rect(0, 0, bitmap.getWidth(),
               bitmap.getHeight());
         paint.setAntiAlias(true);
         canvas.drawARGB(0, 0, 0, 0);
         // paint.setColor(color);
         canvas.drawCircle(bitmap.getWidth() / 2,
               bitmap.getHeight() / 2, bitmap.getWidth() / 2, paint);
         paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
         canvas.drawBitmap(bitmap, rect, rect, paint);
         return output;
      }
   }
   
   

   
   
    
6. . Open your style.xml and update it-
   
   

   <resources>
   
       <!-- Base application theme. -->
       <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
   
           <!-- Customize your theme here. -->
           <item name="colorPrimary">@color/colorPrimary</item>
           <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
           <item name="colorAccent">@color/colorAccent</item>
       </style>
   
       <!--Them which will be use for no action bar-->
       <style name="AppTheme.NoActionBar">
           <item name="windowActionBar">false</item>
           <item name="windowNoTitle">true</item>
       </style>
   
       <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar"></style>
   
       <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light"></style>
   
       <!--properties which will be use in expande condition-->
       <style name="expandedappbar" parent="@android:style/TextAppearance.Medium">
           <item name="android:textSize">25sp</item>
           <item name="android:textColor">@android:color/white</item>
           <item name="android:textStyle">bold</item>
       </style>
   
       <!--properties which will be use in collapse condition-->
       <style name="collapsedappbar" parent="@android:style/TextAppearance.Medium">
           <item name="android:textSize">18sp</item>
           <item name="android:textColor">@android:color/white</item>
           <item name="android:textStyle">normal</item>
       </style>
   
   </resources>
   
   

   
    
7. Now all the development process has completed, Please run the application.
   
   
   
   
    
8. Now scroll the screen and check it.
    
   
   
   
   
   
   
   
   
9.  Good bye, Thanks to read this blog.

Download Demo