Cara mengubah warna ikon hamburger di laci navigasi desain material


88

Saya mengikuti contoh ini

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

dan dalam contoh ini ditampilkan ikon hamburger berwarna putih, saya ingin menyesuaikannya dan menjadikannya hitam, tetapi saya tidak dapat menemukan apa pun tentang cara mengubahnya, dapatkah ada yang tahu cara menyesuaikannya?

Nyata

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

gaya

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

Aktifitas utama

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

cukup gunakan baris berikut <item name = "homeAsUpIndicator"> @ drawable / icon_top_menu </item> di tema style.xml. ,, ganti icon_top_menu dengan drawable khusus
Reprator

saya menambahkan <item name = "homeAsUpIndicator"> @ drawable / icon_top_menu </item> ini .. sekarang Anda dapat mengetahui apa yang harus dilakukan ..
Aditya

tambahkan gambar lain di drawable Anda dengan ikon menu burger warna yang diinginkan dan ganti icon_top_menu dengan gambar di atas
Nitesh

icon_top_menu harus gambar kan?
Aditya

saya menambahkan satu gambar <item name = "homeAsUpIndicator"> @ drawable / hamburger </item> gambar stilnya menampilkan gambar putih
Aditya

Jawaban:


232

Untuk mengubah warna ikon hamburger Anda harus membuka kelas "style.xml", lalu coba kode ini:

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

Jadi periksa <item name="color">@android:color/black</item>baris. Ubah saja warna yang Anda inginkan di sini.


bagaimanapun Anda dapat memeriksa tautan github.com/codepath/android_guides/wiki/… ini . Ini memiliki tutorial yang bagus.
Anand Singh

jadi tulis kode di atas di MainActivity Anda, itu akan berhasil.
Anand Singh

tetapi tidak memungkinkan untuk mengunduh
Aditya


Jawaban yang bagus. Apakah Anda kebetulan tahu cara mengubah warna ikon untuk aktivitas yang dipilih?
AndroidDevBro

63

lakukan secara terprogram tambahkan baris ini

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

tapi bagaimana kita mendapatkan referensi ke actionBarDrawerToggle? (menjalankan kode yang Anda sarankan akan menghasilkan nol karena kami tidak mereferensikan ke actionBarDrawerToggle)
Daron

1
Tidak perlu mencari lagi, Sai Gopi N menjawab pertanyaan dengan benar. Untuk menjawab Daron, Anda harus membuat contoh dalam aktivitas utama Anda. ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle (ini, drawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close);
KeepAtIt

15

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

2. Dalam style.xml.

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

3. Kemudian kelas tema utama Anda (Nama file style.xml). Saya memiliki "AppTheme".

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

13

Mengganti colorControlNormal juga berfungsi.

<item name="colorControlNormal">@android:color/holo_red_dark</item>

9

Untuk itu Anda dapat melanjutkan sebagai berikut:

protected ActionBarDrawerToggle drawerToggle;

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

@Gratien Asimbahwe kode yang Anda posting ini akan macet karena tidak ada referensi ke drawerToggle .... bagaimana cara kita mendapatkan referensi?
Daron

8

yourProject / res / values ​​/ styles.xml

di styles.xml tambahkan:

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

hanya untuk API 20 dan lebih tinggi
Paixols

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

hapus tema juga

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

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

pindahkan ini

*** app: popupTheme = "@ style / AppThemeNoActionBar.PopupOverlay">

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

akhirnya tambahkan ini

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

Ke heme utama Anda

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

    </style>

1

Ini berfungsi dengan baik saat Anda menyetel app: theme = "@ style / MyMaterialTheme"


Atau jika Anda mencocokkan nama tema manifes Android Anda dengan nama gaya di styles.xml Anda.
Nic Parmee

0

Setelah perjuangan selama 2 jam, postingan ini membantu saya. Dalam contoh material Androidhive, ubah warna primer ke warna lain untuk mendapatkan warna bilah tindakan baru. kode di bawah ini untuk mendapatkan tanda panah pada bilah tindakan dan membuat teks kustom. Akhirnya saya mengerti bahwa, ikon panah akan ada di file sumber daya appcompat tetapi ikon hamburger tidak ada di sumber daya. jika ada, kita dapat mengubahnya saat runtime

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

untuk mengubah tombol home, saya mengikuti jawaban @anandsingh.


2
Itu cara yang cukup hacky dan sulit dipelihara .. Menurut saya akan lebih baik tidak melakukan apa pun daripada mengikuti ini. Itu bisa membantu untuk mendapatkan sampel yang berfungsi untuk demo.
OlivierM

@Tarun Voora - ini mungkin yang saya cari ... saya sedang mencari cara untuk mengubahnya menggunakan kode ... saya akan memeriksanya dalam beberapa hari ke depan ... terima kasih sebelumnya! .. Saya mencari ikon menu hamburger ... tapi ini mungkin mengarahkan saya ke arah yang benar.
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

Jika Anda ingin mengubah warna hanya ke ikon panel samping navigasi Anda, coba ini:

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

langsung di activity_drawer.xml Anda


-1

Ikon hamburger dikontrol oleh ActionBarDrawerTogglekelas tindakan Anda . Jika Anda menggunakan perpustakaan compat android yang harus seperti sekarang. Anda dapat mengubah warna seperti ini:

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

kode yang Anda posting ini akan macet karena tidak ada referensi ke drawerToggle .... bagaimana kita mendapatkan referensi?
Daron
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.