Thay đổi nền có thể vẽ của tiện ích tìm kiếm

Tôi đang cố gắng thay đổi drawable nằm trong tiện ích tìm kiếm trên thanh hành động Android.

Hiện tại nó trông như thế này:

nhưng tôi cần thay đổi màu xanh có thể vẽ thành màu đỏ.

Tôi đã thử nhiều thứ khi sử dụng tiện ích tìm kiếm của riêng mình, nhưng dường như không có gì hoạt động.

Ai đó có thể chỉ cho tôi đi đúng hướng để thay đổi điều này?

Giới thiệu

Thật không may, không có cách nào để đặt SearchViewkiểu trường văn bản bằng cách sử dụng các chủ đề, kiểu và kế thừa trong XML như bạn có thể làm với nền của các mục trong trình đơn thả xuống ActionBar . Điều này là do selectableItemBackground được liệt kê như styleable trong R.stylable, trong khi searchViewTextField(theme thuộc tính mà chúng ta đang quan tâm) không được. Do đó, chúng tôi không thể truy cập dễ dàng từ bên trong các tài nguyên XML (bạn sẽ gặp No resource found that matches the given name: attr 'android:searchViewTextField'lỗi).

Đặt nền trường văn bản SearchView từ mã

Vì vậy, cách duy nhất để thay thế nền của SearchViewtrường văn bản một cách chính xác là vào bên trong nó, có quyền truy cập vào chế độ xem có nền được thiết lập dựa trên searchViewTextFieldvà thiết lập nền của chúng ta.

LƯU Ý: Giải pháp bên dưới chỉ phụ thuộc vào id ( android:id/search_plate) của phần tử bên trong SearchView, do đó, phiên bản SDK độc lập hơn so với giao dịch trẻ em (ví dụ: sử dụng searchView.getChildAt(0)để có chế độ xem đúng trong SearchView), nhưng không chống đạn. Đặc biệt là nếu một số nhà sản xuất quyết định thực hiện lại phần bên trong SearchViewvà phần tử có id được đề cập ở trên - mã sẽ không hoạt động.

Trong SDK, nền cho trường văn bản SearchViewđược khai báo thông qua chín bản vá , vì vậy chúng tôi sẽ thực hiện theo cách tương tự. Bạn có thể tìm thấy hình ảnh png gốc trong thư mục drawable-mdpi của kho lưu trữ git Android . Chúng tôi quan tâm đến hai hình ảnh. Một trạng thái khi trường văn bản được chọn (có tên là textfield_search_selected_holo_light.9.png ) và một trạng thái không (tên là textfield_search_default_holo_light.9.png ).

Thật không may, bạn sẽ phải tạo các bản sao cục bộ của cả hai hình ảnh, ngay cả khi bạn chỉ muốn tùy chỉnh trạng thái tập trung . Điều này là do textfield_search_default_holo_lightkhông có trong R.drawable . Do đó, nó không dễ dàng truy cập thông qua @android:drawable/textfield_search_default_holo_light, có thể được sử dụng trong bộ chọn hiển thị bên dưới, thay vì tham chiếu có thể vẽ cục bộ.

LƯU Ý: Tôi đã sử dụng chủ đề Holo Light làm cơ sở, nhưng bạn có thể làm tương tự với Holo Dark . Dường như không có sự khác biệt thực sự trong các bản vá 9 trạng thái được chọn giữa các chủ đề Sáng và Tối . Tuy nhiên, có một sự khác biệt trong 9 bản vá cho trạng thái mặc định (xem Light vs Dark ). Vì vậy, có lẽ không cần phải tạo các bản sao 9 miếng cục bộ cho trạng thái được chọn , cho cả chủ đề Tối và Sáng (giả sử rằng bạn muốn xử lý cả hai và làm cho cả hai trông giống như trong Chủ đề Holo ). Chỉ cần tạo một bản sao cục bộ và sử dụng nó trongbộ chọn có thể vẽ cho cả hai chủ đề.

Bây giờ, bạn sẽ cần chỉnh sửa chín bản vá đã tải xuống theo nhu cầu của mình (tức là thay đổi màu xanh lam thành màu đỏ). Bạn có thể xem tệp bằng công cụ vẽ 9 bản vá để kiểm tra xem nó có được xác định chính xác sau khi chỉnh sửa không.

Tôi đã chỉnh sửa các tệp bằng GIMP bằng công cụ bút chì một pixel (khá dễ) nhưng có thể bạn sẽ sử dụng công cụ của riêng mình. Đây là bản vá 9 tùy chỉnh của tôi cho trạng thái tập trung :

LƯU Ý: Để đơn giản, tôi chỉ sử dụng hình ảnh cho mật độ mdpi . Bạn sẽ phải tạo 9 bản vá cho nhiều mật độ màn hình nếu, bạn muốn có kết quả tốt nhất trên mọi thiết bị. Hình ảnh cho Holo SearchView có thể được tìm thấy trong mdpi , hdpi và xhdpi drawable.

Bây giờ, chúng ta sẽ cần tạo bộ chọn có thể vẽ, để hình ảnh phù hợp được hiển thị dựa trên trạng thái xem. Tạo tập tin res/drawable/texfield_searchview_holo_light.xmlvới nội dung sau:

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true"
        android:drawable="@drawable/textfield_search_selected_holo_light" />
    <item android:drawable="@drawable/textfield_search_default_holo_light" />
</selector>

Chúng tôi sẽ sử dụng drawable được tạo ở trên để đặt nền cho LinearLayoutchế độ xem chứa trường văn bản bên trong SearchView- id của nó là android:id/search_plate. Vì vậy, đây là cách để làm điều này một cách nhanh chóng trong mã, khi tạo menu tùy chọn:

public class MainActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }       

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

        // Getting SearchView from XML layout by id defined there - my_search_view in this case
        SearchView searchView = (SearchView) menu.findItem(R.id.my_search_view).getActionView();
        // Getting id for 'search_plate' - the id is part of generate R file,
        // so we have to get id on runtime.
        int searchPlateId = searchView.getContext().getResources().getIdentifier("android:id/search_plate", null, null);
        // Getting the 'search_plate' LinearLayout.
        View searchPlate = searchView.findViewById(searchPlateId);
        // Setting background of 'search_plate' to earlier defined drawable.            
        searchPlate.setBackgroundResource(R.drawable.textfield_searchview_holo_light);          

        return super.onCreateOptionsMenu(menu);
    }

}

Hiệu quả cuối cùng

Đây là ảnh chụp màn hình của kết quả cuối cùng:

Làm thế nào tôi có được điều này

Tôi nghĩ rằng nó đáng để đo lường cách tôi đạt được điều này, để cách tiếp cận này có thể được sử dụng khi tùy chỉnh các chế độ xem khác.

Kiểm tra bố cục xem

Tôi đã kiểm tra SearchViewbố cục trông như thế nào. Trong công cụ tìm kiếm SearchView, người ta có thể tìm thấy một dòng làm tăng bố cục:

inflater.inflate(R.layout.search_view, this, true);

Bây giờ chúng ta biết rằng SearchViewbố trí là trong tập tin có tên res/layout/search_view.xml. Nhìn vào search_view.xml chúng ta có thể tìm thấy một LinearLayoutphần tử bên trong (có id search_plate) có android.widget.SearchView$SearchAutoCompletebên trong nó (trông giống như trường văn bản xem tìm kiếm của chúng ta):

    <LinearLayout
        android:id="@+id/search_plate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_gravity="center_vertical"
        android:orientation="horizontal"
        android:background="?android:attr/searchViewTextField">

Bây giờ, chúng tôi bây giờ nền được đặt dựa trên searchViewTextFieldthuộc tính của chủ đề hiện tại .

Điều tra thuộc tính (nó có thể dễ dàng giải quyết?)

Để kiểm tra cách đặt searchViewTextFieldthuộc tính, chúng tôi điều tra res / value / Themes.xml . Có một nhóm các thuộc tính liên quan đến SearchViewmặc định Theme:

<style name="Theme">
    <!-- (...other attributes present here...) -->

    <!-- SearchView attributes -->
    <item name="searchDropdownBackground">@android:drawable/spinner_dropdown_background</item>
    <item name="searchViewTextField">@drawable/textfield_searchview_holo_dark</item>
    <item name="searchViewTextFieldRight">@drawable/textfield_searchview_right_holo_dark</item>
    <item name="searchViewCloseIcon">@android:drawable/ic_clear</item>
    <item name="searchViewSearchIcon">@android:drawable/ic_search</item>
    <item name="searchViewGoIcon">@android:drawable/ic_go</item>
    <item name="searchViewVoiceIcon">@android:drawable/ic_voice_search</item>
    <item name="searchViewEditQuery">@android:drawable/ic_commit_search_api_holo_dark</item>
    <item name="searchViewEditQueryBackground">?attr/selectableItemBackground</item>

Chúng tôi thấy rằng đối với chủ đề mặc định, giá trị là @drawable/textfield_searchview_holo_dark. Đối với Theme.Lightgiá trị cũng được đặt trong tập tin đó .

Bây giờ, sẽ thật tuyệt nếu thuộc tính này có thể truy cập được thông qua R.stylizable , nhưng, thật không may là nó không. Để so sánh, hãy xem các thuộc tính chủ đề khác hiện diện cả trong Themes.xml và R.attr như textAppparent hoặc selectableItemBackground . Nếu searchViewTextFieldđã có mặt trong R.attr(và R.stylable), chúng ta chỉ cần sử dụng bộ chọn có thể vẽ được khi xác định chủ đề cho toàn bộ ứng dụng của mình bằng XML. Ví dụ:

<resources xmlns:android="http://schemas.android.com/apk/res/android">

    <style name="AppTheme" parent="android:Theme.Light">
        <item name="android:searchViewTextField">@drawable/textfield_searchview_holo_light</item>
    </style>
</resources>

Những gì cần được sửa đổi?

Bây giờ chúng tôi biết rằng chúng tôi sẽ phải truy cập search_platethông qua mã. Tuy nhiên, chúng ta vẫn không biết nó sẽ trông như thế nào. Nói tóm lại, chúng tôi tìm kiếm các drawable được sử dụng làm giá trị trong các chủ đề mặc định: textfield_searchview_holo_dark.xml và textfield_searchview_holo_light.xml . Nhìn vào nội dung, chúng ta thấy rằng drawable là selectortham chiếu hai drawable khác (xảy ra là 9-patch sau này) dựa trên trạng thái view. Bạn có thể tìm thấy các bản vẽ 9 bản vá tổng hợp từ (gần như) tất cả các phiên bản Android trên androiddrawables.com

Tùy chỉnh

Chúng tôi nhận ra đường màu xanh lam trong một trong 9 miếng vá , vì vậy chúng tôi tạo bản sao cục bộ của nó và thay đổi màu sắc theo ý muốn.

Các giải pháp trên có thể không hoạt động nếu bạn đang sử dụng thư viện appcompat. Bạn có thể phải sửa đổi mã để làm cho nó hoạt động cho thư viện appcompat.

Đây là giải pháp làm việc cho thư viện appcompat.

  @Override
  public boolean onCreateOptionsMenu(Menu menu)
  {

    getMenuInflater().inflate(R.menu.main_menu, menu); 

    SearchManager searchManager = (SearchManager) getSystemService(Context.SEARCH_SERVICE);
    MenuItem searchMenuItem = menu.findItem(R.id.action_search);
    SearchView searchView = (SearchView) MenuItemCompat.getActionView(searchMenuItem);
    searchView.setSearchableInfo(searchManager.getSearchableInfo(getComponentName()));

    SearchView.SearchAutoComplete searchAutoComplete = (SearchView.SearchAutoComplete)searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text);
    searchAutoComplete.setHintTextColor(Color.WHITE);
    searchAutoComplete.setTextColor(Color.WHITE);

    View searchplate = (View)searchView.findViewById(android.support.v7.appcompat.R.id.search_plate);
    searchplate.setBackgroundResource(R.drawable.texfield_searchview_holo_light);

    ImageView searchCloseIcon = (ImageView)searchView.findViewById(android.support.v7.appcompat.R.id.search_close_btn);
    searchCloseIcon.setImageResource(R.drawable.abc_ic_clear_normal);

    ImageView voiceIcon = (ImageView)searchView.findViewById(android.support.v7.appcompat.R.id.search_voice_btn);
    voiceIcon.setImageResource(R.drawable.abc_ic_voice_search);

    ImageView searchIcon = (ImageView)searchView.findViewById(android.support.v7.appcompat.R.id.search_mag_icon);
    searchIcon.setImageResource(R.drawable.abc_ic_search);


    return super.onCreateOptionsMenu(menu);
}

onCreateOptionsMenuPhương pháp của bạn phải là:

@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.option, menu);
        SearchView searchView = (SearchView) menu.findItem(R.id.menu_search).getActionView();
        int linlayId = getResources().getIdentifier("android:id/search_plate", null, null);
        ViewGroup v = (ViewGroup) searchView.findViewById(linlayId);
        v.setBackgroundResource(R.drawable.searchviewredversion);
        return super.onCreateOptionsMenu(menu);
    }

mục tìm kiếm của bạn ở đâu menu_search không đúng khóa học

và đây là searchviewredversion(phiên bản này là phiên bản xhdpi): http://img836.imageshack.us/img836/5964/searchviewredversion.png

Giải pháp trên không hoạt động với ActionBarSherlock 4.2 và do đó, nó không tương thích ngược với Android 2.x. Đây là mã làm việc để thiết lập nền SearchView và văn bản gợi ý trên ActionBarSherlock 4.2:

public static void styleSearchView(SearchView searchView, Context context) {
    View searchPlate = searchView.findViewById(R.id.abs__search_plate);
    searchPlate.setBackgroundResource(R.drawable.your_custom_drawable);
    AutoCompleteTextView searchText = (AutoCompleteTextView) searchView.findViewById(R.id.abs__search_src_text);
    searchText.setHintTextColor(context.getResources().getColor(R.color.your_custom_color));
}

Tôi đã mệt mỏi để làm điều này là tốt và tôi đang sử dụng v7. Ứng dụng đã bị sập khi tôi cố lấy searchPlatethông qua getIdentifier()vì vậy tôi đã thực hiện theo cách này:

View searchPlate = searchView.findViewById(android.support.v7.appcompat.R.id.search_plate);

Tôi cũng gặp phải vấn đề tương tự. Tôi đã sử dụng thư viện appcompat v7 và xác định kiểu tùy chỉnh cho nó. Trong thư mục drawable, đặt tệp bottom_border.xml trông như thế này:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
  <shape >
      <solid android:color="@color/blue_color" />
  </shape>
</item>
<item android:bottom="0.8dp"
  android:left="0.8dp"
  android:right="0.8dp">
  <shape >
      <solid android:color="@color/background_color" />
  </shape>
</item>

<!-- draw another block to cut-off the left and right bars -->
<item android:bottom="2.0dp">
  <shape >
      <solid android:color="@color/main_accent" />
  </shape>
 </item>
</layer-list>

Trong thư mục giá trị style_myactionbartheme.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <style name="AppnewTheme" parent="Theme.AppCompat.Light">
    <item name="android:windowBackground">@color/background</item>
    <item name="android:actionBarStyle">@style/ActionBar</item>
    <item name="android:actionBarWidgetTheme">@style/ActionBarWidget</item>
</style> 
<!-- Actionbar Theme -->
<style name="ActionBar" parent="Widget.AppCompat.Light.ActionBar.Solid.Inverse">
    <item name="android:background">@color/main_accent</item>
    <!-- <item name="android:icon">@drawable/abc_ic_ab_back_holo_light</item> -->
</style> 
<style name="ActionBarWidget" parent="Theme.AppCompat.Light">
    <!-- SearchView customization-->
     <!-- Changing the small search icon when the view is expanded -->
    <!-- <item name="searchViewSearchIcon">@drawable/ic_action_search</item> -->
     <!-- Changing the cross icon to erase typed text -->
  <!--   <item name="searchViewCloseIcon">@drawable/ic_action_remove</item> -->
     <!-- Styling the background of the text field, i.e. blue bracket -->
    <item name="searchViewTextField">@drawable/bottom_border</item>
     <!-- Styling the text view that displays the typed text query -->
    <item name="searchViewAutoCompleteTextView">@style/AutoCompleteTextView</item>        
</style>

  <style name="AutoCompleteTextView" parent="Widget.AppCompat.Light.AutoCompleteTextView">
    <item name="android:textColor">@color/text_color</item>
  <!--   <item name="android:textCursorDrawable">@null</item> -->
    <!-- <item name="android:textColorHighlight">@color/search_view_selected_text</item> -->
</style>
</resources>

Tôi đã xác định tệp mã xác nhận để hiển thị menu:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:com.example.actionbartheme="http://schemas.android.com/apk/res-auto" >  

<item android:id="@+id/search"
      android:title="@string/search_title"
      android:icon="@drawable/search_buttonn" 
     com.example.actionbartheme:showAsAction="ifRoom|collapseActionView"   
                 com.example.actionbartheme:actionViewClass="android.support.v7.widget.SearchView"/>

Hoạt động của bạn nên mở rộng ActionBarActivity thay vì Activity.

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

Trong tệp kê khai:

<application
    android:allowBackup="true"
    android:icon="@drawable/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/AppnewTheme" >

Để biết thêm thông tin, xem tại đây:
Tại đây http://www.jayway.com/2014/06/02/android-theming-the-actionbar/

Cập nhật

Nếu bạn đang sử dụng AndroidX thì bạn có thể làm như thế này

    View searchPlate = svSearch. findViewById(androidx.appcompat.R.id.search_plate);
    if (searchPlate != null) {
        AutoCompleteTextView searchText = searchPlate.findViewById(androidx.appcompat.R.id.search_src_text);
        if (searchText != null){
            searchText.setTextSize(TypedValue.COMPLEX_UNIT_PX, getResources().getDimension(R.dimen.edittext_text_size));
            searchText.setMaxLines(1);
            searchText.setSingleLine(true);
            searchText.setTextColor(getResources().getColor(R.color.etTextColor));
            searchText.setHintTextColor(getResources().getColor(R.color.etHintColor));
            searchText.setBackground(null);
        }
    }

Trước tiên, hãy tạo một tệp XML có tên search_widget_background.xml, để được sử dụng làm thư mục drawable, tức là trong thư mục drawable.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <solid android:color="@color/red" />

</shape>

Drawable này sẽ được sử dụng làm nền cho widget tìm kiếm của chúng tôi. Tôi đặt màu thành màu đỏ vì đó là những gì bạn yêu cầu, nhưng bạn có thể đặt màu đó thành bất kỳ màu nào được xác định bởi thẻ @color. Bạn thậm chí có thể sửa đổi nó thêm bằng cách sử dụng các thuộc tính được xác định cho thẻ hình dạng (tạo các góc tròn, làm nền hình bầu dục, v.v.).

Bước tiếp theo là đặt nền của tiện ích tìm kiếm của chúng tôi thành cái này. Điều này có thể được thực hiện bằng cách sau:

    public boolean onCreateOptionsMenu(Menu menu) {

        SearchView searchView = (SearchView)menu.findItem(R.id.my_search_view).getActionView();
        Drawable d = getResources().getDrawable(R.drawable.search_widget_background);
        searchView.setBackground(d);
...
    }

public boolean onCreateOptionsMenu(Menu menu) {
........

        // Set the search plate color
        int linlayId = getResources().getIdentifier("android:id/search_plate", null, null);
        View view = searchView.findViewById(linlayId);
        Drawable drawColor = getResources().getDrawable(R.drawable.searchcolor);
        view.setBackground( drawColor );
........
    }

và đây là tệp tìm kiếm

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
  <item>
      <shape >
          <solid android:color="#ffffff" />
      </shape>
  </item>

  <!-- main color -->
  <item android:bottom="1.5dp"
      android:left="1.5dp"
      android:right="1.5dp">
      <shape >
          <solid android:color="#2c4d8e" />
      </shape>
  </item>

  <!-- draw another block to cut-off the left and right bars -->
  <item android:bottom="18.0dp">
      <shape >
          <solid android:color="#2c4d8e" />
      </shape>
  </item>
</layer-list>

Tôi đã giải thích ở phần cuối của bài đăng này với hình ảnh này được áp dụng cho các hình thức xamarin. Nhưng tôi nghĩ bạn có thể hiểu nó, bởi vì nó dựa trên mã nguồn tìm kiếm của Android

Làm cách nào để thay đổi hình ảnh nút hủy trên thanh tìm kiếm ở dạng xamarin

Nếu bạn đang thổi phồng Searchview như thế này "getMothyInflater (). Inflate (R.menu.search_menu, menu);". Sau đó, bạn có thể tùy chỉnh tìm kiếm này thông qua style.xml như bên dưới.

<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
      <item name="searchViewStyle">@style/SearchView.ActionBar</item>
</style>

<style name="SearchView.ActionBar" parent="Widget.AppCompat.SearchView.ActionBar">
      <item name="queryBackground">@drawable/drw_search_view_bg</item>
      <item name="searchHintIcon">@null</item>
      <item name="submitBackground">@null</item>
      <item name="closeIcon">@drawable/vd_cancel</item>
      <item name="searchIcon">@drawable/vd_search</item>
</style>

Tôi đã đào về điều đó rất nhiều và cuối cùng tôi đã tìm thấy giải pháp này và nó hiệu quả với tôi!
Bạn có thể sử dụng cái này

Nếu bạn sử dụng appcompat, hãy thử điều này:

ImageView searchIconView = (ImageView) searchView.findViewById(android.support.v7.appcompat.R.id.search_button);
searchIconView.setImageResource(R.drawable.yourIcon);

Nếu bạn sử dụng androidx hãy thử điều này:

ImageView searchIconView = (ImageView) searchView.findViewById(androidx.appcompat.R.id.search_button);
    searchIconView.setImageResource(R.drawable.yourIcon);

Nó sẽ thay đổi biểu tượng serchview mặc định.

Hy vọng nó giúp!