Cách thay đổi màu của biểu tượng bánh hamburger trong ngăn điều hướng thiết kế material design


88

Tôi đang làm theo ví dụ này

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

và trong ví dụ này, nó hiển thị biểu tượng bánh hamburger màu trắng, tôi muốn tùy chỉnh nó và làm cho nó màu đen, nhưng tôi không thể tìm thấy gì để thay đổi nó, có ai có thể cho biết cách tùy chỉnh nó không?

Rõ ràng

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

Phong cách

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

Hoạt động chủ yêu

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

chỉ cần sử dụng dòng sau <item name = "homeAsUpIndicator"> @ drawable / icon_top_menu </item> trong chủ đề style.xml. ,, thay icon_top_menu bằng tùy chỉnh có thể vẽ
Reprator

tôi thêm cái này <item name = "homeAsUpIndicator"> @ drawable / icon_top_menu </item> .. bạn có thể cho biết phải làm gì không ..
Aditya

thêm một hình ảnh khác trong có thể vẽ của bạn với biểu tượng menu bánh mì kẹp thịt màu mong muốn và thay icon_top_menu bằng biểu tượng ở trên
Nitesh

icon_top_menu phải là hình ảnh đúng không?
Aditya

tôi đã thêm một hình ảnh <item name = "homeAsUpIndicator"> @ drawable / hamburger </item> nó hiển thị hình ảnh màu trắng
Aditya

Câu trả lời:


230

Để thay đổi màu của biểu tượng bánh hamburger, bạn phải mở lớp "style.xml", sau đó thử mã này:

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

Vì vậy, kiểm tra <item name="color">@android:color/black</item>dòng. Chỉ cần thay đổi màu sắc mong muốn của bạn ở đây.


Dù sao bạn cũng có thể kiểm tra liên kết github.com/codepath/android_guides/wiki/… này . Nó có hướng dẫn tốt.
Anand Singh

vì vậy hãy viết mã trên trong MainActivity của bạn, nó sẽ hoạt động.
Anand Singh

nhưng nó không cho phép tải xuống
Aditya


Câu trả lời tốt. Bạn có tình cờ biết cách thay đổi màu của biểu tượng cho các hoạt động đã chọn không?
AndroidDevBro

63

làm điều đó theo chương trình thêm dòng này

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

nhưng làm thế nào để chúng ta có được một tham chiếu đến actionBarDrawerToggle? (chạy mã đề xuất của bạn sẽ trả về null vì chúng tôi không tham chiếu đến actionBarDrawerToggle)
Daron

1
Không cần tìm đâu xa, Sai Gopi N đã trả lời đúng câu hỏi. Để trả lời Daron, bạn phải tạo một ví dụ trong hoạt động chính của mình. ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle (cái này, ngăn kéoLayout, thanh công cụ, R.string.drawer_open, R.string.drawer_close);
KeepAtIt

15

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

2. trong style.xml.

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

3. Sau đó, lớp chủ đề chính của bạn (Tên tệp style.xml). Tôi có “AppTheme”.

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

13

Ghi đè colorControlNormal cũng hoạt động.

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

8

Đối với điều đó, bạn có thể tiến hành như sau:

protected ActionBarDrawerToggle drawerToggle;

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

@Gratien Asimbahwe mã này bạn đã đăng sẽ bị lỗi vì không có tham chiếu đến DrakeToggle .... làm cách nào để chúng tôi có được tham chiếu?
Daron

8

yourProject / res / values ​​/ styles.xml

trong styles.xml thêm:

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

chỉ dành cho API 20 trở lên
Paixols

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

xóa chủ đề quá

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

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

tháo cái này

*** ứng dụng: popupTheme = "@ style / AppThemeNoActionBar.PopupOverlay">

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

cuối cùng thêm cái này

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

Đến heme chính của bạn

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

    </style>

1

Điều này hoạt động tốt khi bạn đặt ứng dụng: theme = "@ style / MyMaterialTheme"


Hoặc nếu bạn khớp tên chủ đề tệp kê khai Android của mình với tên kiểu trong styles.xml của bạn.
Nic Parmee

0

Sau 2 giờ đấu tranh, bài viết này đã giúp tôi. Trong ví dụ về vật liệu Androidhive, hãy thay đổi màu chính thành màu khác để nhận được màu thanh hành động mới. mã bên dưới này là để lấy dấu mũi tên trên thanh tác vụ và tạo văn bản tùy chỉnh. Cuối cùng, tôi hiểu rằng, biểu tượng mũi tên sẽ có trong tệp tài nguyên appcompat nhưng biểu tượng bánh hamburger không có trong tài nguyên. nếu nó hiện diện, chúng tôi có thể thay đổi nó trong thời gian chạy

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

để thay đổi nút trang chủ, tôi đã theo dõi câu trả lời của @anandsingh.


2
Đó là một cách khá hack và khó duy trì .. Tôi muốn nói rằng tốt hơn là không làm bất cứ điều gì hơn là làm theo điều này. Tuy nhiên, điều đó có thể hữu ích để có được một mẫu làm việc cho một bản demo.
OlivierM

@Tarun Voora - đây có thể chỉ là những gì tôi đang tìm kiếm ... tôi đang tìm cách thay đổi nó bằng cách sử dụng mã ... tôi sẽ xem xét vấn đề này trong vòng vài ngày tới ... cảm ơn trước! .. . Tuy nhiên, tôi đang tìm biểu tượng menu bánh hamburger ... nhưng điều này có thể chỉ cho tôi đúng hướng.
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

Nếu bạn chỉ muốn thay đổi màu cho biểu tượng ngăn điều hướng của mình, hãy thử cách này:

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

ngay trong activity_drawer.xml của bạn


-1

Biểu tượng bánh hamburger được kiểm soát bởi ActionBarDrawerTogglelớp hành động của bạn . Nếu bạn đang sử dụng các thư viện compat android đó là điều bắt buộc hiện nay. Bạn có thể thay đổi màu như sau:

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

mã này mà bạn đã đăng sẽ bị lỗi vì không có tham chiếu đến DrakeToggle .... làm thế nào để chúng tôi có được tham chiếu?
Daron
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.