Jak zmienić kolor ikony hamburgera w szufladzie nawigacji Material Design

88

Podążam za tym przykładem

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

iw tym przykładzie pokazuje białą ikonę hamburgera, chcę ją dostosować i uczynić czarną, ale nie jestem w stanie znaleźć nic, jak to zmienić, czy ktoś może powiedzieć, jak ją dostosować?

Oczywisty

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

styl

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

Główna aktywność

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);
        }
    }
Aditya
źródło
po prostu użyj następującej linii <item name = "homeAsUpIndicator"> @ drawable / icon_top_menu </item> w motywie style.xml. ,, zamień icon_top_menu na niestandardowy plik do rysowania
Reprator
dodaję to <item name = "homeAsUpIndicator"> @ drawable / icon_top_menu </item> .. teraz możesz powiedzieć, co robić ..
Aditya
dodaj kolejny obraz do swojego rysunku z wybraną ikoną menu burgera w kolorze i zamień icon_top_menu na powyższy
Nitesh
icon_top_menu powinno być obrazem, prawda?
Aditya
dodałem jeden obraz <item name = "homeAsUpIndicator"> @ drawable / hamburger </item> jego styl pokazujący biały obraz
Aditya

Odpowiedzi:

230

Aby zmienić kolor ikony hamburgera, musisz otworzyć klasę „style.xml”, a następnie wypróbować ten kod:

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

Więc sprawdź <item name="color">@android:color/black</item>linię. Po prostu zmień tutaj wybrany kolor.

Anand Singh
źródło
w każdym razie możesz sprawdzić ten link na github.com/codepath/android_guides/wiki/… . Ma dobry tutorial.
Anand Singh
więc napisz powyższy kod w swojej MainActivity, zadziała.
Anand Singh
ale nie pozwala na pobranie
Aditya
Dobra odpowiedź. Czy wiesz, jak zamiast tego zmienić kolor ikony dla wybranych czynności?
AndroidDevBro
63

zrób to programowo dodaj tę linię

actionBarDrawerToggle.getDrawerArrowDrawable().setColor(getResources().getColor(R.color.white));
Sai Gopi Me
źródło
ale jak możemy uzyskać odniesienie do actionBarDrawerToggle? (uruchomienie sugerowanego kodu zwróci wartość null, ponieważ nie mamy odniesienia do actionBarDrawerToggle)
Daron
1
Nie szukaj dalej, Sai Gopi N odpowiedział poprawnie na pytanie. Aby odpowiedzieć Daronowi, musisz zrobić przykład w swojej głównej działalności. ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle (this, drawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close);
KeepAtIt
15

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

2. w style.xml.

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

3. Następnie twoja główna klasa motywu (nazwa pliku style.xml). Mam „AppTheme”.

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
         <item name="drawerArrowStyle">@style/DrawerIcon</item>
    </style>
Jigish
źródło
13

Zastępowanie colorControlNormal również działa.

<item name="colorControlNormal">@android:color/holo_red_dark</item>
user1689757
źródło
8

W tym celu możesz postępować w następujący sposób:

protected ActionBarDrawerToggle drawerToggle;

drawerToggle.getDrawerArrowDrawable().setColor(getResources().getColor(R.color.black));
Venky
źródło
@Gratien Asimbahwe, ten kod, który opublikowałeś, ulegnie awarii, ponieważ nie ma odniesienia do drawerToggle .... jak możemy uzyskać odniesienie?
Daron
8

yourProject / res / values ​​/ styles.xml

w pliku styles.xml dodaj:

<style name="BaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <item name="colorControlNormal">@color/white</item> 
</style>
smarteist
źródło
tylko dla API 20 i
nowszych
2
<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorTransparent"

usuń też motywy

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

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

Usuń to

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

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

na koniec dodaj to

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

Do twojego głównego hemu

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

    </style>
Dobre życie
źródło
1

Działa to dobrze, gdy ustawisz app: theme = "@ style / MyMaterialTheme"

Sudeep Kaushik
źródło
Lub jeśli dopasujesz nazwę motywu manifestu systemu Android do nazwy stylu w pliku styles.xml.
Nic Parmee
0

Po 2 godzinach walki ten post mi pomógł. W przykładzie materiału Androidhive zmień kolor podstawowy na inny, aby uzyskać nowy kolor paska akcji. poniższy kod służy do umieszczania znaku strzałki na pasku akcji i tworzenia niestandardowego tekstu. Wreszcie zrozumiałem, że ikona strzałki będzie znajdować się w plikach zasobów appcompat, ale ikona hamburgera nie będzie obecna w zasobach. jeśli jest obecny, możemy go zmienić w czasie wykonywania

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

aby zmienić przycisk home, poszedłem za @anandsingh answer.

Tarun Voora
źródło
2
To dość hacky i trudny do utrzymania sposób. Powiedziałbym, że byłoby lepiej nie robić nic, niż postępować zgodnie z tym. Może to jednak pomóc w znalezieniu próbki działającej na wersję demonstracyjną.
OlivierM
@Tarun Voora - to może być właśnie to, czego szukam ... szukam sposobu, aby to zmienić za pomocą kodu ... przyjrzę się temu w ciągu najbliższych kilku dni ... z góry dzięki! .. .Szukam ikony menu hamburgera ... ale to może wskazać mi właściwy kierunek.
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;
                }
Raktim Bhattacharya
źródło
0

Jeśli chcesz zmienić kolor tylko na ikonę szuflady nawigacji, spróbuj tego:

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

bezpośrednio w pliku activity_drawer.xml

Gabry_Neo
źródło
-1

Ikona hamburgera jest kontrolowana przez twoją ActionBarDrawerToggleklasę akcji . Jeśli używasz bibliotek kompatybilnych z Androidem, co jest obecnie konieczne. Możesz zmienić kolor w następujący sposób:

    toggle?.drawerArrowDrawable?.color = ContextCompat.getColor(context, R.color.colorPrimary)
Ememobong AkpanEkpo
źródło
ten kod, który opublikowałeś, ulegnie awarii, ponieważ nie ma odniesienia do drawerToggle .... jak możemy uzyskać odniesienie?
Daron