วิธีเปลี่ยนสีของไอคอนแฮมเบอร์เกอร์ในลิ้นชักการนำทางออกแบบวัสดุ


88

ฉันกำลังทำตามตัวอย่างนี้

http://www.androidhive.info/2015/04/android-getting-started-with-material-design/

และในตัวอย่างนี้แสดงไอคอนแฮมเบอร์เกอร์เป็นสีขาวฉันต้องการปรับแต่งและทำให้เป็นสีดำ แต่ฉันไม่พบสิ่งใดที่จะเปลี่ยนแปลงได้มีใครบอกวิธีปรับแต่งได้ไหม

ประจักษ์

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="info.androidhive.materialdesign" >


    <uses-permission android:name="android.permission.INTERNET"></uses-permission>

    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"></uses-permission>
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/MyMaterialTheme" >
        <activity
            android:name=".activity.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

สไตล์

<resources>

    <style name="MyMaterialTheme" parent="MyMaterialTheme.Base">

    </style>

    <style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="homeAsUpIndicator">@drawable/hamburger</item>
    </style>

</resources>

กิจกรรมหลัก

public class MainActivity extends AppCompatActivity implements FragmentDrawer.FragmentDrawerListener {

    private static String TAG = MainActivity.class.getSimpleName();

    private Toolbar mToolbar;
    private FragmentDrawer drawerFragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
       mToolbar = (Toolbar) findViewById(R.id.toolbar);

        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayShowHomeEnabled(true);

        drawerFragment = (FragmentDrawer)
                getSupportFragmentManager().findFragmentById(R.id.fragment_navigation_drawer);
        drawerFragment.setUp(R.id.fragment_navigation_drawer, (DrawerLayout) findViewById(R.id.drawer_layout), mToolbar);
        drawerFragment.setDrawerListener(this);

        // display the first navigation drawer view on app launch
        displayView(0);
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        if(id == R.id.action_search){
            Toast.makeText(getApplicationContext(), "Search action is selected!", Toast.LENGTH_SHORT).show();
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

    @Override
    public void onDrawerItemSelected(View view, int position) {
        displayView(position);
    }

    private void displayView(int position) {
        Fragment fragment = null;
        String title = getString(R.string.app_name);
        switch (position) {
            case 0:
                fragment = new HomeFragment();
                title = getString(R.string.title_home);
                break;
            case 1:
                fragment = new FriendsFragment();
                title = getString(R.string.title_friends);
                break;
            case 2:
                fragment = new MessagesFragment();
                title = getString(R.string.title_messages);
                break;
            case 3:
                fragment = new ContactUsFragment();
                title = getString(R.string.title_contactus);
                break;
            case 4:
                fragment = new AboutUsFragment();
                title = getString(R.string.title_aboutus);
                break;
            default:
                break;
        }

        if (fragment != null) {
            FragmentManager fragmentManager = getSupportFragmentManager();
            FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
            fragmentTransaction.replace(R.id.container_body, fragment);
            fragmentTransaction.commit();

            // set the toolbar title
            getSupportActionBar().setTitle(title);
        }
    }

เพียงใช้บรรทัดต่อไปนี้ <item name = "homeAsUpIndicator"> @ drawable / icon_top_menu </item> ในธีม style.xml แทนที่ icon_top_menu ด้วยการวาดที่กำหนดเอง
Reprator

ฉันเพิ่ม <item name = "homeAsUpIndicator"> @ drawable / icon_top_menu </item> .. บอกได้ไหมว่าต้องทำอะไร ..
Aditya

เพิ่มรูปภาพอื่นในรูปวาดของคุณด้วยไอคอนเมนูเบอร์เกอร์สีที่ต้องการและแทนที่ icon_top_menu ด้วยด้านบน
Nitesh

icon_top_menu ควรเป็นภาพใช่ไหม
Aditya

ฉันเพิ่มรูปภาพหนึ่งรูป <item name = "homeAsUpIndicator"> @ drawable / hamburger </item> ของมันแสดงภาพสีขาว
Aditya

คำตอบ:


232

ในการเปลี่ยนสีของไอคอนแฮมเบอร์เกอร์คุณต้องเปิดคลาส "style.xml" จากนั้นลองใช้รหัสนี้:

<style name="MyMaterialTheme" parent="MyMaterialTheme.Base">

</style>

<style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
</style>

<style name="DrawerArrowStyle" parent="@style/Widget.AppCompat.DrawerArrowToggle">
    <item name="spinBars">true</item>
    <item name="color">@android:color/black</item>
</style>

ดังนั้นตรวจสอบ<item name="color">@android:color/black</item>บรรทัด เพียงแค่เปลี่ยนสีที่คุณต้องการที่นี่


อย่างไรก็ตามคุณสามารถตรวจสอบลิงก์github.com/codepath/android_guides/wiki/…นี้ได้ มีการสอนที่ดี
Anand Singh

ดังนั้นเขียนโค้ดด้านบนใน MainActivity ของคุณมันจะทำงาน
Anand Singh

แต่ไม่อนุญาตให้ดาวน์โหลด
Aditya

ขอให้เรายังคงอภิปรายนี้ในการแชท
Aditya

คำตอบที่ดี. คุณจะรู้วิธีเปลี่ยนสีของไอคอนสำหรับกิจกรรมที่เลือกแทนหรือไม่?
AndroidDevBro

63

เพิ่มบรรทัดนี้โดยทางโปรแกรม

actionBarDrawerToggle.getDrawerArrowDrawable().setColor(getResources().getColor(R.color.white));

แต่เราจะได้รับการอ้างอิงถึง actionBarDrawerToggle ได้อย่างไร (การเรียกใช้รหัสที่คุณแนะนำจะส่งคืนค่าว่างเนื่องจากเราไม่ได้อ้างอิงถึง actionBarDrawerToggle)
Daron

1
ไม่ต้องมองหาอะไรเพิ่มเติม Sai Gopi N ตอบคำถามได้อย่างถูกต้อง หากต้องการตอบ Daron คุณต้องสร้างตัวอย่างในกิจกรรมหลักของคุณ ActionBarDrawerToggle actionBarDrawerToggle = ActionBarDrawerToggle ใหม่ (this, drawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close);
KeepAtIt

15

1. ใน Color.xml<color name="hamburgerBlack">#000000</color>

2. ใน style.xml.

<style name="DrawerIcon" parent="Widget.AppCompat.DrawerArrowToggle">
        <item name="color">@color/hamburgerBlack</item>
    </style>

3. จากนั้นคลาสธีมหลักของคุณ (ชื่อไฟล์ style.xml) ฉันมี“ AppTheme”

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
         <item name="drawerArrowStyle">@style/DrawerIcon</item>
    </style>


9

สำหรับสิ่งนั้นคุณสามารถดำเนินการได้ดังนี้:

protected ActionBarDrawerToggle drawerToggle;

drawerToggle.getDrawerArrowDrawable().setColor(getResources().getColor(R.color.black));

@Gratien Asimbahwe รหัสนี้ที่คุณโพสต์จะขัดข้องเนื่องจากไม่มีการอ้างอิงถึง drawerToggle .... เราจะได้รับการอ้างอิงได้อย่างไร?
Daron

8

yourProject / res / values ​​/ styles.xml

ใน styles.xml เพิ่ม:

<style name="BaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <item name="colorControlNormal">@color/white</item> 
</style>

สำหรับ API 20 ขึ้นไปเท่านั้น
Paixols

2
<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorTransparent"

ลบธีมด้วย

    android:theme="@style/AppThemeNoActionBar.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
      ***

ลบสิ่งนี้

*** แอพ: popupTheme = "@ style / AppThemeNoActionBar.PopupOverlay">

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

สุดท้ายเพิ่มสิ่งนี้

 <style name="AppThemeNoActionBar" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

ไปยัง heme หลักของคุณ

        <item name="colorControlNormal">@color/colorRedTitle</item>

    </style>

1

ใช้งานได้ดีเมื่อคุณตั้งค่าแอป: theme = "@ style / MyMaterialTheme"


หรือถ้าคุณจับคู่ชื่อธีมรายการ Android กับชื่อสไตล์ใน styles.xml ของคุณ
Nic Parmee

0

หลังจากต่อสู้ 2 ชั่วโมงโพสต์นี้ช่วยฉัน ในตัวอย่างวัสดุ Androidhive ให้เปลี่ยนสีหลักเป็นสีอื่นเพื่อรับสีใหม่ของแถบการกระทำ โค้ดด้านล่างนี้ใช้สำหรับรับเครื่องหมายลูกศรบนแถบการทำงานและสร้างข้อความที่กำหนดเอง ในที่สุดฉันก็เข้าใจว่าไอคอนลูกศรจะอยู่ในไฟล์ทรัพยากร appcompat แต่ไอคอนแฮมเบอร์เกอร์ไม่มีอยู่ในทรัพยากร หากมีอยู่เราสามารถเปลี่ยนได้ที่รันไทม์

setSupportActionBar(toolbar);
        final Drawable upArrow = getResources().getDrawable(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
        upArrow.setColorFilter(getResources().getColor(R.color.black), PorterDuff.Mode.SRC_ATOP);
        getSupportActionBar().setHomeAsUpIndicator(upArrow);
        getSupportActionBar().setTitle(Html.fromHtml("<font color=\"black\">" + "All Addresses" + "</font>"));
        getSupportActionBar().show();

สำหรับการเปลี่ยนปุ่มโฮมฉันทำตามคำตอบของ @anandsingh


2
นั่นเป็นวิธีที่ค่อนข้างแฮ็คและดูแลรักษายาก .. ฉันว่าจะดีกว่าที่จะไม่ทำอะไรมากไปกว่านี้ ซึ่งสามารถช่วยในการหาตัวอย่างสำหรับการสาธิตได้
OlivierM

@Tarun Voora - นี่อาจเป็นเพียงสิ่งที่ฉันกำลังมองหา ... ฉันกำลังมองหาวิธีเปลี่ยนโดยใช้รหัส ... ฉันจะตรวจสอบสิ่งนี้ภายในสองสามวันถัดไป ... ขอบคุณล่วงหน้า! .. . ฉันกำลังมองหาไอคอนเมนูแฮมเบอร์เกอร์ ... แต่นี่อาจชี้ไปในทิศทางที่ถูกต้อง
Daron

0
//----------your own toolbar-----------------------------

            <?xml version="1.0" encoding="utf-8"?>
            <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:elevation="4dp"
                android:padding="1dp"
                android:background="@color/blue"
                >
                </android.support.v7.widget.Toolbar>

    //-----------Main activity xml, add your own toolbar-----------------------------------------------
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.v1technologies.sgcarel.FrameActivity">
        <include
            android:id="@+id/toolbar"
            layout="@layout/toolbar"
            />
        <FrameLayout
            android:padding="2dp"
            android:layout_marginTop="70dp"
            android:id="@+id/frame_frame_activity"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

    </FrameLayout>
    </RelativeLayout>


        //----  In your activity-----------------------

                   toolbar = (Toolbar) findViewById(R.id.toolbar);       
                    setSupportActionBar(toolbar);

            //===========================================================================

             @Override
                public boolean onCreateOptionsMenu(Menu menu) {
                    // Inflate the menu; this adds items to the action bar if it is present.
                    getMenuInflater().inflate(R.menu.menu_main, menu);

                    int color = Color.parseColor("#334412");
                    final PorterDuffColorFilter colorFilter = new PorterDuffColorFilter(color, PorterDuff.Mode.SRC_ATOP);

                    for (int i = 0; i < toolbar.getChildCount(); i++) {
                        final View v = toolbar.getChildAt(i);

                        if (v instanceof ImageButton) {
                            ((ImageButton) v).setColorFilter(colorFilter);
                        }
                    }
                    return true;
                }

0

หากคุณต้องการเปลี่ยนสีเพียงแค่ไอคอนลิ้นชักการนำทางให้ลองทำดังนี้:

<android.support.design.widget.NavigationView
    app:itemIconTint="@color/thecolorthatyouwant"
 />

ตรง activity_drawer.xml ของคุณ


-1

ไอคอนแฮมเบอร์เกอร์ควบคุมโดยActionBarDrawerToggleคลาสแอ็กชันของคุณ หากคุณใช้ไลบรารีที่เข้ากันได้กับ Android ซึ่งเป็นสิ่งจำเป็นในตอนนี้ คุณสามารถเปลี่ยนสีได้ดังนี้:

    toggle?.drawerArrowDrawable?.color = ContextCompat.getColor(context, R.color.colorPrimary)

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