Стилизация SearchView в панели действий Android

У меня есть виджет поиска на панели действий, например:

Виджет поиска на панели действий

(1) Как изменить цвет текста с надписью «iPhone»?

(2) Кроме того, если вы заметили серый X, весь виджет поиска имеет этот цвет, когда он находится в позиции значка. Я на Holo.Theme.Light и использую для него свои собственные моды.

Как изменить эти два стиля для виджета в моем файле styles.xml (при условии, что именно там вы вносите изменения для виджета поиска)?


person TheLettuceMaster    schedule 17.07.2012    source источник
comment
1. Что означает в позиции значка? 2. Что вы действительно хотите изменить в (2)? Цвет Х? Цвет подчеркивания? Обе?   -  person vArDo    schedule 26.07.2012
comment
эй, это старо, и я решил это - вроде. Я положил ответ ниже. Я хотел изменить цвет текста и X в основном. В позиции значка просто увеличительное стекло на панели действий. Вы нажимаете на него, и он открывается, как вы видите выше.   -  person TheLettuceMaster    schedule 26.07.2012
comment
stackoverflow.com/posts/12942258/edit Это грязный хак, но он работает   -  person Pongpat    schedule 18.10.2012
comment
@KickingLettuce, пожалуйста, скажите мне, как вы используете собственный макет панели действий? как показать изображение значка слева?   -  person Erum    schedule 02.09.2015
comment
Ну наконец то!! Отлично работает на Xamarin.Android @Pongpat Спасибо.   -  person KennyAli    schedule 17.02.2021


Ответы (9)


Вы должны были бы установить

searchView.setBackgroundColor(Color.WHITE);

SearchViews не так настраивается.

person lokoko    schedule 17.12.2012
comment
Очень интересно, надо попробовать. Я решил это с помощью обходного пути несколько недель назад... но это очень полезно знать. голосовать - person TheLettuceMaster; 17.12.2012

Я потратил много времени на это, но, наконец: :-)

  1. Чтобы изменить цвет текста:
((EditText)searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text)).setTextColor(Color.WHITE);

или этот для AndroidX:

((EditText)searchView.findViewById(androidx.appcompat.R.id.search_src_text)).setTextColor(Color.WHITE);
  1. Чтобы изменить текстовую подсказку:
((EditText)searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text)).setHintTextColor(Color.WHITE);

или этот для AndroidX:

((EditText)searchView.findViewById(androidx.appcompat.R.id.search_src_text)).setHintTextColor(Color.WHITE);
person Adidas    schedule 04.02.2014

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

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

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

    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);
}
person Abdul Rahman    schedule 22.01.2014
comment
Мы ленивы и не любим переходить по ссылкам. Пожалуйста, включите решение в свой ответ, а не просто ссылку. - person mhlester; 22.01.2014
comment
Большая часть этого исходит из файла abc_search_view.xml в файле appcompat. Надеюсь, кто-то оштрафует это полезно. - person LEO; 22.05.2014
comment
Именно то, что мне было нужно. - person theblang; 04.08.2014
comment
Где вы можете изменить search_mag_icon? Я могу изменить все, кроме этого. - person theblang; 14.08.2014

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

SearchManager searchManager = (SearchManager) getSystemService(Context.SEARCH_SERVICE);

        SearchView searchView = (SearchView) menu.findItem(R.id.menu_search).getActionView();
        searchView.setSearchableInfo(searchManager.getSearchableInfo(getComponentName()));

        int searchPlateId = searchView.getContext().getResources().getIdentifier("android:id/search_plate", null, null);
        searchView.findViewById(searchPlateId).setBackgroundResource(R.drawable.textfield_search_selected);

        int voiceSearchPlateId = searchView.getContext().getResources().getIdentifier("android:id/submit_area", null, null);
        searchView.findViewById(voiceSearchPlateId).setBackgroundResource(R.drawable.textfield_search_right_selected);

        // change hint color
        int searchTextViewId = searchView.getContext().getResources().getIdentifier("android:id/search_src_text", null, null);
        TextView searchTextView = (TextView) searchView.findViewById(searchTextViewId);
        searchTextView.setHintTextColor(getResources().getColor(R.color.light_grey));

[править] Более полный ответ доступен здесь: фоновый рисунок виджета поиска

person Jerome VDL    schedule 24.06.2013
comment
Как я могу найти эти идентификаторы? Я хочу изменить значок лупы и x на темный цвет. - person Vituel; 03.01.2014
comment
+1. Это помогло мне. Но вместо использования getIdentifier вы можете просто использовать идентификаторы в случае ABS. searchView.findViewById(R.id.abs__search_plate).setBackgroundResource(R.drawable.myBackground); Точно так же вы можете использовать область отправки и текст src для поиска. - person Rahul Sainani; 18.04.2014

Что касается Lollipop, вы можете оформить вид поиска, как показано в сообщении блога http://android-developers.blogspot.com/2014/10/appcompat-v21-material-design-for-pre.html

values/themes.xml:
<style name=”Theme.MyTheme” parent=”Theme.AppCompat”>
    <item name=”searchViewStyle”>@style/MySearchViewStyle</item>
</style>
<style name=”MySearchViewStyle” parent=”Widget.AppCompat.SearchView”>
    <!-- Background for the search query section (e.g. EditText) -->
    <item name="queryBackground">...</item>
    <!-- Background for the actions section (e.g. voice, submit) -->
    <item name="submitBackground">...</item>
    <!-- Close button icon -->
    <item name="closeIcon">...</item>
    <!-- Search button icon -->
    <item name="searchIcon">...</item>
    <!-- Go/commit button icon -->
    <item name="goIcon">...</item>
    <!-- Voice search button icon -->
    <item name="voiceIcon">...</item>
    <!-- Commit icon shown in the query suggestion row -->
    <item name="commitIcon">...</item>
    <!-- Layout for query suggestion rows -->
    <item name="suggestionRowLayout">...</item>
</style>
person QAMAR    schedule 15.09.2015
comment
Есть ли способ использовать стиль для просмотра поиска до леденца на палочке? Например, как KitKat? - person Red M; 04.08.2016
comment
Это AppCompat — действительно для устройств Pre-Lollipop. - person Przemo; 22.07.2020

Я решил это с помощью темы Holo.Light.DarkActionBar. Я не верю, что вы можете легко изменить виджет поиска иначе.

person TheLettuceMaster    schedule 26.07.2012
comment
Фактически, вы можете установить цвет текста EditText в SearchView. Однако, как вы упомянули, это не так просто, как использование определений стиля XML. Вы даже можете установить цвет подчеркивания. См. мой ответ другим о SearchView настройке. - person vArDo; 26.07.2012
comment
Это лучший способ сделать это, на мой взгляд. - person Clive Jefferies; 30.06.2014

Если вам нужен белый текст, вы должны расширить тему панели действий с черным фоном, например Holo.Theme или Theme.AppCompat.Light.DarkActionBar, если вы используете библиотеку поддержки.
Никаких других настроек не требуется.

person Mehdiway    schedule 14.05.2014

@Override
    public boolean onCreateOptionsMenu(Menu menu) {

        super.onCreateOptionsMenu(menu);

        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);

        // Associate search configuration with the SearchView
        SearchManager searchManager =
               (SearchManager) getSystemService(Context.SEARCH_SERVICE);
        SearchView searchView =
                (SearchView) menu.findItem(R.id.search).getActionView();
        searchView.setQueryHint("Client/DOB/PPSN");
        searchView.setSearchableInfo(
                searchManager.getSearchableInfo(getComponentName()));

        // Setting the textview default behaviour properties
        int id = searchView.getContext().getResources().getIdentifier("android:id/search_src_text", null, null);
        TextView textView = (TextView) searchView.findViewById(id);
        textView.setTextColor(Color.WHITE);
        textView.setHintTextColor(Color.WHITE);

        // Set the search plate color to white
        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 );
        return super.onCreateOptionsMenu(menu);

    }

Теперь это xml-файл searchcolor.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="10.0dp">
      <shape >
          <solid android:color="#2c4d8e" />
      </shape>
  </item>
</layer-list>

и menu/menu.xml для создания поиска на панели действий

<menu xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:id="@+id/search"
          android:icon="@drawable/search"
          android:showAsAction="ifRoom"
          android:actionViewClass="android.widget.SearchView" />

</menu>
person M.Raheel    schedule 30.12.2014

Получите SearchView в файле xxxActivity.java, а затем:

SearchView searchView = (SearchView)menu.findItem(R.id.my_search_view).getActionView();
int searchPlateId = searchView.getContext().getResources().getIdentifier("android:id/search_plate", null, null);

// Getting the 'search_plate' LinearLayout.
View searchPlate = searchView.findViewById(searchPlateId);
searchPlate.setBackgroundResource(R.drawable.textfield_searchview);

Создать файл res/drawable/texfield_searchview.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>
person Jas    schedule 09.12.2015