ضرورت راست چین کردن اجزای رابط کاربری اندروید

مخاطبان برنامه‌های اندرویدی که شما به عنوان یک توسعه دهنده منتشر می‌کنید عمدتا فارسی زبان هستند بنابراین لازم است چینش محتوا و قسمت‌های مختلف اپلیکیشن برای یک کاربر فارسی زبان بهینه سازی شده باشد.
مفاهیمی مانند راست چین (Right to left یا به اختصار RTL) و چپ چین (Left to right یا LTR) محدود به اپلیکیشن‌های موبایلی نبوده و حتما در سایر محیط‌های نرم افزاری با این اصطلاحات آشنا شده‌اید. به عنوان مثال در یک ویراستار متن مانند Office Word یا صفحات وب نیز این مفاهیم به کار گرفته شده‌اند. اگر با طراحی صفحات وب آشنایی داشته باشید احتمالا می‌دانید در CSS با تعریف direction:rtl تمامی محتوای موجود در صفحه راست چین می‌شود.

راست چین کردن تولبار در اندروید

در این آموزش به بررسی روش‌های راست چین کردن Toolbar در اندروید می‌پردازیم. برای این مبحث پروژه‌ی جدیدی نمی‌سازم و همان پروژه آموزش ساخت Toolbar را ویرایش می‌کنم تا نتیجه کار نیز برای شما بهتر قابل درک باشد.
اندروید در API 17 یا همان Android 4.2 (Jelly Bean) و همچنین API 19 یا Android 4.4 (KITKAT) قابلیت پشتیبانی از Layout های راست به چپ (RTL Layout) را به سیستم عامل خود اضافه کرد. با معرفی این قابلیت، راه برای توسعه دهندگان اندروید تا حدود زیادی هموار شد. تا پیش از این برای راست چین کردن تولبار لازم بود تولبار کاملا به صورت دستی پیاده سازی شود. اما از API 17 به سادگی می‌توان راست چین کردن تولبار و View های اندروید را انجام داد.
راست چین کردن Toolbar در اندروید را به دو صورت آموزش می‌دهم. روش نخست با استفاده از خاصیت layoutDirection در XML و روش دوم استفاده از متد setLayoutDirection در Java.

۱: راست چین کردن Toolbar توسط خاصیت layoutDirection در XML

این روش برای دیوایس‌های با API 17 و به بالا سازگاری دارد. قبل از هرچیز باید مطمئن شویم پروژه اندروید ما از قابلیت RTL پشتیبانی می‌کند. فعال شدن پشتیبانی از زبان‌های راست به چپ در اندروید توسط خاصیت android:supportsRtl در فایل مانیفست صورت می‌گیرد. فایل AndroidManifest.xml پروژه را باز می‌کنم:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="ir.android_studio.toolbar">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

مشاهده می‌کنید این خاصیت در تگ application با مقدار true قرار دارد بنابراین درون مانیفست لازم نیست کار دیگری انجام دهم. اگر این تگ در مانیفست شما وجود ندارد آنرا اضافه کرده یا در صورتی که مقدار آن false است به true تغییر دهید.
پروژه را اجرا می‌کنم:

هنوز تغییری در تولبار صورت نگرفته و چینش در حالت LTR است.

فایل activity_main.xml را باز کرده و خاصیت layoutDirection را با مقدار rtl به Toolbar اضافه می‌کنم:

<android.support.v7.widget.Toolbar
   android:layout_width="match_parent"
   android:layout_height="?attr/actionBarSize"
   android:id="@+id/m_toolbar"
   android:background="?attr/colorPrimary"
   android:elevation="3dp"
   android:theme="@style/ToolbarTheme"
   app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"
   android:layoutDirection="rtl"/>

با اجرای مجدد پروژه تولبار راست چین می‌شود:

آیتم‌هایی که در سمت چپ تولبار قرار داشت به سمت راست منتقل شدند و بلعکس. حتی آیتم‌های منوی تولبار نیز راست چین شده است:

نکته: layoutDirection محدود به یک View، Widget یا Layout خاص نیست و در همه‌جا می‌توان استفاده کرد. در همین اکتیویتی می‌توانستم بجای اضافه کردن این خاصیت به Toolbar آنرا به لایه‌ی اصلی اکتیویتی که از نوع LinearLayout هست اضافه کنم. به این ترتیب تمامی عناصر موجود درون این لایه راست چین می‌شوند. از جمله TextView ای که عبارت Hello World را نمایش می‌دهد:

۲: راست چین کردن تولبار توسط متد setLayoutDirection

این روش برای دیوایس‌های با API 19 و به بالا سازگاری دارد. در این روش نیز مانند قبل ابتدا باید خاصیت android:supportsRtl با مقدار true در مانیفست پروژه اندروید تعریف شده باشد.
خاصیت android:layoutDirection که در مرحله قبل به تولبار یا لایه‌ی اصلی اکتیویتی اضافه شده را حذف می‌کنم.
سپس خط کد زیر را داخل متد onCreate اکتیویتی اضافه می‌کنم:

getWindow().getDecorView().setLayoutDirection(View.LAYOUT_DIRECTION_RTL);

پارامتر ورودی متد setLayoutDirection از نوع View.LAYOUT_DIRECTION_RTL است که از نام آن پیداست که Direction (جهت) چینش اجزای Layout از نوع RTL اعمال می‌شود.
پروژه تولبار فقط یک اکتیویتی دارد بنابراین این خط درون MainActivity قرار می‌گیرد.
پروژه را اجرا می‌کنم:

مانند حالتی که در مرحله قبل android:layoutDirection=”rtl” را به Layout اصلی اکتیویتی اضافه کردم، با استفاده از متد setLayoutDirection نیز تمامی عناصر موجود در اکتیویتی به حالت راست چین تغییر وضعیت پیدا می‌کنند.
نحوه‌ی راست چین کردن Toolbar در اندروید را بررسی کردیم. پیاده سازی هردو روش به سادگی امکان‌پذیر است و نیازی به اعمال تغییرات در View ها نیست. البته کار همیشه به همین سادگی نخواهد بود. در مواردی ممکن است نیاز به اعمال تغییرات در عناصر موجود در صفحه باشد که در وب مقالات متعددی در این خصوص وجود دارد. یا اگر تمایل دارید اپلیکیشن راست چین شما از دیوایس‌های با API پایینتر از ۱۷ نیز به خوبی پشتیبانی کند، کار مقداری پیچیده‌تر خواهد شد. به امید خدا من هم در ادامه آموزش‌ها به نحوه‌ی راست چین کردن سایر قسمت‌های یک پروژه اندرویدی خواهم پرداخت.

مطالعه‌ی بیشتر:

https://developer.android.com/reference/android/util/LayoutDirection

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

به‌نام خدا. در این مبحث به قابلیتی با عنوان Floating Label می‌پردازیم که بر روی EditText اجرا می‌شود. در گذشته با Hint آشنا شدیم. با استفاده از این ویژگی می‌توانستیم یک توضیح کوتاه به یک EditText اضافه کنیم که با پر شدن فیلد توسط کاربر، Hint نیز مخفی می‌شد. اما برای زیبایی بیشتر فیلدهایی که دارای Hint می‌باشند می‌توانیم قابلیتی پیاده سازی کنیم که با لمس EditText توسط کاربر و وارد کردن مقدار، Hint حذف نشده و با یک حالت انیمیشن به بالای فیلد منتقل شود. برای پیاده سازی این قابلیت به کتابخانه Support Design و تگ TextInputLayout نیاز داریم. ضمنا از این کامپوننت برای نمایش Error ها نیز استفاده می‌شود.

یک پروژه جدید با نام TextInputLayout و یک Empty Activity ایجاد می‌کنم.
در ابتدا لازم است کتابخانه design را به پروژه اضافه کنم:

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:27.1.1'
    implementation 'com.android.support:design:27.1.1'
}

قصد دارم دو EditText برای دریافت نام کاربری و رمز عبور کاربر به اکتیویتی اضافه کنم:

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/user_layout">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/user_edittext"
            android:hint="Username"/>

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


    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/pass_layout">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/pass_edittext"
            android:hint="Password"
            android:inputType="textPassword"/>

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

</LinearLayout>

هر EditText درون یک تگ TextInputLayout قرار می‌گیرد.
پروژه را اجرا می‌کنم:

با اجرای پروژه، اولین EditText یعنی Username در حالت Focus قرار می‌گیرد که آماده وارد کردن کاراکتر است. هر آیتمی که در حالت Focus باشد رنگ Hint و خط زیر آن قرمز و مابقی آیتم‌ها خاکستری است.
ممکن است بخواهیم آیتمی غیر از آیتم اول در حالت Focus باشد. یا بهرحال تعیین کنیم یک آیتم خاص به عنوان آیتم Focus شده نمایش داده شود. به کد زیر دقت کنید:

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/pass_layout">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/pass_edittext"
        android:hint="Password"
        android:inputType="textPassword"/>
    <requestFocus/>

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

من یک تگ requestFocus به TextInputLayout مربوط به آیتم Password اضافه کردم که در اجرای مجدد پروژه هم این فیلد Focus شده:

در حال حاضر همیشه یک EditText باید در حالت Focus باشد. اما بهتر است حالتی را پیاده سازی کنیم که اگر کاربر نقطه ای از صفحه (بجز محل این دو آیتم) را لمس کند، آیتمی که Focus هست از این حالت خارج شده و در نهایت تمامی آیتم ها در حالت عادی نمایش داده شوند.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:id="@+id/main_layout">

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/user_layout">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/user_edittext"
            android:hint="Username"/>

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


    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/pass_layout">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/pass_edittext"
            android:hint="Password"
            android:inputType="textPassword"/>
        <requestFocus/>

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

</LinearLayout>

Layout ریشه اکتیویتی یک LinearLayout است. به این لایه دو خاصیت focusable و focusableInTouchMode با مقدار true و یک id اضافه کردم. سپس در Backend اکتیویتی این لایه را تعریف نموده و برای آن یک متد Listener می‌سازم که ورودی آن null است:

MainActivity.java:

package ir.android_studio.textinputlayout;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {

    LinearLayout mLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mLayout = findViewById(R.id.main_layout);
        mLayout.setOnClickListener(null);

    }
}

مقدار null برای این setOnClickListener باعث می‌شود تا هنگام کلیک (لمس) صفحه که من از نوع LinearLayout ساخته ام، همه EditText ها در حالت غیر Focus قرار گیرند:

ضمنا با اضافه شدن دو خاصیت فوق به لایه اصلی، هیچکدام از آیتم ها در ابتدای اجرای پروژه به صورت پیش فرض Focus نیستند.
قبل از ادامه آموزش، تگ requestFocus را هم غیر فعال (کامنت) می‌کنم زیرا نمی‌خواهم هیچ آیتمی فوکوس باشد.

مدیریت Error ها در TextInputLayout:

مطمئنا همه ما هنگام تکمیل فرم ها به ارورهایی برخورد کرده ایم. این فرم می‌تواند یک فرم ثبت نام در یک وب سایت یا یک اپلیکیشن باشد. به عنوان مثال در فیلد مربوط به کد پستی، اخطار “کد وارد شده باید ده رقم باشد” به کاربر اعلام می‌شود.
تصمیم دارم برای فیلد Username یک error تعریف کنم.

package ir.android_studio.textinputlayout;

import android.support.design.widget.TextInputLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {

    LinearLayout mLayout;
    TextInputLayout userLayout, passLayout;
    EditText userEdittext, passEdittext;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mLayout = findViewById(R.id.main_layout);
        mLayout.setOnClickListener(null);

        userLayout = findViewById(R.id.user_layout);
        passLayout = findViewById(R.id.pass_layout);

        userEdittext = findViewById(R.id.user_edittext);
        passEdittext = findViewById(R.id.pass_edittext);

        userEdittext.setOnFocusChangeListener(new View.OnFocusChangeListener() {
            @Override
            public void onFocusChange(View view, boolean b) {

                if (userEdittext.getText().toString().isEmpty()) {
                    userLayout.setError("Enter Username!");
                } else {
                    userLayout.setErrorEnabled(false);
                }

            }
        });

    }

}

در کد بالا از متد setOnFocusChangeListener استفاده شده:

userEdittext.setOnFocusChangeListener(new View.OnFocusChangeListener() {
    @Override
    public void onFocusChange(View view, boolean b) {

    }
});

این متد هنگامی اجرا می‌شود که کاربر روی یک EditText ضربه بزند و آن فیلد در حالت فوکوس قرار بگیرد. متد را به اینصورت تکمیل می‌کنم:

userEdittext.setOnFocusChangeListener(new View.OnFocusChangeListener() {
    @Override
    public void onFocusChange(View view, boolean b) {

        if (userEdittext.getText().toString().isEmpty()) {
            userLayout.setError("Enter Username!");
        } else {
            userLayout.setErrorEnabled(false);
        }

    }
});

یک شرط تعیین کردم که اگر EditText خالی بود، توسط متد setError یک ارور را روی userLayout نمایش بدهد و زمانی که این شرط نقض شد (یعنی فیلد خالی نباشد) ارور غیر فعال شود.
پروژه را اجرا می‌کنم:

ملاحظه می‌کنید با لمس EditText مربوط به Username بلافاصله اخطار با رنگ قرمز زیر آن نمایش داده می‌شود. در حال حاضر برنامه یک ایراد دارد. با وجود اینکه من کلمه test را تایپ کرده‌ام هنوز اخطار Enter Username حذف نشده و زمانی حذف خواهد شد که کاربر EditText بعدی یا جای دیگری از صفحه را لمس کند تا این آیتم از Focus خارج شود. در صورتی که به محض ورود اولین کاراکتر این ارور باید حذف شود.
با استفاده از متد addTextChangedListener و TextWatcher می‌توانیم تغییرات متن یک EditText را شنود کنیم.

userEdittext.addTextChangedListener(new TextWatcher() {
    @Override
    public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

    }

    @Override
    public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {

    }

    @Override
    public void afterTextChanged(Editable editable) {

    }
});

TextWatcher سه متد دارد که نقش هرکدام از نامش پیداست. beforeTextChanged قبل از تغییر متن، onTextChanged هنگام تغییر متن و afterTextChanged بعد از تغییر متن صدا زده می‌شوند.
در اینجا من به متد دوم نیاز دارم. همان if ای که قبلا نوشتم را درون این متد تکرار می‌کنم:

package ir.android_studio.textinputlayout;

import android.support.design.widget.TextInputLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.View;
import android.widget.EditText;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {

    LinearLayout mLayout;
    TextInputLayout userLayout, passLayout;
    EditText userEdittext, passEdittext;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mLayout = findViewById(R.id.main_layout);
        mLayout.setOnClickListener(null);

        userLayout = findViewById(R.id.user_layout);
        passLayout = findViewById(R.id.pass_layout);

        userEdittext = findViewById(R.id.user_edittext);
        passEdittext = findViewById(R.id.pass_edittext);

        userEdittext.setOnFocusChangeListener(new View.OnFocusChangeListener() {
            @Override
            public void onFocusChange(View view, boolean b) {

                if (userEdittext.getText().toString().isEmpty()) {
                    userLayout.setError("Enter Username!");
                } else {
                    userLayout.setErrorEnabled(false);
                }

            }
        });

        userEdittext.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            }

            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {

                if (userEdittext.getText().toString().isEmpty()) {
                    userLayout.setError("Enter Username!");
                } else {
                    userLayout.setErrorEnabled(false);
                }

            }

            @Override
            public void afterTextChanged(Editable editable) {

            }
        });

    }

}

حالا با وارد کردن اولین کاراکتر، اخطار حذف می‌شود:

با استفاده از خاصیت textColorHint می‌توان رنگ Hint یا همان Floating Label را تغییر داد:

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/user_layout"
    android:textColorHint="#36cb1f">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/user_edittext"
        android:hint="Username"/>

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

خاصیت hintTextAppearance هم برای استایل دهی به Hint هنگامی که Focus شده، بکار می‌رود:

<style name="TextInputStyle" parent="TextAppearance.AppCompat">
    <item name="android:textColor">#434ab2</item>
    <item name="android:textSize">16dp</item>
</style>

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/user_layout"
    android:textColorHint="#36cb1f"
    app:hintTextAppearance="@style/TextInputStyle">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/user_edittext"
        android:hint="Username"/>

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

بهتر است استایلی که تعریف می‌کنیم از TextAppearance.AppCompat ارث بری کند.
متن Error را هم به همین صورت و توسط خاصیت errorTextAppearance می‌توان استایل دهی کرد:

<style name="ErrorInputStyle" parent="TextAppearance.AppCompat">
    <item name="android:textColor">#731539</item>
    <item name="android:textSize">16dp</item>
</style>

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/user_layout"
    android:textColorHint="#36cb1f"
    app:hintTextAppearance="@style/TextInputStyle"
    app:errorTextAppearance="@style/ErrorInputStyle">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/user_edittext"
        android:hint="Username"/>

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

در TextInputLayout قابلیت دیگری با نام Counter (شمارنده) تعریف شده. کاربرد شمارنده در مواقعی است که بخواهیم تعداد کاراکترهای مناسب را به کاربر اعلام کنیم:

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/pass_layout"
    app:counterEnabled="true"
    app:counterMaxLength="8">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/pass_edittext"
        android:hint="Password"
        android:inputType="textPassword" />
    <!-- <requestFocus/> -->

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

خاصیت counterEnabled برای فعال کردن این ویژگی و counterMaxLength برای تعیین تعداد کاراکتر استفاده شده است:

با وارد کردن هر کاراکتر درون این EditText یک شماره به عدد سمت چپ اضافه می‌شود.
در صورتی که تعداد کاراکتر ورودی از مقدار MaxLength بیشتر شود، رنگ شمارنده تغییر می‌کند. تعیین رنگ شمارنده در حالت عادی و حالتی که تعداد کاراکترها از مقدار تعیین شده تجاوز کند به ترتیب توسط دو خاصیت counterTextAppearance و counterOverflowTextAppearance صورت می‌پذیرد:

<style name="CounterStyle" parent="TextAppearance.AppCompat">
    <item name="android:textColor">#30c7ae</item>
</style>

<style name="OverflowStyle" parent="TextAppearance.AppCompat">
    <item name="android:textColor">#199b85</item>
</style>

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/pass_layout"
    app:counterEnabled="true"
    app:counterMaxLength="8"
    app:counterTextAppearance="@style/CounterStyle"
    app:counterOverflowTextAppearance="@style/OverflowStyle">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/pass_edittext"
        android:hint="Password"
        android:inputType="textPassword" />
    <!-- <requestFocus/> -->

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

خاصیت passwordToggleEnabled آیکونی به EditText های از نوع password اضافه می‌کند که کاربر با لمس آن، پسوردی که وارد کرده را می‌تواند مشاهده می‌کند:

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/pass_layout"
    app:counterEnabled="true"
    app:counterMaxLength="8"
    app:counterTextAppearance="@style/CounterStyle"
    app:counterOverflowTextAppearance="@style/OverflowStyle"
    app:passwordToggleEnabled="true">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/pass_edittext"
        android:hint="Password"
        android:inputType="textPassword" />
    <!-- <requestFocus/> -->

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

توجه : سورس پروژه درون پوشه Exercises قرار داده شده است

منابع تکمیلی:

https://developer.android.com/reference/android/support/design/widget/TextInputLayout
https://developer.android.com/reference/com/google/android/material/textfield/TextInputLayout
https://developer.android.com/reference/android/text/TextWatcher

نوشته کار با TextInputLayout و Floating Label متریال دیزاین اولین بار در اندروید استودیو پدیدار شد.

معرفی Bottom Navigation

بنام خدا. Bottom Navigation یکی دیگر از کامپوننت‌های متریالی اندروید است که کاری مشابه Tabs انجام می‌دهد. این کامپوننت در پایین صفحه قرار می‌گیرد و برای نمایش ۳ الی ۵ گزینه مناسب است.

در استفاده از کامپوننت Bottom Navigation باید یکسری موارد را مدنظر قرار داد. از جمله:
– از Bottom Navigation عموما برای نمایش صفحات و قسمت‌های مهم اپلیکیشن استفاده می‌شود. صفحاتی که به لحاظ اهمیت دارای سطح و تراز یکسانی هستند و کاربر بیشترین سروکار را با آنها دارد. اینستاگرام را درنظر بگیرید:

در نوار پایین صفحه ۵ آیتم قرار گرفته که جزء پرکاربردترین صفحات این اپ است و کاربر به راحتی به آنها دسترسی دارد.
– برخلاف Tabs در اینجا تعداد آیتم‌ها باید محدود بوده (بین ۳ تا ۵) تا نیاز به اسکرول بین آیتم‌ها نباشد. همچنین استفاده از آن برای کمتر از ۳ آیتم هم پیشنهاد نمی‌شود. بنابراین اگر اپ شما فقط دو صفحه مهم دارد، استفاده از این ویجت راه حل مناسب نیست (بجای آن از Tabs و یا Navigation Drawer استفاده کنید).
– در صورت استفاده از text label (متن) به همراه آیکون، تا حد امکان متن کوتاه انتخاب شود تا در یک خط قرار گیرد.
– استفاده همزمان از Tabs در بالای صفحه و Bottom Navigation در انتهای صفحه ممکن است باعث سردرگمی کاربر شود بنابراین توصیه نمی‌شود.
– اندازه متن و آیکون همه آیتم‌ها یکسان تعیین شود.
– از بکار بردن رنگهای متفاوت برای آیکون یا متن آیتم‌ها اجتناب کنید. رابط کاربری هرچقدر یکدست و ساده تر باشد برای کاربر تجربه بهتری به همراه دارد.
در گذشته برای پیاده سازی یک Bottom Navigation می‌بایست از کتابخانه‌های متفرقه موجود در سطح وب استفاده می‌شد. یا اینکه توسعه دهنده شخصا این قابلیت را از پایه بنویسد. اما در نسخه ۲۵ کتابخانه Support Design این کامپوننت نیز به صورت رسمی معرفی و اضافه شد.

ساخت پروژه Bottom Navigation

مطابق مبحث آموزش ساخت پروژه در اندروید استودیو یک پروژه اندرویدی با نام BottomNavigation می‌سازم. اکتیویتی را از نوع Empty Activity و زبان را Java انتخاب کردم.
در اولین قدم کتابخانه Design را به پروژه اضافه می‌کنم:

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:27.1.1'
    implementation 'com.android.support:design:27.1.1'
}

سپس مطابق کد زیر یک BottomNavigationView به Layout اضافه می‌کنم:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.design.widget.BottomNavigationView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/bottom_nav"
        android:layout_alignParentBottom="true" />

</RelativeLayout>

با استفاده از خاصیت layout_alignParentBottom ویجت در انتهای صفحه قرار می‌گیرد.
مانند Navigation Drawer که در مباحث گذشته آشنا شدیم، در اینجا هم برای نمایش آیتم‌ها از Menu استفاده می‌کنیم. در مسیر res > New > Android Resource File یک فایل با نام دلخواه bottom_navigation.xml و از نوع Menu به پروژه اضافه می‌کنم که در نهایت یک فولدر با نام menu و حاوی این فایل به فولدر res اضافه می‌شود.

سه آیتم به صورت زیر داخل menu تعریف می‌کنم:

bottom_navigation.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:title="Home"
        android:id="@+id/item_1"
        android:icon="@drawable/home" />

    <item
        android:title="Account"
        android:id="@+id/item_2"
        android:icon="@drawable/account"/>

    <item
        android:title="Settings"
        android:id="@+id/item_3"
        android:icon="@drawable/settings"/>

</menu>

هر آیتم شامل یک title، id و icon است که از آیکون‌های پیش فرض اندروید استودیو در مسیر res > New > Vector Asset استفاده کرده‌ام.
حالا منو را به BottomNavigationView اضافه می‌کنم:

app:menu="@menu/bottom_navigation"

پروژه را اجرا می‌کنم:

چند خاصیت هم برای customize کردن Bottom Navigation در اختیار داریم:

<android.support.design.widget.BottomNavigationView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/bottom_nav"
    android:layout_alignParentBottom="true"
    app:menu="@menu/bottom_navigation"
    android:background="#ffffff"
    app:itemTextColor="#FF5722"
    app:itemIconTint="#FF5722"/>

خاصیت background که کاربرد آن واضح است و رنگ پس‌زمینه کامپوننت را مشخص می‌کند. دو مورد بعد یعنی itemTextColor و itemIconTint برای تعیین رنگ متن و آیکون استفاده می‌شوند:

با تعیین رنگ پس زمینه، shadow نیز به بالای نوار اضافه می‌شود. علاوه بر موارد فوق، خاصیت itemBackground هم داریم که برای تعیین رنگ پس‌زمینه آیتم‌ها بکار می‌رود. برای فهم بهتر، این خاصیت را به کامپوننت اضافه کرده و در دو حالت قرارگیری دیوایس نمایش می‌دهم:

app:itemBackground="@color/colorPrimary"

با تعریف itemTextColor و itemIconTint رنگ متن و آیکون هرسه آیتم یکسان است. در صورتی که بخواهیم رنگ آیتم انتخاب شده (checked) از سایر آیتم‌ها مجزا باشد، به صورت زیر عمل می‌کنیم:
ابتدا روی res راست کلیک کرده، در مسیر New > Android Resoure File یک فایل xml از نوع Color به پروژه اضافه می‌کنم:

فایل را به اینصورت تکمیل می‌کنم:

nav_color.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="#ce0e0e" />
    <item android:state_checked="false" android:color="#6fc97d"/>
</selector>

در کد فوق دو آیتم با خاصیت state_checked و مقادیر true و false تعریف شده که هرکدام یک رنگ را به خود اختصاص داده.
حالا برای دو خاصیت مربوط به رنگ متن و آیکون، فایل فوق را تعریف می‌کنم:

<android.support.design.widget.BottomNavigationView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/bottom_nav"
    android:layout_alignParentBottom="true"
    app:menu="@menu/bottom_navigation"
    android:background="#ffffff"
    app:itemTextColor="@color/nav_color"
    app:itemIconTint="@color/nav_color" />

ملاحظه می‌کنید آیتمی که در حالت انتخاب شده قرار دارد رنگ مربوط به مقدار true

<item android:state_checked="true" android:color="#ce0e0e" />

و سایر آیتم‌ها رنگ خط زیر (یعنی مقدار false) را نشان می‌دهند:

<item android:state_checked="false" android:color="#6fc97d"/>

آیتم انتخاب شده، رنگ پیش فرض خود را از colorPrimary تم متریال می‌گیرد بنابراین اگر فقط قصد تغییر رنگ آن را داشته باشیم، کافیست به جای مراحل قبل، یک style جدید تعریف کرده، مقدار colorPrimary را جایگزین کنیم:

<style name="BottomNavTheme">
    <item name="colorPrimary">#FF5722</item>
</style>

<android.support.design.widget.BottomNavigationView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/bottom_nav"
    android:layout_alignParentBottom="true"
    app:menu="@menu/bottom_navigation"
    android:background="#ffffff"
    android:theme="@style/BottomNavTheme" />

مرحله نهایی، هندل کردن آیتم‌هاست که با انتخاب هر آیتم چه عملی انجام شود. من یک مثال ساده پیاده سازی می‌کنم که با انتخاب هر آیتم، یک text متناسب با آن در وسط صفحه نمایش داده شود.

یک TextView به لایه اضافه می‌کنم:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="TextView" />
    
    <android.support.design.widget.BottomNavigationView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/bottom_nav"
        android:layout_alignParentBottom="true"
        app:menu="@menu/bottom_navigation"
        android:background="#ffffff"
        app:itemTextColor="@color/nav_color"
        app:itemIconTint="@color/nav_color" />

</RelativeLayout>

در ادامه دو ویجت Bottom Navigation و TextView را داخل اکتیویتی تعریف کرده و سپس متد Listener آنرا می‌نویسم:

MainActivity.java

package ir.android_studio.bottomnavigation;

import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MenuItem;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    BottomNavigationView bottomNav;
    TextView itemText;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        bottomNav = findViewById(R.id.bottom_nav);
        itemText = findViewById(R.id.text);

        bottomNav.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                return false;
            }
        });

    }
}

از متد setOnNavigationItemSelectedListener برای تعیین عملکرد آیتم‌ها استفاده می‌شود.
متد را با استفاده از یک switch case تکمیل می‌کنم:

bottomNav.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {

        switch (item.getItemId()) {

            case R.id.item_1:
                itemText.setText("Home Item");
                return true;

            case R.id.item_2:
                itemText.setText("Account Item");
                return true;

            case R.id.item_3:
                itemText.setText("Settings Item");
                return true;

        }

        return false;
    }
});

در switch فوق، تعیین شده تا با دریافت id مربوط به هرکدام از آیتم‌ها، چه متنی در TextView نمایش داده شود.

یک آیتم دیگر به Menu اضافه می‌کنم:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:title="Home"
        android:id="@+id/item_1"
        android:icon="@drawable/home" />

    <item
        android:title="Account"
        android:id="@+id/item_2"
        android:icon="@drawable/account"/>

    <item
        android:title="Settings"
        android:id="@+id/item_3"
        android:icon="@drawable/settings"/>

    <item
        android:title="Premium"
        android:id="@+id/item_4"
        android:icon="@drawable/shop"/>

</menu>

ملاحظه می‌کنید در صورتی که آیتم‌ها بیش از سه مورد باشد، فقط لیبل آیتم انتخاب شده نمایش داده می‌شود و مابقی فقط آیکون. در اکثر موارد توسعه دهنده تمایل دارد لیبل تمام آیتم‌ها نمایش داده شود نه فقط آیتم انتخاب شده.
برای یافتن راه حل، عبارت زیر را جستجو کردم:

How to show more than 3 items in bottomNavigationView

با مطالعه پرسش و پاسخ‌های موجود در StackOverflow.com متوجه شدم باید قابلیت shiftMode را غیر فعال کنم که کد آن به صورت زیر است:

private void disableShiftMode(BottomNavigationView view) {
    BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
    try {
        Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
        shiftingMode.setAccessible(true);
        shiftingMode.setBoolean(menuView, false);
        shiftingMode.setAccessible(false);
        for (int i = 0; i < menuView.getChildCount(); i++) {
            BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
            item.setShiftingMode(false);
            // set once again checked value, so view will be updated
            item.setChecked(item.getItemData().isChecked());
        }
    } catch (NoSuchFieldException e) {
        Log.e("BNVHelper", "Unable to get shift mode field", e);
    } catch (IllegalAccessException e) {
        Log.e("BNVHelper", "Unable to change value of shift mode", e);
    }
}

نیازی نیست وارد جزئیات متد بالا شوید. من هم درک کاملی از عملکرد کد ندارم و صرفا از آن استفاده می‌کنم.
متد را به اکتیویتی اضافه کرده سپس در متد onCreate آنرا فراخوانی می‌کنم:

package ir.android_studio.bottomnavigation;

import android.support.annotation.NonNull;
import android.support.design.internal.BottomNavigationItemView;
import android.support.design.internal.BottomNavigationMenuView;
import android.support.design.widget.BottomNavigationView;
import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;
import android.util.Log;
import android.view.MenuItem;
import android.widget.TextView;

import java.lang.reflect.Field;

public class MainActivity extends AppCompatActivity {

    BottomNavigationView bottomNav;
    TextView itemText;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        bottomNav = findViewById(R.id.bottom_nav);
        itemText = findViewById(R.id.text);

        disableShiftMode(bottomNav);

        bottomNav.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {

                switch (item.getItemId()) {

                    case R.id.item_1:
                        itemText.setText("Home Item");
                        return true;

                    case R.id.item_2:
                        itemText.setText("Account Item");
                        return true;

                    case R.id.item_3:
                        itemText.setText("Settings Item");
                        return true;

                    case R.id.item_4:
                        itemText.setText("Premium Item");
                        return true;

                }

                return false;
            }
        });

    }

    // Method for disabling ShiftMode of BottomNavigationView
    private void disableShiftMode(BottomNavigationView view) {
        BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
        try {
            Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
            shiftingMode.setAccessible(true);
            shiftingMode.setBoolean(menuView, false);
            shiftingMode.setAccessible(false);
            for (int i = 0; i < menuView.getChildCount(); i++) {
                BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
                item.setShiftingMode(false);
                // set once again checked value, so view will be updated
                item.setChecked(item.getItemData().isChecked());
            }
        } catch (NoSuchFieldException e) {
            Log.e("BNVHelper", "Unable to get shift mode field", e);
        } catch (IllegalAccessException e) {
            Log.e("BNVHelper", "Unable to change value of shift mode", e);
        }
    }

}

تقریبا در تمام مواردی مانند مسئله فوق که به یک راه حل نیاز داریم، با یک جستجوی ساده می‌توان به راه حل رسید و لازم نیست خودمان اقدام به پرسش کنیم و چند ساعت و چند روز منتظر پاسخ باشیم. مشکل و سوال ما قبلا سوالی افراد دیگری نیز بوده.

توجه : سورس پروژه‌ها درون پوشه Exercises قرار دارد

منابع تکمیلی:

https://material.io/design/components/bottom-navigation.html
https://developer.android.com/reference/android/support/design/widget/BottomNavigationView

نوشته کار با Bottom Navigation متریال دیزاین + سورس پروژه اولین بار در اندروید استودیو پدیدار شد.

به نام خدا. Bottom Sheet یکی دیگر از کامپوننت‌های متریال دیزاین در اندروید است که برای نمایش اطلاعات، منو ها و یا هر چیز دیگری بکار می‌رود. به تعریف ساده، یک صفحه یا نواری است که از پایین صفحه نمایش به سمت بالا باز می‌شود. به طور کلی Bottom Sheet ها را می‌توان به دو دسته Persistent Bottom Sheet و Modal Bottom Sheet تقسیم کرد.
در ادامه دو مثال از کاربرد این کامپوننت را نشان می‌دهم که تصویر اول مربوط به Google Maps و تصویر دوم Google Drive است:

در Google Maps با Pin کردن یک نقطه روی نقشه، یک Bottom Sheet از پایین صفحه باز می‌شود که حاوی اطلاعات مختصری از مکان انتخاب شده است. سپس با لمس دکمه MORE INFO یا کشیدن نوار به سمت بالا، اطلاعات بیشتری به کاربر ارائه می‌شود که در گوگل مپ، در این حالت تمام صفحه را دربر می‌گیرد.
در گوگل درایو هم از این کامپوننت برای نمایش گزینه‌های مرتبط با فایل و همچنین سایر موارد مانند ساخت فولدر جدید یا آپلود فایل استفاده شده است.
من این مبحث را در قالب چند پروژه تهیه می‌کنم تا درک جزئیات و تفاوت‌ها ساده تر شود.
ابتدا یک پروژه جدید با نام SimpleBottomSheet و یک Empty Activity ایجاد می‌کنم. برای پیاده سازی Bottom Sheet لازم است کتابخانه Support Design را به پروژه اضافه کنیم:

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:27.1.1'
    implementation 'com.android.support:design:27.1.1'
}

در این پروژه همانطور که از نام آن پیداست قصد دارم یک Bottom Sheet را در ساده ترین حالت آن معرفی کنم. بنابراین در این مثال فقط با layout اکتیویتی سروکار دارم و از Java استفاده نخواهم کرد.
در قدم اول جهت نمایش Bottom Sheet در یک اکتیویتی، باید Root Layout را از نوع CoordinatorLayout انتخاب کنیم:

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


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

همانطور که در کد بالا ملاحظه می‌کنید، CoordinatorLayout هم از زیرمجموعه های کتابخانه Design است. از CoordinatorLayout برای کنترل حرکت‌ها در متریال استفاده می‌شود. مانند اجرای animation در حرکت عناصر و المان‌های رابط کاربری. یعنی در Bottom Sheet استفاده از این layout باعث می‌شود تا باز و بسته شدن آن با یک حالت انیمیشن همراه باشد که نسبت به یک باز و بسته شدن عادی و ناگهانی، حس و تجربه بهتری را به کاربر منتقل می‌کند. CoordinatorLayout کاربردهای گسترده ای دارد که در مباحث آتی و در جای مناسب اشاره خواهد شد. به عنوان مثال در برخی از اپ ها با اسکرول به پایین، Toolbar حذف و با اسکرول به بالا، مجدد ظاهر می‌شود که پیاده سازی این عمل با CoordinatorLayout انجام می‌پذیرد.

ابتدا یک Bottom Sheet ساده تعریف کرده و در ادامه توضیحات لازم را قید می‌کنم:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:orientation="vertical"
        android:background="#009688"
        android:padding="8dp"
        app:layout_behavior="android.support.design.widget.BottomSheetBehavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="#fff"
            android:textSize="20sp"
            android:textStyle="bold"
            android:text="Bottom Sheet Title" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="#fff"
            android:textSize="16sp"
            android:text="Lorem ipsum dolor sit amet, te sed vide delicata,
            per ex salutandi intellegat temporibus, ei insolens molestiae vis.
            Eum ei possim aperiam, fuisset suscipit vim ut. Voluptua repudiare
            gubergren id eum, nullam labores an nam. Sed et tota quaerendum,
            enim elit democritum quo et.
            Lorem ipsum dolor sit amet, te sed vide delicata,
            per ex salutandi intellegat temporibus, ei insolens molestiae vis.
            Eum ei possim aperiam, fuisset suscipit vim ut. Voluptua repudiare
            gubergren id eum, nullam labores an nam. Sed et tota quaerendum,
            enim elit democritum quo et." />

    </LinearLayout>

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

یک LinearLayout به layout اضافه کردم که حاوی دو TextView می‌باشد. در انتخاب نوع این Layout محدودیتی نیست و از سایر موارد مانند RelativeLayout، ConstraintLayout و… هم می‌توان استفاده کرد. کاری که باید انجام دهیم، تعیین این LinearLayout به عنوان یک Bottom Sheet است که به اینصورت انجام شده:

app:layout_behavior="android.support.design.widget.BottomSheetBehavior"

با افزودن ویژگی فوق به یک layout، اندروید آنرا به عنوان یک Bottom Sheet درنظر می‌گیرد. مقدار این ویژگی را به صورت دیگری هم می‌توانیم تعریف کنیم:

app:layout_behavior="@string/bottom_sheet_behavior"

کلید Ctrl را نگه داشته، روی مقدار فوق کلیک کنید. به فایل values.xml مربوط به کتابخانه design منتقل می‌شوید که در cache سیستم شما ذخیره شده است. به عنوان فوق برنامه، مسیر محل قرارگیری این فایل که در نوار آدرس اندروید استودیو نمایش داده می‌شود را در درایو مربوطه باز کنید. فولدرهای قبل آن را هم بررسی کنید. تمامی کتابخانه هایی که قبلا یکبار استفاده کردید در اینجا ذخیره شده و برای پروژه های بعدی استفاده می‌شود.
پروژه را اجرا می‌کنم:

یک نوار با رنگ پس زمینه و ارتفاع ۲۰۰dp که قبلا تعیین کردم در پایین صفحه ظاهر شده که محتوای آن شامل دو TextViewمی‌باشد. در حال حاضر این یک نوار ثابت است که با کشیدن به سمت پایین هیچ واکنشی صورت نمی‌پذیرد. خاصیت زیر را با یک مقدار دلخواه به Bottom Sheet (یعنی LinearLayout) اضافه می‌کنم:

app:behavior_peekHeight="60dp"

مجدد پروژه را اجرا می‌کنم:

با اضافه شدن خاصیت فوق، نوار ابتدا ارتفاعی برابر مقدار تعریف شده یعنی ۶۰dp دارد که با کشیدن نوار به سمت بالا، تا حداکثر ارتفاع خود یعنی ۲۰۰dp باز شده و مجددا با کشیدن آن به سمت پایین، به ارتفاع اولیه یعنی ۶۰dp برمی‌گردد.
واضح است اگر مقدار behavior_peekHeight را برابر با ۰ قرار بدهم، در حالت پیش فرض نوار کاملا مخفی است که در این پروژه قابل استفاده نیست. زیرا برای بالا آوردن نوار مخفی استفاده از جاوا لازم است که در این پروژه قصد کار با جاوا را نداریم.
در قسمت قبل با کشیدن نوار به سمت پایین، در ارتفاع اولیه یعنی ۶۰dp متوقف می‌شود. اما با استفاده از خاصیت behavior_hideable و مقدار true، نوار به طور کلی به پایین صفحه رفته و محو می‌شود:

app:behavior_hideable="true"

بدیهی است مقدار false برای خاصیت فوق، مانند قسمت قبل عمل کرده و نوار کاملا مخفی نمی‌شود.

سورس کامل activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:orientation="vertical"
        android:background="#009688"
        android:padding="8dp"
        app:behavior_peekHeight="60dp"
        app:behavior_hideable="true"
        app:layout_behavior="@string/bottom_sheet_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="#fff"
            android:textSize="20sp"
            android:textStyle="bold"
            android:text="Bottom Sheet Title" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="#fff"
            android:textSize="16sp"
            android:text="Lorem ipsum dolor sit amet, te sed vide delicata,
            per ex salutandi intellegat temporibus, ei insolens molestiae vis.
            Eum ei possim aperiam, fuisset suscipit vim ut. Voluptua repudiare
            gubergren id eum, nullam labores an nam. Sed et tota quaerendum,
            enim elit democritum quo et.
            Lorem ipsum dolor sit amet, te sed vide delicata,
            per ex salutandi intellegat temporibus, ei insolens molestiae vis.
            Eum ei possim aperiam, fuisset suscipit vim ut. Voluptua repudiare
            gubergren id eum, nullam labores an nam. Sed et tota quaerendum,
            enim elit democritum quo et." />

    </LinearLayout>

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

در قسمت قبل، layout نوار Bottom Sheet از نوع LinearLayout بود. من در TextView دوم یک متن نسبتا طولانی استفاده کردم. اما در حال حاضر فقط قسمتی از متن و بطور کل محتوای نوار برای کاربر نمایش داده می‌شود و مابقی آن مخفی است. یعنی فقط به اندازه ۲۰۰dp را نشان می‌دهد و قابلیت اسکرول فعال نیست تا کاربر بتواند ادامه محتوا را نیز مشاهده کند. جهت رفع این مساله لازم است یک NestedScrollView را جایگزین LinearLayout کنیم:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".MainActivity">

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="#009688"
        android:padding="8dp"
        app:behavior_peekHeight="60dp"
        app:behavior_hideable="true"
        app:layout_behavior="@string/bottom_sheet_behavior">

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

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="#fff"
                android:textSize="20sp"
                android:textStyle="bold"
                android:text="Bottom Sheet Title" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="#fff"
                android:textSize="16sp"
                android:text="Lorem ipsum dolor sit amet, te sed vide delicata,
            per ex salutandi intellegat temporibus, ei insolens molestiae vis.
            Eum ei possim aperiam, fuisset suscipit vim ut. Voluptua repudiare
            gubergren id eum, nullam labores an nam. Sed et tota quaerendum,
            enim elit democritum quo et.
            Lorem ipsum dolor sit amet, te sed vide delicata,
            per ex salutandi intellegat temporibus, ei insolens molestiae vis.
            Eum ei possim aperiam, fuisset suscipit vim ut. Voluptua repudiare
            gubergren id eum, nullam labores an nam. Sed et tota quaerendum,
            enim elit democritum quo et." />

        </LinearLayout>

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

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

(دقت کنید داخل NestedScrollView جهت چینش عناصر از یک LinearLayout استفاده شده)
حالا با اجرای مجدد پروژه امکان اسکرول محتوا نیز فراهم شده و بعد از آنکه نوار به سمت بالا کشیده شد و در حداکثر ارتفاع خود یعنی ۲۰۰dp قرار گرفت، با اسکرول مجدد به سمت بالا، ادامه محتوا نمایش داده می‌شود و به همین ترتیب برای اسکرول به سمت پایین.

در پروژه قبل با کلیّت این کامپوننت متریالی آشنا شدیم. در ادامه قصد دارم دو نوع Persistent و Modal را در دو پروژه جداگانه بررسی کنم. البته شاید نتوان از نظر تفاوت کاربرد این دو، یک مرز مشخص تعیین کرد اما بعد از مطالعه ادامه مبحث، تا حدود زیادی نوع کاربرد هریک از این دو مورد روشن می‌شود.

Persistent Bottom Sheet:

از این حالت عموما جهت نمایش محتوا استفاده می‌شود. مواردی مانند “جزئیات بیشتر”، “اطلاعات تکمیلی” و سایر موارد مشابه که بین محتوای اصلی موجود در صفحه و محتوای Bottom Sheet یک ارتباط وجود دارد و در واقع به نوعی این نوار نقش تکمیل کننده صفحه اصلی را دارد.
مجدد به مثال اولی که در ابتدای مبحث اشاره شد دقت کنید:

کاربر با انتخاب یک نقطه بر روی نقشه، ابتدا اطلاعات کلی از جمله نام مکان و مسافت را مشاهده می‌کند که در ادامه با کشیدن نوار به بالا یا انتخاب دکمه MORE INFO، توضیحات تکمیلی را نیز دریافت خواهد کرد. به عبارت دیگر، محتوای این نوار، اطلاعات داخلی برنامه محسوب می‌گردد و ارتباطی با خارج از آن ندارد.
یک پروژه با نام PersistentBottomSheet و یک Empty Activity ایجاد می‌کنم.
مانند پروژه قبل، اینجا هم لازم است کتابخانه design را اضافه کنم.
در این پروژه می‌خواهم با کلیک روی یک دکمه، یک Bottom Sheet باز و بسته شود. بنابراین به دلیل آنچه در پروژه قبل ذکر شد، ابتدا layout ریشه را به CoordinatorLayout تغییر داده، سپس یک Button به آن اضافه می‌کنم:

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <Button
            android:id="@+id/btn_expand"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="Expand" />

    </RelativeLayout>

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

CoordinatorLayout امکان مدیریت نحوه چینش عناصر را ندارد بنابراین دکمه را درون یک RelativeLayout قرار دادم. در مرحله بعد یک Bottom Sheet به layout اضافه می‌کنم:

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:id="@+id/bottom_sheet"
        android:background="#94aab4"
        android:padding="8dp"
        app:behavior_hideable="true"
        app:behavior_peekHeight="60dp"
        app:layout_behavior="@string/bottom_sheet_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="#000000"
            android:textSize="20sp"
            android:text="Location: Iran"
            android:paddingBottom="10dp"
            android:paddingTop="10dp" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="#452f2f"
            android:textSize="16sp"
            android:text="Iran is an Islamic republic on the Persian Gulf with historical
sites dating to the Persian Empire. Extensive marble ruins mark
Persepolis, the empire’s capital founded by Darius I in the 6th
century B.C. The modern capital, Tehran, is home to opulent
Golestan Palace, seat of the Qajar Dynasty (1794–۱۹۲۵), plus
modern landmarks such as the 435m-high Milad Tower."/>

    </LinearLayout>

در اینجا از NestedScrollView استفاده نکردم. ارتفاع هم wrap_content تعیین کردم بنابراین نوار به اندازه محتوای درون آن باز خواهد شد.
بهتر است برای Bottom Sheet یک layout جداگانه ساخته و آنرا درون layout اکتیویتی اصلی include کنم تا نظم بیشتری به کار داده باشم. یک Layout جدید با نام bottom_sheet.xml ایجاد کرده، کد فوق را درون آن قرار می‌دهم:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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="wrap_content"
    android:orientation="vertical"
    android:id="@+id/bottom_sheet"
    android:background="#94aab4"
    android:padding="8dp"
    app:behavior_hideable="true"
    app:behavior_peekHeight="60dp"
    app:layout_behavior="@string/bottom_sheet_behavior">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="#000000"
        android:textSize="20sp"
        android:text="Location: Iran"
        android:paddingBottom="10dp"
        android:paddingTop="10dp" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="#452f2f"
        android:textSize="16sp"
        android:text="Iran is an Islamic republic on the Persian Gulf with historical
sites dating to the Persian Empire. Extensive marble ruins mark
Persepolis, the empire’s capital founded by Darius I in the 6th
century B.C. The modern capital, Tehran, is home to opulent
Golestan Palace, seat of the Qajar Dynasty (1794–۱۹۲۵), plus
modern landmarks such as the 435m-high Milad Tower."/>

</LinearLayout>

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <Button
            android:id="@+id/btn_expand"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="Expand" />

    </RelativeLayout>

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

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

در حال حاضر با اجرای پروژه، ۶۰dp از ابتدای نوار نمایش داده می‌شود که با کشیدن به سمت بالا، نوار کامل باز خواهد شد. اما قصد دارم این عمل باز شدن توسط دکمه صورت پذیرد.

اکتیویتی را به اینصورت تکمیل می‌کنم:

package ir.android_studio.persistentbottomsheet;

import android.support.design.widget.BottomSheetBehavior;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {

    Button btnSheet;
    LinearLayout sheetLayout;
    BottomSheetBehavior bottomSheet;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        btnSheet = findViewById(R.id.btn_expand);
        sheetLayout = findViewById(R.id.bottom_sheet);
        bottomSheet = BottomSheetBehavior.from(sheetLayout);

        btnSheet.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                bottomSheet.setState(BottomSheetBehavior.STATE_EXPANDED);

            }
        });

    }
}

ابتدا Button و LinearLayout مربوط به BottomSheet را توسط id ای که قبلا به آنها اختصاص دادم تعریف کردم. سپس یک نمونه از متد BottomSheetBehavior با نام دلخواه bottomSheet ساختم که توسط متد .from() لایه مربوطه را به آن معرفی کرده ام.

View sheetLayout;

در ادامه برای دکمه یک Listener ایجاد کردم. از متد setState() جهت تعیین حالت Bottom Sheet استفاده می‌شود. من حالت STATE_EXPANDED را انتخاب کردم، یعنی با لمس دکمه، نوار در وضعیت Expanded (باز شده) قرار می‌گیرد.
پروژه را اجرا و تست می‌کنم:

عملیات به درستی انجام می‌شود و نوار باز شد. در قدم بعد می‌خواهم با لمس دوباره‌ی دکمه، نوار مجددا بسته شود:

btnSheet.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {

        if (bottomSheet.getState() == BottomSheetBehavior.STATE_COLLAPSED) {

            bottomSheet.setState(BottomSheetBehavior.STATE_EXPANDED);

        }
        else if (bottomSheet.getState() == BottomSheetBehavior.STATE_EXPANDED) {

            bottomSheet.setState(BottomSheetBehavior.STATE_COLLAPSED);
            
        }

    }
});

با استفاده از if else و متد getState() شرطی تعیین کردم تا اگر نوار در وضعیت Collapsed بود، با لمس دکمه به وضعیت Expanded تغییر کند و بلعکس.
در هریک از دو نقش فوق، دکمه عبارت Expand را نشان می‌دهد که منطقی نیست. هنگامی که نوار در وضعیت Expand قرار دارد، نقش دکمه Collapse کردن آن است بنابراین عنوان دکمه نیز باید تغییر کند که با استفاده از setText() درون شرط این اصلاح را صورت می‌دهم:

btnSheet.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {

        if (bottomSheet.getState() == BottomSheetBehavior.STATE_COLLAPSED) {

            bottomSheet.setState(BottomSheetBehavior.STATE_EXPANDED);
            btnSheet.setText("Collapse");

        }
        else if (bottomSheet.getState() == BottomSheetBehavior.STATE_EXPANDED) {

            bottomSheet.setState(BottomSheetBehavior.STATE_COLLAPSED);
            btnSheet.setText("Expand");

        }

    }
});

با اجرای مجدد پروژه، نوار در هر وضعیتی که باشد، دکمه عبارت متضاد آنرا نشان می‌دهد.
هنوز یک ایراد دیگر داریم. در حال حاضر اگر وضعیت نوار را فقط با دکمه تغییر دهید همه چیز به خوبی انجام شده و با تغییر حالت نوار، text دکمه هم تغییر می‌کند. اما در صورتی که کاربر نوار را به صورت عادی به طرف بالا یا پایین بکشد، تغییری در text انجام نمی‌شود که یک خطای منطقی است. یعنی اگر دکمه عبارت Expand را نشان می‌دهد و کاربر نوار را بدون استفاده از دکمه Expand کند (بالا ببرد)، باز هم دکمه کلمه Expand را نشان می‌دهد در صورتی که باید با کلمه Collapse جایگزین شود.
در اینجا متدی داریم با نام setBottomSheetCallback که امکان مدیریت Bottom Sheet را فراهم می‌کند:

bottomSheet.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
    @Override
    public void onStateChanged(@NonNull View bottomSheet, int newState) {
        
    }

    @Override
    public void onSlide(@NonNull View bottomSheet, float slideOffset) {

    }
});

این متد دو تابع onStateChanged و onSlide دارد که برای رفع مشکل ایجاد شده از مورد اول استفاده می‌کنیم:

public void onStateChanged(@NonNull View bottomSheet, int newState) {

    if (newState == BottomSheetBehavior.STATE_EXPANDED) {
        btnSheet.setText("Collapse");
    } else if (newState == BottomSheetBehavior.STATE_COLLAPSED) {
        btnSheet.setText("Expand");
    }

}

در اینجا با استفاده از newState() یک شرط تعیین شده. به اینصورت که اگر وضعیت جدید روی Expanded بود، دکمه کلمه Collapse را نشان دهد و بلعکس. حالا با اجرای مجدد پروژه همه چیز به درستی کار می‌کند.

با تعیین این شرط، عملا setText هایی که در Listener دکمه تعریف کرده بودم کارایی ندارد و آنها را حذف می‌کنم (در سورس پروژه comment شده است).

MainActivity.java:

package ir.android_studio.persistentbottomsheet;

import android.support.annotation.NonNull;
import android.support.design.widget.BottomSheetBehavior;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {

    Button btnSheet;
    LinearLayout sheetLayout;
    BottomSheetBehavior bottomSheet;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        btnSheet = findViewById(R.id.btn_expand);
        sheetLayout = findViewById(R.id.bottom_sheet);
        bottomSheet = BottomSheetBehavior.from(sheetLayout);

        btnSheet.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                if (bottomSheet.getState() == BottomSheetBehavior.STATE_COLLAPSED) {

                    bottomSheet.setState(BottomSheetBehavior.STATE_EXPANDED);
                    //btnSheet.setText("Collapse");

                }
                else if (bottomSheet.getState() == BottomSheetBehavior.STATE_EXPANDED) {

                    bottomSheet.setState(BottomSheetBehavior.STATE_COLLAPSED);
                    //btnSheet.setText("Expand");

                }

            }
        });

        bottomSheet.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
            @Override
            public void onStateChanged(@NonNull View bottomSheet, int newState) {

                if (newState == BottomSheetBehavior.STATE_EXPANDED) {
                    btnSheet.setText("Collapse");
                } else if (newState == BottomSheetBehavior.STATE_COLLAPSED) {
                    btnSheet.setText("Expand");
                }

            }

            @Override
            public void onSlide(@NonNull View bottomSheet, float slideOffset) {

            }
        });

    }
}

دو خاصیت behavior_peekHeight و behavior_hideable را به جای xml می‌توان در جاوا نیز تعریف و کنترل کرد (در سورس کامنت شده):

bottomSheet.setPeekHeight(0);
bottomSheet.setHideable(true);

Modal Bottom Sheet:

در این نوع، در حقیقت ما یک Dialog (مشابه AlertDialog) را به عنوان یک Bottom Sheet نمایش می‌دهیم. مانند مثال دوم ابتدای مبحث. یعنی Google Drive:

از Modal عموما جهت نمایش گزینه هایی مانند Share، Copy، Upload و سایر اکشن های مشابه استفاده می‌شود.
یک پروژه جدید با نام ModalBottomSheet و یک Empty Activity ایجاد می‌کنم.
مشابه موارد قبل ابتدا کتابخانه Support Design را به پروژه اضافه می‌کنم.
activity_main.xml را مشابه پروژه قبل می‌سازم با این تفاوت که layout ای که include شده بود حذف می‌شود:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <Button
            android:id="@+id/btn_expand"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="Expand" />

    </RelativeLayout>

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

برای نمایش Bottom Sheet در قالب یک Dialog، یک فرگمنت می‌سازم. بعد از ساخته شدن فرگمنت، باید ارث بری آن را از Fragment به BottomSheetDialogFragment تغییر دهم:

BottomSheetFragment.java:

package ir.android_studio.modalbottomsheet;

import android.os.Bundle;
import android.support.design.widget.BottomSheetDialogFragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


public class BottomSheetFragment extends BottomSheetDialogFragment {


    public BottomSheetFragment() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_bottom_sheet, container, false);
    }

}

حالا باید layout این فرگمنت را تکمیل کنم. همان محتوایی که برای bottom_sheet.xml پروژه قبل ساخته بودم را در اینجا استفاده می‌کنم:

fragment_bottom_sheet.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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="wrap_content"
    android:orientation="vertical"
    android:id="@+id/bottom_sheet"
    android:background="#94aab4"
    android:padding="8dp"
    app:behavior_hideable="true"
    app:behavior_peekHeight="60dp"
    app:layout_behavior="@string/bottom_sheet_behavior">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="#000000"
        android:textSize="20sp"
        android:text="Location: Iran"
        android:paddingBottom="10dp"
        android:paddingTop="10dp" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="#452f2f"
        android:textSize="16sp"
        android:text="Iran is an Islamic republic on the Persian Gulf with historical
sites dating to the Persian Empire. Extensive marble ruins mark
Persepolis, the empire’s capital founded by Darius I in the 6th
century B.C. The modern capital, Tehran, is home to opulent
Golestan Palace, seat of the Qajar Dynasty (1794–۱۹۲۵), plus
modern landmarks such as the 435m-high Milad Tower."/>

</LinearLayout>

در مرحله نهایی، یک متد Listener برای دکمه Expand می‌نویسم و داخل آنرا به صورت زیر تکمیل می‌کنم:

package ir.android_studio.modalbottomsheet;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    Button btnSheet;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        btnSheet = findViewById(R.id.btn_expand);

        btnSheet.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                BottomSheetFragment bottomFragment = new BottomSheetFragment();
                bottomFragment.show(getSupportFragmentManager(), bottomFragment.getTag());

            }
        });

    }
}

ابتدا از فرگمنت یک نمونه با نام bottomFragment ساخته شده. سپس توسط متد show() نمایش داده می‌شود. این متد دو پارامتر ورودی می‌گیرد که اولی FragmentManager و دومی Tag فرگمنت مربوطه است.
پروژه را اجرا می‌کنم:

مانند AlertDialog، این نوار نیز دارای یک elevation (ارتفاع) زیاد است و با دکمه back دیوایس و یا کشیدن نوار به سمت پایین حذف می‌شود.

منابع تکمیلی:

https://developer.android.com/reference/android/support/design/widget/BottomSheetBehavior
https://developer.android.com/reference/android/support/design/widget/BottomSheetDialog
https://developer.android.com/reference/android/support/design/widget/BottomSheetDialogFragment

نوشته کار با Bottom Sheet متریال دیزاین اولین بار در اندروید استودیو پدیدار شد.

AlertDialog پنجره کوچکی است که یک پیغام به همراه (حداکثر) سه دکمه به کاربر نمایش می دهد. این قابلیت کاربردهای متعددی دارد از جمله نمایش یک اخطار، درخواست تایید یا عدم تایید یک عملیات از کاربر، نمایش یک لیست و درخواست از کاربر جهت انتخاب یک گزینه و… .

یک پروژه با نام AlertDialog و یک Empty Activity می سازم. پروژه باید حاوی کتابخانه appcompat-v7 باشد که به صورت پیش فرض هنگام ساخت پروژه اضافه شده است.
درون اکتیویتی یک نمونه از AlertDialog.Builder با نام دلخواه alertBuilder ایجاد کرده سپس درون متد onCreate بصورت زیر new می کنم.

package ir.android_studio.alertdialog;

import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    AlertDialog.Builder alertBuilder;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        alertBuilder = new AlertDialog.Builder(this);

    }
}

AlertDialog.Builder فعلا فقط یک پارامتر ورودی گرفته که همان Context است.
دقت کنید AlertDialog مربوط به کتابخانه support را انتخاب نمائید:

ابتدا یک AlertDialog ساده با حداقل متدها ایجاد کرده و در ادامه به ارائه جزئیات می‌پردازم:

package ir.android_studio.alertdialog;

import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    AlertDialog.Builder alertBuilder;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        alertBuilder = new AlertDialog.Builder(this);

        alertBuilder.setTitle("Alert!");
        alertBuilder.setMessage("Delete this item?");

        alertBuilder.setPositiveButton("Yes", null);

        AlertDialog alert = alertBuilder.create();
        alert.show();

    }
}

همانطور که از نام متدهای setTitle و setMessage پیداست، این دو مورد برای تعیین عنوان و متن پیغام استفاده می شوند. در ابتدای مبحث گفتیم در AlertDialog تا ۳ دکمه می توان به دیالوگ اضافه کرد که به واسطه متدهای setPositiveButton، setNegativeButton و setNeutralButton قابل پیاده سازی هستند. در کد بالا فعلا فقط یک متد را بکار بردم. یعنی دیالوگ من باید یک دکمه با عنوان Yes داشته باشد. پارامتر دوم مربوط به Listener دکمه است که فعلا null قرار داده ام.
در انتها جهت ساخت و نمایش AlertDialog دو متد create() و show() را استفاده کردم.
پروژه را اجرا می کنم:

به همین سادگی توانستم یک پنجره پیغام را نمایش بدهم. از آنجایی که در پارامتر دوم دکمه، مقدار null تعریف شده، با انتخاب آن عملا هیچ اتفاقی رخ نداده و صرفا پنجره بسته می شود.
می خواهم برای دکمه فعلی یک Listener تعریف کنم:

یک Listener از نوع DialogInterface.OnClickListener() جایگزین null شد:

alertBuilder.setPositiveButton("Yes", new DialogInterface.OnClickListener() {
    @Override
    public void onClick(DialogInterface dialogInterface, int i) {

    }
});

حالا مانند آنچه در گذشته آموختیم، هر دستوری درون onClick تعریف کنیم، با لمس دکمه اجرا خواهد شد. یک پیغام از جنس Toast به Listener اضافه کرده، پروژه را مجدد اجرا می کنم:

alertBuilder.setPositiveButton("Yes", new DialogInterface.OnClickListener() {
    @Override
    public void onClick(DialogInterface dialogInterface, int i) {

        Toast.makeText(MainActivity.this, "Yes Button Clicked!", Toast.LENGTH_SHORT).show();

    }
});

با لمس دکمه Yes، پیغام مربوطه اجرا می گردد:

دو متد مربوط به دو دکمه دیگر را نیز به اکتیویتی اضافه می کنم:

alertBuilder.setNegativeButton("No", new DialogInterface.OnClickListener() {
    @Override
    public void onClick(DialogInterface dialogInterface, int i) {

        Toast.makeText(MainActivity.this, "No Button Clicked!", Toast.LENGTH_SHORT).show();

    }
});

alertBuilder.setNeutralButton("Later", new DialogInterface.OnClickListener() {
    @Override
    public void onClick(DialogInterface dialogInterface, int i) {

        Toast.makeText(MainActivity.this, "Neutral Button Clicked!", Toast.LENGTH_SHORT).show();

    }
});

با اجرای پروژه، شاهد نمایش سه دکمه در انتهای پنجره هستیم. دکمه مربوط به NeutralButton در سمت چپ قرار می گیرد.

با استفاده از متد setIcon می توان یک آیکون نیز به عنوان AlertDialog افزود:

alertBuilder.setIcon(R.drawable.logo);

در خط بالا آیکون با نام logo.png در دایرکتوری drawable پروژه به عنوان آیکون این دیالوگ تعریف شده.

در حال حاضر اگر هنگامی که AlertDialog روی صفحه نمایش قرار دارد، کاربر خارج از پنجره دیالوگ را لمس کند، پنجره بسته خواهد شد. برای رفع این ایراد کافیست از متد setCancelable استفاده کرده و مقدار آن را false قرار دهیم:

alertBuilder.setCancelable(false);

با اضافه شدن این متد، تا زمانی که کاربر یکی از دکمه های تعریف شده را انتخاب نکند، پنجره دیالوگ روی صفحه نمایش باقی می ماند و با کلیک روی اطراف آن یا حتی دکمه Back دیوایس، از بین نمی‌رود.
کد کامل AlertDialog:

alertBuilder.setTitle("Alert!");
alertBuilder.setMessage("Delete this item?");
alertBuilder.setIcon(R.drawable.logo);
alertBuilder.setCancelable(false);

alertBuilder.setPositiveButton("Yes", new DialogInterface.OnClickListener() {
    @Override
    public void onClick(DialogInterface dialogInterface, int i) {

        Toast.makeText(MainActivity.this, "Yes Button Clicked!", Toast.LENGTH_SHORT).show();

    }
});

alertBuilder.setNegativeButton("No", new DialogInterface.OnClickListener() {
    @Override
    public void onClick(DialogInterface dialogInterface, int i) {

        Toast.makeText(MainActivity.this, "No Button Clicked!", Toast.LENGTH_SHORT).show();

    }
});

alertBuilder.setNeutralButton("Later", new DialogInterface.OnClickListener() {
    @Override
    public void onClick(DialogInterface dialogInterface, int i) {

        Toast.makeText(MainActivity.this, "Neutral Button Clicked!", Toast.LENGTH_SHORT).show();

    }
});

AlertDialog alert = alertBuilder.create();
alert.show();

در نهایت می توانم کد را بصورت زیر خلاصه کنم که تا حدودی از حجم برنامه کاسته می شود:

new AlertDialog.Builder(this)
        .setTitle("Alert!")
        .setMessage("Delete this item?")
        .setIcon(R.drawable.logo)
        .setCancelable(false)
        .setPositiveButton("Yes", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialogInterface, int i) {

                Toast.makeText(MainActivity.this, "Yes Button Clicked!", Toast.LENGTH_SHORT).show();

            }
        })
        .setNegativeButton("No", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialogInterface, int i) {

                Toast.makeText(MainActivity.this, "No Button Clicked!", Toast.LENGTH_SHORT).show();

            }
        })
        .setNeutralButton("Later", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialogInterface, int i) {

                Toast.makeText(MainActivity.this, "Neutral Button Clicked!", Toast.LENGTH_SHORT).show();

            }
        })

.create()
.show();

برای راحتتر کردن فرایند تست دیالوگ، یک Button به اکتیویتی اضافه می کنم. سپس کد مربوط به AlertDialog را داخل یک تابع جداگانه تعریف کرده و آنرا درون متد این دکمه فراخوانی می کنم تا با هربار لمس دکمه، پنجره مجدد نمایش داده شود و نیاز به اجرای مجدد پروژه نباشد:

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Run AlertDialog" />

</RelativeLayout>

MainActivity.java:

package ir.android_studio.alertdialog;

import android.content.DialogInterface;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    //AlertDialog.Builder alertBuilder;
    Button alertButton;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        alertButton = findViewById(R.id.button);
        alertButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                runAlert();
            }
        });

    }

    private void runAlert() {

        new AlertDialog.Builder(this)
                .setTitle("Alert!")
                .setMessage("Delete this item?")
                .setIcon(R.drawable.logo)
                .setCancelable(false)
                .setPositiveButton("Yes", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {

                        Toast.makeText(MainActivity.this, "Yes Button Clicked!", Toast.LENGTH_SHORT).show();

                    }
                })
                .setNegativeButton("No", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {

                        Toast.makeText(MainActivity.this, "No Button Clicked!", Toast.LENGTH_SHORT).show();

                    }
                })
                .setNeutralButton("Later", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {

                        Toast.makeText(MainActivity.this, "Neutral Button Clicked!", Toast.LENGTH_SHORT).show();

                    }
                })

        .create()
        .show();

    }

}

در ادامه قصد دارم سایر قابلیت های AlertDialog را معرفی کنم. پروژه جدیدی نمی‌سازم و همان پروژه قبل را ویرایش خواهم کرد.
یکی از کاربردهای AlertDialog نمایش یک لیست از آیتم‌هاست که کاربر باید یک گزینه را انتخاب کند. مانند یک بازی که ابتدا از کاربر می‌خواهد سطح بازی را تعیین کند.
ابتدا داخل بدنه اکتیویتی یک نمونه از String[] می سازم و چند مقدار برای آن تعریف می کنم:

String[] items = {"Easy", "Medium", "Hard", "Very Hard"};

سپس این مقادیر را توسط متد setSingleChoiceItems نمایش می دهم:

private void runAlert() {

    new AlertDialog.Builder(this)
            .setTitle("Select Game level")
            .setCancelable(false)
            .setSingleChoiceItems(items, 2, null)
            .setPositiveButton("OK", new DialogInterface.OnClickListener() {
                @Override
                public void onClick(DialogInterface dialogInterface, int i) {

                    Toast.makeText(MainActivity.this, "Yes Button Clicked!", Toast.LENGTH_SHORT).show();

                }
            })

            .create()
            .show();

}

این متد سه پارامتر ورودی می‌گیرد. پارامتر اول همان items است، یعنی مقادیر آیتم‌های لیست. در پارامتر دوم می‌توانیم تعیین کنیم در حالت پیش فرض کدام آیتم انتخاب شده باشد. من مقدار ۲ را تعیین کردم یعنی گزینه Hard (شمارش از ۰ آغاز می شود). اگر بخواهیم هیچ گزینه ای در ابتدا انتخاب نشده باشد مقدار ۱- وارد می‌کنیم. پارامتر سوم هم مربوط به Listener است که فعلا null تعریف کردم.
توجه داشته باشید از متدهای setMessage و setSingleChoiceItems نمی‌توان همزمان استفاده کرد.
کد کامل MainActivity.java:

package ir.android_studio.alertdialog;

import android.content.DialogInterface;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    Button alertButton;
    String[] items = {"Easy", "Medium", "Hard", "Very Hard"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        alertButton = findViewById(R.id.button);
        alertButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                runAlert();
            }
        });

    }

    private void runAlert() {

        new AlertDialog.Builder(this)
                .setTitle("Select Game level")
                .setCancelable(false)
                .setSingleChoiceItems(items, 2, null)
                .setPositiveButton("OK", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {

                        Toast.makeText(MainActivity.this, "Yes Button Clicked!", Toast.LENGTH_SHORT).show();

                    }
                })

                .create()
                .show();

    }

}

پروژه را اجرا می کنم:

مانند دکمه های AlertDialog، برای متد setSingleChoiceItems هم امکان تعریف Listener وجود دارد.
یک نمونه از String با نام دلخواه درون بدنه اکتیویتی تعریف می کنم:

String result;

حالا Listener را به اینصورت تکمیل می کنم:

.setSingleChoiceItems(items, 2, new DialogInterface.OnClickListener() {
    @Override
    public void onClick(DialogInterface dialogInterface, int i) {

        result = items[i];
        Toast.makeText(MainActivity.this, result + " selected", Toast.LENGTH_SHORT).show();

    }
})

در کد بالا با انتخاب هر آیتم توسط کاربر، نام آن آیتم در یک Toast چاپ می شود:

استایل دهی به اجزای AlertDialog نیز امکان‌پذیر است.
یک استایل جدید با نام دلخواه DialogTheme به styles.xml اضافه کردم که از Theme.AppCompat.Light.Dialog.Alert ارث بری شده:

<style name="DialogTheme" parent="Theme.AppCompat.Light.Dialog.Alert">
    <item name="colorAccent">#41bf13</item>
    <item name="android:textColorPrimary">#ac2a2a</item>
    <item name="android:background">#c7cc5f</item>
</style>

برای اتصال استایل به دیالوگ می‌بایست آنرا به عنوان پارامتر ورودی دوم AlertDialog.Builder تعریف کنیم:

new AlertDialog.Builder(this, R.style.DialogTheme)

ممکن است بخواهید برای پنجره دیالوگ یک نوار حاشیه (border) یا انحنا در چهار گوشه (radius) تعریف کنید. برای اینکار ابتدا یک Resource file درون دایرکتوری drawable ایجاد می کنم:

فایل dialog_background.xml:

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetLeft="16dp"
    android:insetTop="16dp"
    android:insetRight="16dp"
    android:insetBottom="16dp">

    <shape android:shape="rectangle">
        <corners android:radius="8dp" />
        <solid android:color="#97e76a" />
        <stroke android:width="5dp" android:color="#303759" />
    </shape>
</inset>

لینک توضیحات مربوط به InsetDrawable در انتهای مبحث قید شده. با اینحال نام آیتم ها و خواص بکار رفته در کد بالا گویای کاربرد آنهاست. insetLeft و سه مورد دیگر جهت تعیین فاصله پنجره دیالوگ از حاشیه صفحه نمایش هستند. سپس یک تگ shape داریم که درون آن به ترتیب مقدار انحنای گوشه ها، رنگ پس زمینه و ضخامت نوار حاشیه و رنگ آن تعریف شده اند.
حالا در استایل DialogTheme خط زیر را جایگزین خاصیت background می‌کنم:

<item name="android:windowBackground">@drawable/dialog_background</item>

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

private void runAlert() {

    new AlertDialog.Builder(this, R.style.DialogTheme)
            .setTitle("Select Game level")
            .setCancelable(false)
            .setSingleChoiceItems(items, 2, new DialogInterface.OnClickListener() {
                @Override
                public void onClick(DialogInterface dialogInterface, int i) {

                    result = items[i];
                    Toast.makeText(MainActivity.this, result + " selected", Toast.LENGTH_SHORT).show();

                }
            })
            .setPositiveButton("OK", new DialogInterface.OnClickListener() {
                @Override
                public void onClick(DialogInterface dialogInterface, int i) {

                    Toast.makeText(MainActivity.this, "Yes Button Clicked!", Toast.LENGTH_SHORT).show();

                }
            })
            .setNegativeButton("Cancel", null)
            .setNeutralButton("Later", null)

            .create()
            .show();

}

در قدم بعد یک استایل برای هر دکمه تعریف کرده و سپس در استایل DialogTheme به اینصورت اضافه می کنم:

<style name="DialogTheme" parent="Theme.AppCompat.Light.Dialog.Alert">
    <item name="colorAccent">#41bf13</item>
    <item name="android:textColorPrimary">#ac2a2a</item>
    <item name="android:windowBackground">@drawable/dialog_background</item>
    <item name="buttonBarNegativeButtonStyle">@style/NegativeButton</item>
    <item name="buttonBarPositiveButtonStyle">@style/PositiveButton</item>
    <item name="buttonBarNeutralButtonStyle">@style/NeutralButton</item>
</style>

<style name="PositiveButton" parent="Widget.AppCompat.Button.ButtonBar.AlertDialog">
    <item name="android:textColor">#d6062d</item>
</style>

<style name="NegativeButton" parent="Widget.AppCompat.Button.ButtonBar.AlertDialog">
    <item name="android:textColor">#131e68</item>
</style>

<style name="NeutralButton" parent="Widget.AppCompat.Button.ButtonBar.AlertDialog">
    <item name="android:textColor">#1da6ba</item>
</style>

با اجرای پروژه مشاهده می کنید هرکدام از دکمه ها رنگ مختص خود را نشان می‌دهد:

یک قابلیت دیگر که در این مبحث آشنا می‌شویم، امکان استفاده از Custom Layout در AlertDialog است. فرض کنید می‌خواهید در یک پنجره دیالوگ، دو فیلد Username و Password نشان دهید تا کاربر از این طریق وارد حساب کاربری خود در اپ شود.
ابتدا یک layout به پروژه اضافه می کنم:

custom_dialog.xml:

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="20dp">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10"
            android:inputType="textPersonName"
            android:text="Username" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10"
            android:inputType="textPassword"
            android:text="Password" />

    </LinearLayout>

</RelativeLayout>

سپس با استفاده از LayoutInflater، لایه فوق را inflate کرده و در نهایت توسط متد setView() به AlertDialog اضافه می کنم:

private void runAlert() {

    LayoutInflater aInflater = getLayoutInflater();
    View alertLayout = aInflater.inflate(R.layout.custom_dialog, null);

    new AlertDialog.Builder(this, R.style.DialogTheme)
            .setTitle("Login")
            .setCancelable(false)
            .setView(alertLayout)
            .setPositiveButton("OK", new DialogInterface.OnClickListener() {
                @Override
                public void onClick(DialogInterface dialogInterface, int i) {

                    Toast.makeText(MainActivity.this, "Yes Button Clicked!", Toast.LENGTH_SHORT).show();

                }
            })

            .create()
            .show();

}

منابع تکمیلی:

https://developer.android.com/reference/android/app/AlertDialog
https://developer.android.com/reference/android/graphics/drawable/InsetDrawable
https://material.io/guidelines/components/dialogs.html

نوشته کار با AlertDialog متریال دیزاین اولین بار در اندروید استودیو پدیدار شد.

این مبحث در قالب PDF و در ۴۸ صفحه تهیه شده که در ادامه چند صفحه‌ی ابتدایی آن را مشاهده می کنید:

معرفی RecyclerView:

به نام خدا. در فصل پنجم با کامپوننت/ویجت ListView آشنا شدیم. از ListView برای نمایش آیتم ها در قالب یک لیست استفاده کردیم. با معرفی متریال دیزاین در اندروید، ViewGroup یا ویجت RecyclerView نیز به عنوان یک جایگزین حرفه ای برای ListView و GridView معرفی شد. RecyclerView مزیت هایی نسبت به ListView دارد از جمله:
– بهینه است و حافظه بهتر مدیریت می شود. در RecyclerView فقط آیتم هایی که در صفحه نمایش قرار گرفته اند (به همراه چند آیتم قبل و بعد آنها) روی حافظه بارگزاری می شود نه همه آیتم های لیست.
– مدیریت RecyclerView ساده تر است و به راحتی می توان نحوه چینش آیتم ها (افقی یا عمودی) و همچنین در صورت نیاز به ستون بندی، تعداد ستونها را تعیین کرد.
– در RecyclerView امکان پیاده سازی انیمیشن برای زیباتر شدن نحوه اضافه و یا حذف شدن آیتم ها فراهم شده است.

RecyclerView لیستی از آیتم ها را نمایش می دهد که قابل Scroll بوده و محدودیتی در تعداد آیتم ها ندارد. از نمونه های کاربردی می توان به پیام رسان ها، لیست مخاطبین تلفن همراه، لیست ایمیل‌ها و یا لیست شهرها به همراه اطلاعات آب و هوایی مربوط به آنها در یک اپلیکیشن هواشناسی اشاره کرد.

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

تصویر بالا مربوط به پیام رسان WhatsApp است. اینجا هم مانند مثال قبل، آیتم های لیست دارای عناصر مشترکی هستند. یک تصویر پروفایل، نام شخص و چند کلمه ابتدای پیغام دریافتی. در سمت راست نیز زمان دریافت پیغام مشخص شده است.
برای ساخت و نمایش لیست ها در RecyclerView مانند ListView ابتدا باید یک قالب کلی برای نمایش یک آیتم طراحی کنیم. سپس اطلاعاتی که قصد نمایش آنها در قالب لیست داریم را یک به یک به قالب از قبل طراحی شده می‌فرستیم تا همگی با یک فرمت و ظاهر مشخص و یکسان نمایش داده شوند.
بنابراین در RecyclerView امکان شخصی سازی را داریم و آیتم ها از ساده ترین حالت یعنی یک text تا یک آیتم پیچیده (ترکیبی از تصویر، متن، لینک و…) قابل پیاده سازی هستند. داده ها از منابعی مانند آرایه ها،دیتابیس، سرور و… به RecyclerView منتقل و نمایش داده می شوند.
توصیه می کنم قبل از مطالعه این مبحث حتما یکبار مبحث ListView را نیز مطالعه و تمرین کنید تا تفاوت بین این دو ویجت بهتر برایتان ملموس شود. ضمن اینکه برخی از جزئیات که در هردو مبحث مشترک است را در اینجا بطور خلاصه بیان می کنم.
در اندروید استودیو یک پروژه جدید با نام RecyclerView و یک Empty Activity ایجاد می کنم. برای استفاده از RecyclerView باید کتابخانه آنرا به پروژه اضافه کنیم که از کتابخانه های متعلق به support است. مطابق مباحث گذشته، کتابخانه را به دو صورت اضافه کردن دستی به فایل build.gradle و یا مسیر:

File > Project Structure > Modules (app) > Dependencies > + > Library Dependency

به پروژه اضافه می کنم:

dependencies {
    implementation fileTree(include: ['*.jar'], dir: 'libs')
    implementation 'com.android.support:appcompat-v7:27.0.2'
    implementation 'com.android.support:recyclerview-v7:27.0.2'
}

پس از سینک شدن موفق پروژه، یک ویجت/کامپوننت از نوع RecyclerView در لایه اکتیویتی اصلی پروژه یعنی activity_main.xml تعریف می کنم:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="ir.android_studio.recyclerview.MainActivity">

    <android.support.v7.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/recycler_view"/>

</RelativeLayout>

سپس RecyclerView را به فایل جاوا اکتیویتی اضافه می کنم:

MainActivity.java:

package ir.android_studio.recyclerview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.RecyclerView;

public class MainActivity extends AppCompatActivity {

    RecyclerView myRecycler;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        myRecycler = findViewById(R.id.recycler_view);

    }
}

myRecycler = (RecyclerView) findViewById(R.id.recycler_view);

مانند مبحث ListView برای مدیریت ویجت / view ها و ارتباط آنها با عملگرهای جاوا، از کلاسی استفاده می کنیم که اصطلاحا Model نامیده می شود. استفاده از چنین کلاسی الزامی نیست اما باعث می شود مدیریت بهتری روی پروژه داشته باشیم. در کلاس Model از متدهایی که اصطلاحا Getter و Setter نامیده می شوند برای مقداردهی به متغیرها و یا مقدارگیری از آنها استفاده می شود.
برای ساخت Model، یک کلاس با نام دلخواه Item به پکیج اصلی پروژه اضافه می کنم:

package ir.android_studio.recyclerview;

public class Item {

    private int uAvatar;
    private String uName;
    private String uMessage;
    private String uTime;

}

می خواهم هر یک از آیتم های RecyclerView حاوی یک تصویر پروفایل، نام، متن پیغام و تاریخ ارسال باشد.
چهار متغیر در کلاس تعریف کردم که یکی برای نمایش تصویر شخص و سه مورد دیگر برای نمایش نام، متن پیغام و تاریخ استفاده خواهد شد. در ادامه متدهای سازنده (Constructor) و همچنین Getter & Setter را به کلاس مدل اضافه می کنم:

package ir.android_studio.recyclerview;

public class Item {

    private int uAvatar;
    private String uName;
    private String uMessage;
    private String uTime;

    public Item(int uAvatar, String uName, String uMessage, String uTime) {
        this.uAvatar = uAvatar;
        this.uName = uName;
        this.uMessage = uMessage;
        this.uTime = uTime;
    }

    public int getuAvatar() {
        return uAvatar;
    }

    public void setuAvatar(int uAvatar) {
        this.uAvatar = uAvatar;
    }

    public String getuName() {
        return uName;
    }

    public void setuName(String uName) {
        this.uName = uName;
    }

    public String getuMessage() {
        return uMessage;
    }

    public void setuMessage(String uMessage) {
        this.uMessage = uMessage;
    }

    public String getuTime() {
        return uTime;
    }

    public void setuTime(String uTime) {
        this.uTime = uTime;
    }
    
}

جزئیات مربوط به نحوه افزودن این متدها به کلاس را در مبحث ListView توضیح داده ام.
در ابتدای مبحث گفتیم برای نمایش آیتم های لیست از یک قالب مشترک استفاده می شود که هر آیتم با همان فرمت و چینش طراحی به RecyclerView فرستاده می شود. من دقیقا همان قالبی که در مبحث ListView (لیست سفارشی) طراحی کرده بودم را در این پروژه استفاده می کنم. یک فایل با نام list_item به دایرکتوری layout پروژه اضافه می کنم:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:padding="5dp"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/img_avatar"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.2"
        android:src="@drawable/avatar_1" />

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.8"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.5"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/txt_name"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="bottom"
                android:paddingLeft="5dp"
                android:text="Name" />

            <TextView
                android:id="@+id/txt_time"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="bottom|right"
                android:text="Time" />
        </LinearLayout>

        <TextView
            android:id="@+id/txt_message"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_marginTop="5dp"
            android:layout_weight="0.5"
            android:paddingLeft="5dp"
            android:text="Message"
            android:textColor="#161111" />

    </LinearLayout>

</LinearLayout>

این لایه شامل یک ImageView و سه TextView است. یک تصویر هم در دایرکتوری drawable برای نمایش مکان آواتار در قسمت Preview اندروید استودیو قرار دادم.خروجی list_item.xml در بخش پیش نمایش به اینصورت است:

در مرحله بعد برای مدیریت view ها و ارسال داده های دریافتی (شامل آدرس تصویر پروفایل، نام، متن پیغام و تاریخ) به آنها، نیاز به ساخت یک کلاس Adapter داریم. بنابراین یک کلاس دیگر با نام دلخواه ItemAdapter به پکیج اصلی پروژه اضافه می کنم:

اگر بخاطر داشته باشید در ListView برای بهینه تر شدن برنامه، یک ViewHolder تعریف کردیم. در RecyclerView هم این مورد درون کتابخانه تعبیه شده و برای تعریف view ها باید از ViewHolder استفاده کنیم. داخل کلاس آداپتر قبل از هرکار ابتدا یک کلاس داخلی (inner class) برای ViewHolder ایجاد و آنرا تکمیل می کنم:

package ir.android_studio.recyclerview;

import android.support.v7.widget.RecyclerView;

public class ItemAdapter {

    public class MyViewHolder extends RecyclerView.ViewHolder {}

}

یک کلاس داخلی با نام دلخواه MyViewHolder به کلاس ItemAdapter اضافه کردم. این کلاس باید از کلاس ViewHolder ارث بری شود و با توجه به اینکه ViewHolder در کتابخانه RecyclerView تعریف شده، کلاس را باید از RecyclerView.ViewHolder ارث بری کنیم.
View ها را داخل MyViewHolder تعریف می کنم:

public class MyViewHolder extends RecyclerView.ViewHolder {

    public ImageView aAvatar;
    public TextView aName;
    public TextView aMessage;
    public TextView aTime;

}

در بدنه کلاس MyViewHolder خطایی مشاهده می شود که با قراردادن نشانگر روی آن و زدن alt+Enter از ما می خواهد متد سازنده را به کلاس اضافه کنیم:

public class MyViewHolder extends RecyclerView.ViewHolder {

    public ImageView aAvatar;
    public TextView aName;
    public TextView aMessage;
    public TextView aTime;


    public MyViewHolder(View itemView) {
        super(itemView);
    }
}

حالا view ها را درون متد سازنده به متغیر مربوط به خودشان متصل می کنم:

public class MyViewHolder extends RecyclerView.ViewHolder {

    public ImageView aAvatar;
    public TextView aName;
    public TextView aMessage;
    public TextView aTime;


    public MyViewHolder(View itemView) {
        super(itemView);
        
        aAvatar = itemView.findViewById(R.id.img_avatar);
        aName = itemView.findViewById(R.id.txt_name);
        aMessage = itemView.findViewById(R.id.txt_message);
        aTime = itemView.findViewById(R.id.txt_time);
    }
}

ملاحظه می کنید در اینجا قبل از findViewById به واسطه itemView که از جنس View است تعریف شده و به تنهایی نمی توان استفاده کرد. در واقع itemView شامل هریک از آیتم های RecyclerView می باشد. فعلا با MyViewHolder کاری ندارم.
پس از ساخت ViewHolder، لازم است کلاس ItemAdapter از RecyclerView.Adapter ارث بری شود:

مشاهده می کنید در لیست پیشنهادی، در مقابل Adapter عبارت VH (مخفف ViewHolder) قید شده به این معنی که در اینجا باید کلاسی که از ViewHolder اصطلاحا کاستوم کردیم را وارد کنیم:

در نهایت کلاس به اینصورت تکمیل می شود:

package ir.android_studio.recyclerview;

import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

public class ItemAdapter extends RecyclerView.Adapter<ItemAdapter.MyViewHolder> {

    public class MyViewHolder extends RecyclerView.ViewHolder {

        public ImageView aAvatar;
        public TextView aName;
        public TextView aMessage;
        public TextView aTime;


        public MyViewHolder(View itemView) {
            super(itemView);

            aAvatar = itemView.findViewById(R.id.img_avatar);
            aName = itemView.findViewById(R.id.txt_name);
            aMessage = itemView.findViewById(R.id.txt_message);
            aTime = itemView.findViewById(R.id.txt_time);
        }
    }

}

مجدد در بدنه کلاس اصلی هم خطا میگیرم که با alt+Enter متدهای ضروری Adapter را اضافه می کنم:

package ir.android_studio.recyclerview;

import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

public class ItemAdapter extends RecyclerView.Adapter<ItemAdapter.MyViewHolder> {

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return null;
    }

    @Override
    public void onBindViewHolder(MyViewHolder holder, int position) {

    }

    @Override
    public int getItemCount() {
        return 0;
    }

    public class MyViewHolder extends RecyclerView.ViewHolder {

        public ImageView aAvatar;
        public TextView aName;
        public TextView aMessage;
        public TextView aTime;


        public MyViewHolder(View itemView) {
            super(itemView);

            aAvatar = itemView.findViewById(R.id.img_avatar);
            aName = itemView.findViewById(R.id.txt_name);
            aMessage = itemView.findViewById(R.id.txt_message);
            aTime = itemView.findViewById(R.id.txt_time);
        }
    }

}

جهت مطالعه ادامه آموزش، فایل PDF را دانلود نمائید

توجه : سورس پروژه داخل پوشه Exercises قرار داده شده است.

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

نوشته کار با RecyclerView و CardView متریال دیزاین اولین بار در اندروید استودیو پدیدار شد.

این مبحث در قالب PDF و در ۲۹ صفحه تهیه شده که در ادامه چند صفحه ی ابتدایی آن را مشاهده می کنید:

آشنایی با Tab (تب) ها در اندروید:

بنام خدا. Tab ها تقریبا در همه پلتفرم ها و برنامه ها استفاده می شوند. در سیستم عامل ویندوز وقتی یک پنجره تنظیمات را باز می کنید، در بالای پنجره چندین Tab تعبیه شده که با انتخاب هرکدام، به تعدادی از گزینه های مرتبط با عنوان آن تب دسترسی خواهید داشت. یا مثال ساده تر، در مرورگرهای وب مانند کروم و فایرفاکس، برای مشاهده هر وب سایت یک تب (Tab) جدید باز می کنیم. در سایر پلتفرم ها و نرم افزارها هم به همینصورت از Tab ها استفاده می شود. از جمله در سیستم عامل و نرم افزارهای اندروید.
اولین مثالی که به ذهنم رسید پیام رسان WhatsApp است:

در زیر Toolbar سه Tab به نام‌های Calls، Chats و Contacts تعریف شده که با انتخاب هر یک از تب ها، محتوا و لیست مرتبط با آن نمایش داده می شود.

معرفی TabLayout در متریال دیزاین

TabLayout یکی دیگر از ویجت (کامپوننت) هایی است که اندروید در متریال دیزاین معرفی کرده و در کتابخانه design در دسترس است. با استفاده از ویجت TabLayout امکان تعریف و مدیریت Tab ها فراهم می شود (یعنی گزینه های Calls، Chats و Contacts در مثال بالا).

ViewPager چیست؟

ViewPager ویجت دیگری است که با استفاده از Fragment ها، می تواند چندین فرگمنت را در یک اکتیویتی نمایش دهد که با کشیدن صفحه به چپ یا راست و یا انتخاب Tab ها در TabLayout، فرگمنت ها به ترتیبی که تعیین کرده ایم نمایش داده می شوند (لیست چت ها، مکالمات و مخاطبین در مثال بالا).
یعنی در اپلیکیشن WhatsApp علاوه بر اینکه با لمس هریک از تب ها، به محتوای آن (یعنی فرگمنت مرتبط با آن تب) دسترسی داریم، با کشیدن فرگمنت ها به دو طرف نیز تب ها جابجا می شوند.

یک پروژه با نام Tabs ایجاد می کنم و با توجه به اینکه در زمان تهیه این آموزش، اکثر دیوایس ها از API 17 و به بالا پشتیبانی می کنند، MinSDK را روی ۱۷ تنظیم می کنم. همانطور که در ابتدا اشاره شد، لازم است کتابخانه design را به پروژه اضافه کنیم:

dependencies {

    implementation 'com.android.support:appcompat-v7:27.0.2'
    implementation 'com.android.support:design:27.0.2'
}

در مرحله اول، ActionBar پیش فرض پروژه را مطابق آنچه در آموزش تولبار بیان شد، حذف کرده و Toolbar متریال را جایگزین می کنم:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context="ir.android_studio.tabs.MainActivity">

    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:id="@+id/m_toolbar"
        android:background="?attr/colorPrimary"
        android:elevation="3dp"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

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

</LinearLayout>

من لایه را به LinearLayout از نوع vertical تغییر دادم تا ویجت هایی که اضافه می کنم زیر یکدیگر قرار بگیرند. البته پیاده سازی با RelativeLayout یا CoordinatorLayout نیز امکان پذیر است.

MainActivity.java:

package ir.android_studio.tabs;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;

public class MainActivity extends AppCompatActivity {

    Toolbar mToolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mToolbar =  findViewById(R.id.m_toolbar);
        setSupportActionBar(mToolbar);

    }
}

قبل از ادامه کار، پروژه را اجرا می کنم تا مطمئن شوم تولبار به اکتیویتی اضافه شده است:

در ادامه، چند فرگمنت ساده به پروژه اضافه می کنم:

سه فرگمنت با نام‌های FragmentOne، FragmentTwo و FragmentThree به پروژه اضافه شد که در layout هر فرگمنت یک TextView وجود دارد. مانند fragment_one.xml:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="ir.android_studio.tabs.FragmentOne">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="Fragment One"
        android:textSize="30sp"/>

</FrameLayout>

مجدد main_activity.xml را باز کرده و به صورت زیر دو تگ TabLayout و ViewPager را به لایه اضافه می کنم:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context="ir.android_studio.tabs.MainActivity">

    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:id="@+id/m_toolbar"
        android:background="?attr/colorPrimary"
        android:elevation="3dp"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

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

    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tab_layout"
        android:background="?attr/colorPrimary" />

    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/view_pager" />

</LinearLayout>

فایل colors.xml:

xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#009688</color>
    <color name="colorPrimaryDark">#00796B</color>
    <color name="colorAccent">#FFC107</color>
</resources>

برای TabLayout رنگ پس زمینه یکسان با Toolbar تعریف کردم تا به صورت یکپارچه نمایش داده شوند.

TabLayout و ViewPager را در اکتیویتی تعریف می کنم:

package ir.android_studio.tabs;

import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;

public class MainActivity extends AppCompatActivity {

    Toolbar mToolbar;
    TabLayout tbLayout;
    ViewPager vPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mToolbar =  findViewById(R.id.m_toolbar);
        setSupportActionBar(mToolbar);

        vPager = findViewById(R.id.view_pager);
        tbLayout = findViewById(R.id.tab_layout);

    }
}

در ادامه برای مدیریت و نمایش فرگمنت ها یک کلاس جدید با نام دلخواه ViewPagerAdapter به پروژه اضافه می کنم:

ViewPagerAdapter.java:

package ir.android_studio.tabs;


public class ViewPagerAdapter {

}

سپس این کلاس را از FragmentPagerAdapter ارث بری می کنم. FragmentPagerAdapter به یک import نیاز دارد که همانند گذشته با Alt + Enter انجام می دهم:

package ir.android_studio.tabs;

import android.support.v4.app.FragmentPagerAdapter;

public class ViewPagerAdapter extends FragmentPagerAdapter {

}

اندروید استودیو علامت اخطار نشان می دهد که با کلیک روی آن و انتخاب Implements Methods، به دو متد مورد نیاز FragmentPagerAdapter به کلاس اضافه می شود.

سپس اخطار دیگری می‌گیرم مبنی بر اینکه یک Constructor (متد سازنده) نیز باید اضافه شود:

در نهایت کلاس به اینصورت تکمیل می شود:

package ir.android_studio.tabs;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class ViewPagerAdapter extends FragmentPagerAdapter {

    public ViewPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        return null;
    }

    @Override
    public int getCount() {
        return 0;
    }
}

من به دو List نیاز دارم. یکی برای تعریف فرگمنت ها و دیگری برای عنوان Tab ها. پس یک List از نوع Fragment با نام دلخواه frgList و یک لیست از نوع String با نام دلخواه titleList می سازم:

package ir.android_studio.tabs;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.ArrayList;
import java.util.List;

public class ViewPagerAdapter extends FragmentPagerAdapter {

    private final List<Fragment> frgList = new ArrayList<>();
    private final List<String> titleList = new ArrayList<>();
    
    public ViewPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        return null;
    }

    @Override
    public int getCount() {
        return 0;
    }
}

تصویر نهایی خروجی پروژه این مبحث آموزشی:

جهت مطالعه ادامه آموزش، فایل PDF را دانلود نمائید

توجه : سورس پروژه داخل پوشه Exercises قرار داده شده است.

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

نوشته پیاده سازی Tab توسط TabLayout و ViewPager متریال دیزاین اولین بار در اندروید استودیو پدیدار شد.

به نام خدا. Snackbar را می توان نسخه جدیدی از Toast دانست. شاید واژه “جایگزین” مناسب نباشد اما در موارد زیادی استفاده از اسنک بار به جای Toast می تواند رضایت بخش بوده و زیبایی بیشتری به اپ ما بدهد. ضمن اینکه در اسنک بار، شخصی سازی بیشتری در اختیار داریم.
به تصویر زیر دقت کنید:

بعد از اینکه کاربر در اپلیکیشنی مانند Gmail، ایمیلی را حذف می کند، پیغام Message is deleted بجای نمایش در قالب Toast، به صورت نواری با پس زمینه تیره رنگ و به حالت انیمیشن از پایین صفحه ظاهر شده و پس از پایان زمان تعیین شده به همانصورت به طرف پایین برگشته و محو می شود.
یا یک مثال دیگر از اسنک بار:

در اینجا پیغامی مبنی بر عدم دسترسی به شبکه به کاربر اعلام شده است.
در هر دو مثال بالا، علاوه بر نمایش پیغام، یک Action نیز در سمت راست اضافه شده که کاربر می تواند عملی را انجام دهد. مانند لغو حذف ایمیل در مثال اول و تلاش مجدد برای اتصال به شبکه در مثال دوم. پس یکی از مزیت های اسنک بار نسب به Toast همین قابلیت اضافه کردن دکمه و اکشن است.

دموی یک اسنک بار:

در ادامه به بررسی Snackbar در قالب یک پروژه می پردازم.

ساخت و بررسی Snackbar:

یک پروژه با نام Snackbar و MinSDK 17 در اندروید استودیو ایجاد کردم. مانند مباحث گذشته، اسنک بار نیز علاوه بر کتابخانه اصلی متریال دیزاین یعنی appcompat-v7 به کتابخانه design هم نیاز دارد:

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:27.0.2'
    implementation 'com.android.support:design:27.0.2'
}

برای اینکه قابلیت های اسنک بار به درستی اجرا شود (مانند قابلیت کشیدن به سمت راست برای از بین بردن یا swipe-to-dismiss) لازم است view ای که Snackbar در آن قرار گرفته از جنس CoordinatorLayout باشد. پس لایه اکتیویتی را به CoordinatorLayout تبدیل کرده و یک id نیز به آن اختصاص می دهم:

<?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:id="@+id/crd_layout"
    tools:context="ir.android_studio.snackbar.MainActivity">
    

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

فعلا با layout کاری ندارم و به تکمیل کدهای جاوای اکتیویتی می پردازم:

package ir.android_studio.snackbar;

import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    CoordinatorLayout crdLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        crdLayout = findViewById(R.id.crd_layout);

        Snackbar snkbr = Snackbar.make(crdLayout, "Sample Snackbar Message", 
        Snackbar.LENGTH_LONG);
        
        snkbr.show();

    }
}

ابتدا CoordinatorLayout را با نام دلخواه crdLayout تعریف کردم. سپس یک نمونه از Snackbar با نام snkbr ساختم. همانطور که مشاهده می کنید با استفاده از تابع make که ۳ پارامتر ورودی می گیرد، اسنک بار را تکمیل می کنیم. ورودی اول همان view پدر یعنی CoordinatorLayout است. ورودی بعد، متن پیغام و سومی مدت زمان نمایش پیغام است که سه مقدار LENGTH_LONG (نمایش طولانی مدت)، LENGTH_SHORT (نمایش کوتاه مدت) و LENGTH_INDEFINITE را می پذیرد. استفاده از مقدار LENGTH_INDEFINITE باعث می شود تا زمانی که کاربر اقدام به بستن Snackbar نکند (مانند کشیدن به سمت راست یا تایید اکشن موجود در اسنک بار) پیغام روی صفحه باقی بماند. در نهایت توسط متد show() اسنک بار نمایش داده می شود.
پروژه را اجرا می کنم:

به محض اجرای پروژه، اسنک بار نیز ظاهر شده و پس از چند ثانیه از صفحه حذف می شود. برای راحتتر شدن کار، اسنک بار را درون یک دکمه قرار می دهم تا با هر بار لمس دکمه، اجرا شود. به جای Button عادی از یک Floating Action Button استفاده می کنم تا یکی از اهمیت های استفاده از CoordinatorLayout را نیز در این مبحث درک کنید. FAB مبحث گذشته را به پروژه اضافه می کنم:

<?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:id="@+id/crd_layout"
    tools:context="ir.android_studio.snackbar.MainActivity">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|start"
        android:layout_margin="16dp"
        android:src="@android:drawable/ic_dialog_email"
        app:backgroundTint="#2c489c"
        android:clickable="true"
        android:focusable="true"
        app:fabSize="normal"
        app:rippleColor="#b12f2f"/>

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

package ir.android_studio.snackbar;

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

public class MainActivity extends AppCompatActivity {

    CoordinatorLayout crdLayout;
    FloatingActionButton mFab;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        crdLayout = findViewById(R.id.crd_layout);
        mFab = findViewById(R.id.fab);

        mFab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

        Snackbar snkbr = Snackbar.make(crdLayout, "Sample Snackbar Message", 
        Snackbar.LENGTH_LONG);
                snkbr.show();

            }
        });

    }
}

در واقع همان پروژه FAB است با این تفاوت که بجای Toast از Snackbar استفاده شده. پروژه را اجرا می کنم:

با لمس دکمه FAB، اسنک بار نمایش داده می شود. به تصویر دوم دقت کنید. با ظاهر شدن اسنک بار، FAB نیز به همان اندازه به بالا رفته و تداخل ایجاد نشده است در صورتی که اگر بجای CoordinatorLayout از سایر layout ها مانند RelativeLayout استفاده می کردیم، FAB در جای خود باقی می ماند و اسنک بار قسمتی از FAB را می پوشاند.

با استفاده از متد setDuration می توان مدت زمان نمایش اسنک بار را سفارشی کرد:

mFab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {

        Snackbar snkbr = Snackbar.make(crdLayout, "Sample Snackbar Message", 
        Snackbar.LENGTH_LONG);
        snkbr.setDuration(9000);
        snkbr.show();

    }
});

در کد بالا، اسنک بار به مدت ۹ ثانیه اجرا می شود.
اما در ابتدای مبحث به یکی از مهمترین برتری های Snackbar نسبت به Toast اشاره شد که تعریف اکشن است:

متد setAction دو ورودی نیاز دارد. ورودی اول عنوان اکشن و دومی یک OnClickListener که اکشن مدنظر درون آن تعریف می گردد. به اینصورت:

mFab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {

        Snackbar snkbr = Snackbar.make(crdLayout, "Sample Snackbar Message", 
        Snackbar.LENGTH_LONG);

        snkbr.setDuration(3000);

        snkbr.setAction("OK", new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                
            }
        });

        snkbr.show();

    }
});

ساده ترین اکشن، استفاده از dismiss() است. این متد قبل از به پایان رسیدن زمان نمایش اسنک بار و هنگام لمس “OK” توسط کاربر، اسنک بار را می بندد. پس snkbr.dismiss() را به setAction اضافه کرده و پروژه را اجرا می کنم:

snkbr.setAction("OK", new View.OnClickListener() {
    @Override
    public void onClick(View view) {

        snkbr.dismiss();

    }
});

گزینه ای با نام OK به سمت راست اضافه شده که با لمس آن، اسنک بار بسته می شود.
هر اکشن دیگری نیز می توان درنظر گرفتن. مثلا این اکشن نقش Undo را داشته باشد. یعنی در اپلیکیشن مدیریت ایمیل، بعد از نمایش پیغام “ایمیل ها حذف شد”، امکان لغو حذف وجود داشته باشد که با لمس گزینه Undo، ایمیل های حذف شده مجدد به اینباکس برگشته و پیغام جدیدی مبنی بر بازیابی ایمیل ها نمایش داده شود.

از setActionTextColor هم برای تغییر رنگ گزینه اکشن استفاده می شود:

mFab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {

        final Snackbar snkbr = Snackbar.make(crdLayout, "Sample Snackbar Message",
        Snackbar.LENGTH_LONG);

        snkbr.setDuration(5000);

        snkbr.setAction("OK", new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                snkbr.dismiss();

            }
        });

        snkbr.setActionTextColor(Color.RED);

        snkbr.show();

    }
});

اگر بخواهیم به جای استفاده از رنگهای پیش فرض اندروید، از رنگهای تعریف شده در colors.xml استفاده کنیم به اینصورت قابل انجام است:

snkbr.setActionTextColor(getResources().getColor(R.color.colorAccent));

در اینجا رنگ با نام colorAccent به setActionTextColor پاس داده می شود.

در نهایت رنگ متن پیغام و پس زمینه Snackbar را نیز به اینصورت تغییر می دهم:

View snkView = snkbr.getView();
snkView.setBackgroundColor(Color.GRAY);

TextView txtView = snkView.findViewById(android.support.design.R.id.snackbar_text);
txtView.setTextColor(Color.GREEN);

در ابتدا یک نمونه از View با نام دلخواه snkView ساخته و snkbr.getView را درون آن قرار می دهم. به اینصورت view مربوط به snkbr به snkView متصل می شود. حالا برای تعریف رنگ پس زمینه از setBackgroundColor و رنگ متن از setTextColor استفاده شده که لازم است از TextView یک نمونه ساخته و به آی دی snackbar_text پیوند دهیم. snackbar_text در خود اندروید تعریف شده و چون مربوط به کتابخانه design است به صورت android.support.design.R.id.snackbar_text قابل دسترسی است.

MainActivity.java:

package ir.android_studio.snackbar;

import android.graphics.Color;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    CoordinatorLayout crdLayout;
    FloatingActionButton mFab;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        crdLayout = findViewById(R.id.crd_layout);
        mFab = findViewById(R.id.fab);

        mFab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

            final Snackbar snkbr = Snackbar.make(crdLayout, "Sample Snackbar Message",
            Snackbar.LENGTH_LONG);

                snkbr.setDuration(5000);

                snkbr.setAction("OK", new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {

                        snkbr.dismiss();

                    }
                });

                // snkbr.setActionTextColor(Color.RED);

                snkbr.setActionTextColor(getResources().getColor(R.color.colorPrimaryDark));

                View snkView = snkbr.getView();
                snkView.setBackgroundColor(Color.GRAY);
                TextView txtView = snkView.findViewById(android.support.design.R.id.snackbar_text);
                txtView.setTextColor(Color.GREEN);

                snkbr.show();

            }
        });


    }
}

https://developer.android.com/reference/android/support/design/widget/Snackbar.html
https://material.io/guidelines/components/snackbars-toasts.html

توجه : سورس پروژه درون پوشه Exercises قرار داده شده است

نوشته کار با Snackbar متریال دیزاین اولین بار در اندروید استودیو پدیدار شد.

Floating Action Button یا دکمه شناور که به اختصار FAB نیز نامیده می شود یکی دیگر از کامپوننت های معرفی شده در متریال دیزاین اندروید است. همانطور که از نام آن پیداست، یک دکمه شناور است که مکان قرارگیری آن در صفحه توسط توسعه دهنده تعیین شده و با اسکرول کردن صفحه جابجا نمی شود (مگر به خواست خود توسعه دهنده). این نوع دکمه عموما در اپ هایی مانند پیام رسانها و مدیریت ایمیل استفاده می شود. مانند اپلیکیشن Gmail:

دکمه ای دایره شکل که در سمت راست و پایین صفحه قرار گرفته و یک آیکون مداد را نشان می دهد که کاربر با لمس این دکمه به صفحه ارسال ایمیل هدایت می شود. FAB یا Floating Action Button نیز به کتابخانه appcompat و design نیاز دارد که در ادامه و در قالب یک پروژه به بررسی آن می پردازم.
یک پروژه با نام FAB و MinSDK 17 ایجاد کردم. مانند مباحث قبل، از قسمت Project Structure کتابخانه design را به پروژه اضافه کرده و یا build.gradle (app) را باز کرده و به صورت دستی اینکار را انجام می دهم:

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:27.0.2'
    implementation 'com.android.support:design:27.0.2'
}

(کتابخانه های اضافی را حذف کردم)
در این پروژه برای layout اصلی که FAB درون آن قرار می گیرد بجای RelativeLayout یا سایر لایه هایی که قبلا استفاده کردیم، از CoordinatorLayout استفاده می کنیم. توسط این layout مدیریت بهتری روی قسمت های مختلف (از جمله Toolbar و FAB و…) می توان انجام داد. برای این مبحث در همین حد آشنایی با 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.android_studio.fab.MainActivity">


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

به اینصورت، لایه activity_main.xml را به CoordinatorLayout تبدیل کردم. حالا کافیست یک تگ FloatingActionButton به صورت android.support.design.widget.FloatingActionButton به لایه اضافه کنم:

<?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.android_studio.fab.MainActivity">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:src="@android:drawable/ic_dialog_email" />

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

برای layout_gravity دو مقدار bottom (پایین) و end (سمت راست) تعریف شده. layout_margin هم مقدار فاصله ای است که دکمه از کنار صفحه باید داشته باشد که مقدار استاندارد ۱۶dp است. پروژه را اجرا می کنم:

همانطور که انتظار داشتم، Floating Action Button در سمت راست و پایین صفحه با آیکونی که تعریف کرده بودم ظاهر شده است. مسلما اگر layout_gravity را به صورت زیر تغییر دهم، دکمه شناور باید به سمت چپ منتقل شود:

android:layout_gravity="bottom|start"

start بر خلاف end به معنی ابتدای صفحه نمایش است. یعنی سمت چپ. دوباره اجرا می کنم:

رنگ بک گراند FAB به صورت پیش فرض از colorAccent تم متریال گرفته می شود که با اضافه کردن خاصیت app:backgroundTint امکان تغییر آن وجود دارد:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|start"
    android:layout_margin="16dp"
    android:src="@android:drawable/ic_dialog_email"
    app:backgroundTint="#2c489c" />

آیتم های دیگری نیز جهت شخصی سازی FAB در اختیار داریم. android:clickable با مقدار true به دکمه یک انیمیشن (Ripple Animation) اضافه می کند که با لمس دکمه ایجاد می شود و کاربر حس بهتری از لمس دکمه دارد. بعد از استفاده از این خاصیت، اندروید استودیو پیغامی نشان می دهد که بهتر است در صورت استفاده از clickable، از android:focusable نیز استفاده شود:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|start"
    android:layout_margin="16dp"
    android:src="@android:drawable/ic_dialog_email"
    app:backgroundTint="#2c489c"
    android:clickable="true"
    android:focusable="true"/>

سایز دکمه نیز توسط خاصیت app:fabSize قابل تغییر است که دو مقدار normal و mini را می پذیرد. اگر این خاصیت روی FAB تعریف نشود به صورت پیش فرض مقدار normal اعمال خواهد شد که عموما هم ما همین اندازه را نیاز داریم. بنابراین با دادن مقدار normal به fabSize، سایز دکمه تغییری نکرده اما مقدار mini باعث کوچکتر شدن دکمه می شود:

app:fabSize="mini"

و آخرین موردی که در این مبحث به آن اشاره می کنم، خاصیت app:rippleColor است. در حالت عادی و بدون استفاده از این خاصیت، در صورت استفاده از خاصیت clickable، هنگام لمس دکمه، همان رنگ پس زمینه دکمه قدری تیره تر می شود اما با استفاده از rippleColor و تعریف یک رنگ جدید، ripple Animation لمس دکمه با این رنگ اجرا خواهد شد:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|start"
    android:layout_margin="16dp"
    android:src="@android:drawable/ic_dialog_email"
    app:backgroundTint="#2c489c"
    android:clickable="true"
    android:focusable="true"
    app:fabSize="normal"
    app:rippleColor="#b12f2f"/>

(جهت مشاهده واضح تر نتیجه روی اسکرین شات، سایز دکمه را مجدد به نرمال تغییر دادم.)

مرحله نهایی تعریف یک رویداد برای دکمه شناور است که مانند سایر دکمه هاست:

package ir.android_studio.fab;

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

public class MainActivity extends AppCompatActivity {

    FloatingActionButton mFab;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mFab = findViewById(R.id.fab);

        mFab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                Toast.makeText( MainActivity.this, "FAB Clicked", Toast.LENGTH_SHORT).show();

            }
        });

    }
}

به خط زیر دقت کنید:

mFab = findViewById(R.id.fab);

قبلا لازم بود عمل Casting را هنگام تعریف یک view در جاوا انجام دهیم. مانند زیر:

mFab = (FloatingActionButton) findViewById(R.id.fab);

اما در نسخه جدید اندروید استودیو این عمل ضروری نیست و در صورت استفاده، پیغامی مبنی بر زائد و اضافی بودن Casting نشان می دهد.
حالا پروژه را اجرا و روی FloatingActionButton کلیک می کنم:

پیغام Toast به درستی اجرا شد.

توجه : سورس پروژه درون پوشه Exercises قرار داده شده است

نوشته دکمه شناور یا Floating Action Button متریال دیزاین اولین بار در اندروید استودیو پدیدار شد.