새 TabLayout 표시기 색상 및 높이를 변경하는 방법


124

나는 new를 가지고 놀았고 android.support.design.widget.TabLayout클래스 정의에서 표시기 색상과 기본 높이를 변경하는 방법이 없다는 문제를 발견했습니다.

조사 결과 기본 표시기 색상은 AppTheme에서 가져온 것입니다. 특히 여기에서 :

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

이제 제 경우에는을 변경하면 colorAccent이 값을 배경색으로 사용하는 다른 모든 뷰 (예 : ProgressBar)에 영향을줍니다.

이제 indicatorColor를 다른 것으로 변경하는 방법이 colorAccent있습니까?

답변:


250

새 TabLayout이 value의 표시기 색상을 사용한다는 문제가 발생 colorAccent하여 android.support.design.widget.TabLayout구현 을 파헤쳐 서 이를 사용자 정의 할 수있는 공용 메서드가 없음을 확인했습니다. 그러나 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>

이 스타일 사양이 있으므로 이제 다음과 같이 TabLayout을 사용자 지정할 수 있습니다.

<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"/>

그리고 문제가 해결되었습니다. 탭 표시기 색상과 높이를 모두 기본값에서 변경할 수 있습니다.


5
자바 코드를 통해 'tabSelectedTextColor'(탭 표시기 색상 또는 높이가 아님)를 변경하는 방법이 있습니까?
Prakash

2
tabLayout xml 위젯의 app : tabIndicatorColor 속성은이 문제를 해결하는 데 필요한 유일한 변경 사항입니다. 감사!
Braden Holt

나는 이것을 부모 스타일로 만들었습니다 :parent="@style/Base.Widget.Design.TabLayout"
Ultimo_m

이 솔루션 세운이 합법적이어야합니다
Nikhil

101

디자인 지원 라이브러리를 사용하여 이제 xml에서 변경할 수 있습니다.

TabLayout 표시기 의 색상 을 변경하려면 :

app:tabIndicatorColor="@color/color"

TabLayout 표시기 의 높이 를 변경하려면 :

app:tabIndicatorHeight="4dp"

4
나는이 라인을 추가하는 듯했으나 색상은 여전히 악센트 색상
마흐디

@Kenji이 줄이 xml의 도구 모음 비트가 아닌 TabLayout에 배치 되었습니까? 쉽게 잘못 배치 :)
Wes Winn

높이에 대한 완벽한 솔루션. 잘 작동합니다. 감사합니다 Malek.
Hardik Joshi

1
대신 그라디언트 색상을 적용하려면 어떻게해야합니까?
hamza khan

35

Android 개발자의 의견에 대한 후속 조치를 게시 할 수 없기 때문에 선택한 탭 표시기 색상을 프로그래밍 방식으로 설정해야하는 다른 사람을위한 업데이트 된 답변이 있습니다.

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

마찬가지로 높이의 경우 :

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

이 방법은 지원 라이브러리의 개정판 23.0.0에 최근에 추가 되었으므로 Soheil Setayeshi의 답변 이 반영을 사용하는 이유 입니다.


2
setSelectedTabIndicatorHeight는 이제 더 이상 사용되지 않습니다. 지금 무엇을 사용해야할지 아십니까?
Michalsx


13

으로 종로 지원 라이브러리 V23 프로그래밍 방식으로 색상과 높이를 설정할 수 있습니다.

높이에 사용하십시오.

TabLayout.setSelectedTabIndicatorHeight(int height)

여기에 공식 javadoc .

색상 만 사용 :

TabLayout.setSelectedTabIndicatorColor(int color)

여기에 공식 javadoc .

여기에서 Google Tracker 에서 정보를 찾을 수 있습니다 .


색상에 어떤 정수를 사용해야합니까?
the_prole nov.

예를 들어 Color 클래스를 사용할 수 있습니다. Color.RED
Soumya

setSelectedTabIndicatorHeight는 이제 더 이상 사용되지 않습니다
APP

9

프로그래밍 방식으로 표시기 색상과 높이를 변경하려면 반사를 사용할 수 있습니다. 예를 들어 표시기 색상은 아래 코드를 사용합니다.

        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();
        }

표시기 높이를 변경하려면 "setSelectedIndicatorColor"대신 "setSelectedIndicatorHeight"를 사용하고 원하는 높이로 호출합니다.


1
감사합니다! 이것은 나를 도와줍니다! Google이 지원 라이브러리에서 이에 대한 방법을 제공하는 것을 잊은 것 같습니다.
Shinta S

1
이미 공용 기능으로 사용할 수있는 리플렉션을 사용하는 이유는 무엇입니까? developer.android.com/reference/android/support/design/widget/…
안드로이드 개발자

@SoheilSetayeshi 아, 알았어. 감사합니다. 그렇다면 대답을 업데이트해야 할 수도 있습니다.
안드로이드 개발자

1
그러나 이것은 지원 라이브러리 23.0.0 이하의 API에 대한 완벽한 솔루션입니다. 내 말은 화오! 훌륭한 답변!
sud007

6

사진 표시기 사용 :

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

6

xml에서 :

app:tabIndicatorColor="#fff"

자바에서 :

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


0

이 줄을 코드에 넣으십시오. 색상을 변경하는 경우 괄호 안의 색상 값을 변경하십시오.

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

0

Android를 사용하면 쉽습니다.

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

그래서 우리는

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

그러면 파란색 일반 색상과 보라색 선택 색상이 제공됩니다.

이제 우리는 높이를 설정합니다

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

그리고 높이에 대해 우리는

mycooltablayout.setSelectedIndicatorHeight(6);
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.