CollapsingToolbarLayout: Thay đổi màu của nút trang chủ khi mở rộng

Question

Tôi đã triển khai CollapsingToolbarLayout mới từ mã ví dụ Chris Banes.

Tuy nhiên, hình ảnh cho chế độ xem hình ảnh phông nền có tất cả nền trắng. Chủ đề của thanh công cụ là ThemeOverlay.AppCompat.Dark.ActionBar vì vậy các biểu tượng cũng màu trắng, vì vậy tôi không thể nhìn thấy nút trang chủ khi CollapsingToolbarLayout được mở rộng hoàn toàn.

Với app:expandedTitleTextAppearance tôi có thể đặt màu cho trường tiêu đề. Có khả năng thiết lập màu sắc của các nút trang chủ và biểu tượng menu không?

Answer 1

Trong mắt tôi đây là chỉ có thể nếu bạn thay đổi drawables của nút home, các biểu tượng menu và nút tràn. May mắn thay Google có cung cấp cho chúng ta một API mới được gọi là Tinted Drawables cho phép chúng ta thiết lập các Collor của một hình ảnh drawable hoặc chín-vá. Dưới đây là cách hoạt động:

<?xml version="1.0" encoding="utf-8"?> 
<bitmap 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:src="@android:drawable/ic_menu_camera" 
    android:tint="@color/menu_icon_color"/> 

Bây giờ bạn có thể sử dụng mới được xác định Drawable này giống như bất kỳ khác trong cách bố trí của bạn. Đối với nút home và nút tràn bạn cũng phải ghi đè lên các định nghĩa kiểu như vậy:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> 
    <item name="android:homeAsUpIndicator">@drawable/tinted_home_button</item> 
    <item name="android:actionOverflowButtonStyle">@style/OverFlowButton</item> 
</style> 

<style name="OverFlowButton" parent="AppTheme"> 
    <item name="android:src">@drawable/tinted_overflow_button</item> 
</style> 

Tất cả những thứ (trừ các định nghĩa phong cách) là tiếc là chỉ có sẵn trên mức API trên 21 và không được đưa vào thư viện hỗ trợ. Nếu bạn phải hỗ trợ các thiết bị thấp hơn thì Lollipop tôi nghĩ cách tốt nhất là sử dụng Android Assets Studio nơi bạn có thể tự mình tô màu các biểu tượng và tải chúng xuống dưới dạng tệp png.

Answer 2

Các nút home, nút tràn, và một số lựa chọn biểu tượng chứng khoán từ sdk bị ảnh hưởng bởi colorControlNormal:

<style name="ActionBar" parent="ThemeOverlay.AppCompat.Dark.ActionBar"> 
    <item name="colorControlNormal">@color/accent</item> 
</style> 

Nếu bạn có các biểu tượng khác, bạn sẽ cần phải lặp qua và tự lọc chúng:

@Override 
public boolean onCreateOptionsMenu(Menu menu) { 
    getMenuInflater().inflate(R.menu.sample_actions, menu); 

    for(int i = 0; i < menu.size(); i++){ 
     Drawable drawable = menu.getItem(i).getIcon(); 
     if(drawable != null) { 
      drawable.mutate(); 
      drawable.setColorFilter(getResources().getColor(R.color.accent), PorterDuff.Mode.SRC_ATOP); 
     } 
    } 

    return true; 
} 

Answer 3

Dưới đây là ví dụ làm thế nào tôi thay đổi ngăn kéo và các tùy chọn biểu tượng màu của tôi khi bố trí được mở rộng và sụp đổ:

protected void onCreate(Bundle savedInstanceState) { 
      AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.app_bar_layout); 
      appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() { 
       @Override 
       public void onOffsetChanged(AppBarLayout appBarLayout, int offset) 
       { 
        Drawable upArrow = ResourcesCompat.getDrawable(getResources(), R.drawable.drawer_icon, null); 
        if (offset < -200) 
        { 
         upArrow.setColorFilter(Color.parseColor("#000000"), PorterDuff.Mode.SRC_ATOP); 
         getSupportActionBar().setHomeAsUpIndicator(upArrow); 

         Drawable drawable = ContextCompat.getDrawable(getApplicationContext(),R.drawable.option_menu_icon); 
         drawable.setColorFilter(Color.parseColor("#000000"), PorterDuff.Mode.SRC_ATOP); 
         toolbar.setOverflowIcon(drawable); 
        } 
        else 
        { 

         upArrow.setColorFilter(Color.parseColor("#ffffff"), PorterDuff.Mode.SRC_ATOP); 
         getSupportActionBar().setHomeAsUpIndicator(upArrow); 
         getSupportActionBar().setDisplayHomeAsUpEnabled(true); 

         Drawable drawable = ContextCompat.getDrawable(getApplicationContext(),R.drawable.option_menu_icon); 
         drawable.setColorFilter(Color.parseColor("#ffffff"), PorterDuff.Mode.SRC_ATOP); 
         toolbar.setOverflowIcon(drawable); 
        } 
     } 
});