AmenoTejikara
ایجاد استایل برای 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"/>
مطلبی دیگر از این انتشارات
هی یو ! دلار در بیار , ریال خرج کن :)
مطلبی دیگر از این انتشارات
استفاده از دیتا بایندینگ در ریسایکلرویو (اندروید)
مطلبی دیگر از این انتشارات
4 گام طلایی برای یادگیری یک تکنولوژی