wake-up-neo.com

Wie ändere ich die Farbe des Symbols der ausgewählten Registerkarte von TabLayout?

Ich verwende eine TabLayout mit einer ViewPager und frage mich, wie ich die Farbe des Symbols der ausgewählten Registerkarte im TabLayout am effizientesten ändern kann.

Eine perfekte Referenz dafür, wie dies implementiert wird, ist Google Youtube App . Auf der Hauptseite befinden sich vier Symbole, die dunkelgrau sind. Wenn eine bestimmte Registerkarte ausgewählt wird, wird das Symbol der Registerkarte weiß.

Ohne Fremdbibliotheken Wie kann ich den gleichen Effekt erzielen?

Eine mögliche Lösung ist offenbar mit Selektoren. In diesem Fall müsste ich jedoch eine weiße und eine graue Version des Symbols finden und dann das Symbol wechseln, wenn die Registerkarte ausgewählt oder deaktiviert wird. Ich frage mich, ob es eine effektivere Methode gibt, bei der ich einfach die Symbolfarbe oder etwas hervorheben kann. Ich habe das in keinem Tutorial gefunden.

EDIT

Die Lösung, die ich oben direkt erwähne, erfordert die Verwendung von zwei Zeichenelementen für jedes Tab-Symbol. Ich frage mich, ob es eine Möglichkeit gibt, programmgesteuert mitONEdrawable für jedes Tab-Symbol zu arbeiten.

javaandroidmobilematerial-designandroid-tablayout
55
wayway

Ich habe einen Weg gefunden, der einfach sein kann. 

    viewPager = (ViewPager) findViewById(R.id.viewpager);
    setupViewPager(viewPager);

    tabLayout = (TabLayout) findViewById(R.id.tabs);
    tabLayout.setupWithViewPager(viewPager);
    tabLayout.setOnTabSelectedListener(
            new TabLayout.ViewPagerOnTabSelectedListener(viewPager) {

                @Override
                public void onTabSelected(TabLayout.Tab tab) {
                    super.onTabSelected(tab);
                    int tabIconColor = ContextCompat.getColor(context, R.color.tabSelectedIconColor);
                    tab.getIcon().setColorFilter(tabIconColor, PorterDuff.Mode.SRC_IN);
                }

                @Override
                public void onTabUnselected(TabLayout.Tab tab) {
                    super.onTabUnselected(tab);
                    int tabIconColor = ContextCompat.getColor(context, R.color.tabUnselectedIconColor);
                    tab.getIcon().setColorFilter(tabIconColor, PorterDuff.Mode.SRC_IN);
                }

                @Override
                public void onTabReselected(TabLayout.Tab tab) {
                    super.onTabReselected(tab);
                }
            }
    );
75
Cristian Hoyos
private void setupTabIcons() {
    tabLayout.getTabAt(0).setIcon(tabIcons[0]);
    tabLayout.getTabAt(1).setIcon(tabIcons[1]);
    tabLayout.getTabAt(2).setIcon(tabIcons[2]);
    tabLayout.getTabAt(3).setIcon(tabIcons[3]);

    tabLayout.getTabAt(0).getIcon().setColorFilter(Color.GREEN, PorterDuff.Mode.SRC_IN);
    tabLayout.getTabAt(1).getIcon().setColorFilter(Color.parseColor("#a8a8a8"), PorterDuff.Mode.SRC_IN);
    tabLayout.getTabAt(2).getIcon().setColorFilter(Color.parseColor("#a8a8a8"), PorterDuff.Mode.SRC_IN);
    tabLayout.getTabAt(3).getIcon().setColorFilter(Color.parseColor("#a8a8a8"), PorterDuff.Mode.SRC_IN);


    tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            tab.getIcon().setColorFilter(Color.GREEN, PorterDuff.Mode.SRC_IN);

        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
            tab.getIcon().setColorFilter(Color.parseColor("#a8a8a8"), PorterDuff.Mode.SRC_IN);
        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {

        }
    });
}
37
Nurcahyadin

Sie können eine ColorStateList verwenden.

Erstellen Sie zunächst eine XML-Datei (z. B. /color/tab_icon.xml), die so aussieht und die unterschiedlichen Farbtöne für verschiedene Status definiert:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:color="@color/icon_light"
        Android:state_selected="true" />

    <item Android:color="@color/icon_light_inactive" />
</selector>

Dann fügen Sie dies Ihrem Code hinzu:

ColorStateList colors;
if (Build.VERSION.SDK_INT >= 23) {
    colors = getResources().getColorStateList(R.color.tab_icon, getTheme());
}
else {
    colors = getResources().getColorStateList(R.color.tab_icon);
}

for (int i = 0; i < tabLayout.getTabCount(); i++) {
    TabLayout.Tab tab = tabLayout.getTabAt(i);
    Drawable icon = tab.getIcon();

     if (icon != null) {
        icon = DrawableCompat.wrap(icon);
        DrawableCompat.setTintList(icon, colors);
    }
}

Zuerst greifen Sie die ColorStateList aus Ihrer XML-Datei auf (die Methode ohne Design ist veraltet, aber für Geräte vor Marshmallow erforderlich). Dann legen Sie für jedes Tab-Symbol als TintList die ColorStateList fest. Verwenden Sie DrawableCompat (Unterstützungsbibliothek), um auch ältere Versionen zu unterstützen.

Das ist es!

32
Felix Edelmann

Dafür müssen Sie die Registersymbole mit Hilfe der Auswahlklasse für jedes Register anpassen, z.

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

12
Anshul Tyagi

Überprüfen Sie den folgenden Code. Passen Sie Ihr Symbol an, eines ist Farbe und ein anderes ist keine Farbe.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item Android:drawable="@drawable/mybookings_select" Android:state_selected="true"/><!-- tab is selected(colored icon)-->
<item Android:drawable="@drawable/mybookings" /><!-- tab is not selected(normal no color icon)-->

3
Prathap Badavath

Warum verwenden Sie keine Icon-Fonts (wie Font Awesome) für Ihre Icons? Ändern Sie dann die Schriftart des Tabulatortexts in das gewünschte Zeichensymbol .ttf, und ändern Sie die ausgewählte Textfarbe in die Tabulatorsymbole!

Ich selbst habe diese Methode benutzt und es ist wirklich schön und sauber :)

richten Sie zunächst die Titel mit der gewünschten Symbolschriftart ein:

in string.xml:

    <string name="ic_calculator">&#xf1ec;</string>
    <string name="ic_bank">&#xf19c;</string>

dann in MainActivity.Java:

    private void setupViewPager(ViewPager viewPager) {
    ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
    adapter.addFragment(new FragmentBank(), getString(R.string.ic_bank));
    adapter.addFragment(new FragmentCalculate(), getString(R.string.ic_calculator));
    viewPager.setAdapter(adapter);
    }

Dann sollten Sie die Schriftart der Tab-Titel in font-awesome ändern:

    Typeface typeFaceFont = Typeface.createFromAsset(getAssets(), "fontawesome-webfont.ttf");

    TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
    tabLayout.setupWithViewPager(viewPager);
    ViewGroup vg = (ViewGroup) tabLayout.getChildAt(0);
    int tabsCount = vg.getChildCount();
    for (int j = 0; j < tabsCount; j++) {
        ViewGroup vgTab = (ViewGroup) vg.getChildAt(j);
        int tabChildsCount = vgTab.getChildCount();
        for (int i = 0; i < tabChildsCount; i++) {
            View tabViewChild = vgTab.getChildAt(i);
            if (tabViewChild instanceof TextView) {
                ((TextView) tabViewChild).setTypeface(typeFaceFont);
            }
        }
    }

und last but not least, legen Sie in Ihrer zugehörigen XML-Datei die Farbe für tabTextColor und tabSelectedTextColor fest:

<Android.support.design.widget.TabLayout
        Android:id="@+id/tabs"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:scrollbars="horizontal"
        Android:background="@color/colorPrimaryDark"
        app:tabSelectedTextColor="@color/colorAccent"
        app:tabTextColor="@color/textColorPrimary"
        app:tabIndicatorColor="@color/colorAccent"
        app:tabMode="fixed"
        app:tabGravity="fill"/>
</Android.support.design.widget.AppBarLayout>

und in colors.xml:

<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="colorHighlight">#FFFFFF</color>
    <color name="textColorPrimary">#E1E3F3</color>
</resources>
3
par4301

In Bezug auf die zweite Antwort, die zeigt, wie die Farbe separat eingestellt wird, fragen sich viele Leute, wie sie die Farbe des ersten Symbols entfernen können, während sie zum nächsten wechseln. Was Sie tun können, ist so zu gehen:

private void setupTabIcons() {
tabLayout.getTabAt(0).setIcon(tabIcons[0]);
tabLayout.getTabAt(1).setIcon(tabIcons[1]);
tabLayout.getTabAt(2).setIcon(tabIcons[2]);
tabLayout.getTabAt(3).setIcon(tabIcons[3]);

tabLayout.getTabAt(0).getIcon().setColorFilter(Color.GREEN, PorterDuff.Mode.SRC_IN);
tabLayout.getTabAt(1).getIcon().setColorFilter(Color.WHITE, PorterDuff.Mode.SRC_IN);
tabLayout.getTabAt(2).getIcon().setColorFilter(Color.WHITE, PorterDuff.Mode.SRC_IN);
tabLayout.getTabAt(3).getIcon().setColorFilter(Color.WHITE, PorterDuff.Mode.SRC_IN);


tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        tab.getIcon().setColorFilter(Color.GREEN,PorterDuff.Mode.SRC_IN);

    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
        //for removing the color of first icon when switched to next tab
        tablayout.getTabAt(0).getIcon().clearColorFilter();
        //for other tabs
        tab.getIcon().clearColorFilter();

    }

    @Override
    public void onTabReselected(TabLayout.Tab tab) {

    }
});}

Ich hätte die zweite Antwort kommentiert, hatte aber nicht genug Ruf dafür! Es tut uns leid. Aber folgen Sie bitte, dass Sie Ihre Zeit und Ihre Kopfschmerzen sparen würden! Viel Spaß beim Lernen

1
Alok

Eine Möglichkeit, das Symbol "hervorzuheben", besteht darin, auf die Bildansicht zuzugreifen und den Farbfilter einzustellen. Versuchen Sie es mit der ImageView-Methode setColorFilter (int color) und wenden Sie die Farbe weiß an. 

1
Yaw Asare

Dies kann sehr einfach und vollständig in XML erfolgen. 

Fügen Sie Ihrem TabLayout in Ihrem XML-Code eine app:tabIconTint="@color/your_color_selector"-Zeile hinzu, wie folgt:

 <Android.support.design.widget.TabLayout
     Android:id="@+id/tab_layout"
     Android:layout_width="match_parent"
     Android:layout_height="wrap_content"
     app:tabIconTint="@color/your_color_selector"
     app:tabIndicatorColor="@color/selected_color"/>

Erstellen Sie dann eine Farbauswahldatei (oben "your_color_selector.xml" genannt) im Verzeichnis res/color:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:color="@color/selected_color" Android:state_selected="true"/>
    <item Android:color="@color/unselected_color"/>
</selector>

Dies setzt voraus, dass Sie in Ihrer colors.xml-Datei zwei Farben haben, "selected_color" und "unselected_color".

1
Vin Norman

Sie können die Textfarbe der ausgewählten Registerkarte mithilfe des folgenden XML-Attributs des Registerkartenlayouts ändern:

app:tabSelectedTextColor="your desired color"

Um die Symbolfarbe der ausgewählten Registerkarte anzupassen, müssen Sie den Selektor verwenden. Erstellen Sie eine XML-Datei in einem zeichnungsfähigen Ordner:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
   <item Android:color="selected_item_color" Android:state_activated="true" />
   <item Android:color="unselected_item_color" />
</selector>

und fügen Sie diesen Selektor wie folgt zum XML-Attribut des Registerkartenlayouts hinzu:

app:tabIconTint="@drawable/name_of_file"
0
Shrinivasan

tabLayout.setOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewPager) {...} Ist veraltet. Verwenden Sie eher

tabLayout.addOnTabSelectedListener(new TabLayout.BaseOnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            int tabIconColor = ContextCompat.getColor(context, R.color.tabSelectedIconColor);
            tab.getIcon().setColorFilter(tabIconColor, PorterDuff.Mode.SRC_IN);
        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
            int tabIconColor = ContextCompat.getColor(context, R.color.tabUnselectedIconColor);
            tab.getIcon().setColorFilter(tabIconColor, PorterDuff.Mode.SRC_IN);
        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {

        }
    });
0
Ememobong AkpanEkpo

Überprüfen Sie den folgenden Code:

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        if(tab.getPosition() == 0){
            tabLayout.getTabAt(0).setIcon(tabIcons1[0]);
        }
        if(tab.getPosition() == 1){
            tabLayout.getTabAt(1).setIcon(tabIcons1[1]);
        }
        if(tab.getPosition() == 2){
            tabLayout.getTabAt(2).setIcon(tabIcons1[2]);
        }
    }
    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
        tabLayout.getTabAt(0).setIcon(tabIcons[0]);
        tabLayout.getTabAt(1).setIcon(tabIcons[1]);
        tabLayout.getTabAt(2).setIcon(tabIcons[2]);
    }
    @Override
    public void onTabReselected(TabLayout.Tab tab) {
    }
});
0
Karunya Nepolian

Sie können addOnTabSelectedListener verwenden, es funktioniert bei mir.

tablayout = findViewById(R.id.viewall_tablayout);
pager = findViewById(R.id.viewall_pager);
adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFragments(new RestFragment(),"Restaurant");
adapter.addFragments(new BarFragment(),"Bar");
adapter.addFragments(new HotelFragment(),"Hotel");
adapter.addFragments(new CoffeeFragment(),"Coffee Shop");
pager.setAdapter(adapter);
tablayout.setupWithViewPager(pager);

tablayout.getTabAt(0).setIcon(R.drawable.ic_restaurant);
tablayout.getTabAt(1).setIcon(R.drawable.ic_glass_and_bottle_of_wine);
tablayout.getTabAt(2).setIcon(R.drawable.ic_hotel_black_24dp);
tablayout.getTabAt(3).setIcon(R.drawable.ic_hot_coffee);

tablayout.getTabAt(0).getIcon().setTint(getResources().getColor(R.color.colorAccent,getTheme()));
tablayout.getTabAt(1).getIcon().setTint(getResources().getColor(R.color.colorAccent,getTheme()));
tablayout.getTabAt(2).getIcon().setTint(getResources().getColor(R.color.colorAccent,getTheme()));
tablayout.getTabAt(3).getIcon().setTint(getResources().getColor(R.color.colorAccent,getTheme()));
tablayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        tab.getIcon().setTint(getResources().getColor(R.color.colorPrimary,getTheme()));
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
        tab.getIcon().setTint(getResources().getColor(R.color.colorAccent,getTheme()));
    }

    @Override
    public void onTabReselected(TabLayout.Tab tab) {

    }
});
0
Shakthi Dilshan