پروفایل CollapsingToolbarLayout اندروید استودیو

CollapsingToolbarLayout Android Studio

CollapsingToolbarLayout ، عرض سلام و ادب خدمت کاربرن محترم سایت خانه اندروید در خدمت شما دوستان عزیز هستیم با آموزش پروفایل CollapsingToolbarLayout امیدواریم این آموزش مشابه آموزش های قبل مورد رضایت شما عزیزان قرار بگیره قصد داریم پروفایلی را طراحی کنیم که کاربر با اسکرول انیمیشن پارالاکس را مشاهده کنه و Toolbar نمایش Background همراه با تصویر از سمت بالا محو بشه یا خارج ،  خیلی از اپلیکیشن های از این روش استفاده کردن مثل اپلیکیشن تلگرام و …ما هم قصد داریم این آموزش رو در اختیار شما عزیزان قرار بدیم.

لطفا اکتیویتی با نام : activity_CollapsingToolbarLayout ایجاد کنید سپس در بخش دیزاین سورس کد زیر را وارد کنید:

<?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"
    android:layoutDirection="rtl"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="386dp"
        android:layout_height="240dp"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="160dp"
                android:adjustViewBounds="true"
                android:src="@mipmap/androd"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

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

    <android.support.v4.widget.NestedScrollView 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"
        android:layout_marginTop="@dimen/activity_horizontal_margin"
        android:padding="@dimen/activity_horizontal_margin"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        tools:showIn="@layout/activity_scrolling">

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

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="?attr/selectableItemBackground"
                android:clickable="true"
                android:padding="@dimen/activity_horizontal_margin">

                <ImageView
                    android:id="@+id/ivContactItem1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_marginEnd="@dimen/activity_horizontal_margin"
                    android:layout_marginRight="@dimen/activity_horizontal_margin"
                    android:src="@drawable/ic_android_black_24dp" />

                <TextView
                    android:id="@+id/tvNumber1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="@dimen/activity_horizontal_margin"
                    android:layout_marginStart="@dimen/activity_horizontal_margin"
                    android:layout_toEndOf="@id/ivContactItem1"
                    android:layout_toRightOf="@id/ivContactItem1"
                    android:text="خانه اندروید"
                    android:textAppearance="@style/TextAppearance.AppCompat.Medium"
                    android:textColor="#212121" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="?attr/selectableItemBackground"
                android:clickable="true"
                android:padding="@dimen/activity_horizontal_margin">

                <ImageView
                    android:id="@+id/ivContactItem2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_marginEnd="@dimen/activity_horizontal_margin"
                    android:layout_marginRight="@dimen/activity_horizontal_margin"
                    android:src="@drawable/ic_assignment_black_24dp" />

                <TextView
                    android:id="@+id/tvNumber2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="@dimen/activity_horizontal_margin"
                    android:layout_marginStart="@dimen/activity_horizontal_margin"
                    android:layout_toEndOf="@id/ivContactItem2"
                    android:layout_toRightOf="@id/ivContactItem2"
                    android:text="جواد محمدی هستم مدرس سایت خانه اندروید خوشحالم که در خدمت شما هستم."
                    android:textAppearance="@style/TextAppearance.AppCompat.Medium"
                    android:textColor="#212121"
                    android:lineSpacingExtra="20dp"/>

            </RelativeLayout>

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

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="?attr/selectableItemBackground"
                android:clickable="true"
                android:padding="@dimen/activity_horizontal_margin">

                <ImageView
                    android:id="@+id/ivContactItem3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_marginEnd="@dimen/activity_horizontal_margin"
                    android:layout_marginRight="@dimen/activity_horizontal_margin"
                    android:src="@drawable/ic_mail_outline_black_24dp" />

                <TextView
                    android:id="@+id/tvNumber3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="@dimen/activity_horizontal_margin"
                    android:layout_marginStart="@dimen/activity_horizontal_margin"
                    android:layout_toEndOf="@id/ivContactItem3"
                    android:layout_toRightOf="@id/ivContactItem3"
                    android:ellipsize="end"
                    android:maxLines="1"
                    android:text="info@homeandroid.ir"
                    android:textAppearance="@style/TextAppearance.AppCompat.Medium"
                    android:textColor="#212121" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="?attr/selectableItemBackground"
                android:clickable="true"
                android:padding="@dimen/activity_horizontal_margin">

                <ImageView
                    android:id="@+id/ivContactItem4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_marginEnd="@dimen/activity_horizontal_margin"
                    android:layout_marginRight="@dimen/activity_horizontal_margin"
                    android:src="@drawable/ic_phone_black_24dp"
                   />

                <TextView
                    android:id="@+id/tvNumber4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="@dimen/activity_horizontal_margin"
                    android:layout_marginStart="@dimen/activity_horizontal_margin"
                    android:layout_toEndOf="@id/ivContactItem4"
                    android:layout_toRightOf="@id/ivContactItem4"
                    android:ellipsize="end"
                    android:maxLines="1"
                    android:text="093034545454"
                    android:textAppearance="@style/TextAppearance.AppCompat.Medium"
                    android:textColor="#212121" />
            </RelativeLayout>

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

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="?attr/selectableItemBackground"
                android:clickable="true"
                android:padding="@dimen/activity_horizontal_margin">

                <ImageView
                    android:id="@+id/ivContactItem5"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_marginEnd="@dimen/activity_horizontal_margin"
                    android:layout_marginRight="@dimen/activity_horizontal_margin"
                    android:src="@drawable/ic_my_location_white_24dp" />

                <TextView
                    android:id="@+id/tvNumber5"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="@dimen/activity_horizontal_margin"
                    android:layout_marginStart="@dimen/activity_horizontal_margin"
                    android:layout_toEndOf="@id/ivContactItem5"
                    android:layout_toRightOf="@id/ivContactItem5"
                    android:ellipsize="end"
                    android:maxLines="1"
                    android:text="سایت : homeandroid.ir"
                    android:textAppearance="@style/TextAppearance.AppCompat.Medium"
                    android:textColor="#212121" />

            </RelativeLayout>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="?attr/selectableItemBackground"
                android:clickable="true"
                android:padding="@dimen/activity_horizontal_margin">

                <ImageView
                    android:id="@+id/ivContactItem6"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_marginEnd="@dimen/activity_horizontal_margin"
                    android:layout_marginRight="@dimen/activity_horizontal_margin"
                    android:src="@drawable/ic_mail_outline_black_24dp"
                    android:visibility="invisible" />

                <TextView
                    android:id="@+id/tvNumber6"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="@dimen/activity_horizontal_margin"
                    android:layout_marginStart="@dimen/activity_horizontal_margin"
                    android:layout_toEndOf="@id/ivContactItem6"
                    android:layout_toRightOf="@id/ivContactItem6"
                    android:ellipsize="end"
                    android:maxLines="1"
                    android:text="نام فارسی : خانه اندروید"
                    android:textAppearance="@style/TextAppearance.AppCompat.Medium"
                    android:textColor="#212121" />
            </RelativeLayout>
            <include layout="@layout/item_divider" />
        </LinearLayout>

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

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/ic_message_white_24dp"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end" />

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

خوب حالا Layout جدید با نام item_divider.xml بسازید و سپس سورس کد زیر را تایپ کنید.

<?xml version="1.0" encoding="utf-8"?>
<View xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:layout_marginBottom="8dp"
    android:layout_marginStart="64dp"
    android:layout_marginTop="8dp"
    android:background="#B6B6B6" />

حال قسمت جاوا را باز کنید : و سپس کد زیر تایپ کنید :

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;

import applicationsite.homeandroid.com.myproject_sendpost.R;

public class activity_CollapsingToolbarLayout extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_scrolling);
        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        FloatingActionButton fab =  findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "تست کلیک", Snackbar.LENGTH_LONG)
                        .setAction("با موفقیت کلیک شد", null).show();
            }
        });
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    }
}

حالا نوبت میرسه به قسمت استایل دهی اپلیکیشن :
قسمت Style.xml را باز کنید و سورس کد زیر را تایپ کنید.

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>


    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" >
        <item name="android:textColorPrimary">@color/color_white</item>
       <item name="android:textSize">14dp</item>
         <item name="android:windowActionBar">false</item>
        <item name="android:tileMode">disabled</item>
        <item name="android:textAlignment">center</item>
        <item name="android:windowBackground">@color/colorAccent</item>
    </style>

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

</resources>

برای ست کردن رنگ باید قسمت color.xml را باز کنید :

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="color_white">#ffffff</color>
</resources>

حال قسمت dimens.xml را باز کنید و اگر وجود ندارد فایل با نام فوق ایجاد کنید در بخش valuse

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
    <dimen name="fab_margin">16dp</dimen>
</resources>

قسمت String.xml را باز کنید و رشته های زیر را اضافه کنید :

<resources>
    <string name="app_name">Collap Profile</string>
    <string name="action_settings">Settings</string>
</resources>

و در نهایت پس از اجرا :

نکته : جهت مشاهده انیمیشن پارالاکس لطفا اسکرول کنید.

نکته آخر : ایکن ها و دیگر موارد استفاده شده زمیمه پست شده است.

چنانچه مشکلی داشتید می توانید سورس کد را دانلود کنید.

لینک دانلود سورس کد 

حجم : ۱۳۵ kb

پسورد فایل :   homeandroid.ir

منبع آموزش : خانه اندروید