Showing posts with label Resize image at header. Show all posts
Showing posts with label Resize image at header. Show all posts

Friday, December 23, 2016

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.   

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.




Posted by at No comments:
Labels: , , , , ,
Location: Indore, Madhya Pradesh, India
Subscribe to: Posts (Atom)