Изменение фона виджета searchview

Я пытаюсь изменить рисование, которое находится в виджете Searchview панели действий Android.

На данный момент это выглядит так:

но мне нужно изменить синий фон на красный цвет.

Я пробовал много чего, кроме собственного виджета поиска, но ничего не работает.

Может ли кто-нибудь указать мне правильное направление, чтобы изменить это?

вступление

К сожалению, нет способа установить SearchViewстиль текстового поля с использованием тем, стилей и наследования в XML, как это можно сделать с фоном элементов в раскрывающемся списке ActionBar . Это происходит потому , что selectableItemBackground перечислено как styleable дюйма R.stylable, в то время как searchViewTextField(атрибут темы , что мы заинтересованы в) нет. Таким образом, мы не можем легко получить к нему доступ из ресурсов XML (вы получитеNo resource found that matches the given name: attr 'android:searchViewTextField' об ошибке).

Установка фона текстового поля SearchView из кода

Итак, единственный способ правильно заменить фон SearchViewтекстового поля - это проникнуть внутрь его, получить доступ к представлению, для которого задан фон, searchViewTextFieldи установить собственный.

ПРИМЕЧАНИЕ. Приведенное ниже решение зависит только от id ( android:id/search_plate) элемента внутри SearchView, поэтому оно более не зависит от версии SDK, чем обход дочерних элементов (например, использование searchView.getChildAt(0)для перехода к нужному виду внутри SearchView), но оно не является пуленепробиваемым. Особенно, если какой-то производитель решит доработать внутренностиSearchView а элемент с указанным выше идентификатором отсутствует - код не будет работать.

В SDK фон для текстового поля SearchViewобъявлен с помощью девяти патчей , поэтому мы сделаем это так же. Вы можете найти оригинальный PNG изображение в вытяжке-MDPI каталоге репозитория Android мерзавца . Нас интересуют два изображения. Один для состояния, когда выбрано текстовое поле (с именем textfield_search_selected_holo_light.9.png ), а другой для того, где его нет (с именем textfield_search_default_holo_light.9.png ).

К сожалению, вам придется создавать локальные копии обоих изображений, даже если вы хотите настроить только сфокусированное состояние. Это потому, что textfield_search_default_holo_lightего нет в R.drawable . Таким образом, к нему нелегко получить доступ @android:drawable/textfield_search_default_holo_light, который можно использовать в селекторе, показанном ниже, вместо ссылки на локальный drawable.

ПРИМЕЧАНИЕ. Я использовал тему Holo Light в качестве основы, но вы можете сделать то же самое с Holo Dark . Кажется, что нет никакой реальной разницы в выбранных 9-патчах состояния между темами Light и Dark . Однако есть разница в 9 патчах для состояния по умолчанию (см. « Свет против темноты» ). Так что, вероятно, нет необходимости делать локальные копии 9-патчей для выбранного состояния как для темной, так и для светлой тем (при условии, что вы хотите обрабатывать обе темы и сделать их так же, как в голографической теме ). Просто сделайте одну локальную копию и используйте ее вселектор для обеих тем.

Теперь вам нужно отредактировать загруженные девять патчей в соответствии с вашими потребностями (т.е. изменить синий цвет на красный). Вы можете взглянуть на файл с помощью инструмента draw 9-patch, чтобы проверить, правильно ли он определен после вашего редактирования.

Я редактировал файлы с помощью GIMP с помощью однопиксельного карандаша (довольно легко), но вы, вероятно, воспользуетесь своим собственным инструментом. Вот мой настроенный 9-патч для сфокусированного состояния :

ПРИМЕЧАНИЕ. Для простоты я использовал только изображения для плотности mdpi . Вам нужно будет создать 9 патчей для экрана с разной плотностью, если вы хотите добиться наилучшего результата на любом устройстве. Изображения для Holo SearchView можно найти в форматах mdpi , hdpi и xhdpi с возможностью рисования .

Теперь нам нужно создать настраиваемый селектор, чтобы правильное изображение отображалось в зависимости от состояния просмотра. Создайте файл res/drawable/texfield_searchview_holo_light.xmlсо следующим содержанием:

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

Мы будем использовать созданный выше объект для рисования, чтобы установить фон для LinearLayoutпредставления, содержащего текстовое поле внутри SearchView- его идентификатор android:id/search_plate. Вот как это быстро сделать в коде при создании меню параметров:

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

}

Окончательный эффект

Вот скриншот окончательного результата:

Как я до этого добрался

Думаю, стоит рассказать, как я к этому пришел, чтобы этот подход можно было использовать при настройке других представлений.

Проверка макета просмотра

Я проверил, как SearchViewвыглядит макет. В конструкторе SearchView можно найти строку, раздувающую макет:

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

Теперь мы знаем, что SearchViewмакет находится в файле с именем res/layout/search_view.xml. Заглянув в search_view.xml, мы можем найти внутренний LinearLayoutэлемент (с идентификатором search_plate), который находится android.widget.SearchView$SearchAutoCompleteвнутри него (похоже на наше текстовое поле просмотра поиска):

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

Теперь, когда фон установлен на основе searchViewTextFieldатрибута текущей темы .

Изучение атрибута (легко ли его настроить?)

Чтобы проверить, как установлен searchViewTextFieldатрибут, мы исследуем файл res / values ​​/ themes.xml . По SearchViewумолчанию есть группа атрибутов, связанных с 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>

Мы видим, что для темы по умолчанию значение равно @drawable/textfield_searchview_holo_dark. В этом файле также задаетсяTheme.Light значение For .

Было бы здорово, если бы этот атрибут был доступен через R.styleable , но, к сожалению, это не так. Для сравнения, увидеть другие тематические атрибуты , которые присутствуют как в themes.xml и R.attr как textAppearance или selectableItemBackground . Если бы searchViewTextFieldон присутствовал в R.attr(и R.stylable), мы могли бы просто использовать наш настраиваемый селектор при определении темы для всего нашего приложения в XML. Например:

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

Что нужно изменить?

Теперь мы знаем, что нам нужно будет получить доступ search_plateчерез код. Однако мы до сих пор не знаем, как это должно выглядеть. Короче говоря, мы ищем чертежи, используемые в качестве значений в темах по умолчанию: textfield_searchview_holo_dark.xml и textfield_searchview_holo_light.xml . Глядя на контент, мы видим, что drawable - это объект, selectorкоторый ссылается на два других чертежа (которые позже будут иметь 9 патчей) в зависимости от состояния представления. Вы можете найти агрегированные чертежи с 9 патчами (почти) для всех версий Android на androiddrawables.com

Пользовательская настройка

Мы узнаем синюю линию в одном из 9 участков , поэтому мы создаем ее локальную копию и меняем цвета по желанию.

Приведенные выше решения могут не работать, если вы используете библиотеку appcompat. Возможно, вам придется изменить код, чтобы он работал с библиотекой appcompat.

Вот рабочее решение для библиотеки 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);
}

Ваш onCreateOptionsMenuметод должен быть:

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

где ваш элемент поиска menu_searchне в курсе

и вот searchviewredversion(это версия xhdpi): http://img836.imageshack.us/img836/5964/searchviewredversion.png

Приведенное выше решение не работает с ActionBarSherlock 4.2 и, следовательно, не имеет обратной совместимости с Android 2.x. Вот рабочий код, который настраивает фон SearchView и текст подсказки на 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));
}

Я тоже устал это делать и использую v7. Приложение вылетело, когда я пытался захватить searchPlateпереход, getIdentifier()поэтому я сделал это следующим образом:

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

У меня возникла такая же проблема: я использовал библиотеку appcompat v7 и определил для нее собственный стиль. В папку с возможностью переноса поместите файл bottom_border.xml, который выглядит так:

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

В папке значений styles_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>

Я определил файл custommenu.xml для отображения меню:

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

Ваша активность должна расширять ActionBarActivity вместо 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);
}

В файле манифеста:

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

Для получения дополнительной информации смотрите здесь:
Здесь http://www.jayway.com/2014/06/02/android-theming-the-actionbar/

Обновить

Если вы используете AndroidX, вы можете сделать это так

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

Во-первых, давайте создадим XML-файл с именем search_widget_background.xml, который будет использоваться как файл для рисования, то есть в каталоге для рисования.

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

Этот объект будет использоваться в качестве фона для нашего виджета поиска. Я установил красный цвет, потому что это то, что вы просили, но вы можете установить любой цвет, определенный тегом @color. Вы даже можете изменить его дальше, используя атрибуты, определенные для тега формы. (сделать закругленные углы, сделать овальный фон и т. Д.).

Следующим шагом будет установка фона нашего виджета поиска на этот. Это можно сделать следующим образом:

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

и это файл searchchablecolor.xml

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

Я объяснил в конце этого поста изображениями, что это применимо к формам xamarin. Но я думаю, вы можете это понять, потому что он основан на исходном коде searchview Android.

Как изменить изображение кнопки отмены панели поиска в формах xamarin

Если вы раздуваете Searchview, например, "getMenuInflater (). Inflate (R.menu.search_menu, menu);". Затем вы можете настроить этот вид поиска через style.xml, как показано ниже.

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

Я много копал об этом и, наконец, нашел это решение, и оно работает для меня!
Вы можете использовать это

Если вы используете appcompat, попробуйте следующее:

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

Если вы используете androidx, попробуйте следующее:

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

Это изменит значок просмотра по умолчанию.

Надеюсь, поможет!