ایجاد استایل برای TabLayout در اندروید استودیو

شاید شما هم مثل من از استایل پیشفرض tablayout زیاد خوشتون نیاد برای همین مجبور میشید که استایل دلخواه خودتون رو ایجاد کنید. چند وقت پیش یه مقاله خیلی جالب در این مورد تو مدیوم خوندم و تصمیم گرفتم که اینجا براتون قرار بدم البته فارسی!

فرض میگیریم که شما نحوه اضافه کردن tablayout و کار کردن با اون رو بلد هستید.

بکگراند TabLayout

استایلی که در نظر داریم بکگراندی هستش که گوشه های اون گرد شده باشه برای رسیدن به این هدف کافیه تا یه shape ایجاد کنیم.

یه فایل xml در پوشه drawable با نام tab_layout_background ایجاد کنید. و کدهای زیر رو کپی کنید.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:radius="18dp"/>
    <solid
        android:color="@color/colorPrimaryDark"/>
</shape>
دقت کنید که استفاده از رنگ هایی که داخل فایل color قرار دارند ممکن است باعث ایجاد کرش روی برخی گوشی ها شود پس بهتر است رنگ موردنظر را مستقیما وارد کنید.

بکگراند تب انتخاب شده

ما نیاز داریم تا حالت تبمون رو وقتی که انتخاب میشه مشخص کنیم.

فایل xml دیگری به نام tab_background_selected ایجاد کنید. و محتوای زیر رو کپی کنید داخلش.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:radius="18dp"/>
    <solid
        android:color="#fff"/>
</shape>

تب های انتخاب نشده

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

فایل xml دیگری با نام tab_background ایجاد کنید و کدهای زیر رو کپی کنید.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid
        android:color="@android:color/transparent" />
</shape>

سلکتور تب

حالا باید مشخص کنیم که تب لایوت از کدام بکگراند برای تب فعلی استفاده کند. اگر تب انتخاب شده باشد از فایل tab_background_selected و در حالت های غیر از این از فایل tab_background استفاده خواهد کرد.

فایل xml با نام tab_layout_selector ایجاد کنید. و کدهای زیر را کپی کنید.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/tab_background_selected"
        android:state_selected="true"/>
    <item
        android:drawable="@drawable/tab_background"
        android:state_selected="false"/>
</selector>

قسمت پایانی

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

  <com.google.android.material.tabs.TabLayout
      android:id="@+id/tabLayout"
      android:layout_width="wrap_content"
      android:layout_height="36dp"
      android:background="@drawable/tab_layout_background"
      app:tabMode="scrollable"
      app:tabBackground="@drawable/tab_layout_selector"
      app:tabSelectedTextColor="@color/colorPrimaryDark"
      app:tabPaddingStart="16dp"
      app:tabPaddingEnd="16dp"
      app:tabIndicatorHeight="0dp"
      app:tabRippleColor="@null"/>

نتیجه