آموزش ساخت Parallax یا همون collapsing Toolber

خب برای اینکار اولین کاری که باید انجام بدین باید این باشه که وارد Build.gradle مربوط به app بشین و در وابستگی ها یا همون dependencies خط پایین رو اضافه کنین و بعد sync now رو کلیک کنین
همینجا بگم که خط پایین باعث میشه کتابخونه دیزاین متریال به پروژه اضافه بشه

compile 'com.android.support:design:23.4.0'

خب بعد از این کار وارد xml مربوط به همون لایه ای میشیم که میخوایم درش این toolbar قشنگ رو راه بندازیم و در اولین حرکت نوع لایه رو هر چی که هست به coordinatorLayout تغییر میدیم
شما این رو به جای نام لایه قبلی بزارین

android.support.design.widget.CoordinatorLayout

خب بعد از این که این کار رو کرین نوبت میرسه به اکشن بار
همون طور که در جریان هستین actionbar سابق خیلی چغر و بد بدن بود و کلا کار زیادی نمیشد باهاش کرد تا اینکه تولبار اومد و مشکلات رو حل کرد.
پس ما باید اینجا یه تولبار سفارشی بسازیم
از اونجایی که ما میخوایم اسکرول بر روی تولبار داشته باشیم پس باید از appbarlayout استفاده کنیم و صد البته که کتابخونه دیزاین هم گزینه دیگری بهمون نمیده

از اونجا که توضیح زیاد در مورد اپ بار از حوصله شما و دست من خارجه کسانی که علاقه به دونستن تفاوت appbarlayout و toolbar و چرایی استفاده از اون رو دارن می تونن به اینجا مراجعه کنند.
پس من یه appbar با اون ارتفاعی که دلم میخواد موقع باز بودن باشه ایجاد می کنم.

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbarLayout"
    android:layout_width="match_parent"
    android:layout_height="250dp"
    android:fitsSystemWindows="true">

ادامه دارد....
دستم درد گرفت :)

خب بعد از این که Appbarlayout رو ساختیم میریم سراغ coollapsing Toolbar

<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:layout_scrollFlags="scroll|exitUntilCollapsed">

پروپرتی ها  تقریبا مشخصه ولی اگه سوالی بپرسید جواب میدم بهش تو کامنتا
فقط یک نکته بگم که در پروپرتی اسکرول فلگ همیشه اسکرول رو باید داشته باشین
بعد از این کار در خود این تولبار ساخته شده توسط ما باید یه ایمیج ویو بسازیم
همونی که میخوایم اونجا نمایش داده بشه
و از اینجا یه پروپرتی داریم به نام layout_collapseMode که نوع دیده شدن ایمیج رو مشخص می کنه و من دوست دارم pin باشه
اگه شما دوست دارین میتونین عوضش کنین و حتما این کار رو حتما برای تست انجام بدین تا نتیجه رو ببینین
خب اینم imageView

<ImageView
    android:id="@+id/picideh"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/pic4"
    android:fitsSystemWindows="true"
    android:scaleType="centerCrop"
    app:layout_collapseMode="pin"
    />

خب حالا باید تولبارمون رو بسازیم که بعد از اسکرول شدن قراره دیده بشه
با تولبار هم که آشنایی دارید.
نوع collapseMode تولبار باید parallax باشه. البته این لایه ای که داریم می سازیم  رو هم بعضی ها به همین نام می شناسن و بهش میگن پارالاکس

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:paddingLeft="5dp"
    android:paddingRight="10dp"
    app:layout_collapseMode="parallax">
</android.support.v7.widget.Toolbar>

و اینجاست که collaps toolbar رو می بندیم

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

اگه دوست داشتین تو این لایه floating Action Button هم داشته باشین که همون بالا رو مرز collaps toolbar باشه
دقیقا جای تعریفش اینجاست

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    app:backgroundTint="#E91E63"
    app:fabSize="normal"
    app:layout_anchor="@id/appbarLayout"
    android:elevation="600dp"
    app:layout_anchorGravity="left|bottom"/>

تقریبا تمام شده کار و حالا باید آخرین کار رو بکنیم و یه ویو بسازیم که با اسکرول شدنش همه چی اسکرول میشه
و طراحی صفحه هم جاش اینجاست
دقت کنین layout_behavior دقیقا جاش همینجاست
یه نکته دیگه اینکه شما وقتی کار می کنین و تایپ می کنین کد ها رو متاسفانه از اندروید استدیویی که استاد دادن ساجستی دریافت نمی کنین و وجود نداره اگه کنترل اسپیس بزنین ولی تو نسخه های بالاتر کتابخونه دیزاین این مشکل برطرف شده. پس دقت کنین که چطور تایپ شده.

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

خب در آخر یه Linearlayout میسازیم و درون اون طرای هامون رو انجام می دیم.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:orientation="vertical"
    android:paddingTop="35dp">

    <include layout="@layout/card_layout"/>


</LinearLayout>

همونطور که می بینین من دورن این لایه یه لایه دیگه رو اضافه کردم و کارا رو اونجا انجام میدم و شما هم می تونید از کارد ویو استفاده کینی و اگر کردین حتما کتابخونش رو فراموش نکنین اضافه کنین.

compile 'com.android.support:cardview-v7:23.4.0'

خب تموم شد فقط باید لایه رو ببندین

    </android.support.v4.widget.NestedScrollView>


</android.support.design.widget.CoordinatorLayout>

در آخر این کد ها رو کامل برای یه لایه میزارم
و همچنین کد های کارد ویو رو
و بعد از اون کد های جاوا برای دسترسی به تایتل و ایکون برگشت رو
سوالی هم داشتین بپرسین تا جایی که بلد باشم جواب می دم.
کدهای پایین لایه اصلی هستن

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="ir.khastkhodaie.testPageActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbarLayout"
        android:layout_width="match_parent"
        android:layout_height="256dp"
        android:fitsSystemWindows="true">

        <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:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/picideh"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/pic4"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="pin"
                />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:paddingLeft="5dp"
                android:paddingRight="10dp"
                app:layout_collapseMode="parallax">
            </android.support.v7.widget.Toolbar>

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

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

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        app:backgroundTint="#E91E63"
        app:fabSize="normal"
        app:layout_anchor="@id/appbarLayout"
        android:elevation="600dp"
        app:layout_anchorGravity="left|bottom"/>


    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:orientation="vertical"
            android:paddingTop="35dp">

            <include layout="@layout/card_layout"/>


        </LinearLayout>

    </android.support.v4.widget.NestedScrollView>


</android.support.design.widget.CoordinatorLayout>

اینم کد های مربوط به کارد ویو که برا تست گذاشتم

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="12dp"
        android:background="#acacac">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Lorem Ipsum"
            android:textSize="20sp"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Lorem Ipsum dfdfj si nddfj ndjnbnjf,nbfn ndfjgdfjnfnjvns sdjdjngdnjfg ..."
            android:textSize="18sp"/>

    </LinearLayout>

</android.support.v7.widget.CardView>

در مورد کد های جاوا هم یه چیزهایی رو بگم
1. اینکه من لایه ای که ساختم رو تو جاوا مثل فیلد تعریف کردم
2. خودتون یکم با عدد تو کد ها کار کنین و نتیجه رو ببینین
3.من دیکه برگشت رو false کردم و دیده نمیشه شما true کنین و ببینینش و بعد نخواستین برش دارین

final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayHomeAsUpEnabled(false);


collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbarLayout.setTitle("تیتر صفحه");
collapsingToolbarLayout.setExpandedTitleMarginEnd(65);
collapsingToolbarLayout.setExpandedTitleMarginBottom(10);

collapsingToolbarLayout.setExpandedTitleTextAppearance(R.style.ExpandedAppBar);
collapsingToolbarLayout.setCollapsedTitleTextAppearance(R.style.CollapsedAppBar);

فقط یادتون نره تولبار رو تعریف کنین اون بالا

private CollapsingToolbarLayout collapsingToolbarLayout = null;

اینم نمونه ای که ایجاد میشه برا دوستانی که می خواستن خروجی ببینن

سلام

ببخشید زمانی که می خوام گریدل رو سینک کنم این ارور رو می گیرم، بنظرتون مشکلش کجاست؟

فایل build.gradle من به این شکله:

apply plugin: 'com.android.application'

android {
    compileSdkVersion 16
    buildToolsVersion "24.0.1"

    defaultConfig {
        applicationId "com.app.parallax"
        minSdkVersion 8
        targetSdkVersion 8
    }

    buildTypes {
        release {
            minifyEnabled true
            proguardFiles 'proguard.cfg'
        }
    }
}

dependencies {
    compile 'com.android.support:appcompat-v7:18.0.0'
    compile 'com.android.support:recyclerview-v7:21.0.+'
    compile 'com.android.support:cardview-v7:21.0.+'
    compile 'com.android.support:design:23.4.0'
}

compileSdkVersion 16

compileSdkVersion 23