Cách thay đổi màu sắc và chiều cao của chỉ báo TabLayout mới

Tôi đã chơi xung quanh với cái mới android.support.design.widget.TabLayoutvà thấy một vấn đề, trong định nghĩa lớp, không có phương pháp nào để thay đổi màu chỉ báo và chiều cao mặc định.

Thực hiện một số nghiên cứu, nhận thấy rằng màu chỉ báo mặc định được lấy từ AppTheme. Cụ thể từ đây:

<item name="colorAccent">#FF4081</item>

Bây giờ, trong trường hợp của tôi, nếu tôi thay đổi colorAccent, nó sẽ ảnh hưởng đến tất cả các chế độ xem khác sử dụng giá trị này làm màu nền, ví dụ như ProgressBar

Bây giờ có cách nào để thay đổi chỉ số Màu sang thứ khác ngoài colorAccent?

Có vấn đề là TabLayout mới sử dụng màu chỉ báo từ giá trị colorAccent, tôi quyết định đào sâu vào android.support.design.widget.TabLayouttriển khai, thấy rằng không có phương thức công khai nào để tùy chỉnh điều này. Tuy nhiên tôi đã tìm thấy đặc tả kiểu này của TabLayout:

<style name="Base.Widget.Design.TabLayout" parent="android:Widget">
    <item name="tabMaxWidth">@dimen/tab_max_width</item>
    <item name="tabIndicatorColor">?attr/colorAccent</item>
    <item name="tabIndicatorHeight">2dp</item>
    <item name="tabPaddingStart">12dp</item>
    <item name="tabPaddingEnd">12dp</item>
    <item name="tabBackground">?attr/selectableItemBackground</item>
    <item name="tabTextAppearance">@style/TextAppearance.Design.Tab</item>
    <item name="tabSelectedTextColor">?android:textColorPrimary</item>
</style>

Có đặc điểm kỹ thuật kiểu này, bây giờ chúng ta có thể tùy chỉnh TabLayout như thế này:

<android.support.design.widget.TabLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@id/pages_tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:tabIndicatorColor="@android:color/white"
    app:tabIndicatorHeight="4dp"/>

Và vấn đề đã được giải quyết, cả màu sắc và chiều cao của chỉ báo tab có thể được thay đổi từ các giá trị mặc định của chúng.

Với thư viện hỗ trợ thiết kế, giờ đây bạn có thể thay đổi chúng trong xml:

Để thay đổi màu của chỉ báo TabLayout:

app:tabIndicatorColor="@color/color"

Để thay đổi chiều cao của chỉ báo TabLayout:

app:tabIndicatorHeight="4dp"

Vì tôi không thể đăng bình luận tiếp theo cho nhà phát triển Android , đây là câu trả lời được cập nhật cho bất kỳ ai khác cần lập trình màu chỉ báo tab đã chọn:

tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));

Tương tự, đối với chiều cao:

tabLayout.setSelectedTabIndicatorHeight((int) (2 * getResources().getDisplayMetrics().density));

Các phương thức này chỉ mới được thêm vào phiên bản 23.0.0 của Thư viện hỗ trợ , đó là lý do tại sao câu trả lời của Soheil Setayeshi sử dụng sự phản chiếu.

app:tabIndicatorColor="@android:color/white"

Với thư viện hỗ trợ desing v23, bạn có thể thiết lập chương trình màu sắc và chiều cao.

Chỉ sử dụng cho chiều cao:

TabLayout.setSelectedTabIndicatorHeight(int height)

Đây là javadoc chính thức .

Chỉ sử dụng cho màu sắc:

TabLayout.setSelectedTabIndicatorColor(int color)

Đây là javadoc chính thức .

Tại đây bạn có thể tìm thấy thông tin trong Google Tracker .

Để thay đổi màu chỉ báo và chiều cao theo chương trình, bạn có thể sử dụng sự phản chiếu. ví dụ mã màu sử dụng dưới đây:

        try {
            Field field = TabLayout.class.getDeclaredField("mTabStrip");
            field.setAccessible(true);
            Object ob = field.get(tabLayout);
            Class<?> c = Class.forName("android.support.design.widget.TabLayout$SlidingTabStrip");
            Method method = c.getDeclaredMethod("setSelectedIndicatorColor", int.class);
            method.setAccessible(true);
            method.invoke(ob, Color.RED);//now its ok
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        } catch (NoSuchMethodException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }

và để thay đổi chiều cao chỉ báo, hãy sử dụng "setSelectedTheicatorHeight" thay vì "setSelectedTheicatorColor" sau đó gọi nó theo chiều cao mong muốn của bạn

Chỉ báo Foto sử dụng điều này:

 tabLayout.setSelectedTabIndicatorColor(ContextCompat.getColor(this, R.color.colorWhite));//put your color

từ xml:

app:tabIndicatorColor="#fff"

từ java:

tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));
tabLayout.setSelectedTabIndicatorHeight((int) (2 * getResources().getDisplayMetrics().density));

Bạn có thể thay đổi điều này bằng xml

app:tabIndicatorColor="#fff"

Chỉ cần đặt dòng này trong mã của bạn. Nếu bạn thay đổi màu thì thay đổi giá trị màu trong ngoặc đơn.

tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));

Android làm cho nó dễ dàng.

public void setTabTextColors(int normalColor, int selectedColor) {
    setTabTextColors(createColorStateList(normalColor, selectedColor));
}

Vì vậy, chúng tôi chỉ nói

mycooltablayout.setTabTextColors(Color.parseColor("#1464f4"), Color.parseColor("#880088"));

Điều đó sẽ cho chúng ta một màu xanh bình thường và màu tím được chọn.

Bây giờ chúng ta đặt chiều cao

public void setSelectedTabIndicatorHeight(int height) {
    mTabStrip.setSelectedIndicatorHeight(height);
}

Và đối với chiều cao, chúng ta nói

mycooltablayout.setSelectedIndicatorHeight(6);