Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <h2>Intro</h2> <p>Unfortunately there's no way to set <code>SearchView</code> text field style using themes, styles and inheritance in XML as you <a href="https://stackoverflow.com/questions/9019512/how-can-i-change-the-touch-effect-color-of-the-actionbar-in-android-3-0-and-high">can do with background of items in ActionBar dropdown</a>. This is because <code>selectableItemBackground</code> <a href="http://developer.android.com/reference/android/R.styleable.html#Theme_selectableItemBackground" rel="noreferrer">is listed as styleable</a> in <code>R.stylable</code>, whereas <code>searchViewTextField</code> (theme attribute that we're interested in) is not. Thus, we cannot access it easily from within XML resources (you'll get a <code>No resource found that matches the given name: attr 'android:searchViewTextField'</code> error).</p> <h2>Setting SearchView text field background from code</h2> <p>So, the only way to properly substitute background of <code>SearchView</code> text field is to get into it's internals, acquire access to view that has background set based on <code>searchViewTextField</code> and set our own.</p> <p><strong>NOTE:</strong> Solution below depends only on id (<code>android:id/search_plate</code>) of element within <code>SearchView</code>, so it's more SDK-version independent than children traversal (e.g. using <code>searchView.getChildAt(0)</code> to get to the right view within <code>SearchView</code>), but it's not bullet-proof. Especially if some manufacturer decides to reimplement internals of <code>SearchView</code> and element with above-mentioned id is not present - the code won't work.</p> <p>In SDK, the background for text field in <code>SearchView</code> is declared through <a href="http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch" rel="noreferrer">nine-patches</a>, so we'll do it the same way. You can find original <em>png</em> images in <a href="https://github.com/android/platform_frameworks_base/tree/master/core/res/res/drawable-mdpi" rel="noreferrer">drawable-mdpi</a> directory of <a href="https://github.com/android/platform_frameworks_base" rel="noreferrer">Android git repository</a>. We're interested in two image. One for state when text field is selected (named <a href="https://github.com/android/platform_frameworks_base/blob/master/core/res/res/drawable-mdpi/textfield_search_selected_holo_light.9.png" rel="noreferrer">textfield_search_selected_holo_light.9.png</a>) and one for where it's not (named <a href="https://github.com/android/platform_frameworks_base/blob/master/core/res/res/drawable-mdpi/textfield_search_default_holo_light.9.png" rel="noreferrer">textfield_search_default_holo_light.9.png</a>).</p> <p>Unfortunately, you'll have to create local copies of both images, even if you want to customize only <em>focused</em> state. This is because <code>textfield_search_default_holo_light</code> is not present in <a href="http://developer.android.com/reference/android/R.drawable.html" rel="noreferrer">R.drawable</a>. Thus it's not easily accessible through <code>@android:drawable/textfield_search_default_holo_light</code>, which could be used in selector shown below, instead of referencing local drawable.</p> <p><strong>NOTE:</strong> I was using <em>Holo Light</em> theme as base, but you can do the same with <em>Holo Dark</em>. It seems that there's no real difference in <em>selected state</em> 9-patches between <a href="https://github.com/android/platform_frameworks_base/blob/master/core/res/res/drawable-xhdpi/textfield_search_selected_holo_light.9.png" rel="noreferrer">Light</a> and <a href="https://github.com/android/platform_frameworks_base/blob/master/core/res/res/drawable-xhdpi/textfield_search_selected_holo_dark.9.png" rel="noreferrer">Dark</a> themes. However, there's a difference in 9-patches for <em>default state</em> (see <a href="https://github.com/android/platform_frameworks_base/blob/master/core/res/res/drawable-xhdpi/textfield_search_default_holo_light.9.png" rel="noreferrer">Light</a> vs <a href="https://github.com/android/platform_frameworks_base/blob/master/core/res/res/drawable-xhdpi/textfield_search_default_holo_dark.9.png" rel="noreferrer">Dark</a>). So, probably there's no need to make local copies of 9-patches for <em>selected state</em>, for both <em>Dark</em> and <em>Light</em> themes (assuming that you want to handle both, and make them both look the same as in <em>Holo Theme</em>). Simply make one local copy and use it in <em>selector drawable</em> for both themes.</p> <p>Now, you'll need to edit downloaded nine-patches to your need (i.e. changing blue color to red one). You can take a look at file using <a href="http://developer.android.com/tools/help/draw9patch.html" rel="noreferrer">draw 9-patch tool</a> to check if it is correctly defined after your edit.</p> <p>I've edited files using <a href="http://www.gimp.org/" rel="noreferrer">GIMP</a> with one-pixel pencil tool (pretty easy) but you'll probably use the tool of your own. Here's my customized 9-patch for <em>focused state</em>:</p> <p><img src="https://i.stack.imgur.com/ON8mG.png" alt="enter image description here"></p> <p><strong>NOTE:</strong> For simplicity, I've used only images for <em>mdpi</em> density. You'll have to create <em>9-patches</em> for multiple screen densities if, you want the best result on any device. Images for <em>Holo</em> <code>SearchView</code> can be found in <a href="https://github.com/android/platform_frameworks_base/blob/master/core/res/res/drawable-mdpi/textfield_search_selected_holo_light.9.png" rel="noreferrer">mdpi</a>, <a href="https://github.com/android/platform_frameworks_base/blob/master/core/res/res/drawable-hdpi/textfield_search_selected_holo_light.9.png" rel="noreferrer">hdpi</a> and <a href="https://github.com/android/platform_frameworks_base/blob/master/core/res/res/drawable-xhdpi/textfield_search_selected_holo_light.9.png" rel="noreferrer">xhdpi</a> drawable.</p> <p>Now, we'll need to create drawable selector, so that proper image is displayed based on view state. Create file <code>res/drawable/texfield_searchview_holo_light.xml</code> with following content:</p> <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;selector xmlns:android="http://schemas.android.com/apk/res/android"&gt; &lt;item android:state_focused="true" android:drawable="@drawable/textfield_search_selected_holo_light" /&gt; &lt;item android:drawable="@drawable/textfield_search_default_holo_light" /&gt; &lt;/selector&gt; </code></pre> <p>We'll use the above created drawable to set background for <code>LinearLayout</code> view that holds text field within <code>SearchView</code> - its id is <code>android:id/search_plate</code>. So here's how to do this quickly in code, when creating options menu:</p> <pre><code>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); } } </code></pre> <h2>Final effect</h2> <p>Here's the screenshot of the final result:</p> <p><img src="https://i.stack.imgur.com/XqcZ4.png" alt="enter image description here"></p> <h2>How I got to this</h2> <p>I think it's worth metioning how I got to this, so that this approach can be used when customizing other views.</p> <h3>Checking out view layout</h3> <p>I've checked how <code>SearchView</code> layout looks like. In <a href="http://grepcode.com/file/repository.grepcode.com/java/ext/com.google.android/android/4.0.4_r1.2/android/widget/SearchView.java/#248" rel="noreferrer">SearchView contructor</a> one can find a line that inflates layout:</p> <pre><code>inflater.inflate(R.layout.search_view, this, true); </code></pre> <p>Now we know that <code>SearchView</code> layout is in file named <code>res/layout/search_view.xml</code>. Looking into <a href="https://github.com/android/platform_frameworks_base/blob/master/core/res/res/layout/search_view.xml#L75" rel="noreferrer">search_view.xml</a> we can find an inner <code>LinearLayout</code> element (with id <code>search_plate</code>) that has <code>android.widget.SearchView$SearchAutoComplete</code> inside it (looks like ours search view text field):</p> <pre><code> &lt;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"&gt; </code></pre> <p>Now, we now that the background is set based on current theme's <code>searchViewTextField</code> attribute.</p> <h3>Investigating attribute (is it easily settable?)</h3> <p>To check how <code>searchViewTextField</code> attribute is set, we investigate <a href="https://github.com/android/platform_frameworks_base/blob/master/core/res/res/values/themes.xml#L343" rel="noreferrer">res/values/themes.xml</a>. There's a group of attributes related to <code>SearchView</code> in default <code>Theme</code>:</p> <pre><code>&lt;style name="Theme"&gt; &lt;!-- (...other attributes present here...) --&gt; &lt;!-- SearchView attributes --&gt; &lt;item name="searchDropdownBackground"&gt;@android:drawable/spinner_dropdown_background&lt;/item&gt; &lt;item name="searchViewTextField"&gt;@drawable/textfield_searchview_holo_dark&lt;/item&gt; &lt;item name="searchViewTextFieldRight"&gt;@drawable/textfield_searchview_right_holo_dark&lt;/item&gt; &lt;item name="searchViewCloseIcon"&gt;@android:drawable/ic_clear&lt;/item&gt; &lt;item name="searchViewSearchIcon"&gt;@android:drawable/ic_search&lt;/item&gt; &lt;item name="searchViewGoIcon"&gt;@android:drawable/ic_go&lt;/item&gt; &lt;item name="searchViewVoiceIcon"&gt;@android:drawable/ic_voice_search&lt;/item&gt; &lt;item name="searchViewEditQuery"&gt;@android:drawable/ic_commit_search_api_holo_dark&lt;/item&gt; &lt;item name="searchViewEditQueryBackground"&gt;?attr/selectableItemBackground&lt;/item&gt; </code></pre> <p>We see that for default theme the value is <code>@drawable/textfield_searchview_holo_dark</code>. For <code>Theme.Light</code> value <a href="https://github.com/android/platform_frameworks_base/blob/master/core/res/res/values/themes.xml#L461" rel="noreferrer">is also set in that file</a>.</p> <p>Now, it would be great if this attribute was accessible through <a href="http://developer.android.com/reference/android/R.styleable.html" rel="noreferrer">R.styleable</a>, but, unfortunately it's not. For comparison, see other <em>theme</em> attributes which are present both in <a href="https://github.com/android/platform_frameworks_base/blob/master/core/res/res/values/themes.xml" rel="noreferrer">themes.xml</a> and <a href="http://developer.android.com/reference/android/R.attr.html" rel="noreferrer">R.attr</a> like <a href="https://github.com/android/platform_frameworks_base/blob/master/core/res/res/values/themes.xml#L60" rel="noreferrer">textAppearance</a> or <a href="https://github.com/android/platform_frameworks_base/blob/master/core/res/res/values/themes.xml#L118" rel="noreferrer">selectableItemBackground</a>. If <code>searchViewTextField</code> was present in <code>R.attr</code> (and <code>R.stylable</code>) we could simply use our drawable selector when defining theme for our whole application in XML. For example:</p> <pre><code>&lt;resources xmlns:android="http://schemas.android.com/apk/res/android"&gt; &lt;style name="AppTheme" parent="android:Theme.Light"&gt; &lt;item name="android:searchViewTextField"&gt;@drawable/textfield_searchview_holo_light&lt;/item&gt; &lt;/style&gt; &lt;/resources&gt; </code></pre> <h3>What should be modified?</h3> <p>Now we know, that we'll have to access <code>search_plate</code> through code. However, we still don't know how it should look like. In short, we search for drawables used as values in default themes: <a href="https://github.com/android/platform_frameworks_base/blob/master/core/res/res/drawable/textfield_searchview_holo_dark.xml" rel="noreferrer">textfield_searchview_holo_dark.xml</a> and <a href="https://github.com/android/platform_frameworks_base/blob/master/core/res/res/drawable/textfield_searchview_holo_light.xml" rel="noreferrer">textfield_searchview_holo_light.xml</a>. Looking at content we see that the drawable is <code>selector</code> which reference two other drawables (which occur to be 9-patches later on) based on view state. You can find aggregated 9-patch drawables from (almost) all version of Android on <a href="http://androiddrawables.com/widget.html" rel="noreferrer">androiddrawables.com</a></p> <h3>Customizing</h3> <p>We recognize the blue line in <a href="https://github.com/android/platform_frameworks_base/raw/android-4.0.1_r1.2/core/res/res/drawable-mdpi/textfield_search_selected_holo_dark.9.png" rel="noreferrer">one of the 9-patches</a>, so we create local copy of it and change colors as desired.</p>
    singulars
    1. This table or related slice is empty.
    1. POChanging the background drawable of the searchview widget
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USCommunity
    1. USvArDo
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POChanging the background drawable of the searchview widget
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COYour java code will not work, his SearchView is in the ActionBar and can't be found with the findViewById method. But the rest is correct!
      singulars
      1. PO
      1. USVinceFR
    2. CO@VinceFR Thanks for pointing that out. Haven't noticed it (I've focused on `SearchView` itself). Is it OK if I merge your answer (overriding onCreateOptionsMenu) into mine?
      singulars
      1. PO
      1. USvArDo
    3. CO@VinceFR I've moved my code from `onCreate()` method to `onCreateOptionsMenu()` method as you suggested. Voted your answer up.
      singulars
      1. PO
      1. USvArDo
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload