web-dev-qa-db-fra.com

Styliser une SearchView dans Android Action Bar

J'ai un widget de recherche dans ma barre d'actions comme ceci:

Search Widget in Action Bar

(1) Comment changer la couleur du texte qui dit "iPhone"?

(2) En outre, si vous remarquez le X gris - l'ensemble du widget de recherche est également cette couleur lorsqu'il est dans une position d'icône. Je suis sur Holo.Theme.Light et j'utilise mes propres mods.

Comment puis-je changer ces deux styles pour le widget dans mon fichier styles.xml (en supposant que c'est là que vous apportez les modifications pour un widget de recherche)?

androidsearchstylessearchview
33
KickingLettuce

Vous devez définir

searchView.setBackgroundColor(Color.WHITE);

Les vues de recherche ne sont pas aussi personnalisables.

9
lokoko

J'y ai passé beaucoup de temps mais finalement: :-)

1) Pour changer la couleur du texte:

((EditText)searchView.findViewById(Android.support.v7.appcompat.R.id.search_src_text)).setTextColor(Color.WHITE);

2) Pour modifier l'indice de texte:

((EditText)searchView.findViewById(Android.support.v7.appcompat.R.id.search_src_text)).setHintTextColor(Color.WHITE);
50
Adidas

Si vous utilisez une bibliothèque compatible avec les applications, la solution est un peu différente de la réponse de Jerome. Voici ma solution

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

Vous pouvez changer le style de la vue de recherche. Voici un code que j'ai utilisé pour Tweak l'edittext, l'icône de la voix ...

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

[modifier] Une réponse plus complète est disponible ici: Modification de l'arrière-plan dessinable du widget de viewview

13
Jerome VDL

Depuis Lollipop, vous pouvez styliser la vue de recherche comme celle-ci à partir d'un article de blog 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>
7
QAMAR
SearchView searchView = (SearchView) MenuItemCompat.getActionView(menu.findItem(R.id.search));
searchView.setSubmitButtonEnabled(true); // to enable submit button

ImageView b = (ImageView) searchView.findViewById(Android.support.v7.appcompat.R.id.search_go_btn);
b.setImageResource(Android.R.drawable.ic_menu_search); //to change submit button icon

TextView a=(TextView) searchView.findViewById(Android.support.v7.appcompat.R.id.search_src_text);
a.setTextColor(...); //to change color of search text
4
Ali Ziaee

J'ai résolu ce problème en utilisant le thème Holo.Light.DarkActionBar. Je ne pense pas que vous puissiez facilement changer le widget de recherche autrement.

3
KickingLettuce

dans onCreateOptionsMenu :

int id = searchView.getContext()
                   .getResources()
                   .getIdentifier("Android:id/search_src_text", null, null);
    TextView textView = (TextView) searchView.findViewById(id);
    textView.setTextColor(Color.WHITE);
2
Mina Gabriel
@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);

    }

Voici maintenant le fichier xml searchcolor.xml pour changer la couleur de la plaque de la barre de recherche 

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

et menu/menu.xml pour créer la recherche dans la barre d'actions

<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>
0
M.Raheel

Obtenez SearchView dans votre fichier xxxActivity.Java, puis:

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

Créer un fichier 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>
0
Jas

Si vous voulez du texte blanc, vous devez vous étendre à partir d'un thème de barre d'action qui a un fond noir comme Holo.Theme ou Theme.AppCompat.Light.DarkActionBar si vous utilisez la bibliothèque de support.
Aucun autre réglage nécessaire.

0
Mehdiway