การเปลี่ยนสีข้อความของรายการเมนูในลิ้นชักการนำทาง


90

ฉันพยายามเพิ่มธีมกลางคืนสำหรับแอปของฉันและฉันเสียเวลาเกือบสามชั่วโมงในการพยายามทำให้ข้อความและไอคอนในลิ้นชักการนำทางเปลี่ยนเป็นสีขาวพร้อมกับพื้นหลังสีเข้ม นี่คือวิธีที่ฉันพยายามจะทำonCreate()ในMainActivity.java:

navigationView = (NavigationView) findViewById(R.id.navigation_view);
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {

    // This method will trigger onItemClick of navigation menu
    @Override
    public boolean onNavigationItemSelected(MenuItem menuItem) {

        // Checking if the item is in checked state or not, if not make it in checked state
        if (menuItem.isChecked())
            menuItem.setChecked(false);
        else menuItem.setChecked(true);

        if (nightMode == 0) {
            SpannableString spanString = new SpannableString(menuItem.getTitle().toString());
            spanString.setSpan(new ForegroundColorSpan(Color.WHITE), 0, spanString.length(), 0); // fix the color to white
            menuItem.setTitle(spanString);
        }

nightModeบูลไม่เกี่ยวข้องเพราะการทำงาน เมื่อตั้งค่าโหมดกลางคืนเป็นเปิด (0) รายการเมนูใด ๆ ที่เลือกไว้ในลิ้นชักการนำทางจะเปลี่ยนเป็นสีขาว อย่างไรก็ตามจะเกิดขึ้นเฉพาะเมื่อเลือกแต่ละรายการซึ่งไม่สะดวกอย่างเห็นได้ชัด นี่คือ drawer_dark.xml ของฉัน:

    <?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group
        android:checkableBehavior="single">
        <item
            android:id="@+id/unitone"
            android:checked="true"
            android:icon="@drawable/one_white"
            android:title="Classical Period" />
        <item
            android:id="@+id/unittwo"
            android:checked="false"
            android:icon="@drawable/two_white"
            android:title="Postclassical Period" />
        <item
            android:id="@+id/unitthree"
            android:checked="false"
            android:icon="@drawable/three_white"
            android:title="Early Modern Era" />
        <item
            android:id="@+id/unitfour"
            android:checked="false"
            android:icon="@drawable/four_white"
            android:title="Dawn of Industrial Age" />
        <item
            android:id="@+id/unitfive"
            android:checked="false"
            android:icon="@drawable/five_white"
            android:title="Modern Era" />
    </group>
</menu>

ฉันใช้ไอคอนสีขาวบนพื้นหลังโปร่งใสสำหรับแต่ละรายการ แต่จะแสดงเป็นสีดำบนพื้นหลังสีดำของลิ้นชักการนำทาง ฉันพยายามมองหาวิธีแก้ปัญหา xml เพื่อเปลี่ยนสีของข้อความและฉันเกาหัวเพราะฉันไม่รู้ว่าทำไมถึงถูกมองข้าม

ใครช่วยเสนอวิธีแก้ปัญหาแบบไดนามิกให้ฉันได้ในสิ่งที่ฉันพยายามบรรลุ ขอความช่วยเหลือทั้งหมดขอบคุณ!

แก้ไข: ฉันไม่ได้ใช้ไลบรารีของบุคคลที่สาม แต่เป็น NavigationView ที่มีให้ในไลบรารีการสนับสนุน นี่คือรูปแบบ XML:

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:elevation="7dp"
    tools:context=".MainActivity"
    android:fitsSystemWindows="true" >

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <FrameLayout
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/ColorDark" />

        <include layout="@layout/toolbar" />

    </FrameLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:background="#000"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/header"
        app:menu="@menu/drawer" />

</android.support.v4.widget.DrawerLayout>

ทำไมคุณไม่เปลี่ยนธีมกิจกรรมจากLightเป็นDarkและกลับกัน ..
เอมิล

@Boss ด้วยวิธีการตั้งโปรแกรมแอปของฉันมันจะเป็นกระบวนการที่น่าเบื่อ ฉันมีธีมกลางวัน / กลางคืนนี้ทำงานได้อย่างสมบูรณ์แบบในทุกที่ยกเว้นลิ้นชักการนำทางของฉันดังนั้นสิ่งที่ฉันต้องการคือการแก้ไขสำหรับสิ่งนั้น
wasimsandhu

คำตอบ:


248
 <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:background="#000"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/header"
        app:itemTextColor="your color"
        app:menu="@menu/drawer" />

29
การดำเนินการนี้จะกำหนดสีของทุกรายการในลิ้นชักการนำทางเป็น "สีของคุณ" มีวิธีเปลี่ยนสีทีละกลุ่มสำหรับทุกกลุ่มของลิ้นชักหรือไม่?
Akeshwar Jha

2
@Akeshwar คุณสามารถลองทำตามโปรแกรมได้อย่างไรก็ตามฉันไม่แนะนำให้ทำเช่นนั้นเนื่องจากขัดต่อหลักเกณฑ์ของวัสดุ
Abdellah Benhammou

ใช่มีวิธีเปลี่ยนสีทีละสีด้วย!

2
@NehaTyagi วิธีเปลี่ยนรูปแบบตัวอักษรในรายการเมนูจาก xml
Chetan Joshi

@Hara Hara Mahadevaki ช่วยบอกทีได้ไหม?
anju jo

44

ใช้แอพ: itemIconTint ใน NavigationView ของคุณ ej:

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:itemTextColor="@color/customColor"
    app:itemIconTint="@color/customColor"
    android:fitsSystemWindows="true"
    app:headerLayout="@layout/nav_header_home"
    app:menu="@menu/activity_home_drawer" />

3
และสีข้อความของรายการที่เลือกคืออะไร?
Usman Rana

28

NavigationViewsetItemTextColor()มีวิธีการที่เรียกว่า มันใช้ไฟล์ColorStateList.

// FOR NAVIGATION VIEW ITEM TEXT COLOR
int[][] state = new int[][] {
        new int[] {-android.R.attr.state_enabled}, // disabled
        new int[] {android.R.attr.state_enabled}, // enabled
        new int[] {-android.R.attr.state_checked}, // unchecked
        new int[] { android.R.attr.state_pressed}  // pressed

};

int[] color = new int[] {
        Color.WHITE,
        Color.WHITE,
        Color.WHITE,
        Color.WHITE
};

ColorStateList csl = new ColorStateList(state, color);


// FOR NAVIGATION VIEW ITEM ICON COLOR
int[][] states = new int[][] {
        new int[] {-android.R.attr.state_enabled}, // disabled
        new int[] {android.R.attr.state_enabled}, // enabled
        new int[] {-android.R.attr.state_checked}, // unchecked
        new int[] { android.R.attr.state_pressed}  // pressed

};

int[] colors = new int[] {
        Color.WHITE,
        Color.WHITE,
        Color.WHITE,
        Color.WHITE
};

ColorStateList csl2 = new ColorStateList(states, colors);

นี่คือที่ที่ฉันได้รับคำตอบ จากนั้นทันทีหลังจากกำหนด NavigationView ของฉัน:

if (nightMode == 0) {
            navigationView.setItemTextColor(csl);
            navigationView.setItemIconTintList(csl2);
        }

สวัสดีมีวิธีเปลี่ยนสีของทุกกลุ่มของลิ้นชักการนำทางทีละรายการหรือไม่?
Akeshwar Jha

ยังคงเป็นสีเทา

จะเปลี่ยนสีข้อความกลุ่มได้อย่างไร?
อารีย์

15

ตัวเลือกเพิ่มเติม:

คุณยังสามารถเปลี่ยนชื่อกลุ่มได้โดยการแทนที่ "textColorSecondary"

ใน styles.xml ของคุณ

<style name="AppTheme.NavigationView">
    <item name="android:textColorSecondary">#FFFFFF</item>
</style>

ในเค้าโครงของคุณ

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:menu="@menu/activity_main_menu_drawer_drawer"
    android:theme="@style/AppTheme.NavigationView"
    app:itemIconTint="@color/colorPrimary"
    app:itemTextColor="@color/white"/>

โซลูชันนี้ช่วยฉันแก้ไขปัญหาสีของฉัน ขอขอบคุณ!
Mark Delphi

10

เพิ่มแอป: itemTextColor = "# fff"ใน NavigationView ของคุณเช่น

 <android.support.design.widget.NavigationView
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    app:menu="@menu/slider_menu"
    android:background="@color/colorAccent"
    app:itemTextColor="#fff"
    android:id="@+id/navigation_view"
    android:layout_gravity="start"/>

6

ฉันใช้รหัสด้านล่างเพื่อเปลี่ยนสีข้อความของลิ้นชักการนำทางในแอปของฉัน

NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setItemTextColor(ColorStateList.valueOf(Color.WHITE));

4

ในอนาคตหากใครมาที่นี่โดยใช้ Navigation Drawer Activity (จัดทำโดย Studio ในหน้าต่าง Activity Prompt)

คำตอบคือ -

ใช้สิ่งนี้ก่อน OnCreate () ใน MainActivity

int[][] state = new int[][] {
        new int[] {android.R.attr.state_checked}, // checked
        new int[] {-android.R.attr.state_checked}
};

int[] color = new int[] {
        Color.rgb(255,46,84),
        (Color.BLACK)
};

ColorStateList csl = new ColorStateList(state, color);

int[][] state2 = new int[][] {
        new int[] {android.R.attr.state_checked}, // checked
        new int[] {-android.R.attr.state_checked}
};

int[] color2 = new int[] {
        Color.rgb(255,46,84),
        (Color.GRAY)
};

ColorStateList csl2 = new ColorStateList(state2, color2);

และใช้สิ่งนี้ใน onNavigationItemSelected () ใน MainActivity (คุณไม่จำเป็นต้องเขียนฟังก์ชันนี้หากคุณใช้กิจกรรม Navigation Drawer จะถูกเพิ่มใน MainActivity)

 NavigationView nav = (NavigationView) findViewById(R.id.nav_view);
    nav.setItemTextColor(csl);
    nav.setItemIconTintList(csl2);
    nav.setItemBackgroundResource(R.color.white);

เคล็ดลับ - เพิ่มรหัสนี้ก่อน If else Condition ใน onNavigationItemSelected ()


4

สิ่งนี้ใช้ได้กับฉัน แทนธีมที่กำหนดเองคุณสามารถใส่ธีมในสไตล์ ในรหัสนี้คุณยังสามารถเปลี่ยนแบบอักษรและขนาดตัวอักษรได้

    <style name="MyTheme.NavMenu" parent="CustomTheme">
            <item name="android:textSize">16sp</item>
            <item name="android:fontFamily">@font/ssp_semi_bold</item>
            <item name="android:textColorPrimary">@color/yourcolor</item>
        </style>

นี่คือมุมมองการนำทางของฉัน

<android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:theme="@style/MyTheme.NavMenu"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer">

        <include layout="@layout/layout_update_available"/>

    </android.support.design.widget.NavigationView>

4

คุณสามารถทำได้ง่ายๆโดยเพิ่มธีมของคุณในมุมมองการนำทางของคุณ

    <android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    android:background="@color/colorPrimary"
    android:theme="@style/AppTheme.NavigationView"
    app:headerLayout="@layout/nav_header_drawer"
    app:menu="@menu/activity_drawer_drawer"/>

และในไฟล์ style.xml ของคุณคุณจะเพิ่มธีมนี้

   <style name="AppTheme.NavigationView" >
    <item name="colorPrimary">@color/text_color_changed_onClick</item>
    <item name="android:textColorPrimary">@color/Your_default_text_color</item>
</style>

4

คุณสามารถใช้ drawables ใน

แอป: แอป itemTextColor: itemIconTint

จากนั้นคุณสามารถควบคุมสถานะที่ตรวจสอบและสถานะปกติโดยใช้ drawable

<android.support.design.widget.NavigationView
            android:id="@+id/nav_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:itemHorizontalPadding="@dimen/margin_30"
            app:itemIconTint="@drawable/drawer_item_color"
            app:itemTextColor="@drawable/drawer_item_color"
            android:theme="@style/NavigationView"
            app:headerLayout="@layout/nav_header"
            app:menu="@menu/drawer_menu">

drawer_item_color.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/selectedColor" android:state_checked="true" />
    <item android:color="@color/normalColor" />
</selector>

3

ลองสิ่งนี้ในคลาส java

yourNavigationView.setItemTextColor(new ColorStateList(
            new int [] [] {
                    new int [] {android.R.attr.state_pressed},
                    new int [] {android.R.attr.state_focused},
                    new int [] {}
            },
            new int [] {
                    Color.rgb (255, 128, 192),
                    Color.rgb (100, 200, 192),
                    Color.WHITE
            }
    ));

2

สิ่งนี้อาจช่วยได้มันได้ผลสำหรับฉัน

ไปที่ activity_ "ชื่อกิจกรรมการนำทาง" .xml Inside NavigationView แทรกโค้ดนี้

app:itemTextColor="color of your choice"

2

ในกรณีของฉันฉันต้องเปลี่ยนสีของรายการเมนูเพียงรายการเดียว - "ออกจากระบบ" ฉันต้องเรียกใช้การเรียกซ้ำและเปลี่ยนสีชื่อ:

NavigationView nvDrawer;
Menu menu = nvDrawer.getMenu();
    for (int i = 0; i < menu.size(); i ++){
        MenuItem menuItem = menu.getItem(i);

        if (menuItem.getTitle().equals("Logout")){

            SpannableString spanString = new SpannableString(menuItem.getTitle().toString());
            spanString.setSpan(new ForegroundColorSpan(getResources().getColor(R.color.red)), 0, spanString.length(), 0);
            menuItem.setTitle(spanString);

        }

    }

ฉันทำสิ่งนี้ในเมธอด onCreate ของกิจกรรม


ทำไมไม่เพียงแค่ค้นหารายการด้วย ID?
Ahmed Awadallah

1

คุณยังสามารถกำหนดธีมแบบกำหนดเองที่ได้มาจากธีมพื้นฐานของคุณ:

<android.support.design.widget.NavigationView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:id="@+id/nav_view"
        app:headerLayout="@layout/nav_view_header"
        app:menu="@layout/nav_view_menu"
        app:theme="@style/MyTheme.NavMenu" />

จากนั้นในไฟล์ styles.xml ของคุณ:

  <style name="MyTheme.NavMenu" parent="MyTheme.Base">
    <item name="android:textColorPrimary">@color/yourcolor</item>
  </style>

คุณยังสามารถใช้แอตทริบิวต์เพิ่มเติมกับธีมที่กำหนดเองได้


1

หากต้องการเปลี่ยนสีข้อความของรายการเดียวให้ใช้ SpannableString ดังต่อไปนี้:

SpannableString spannableString = new SpannableString("Menu item"));
        spannableString.setSpan(new ForegroundColorSpan(getResources().getColor(R.color.colorPrimary)), 0, spannableString.length(), 0);

menu.findItem(R.id.nav_item).setTitle(spannableString);

0
 <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:itemBackground="@drawable/drawer_item_bg"
        app:headerLayout="@layout/nav_header_home"
        app:menu="@menu/app_home_drawer" />

การตั้งค่าพื้นหลังรายการโดยใช้ app: itemBackground

drawer_item_bg.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
    <item android:top="-2dp" android:right="-2dp" android:left="-2dp">
        <shape>
            <padding android:bottom="0dp" android:left="15dp" android:right="0dp" android:top="0dp"/>
            <solid android:color="@android:color/transparent" />
            <stroke
                android:width="0.5dp"
                android:color="#CACACA" />
        </shape>
    </item>
</layer-list>

0

itemIconTint หากคุณต้องการเปลี่ยนสีไอคอน

android.support.design.widget.NavigationView
            android:id="@+id/nav_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:fitsSystemWindows="true"
            app:itemTextColor="@color/colorPrimary"
            app:itemIconTint="@color/colorPrimary"
            app:headerLayout="@layout/nav_header_main"
            app:menu="@menu/activity_main_drawer" />

0

เพื่อเปลี่ยนสีข้อความของ Navigation Drawer

เราใช้ app:itemTextColor="@color/white"

เพื่อเปลี่ยนสีของการนำทาง Drawer

ใช้ app:itemIconTint="@color/black"


    <com.google.android.material.navigation.NavigationView
        android:id="@+id/naView"
        app:itemIconTint="@color/black"
        android:layout_width="match_parent"
        app:menu="@menu/navmenu"
        app:itemTextColor="@color/white"
        app:headerLayout="@layout/nav_header"
        android:layout_height="match_parent"
        app:itemTextAppearance="?android:textAppearanceMedium"
        android:fitsSystemWindows="true"
        android:layout_gravity="start"
        />

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.