I need to change the SearchView suggestions style to the AppCompat.Light theme (i.e. gray text on a white background). But I retried a lot of variants and no one changed the SearchView suggestions style.
My layout:
<android.support.design.widget.AppBarLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="#style/Widget.AppTheme.Toolbar"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
Styles:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/accent</item>
</style>
<style name="AppTheme.NoActionBarTrans">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
<style name="Widget.AppTheme.Toolbar" parent="Widget.AppCompat.Light.ActionBar.Solid.Inverse"/>
</resources>
The app theme is AppTheme, the activity theme is AppTheme.NoActionBarTrans.
What am I doing wrong? I tried to declare SearchView style but it just ignores this style.
you can style dropdown programatically using this code
SearchView searchView = new SearchView(context);
LinearLayout linearLayout1 = (LinearLayout) searchView.getChildAt(0);
LinearLayout linearLayout2 = (LinearLayout) linearLayout1.getChildAt(2);
LinearLayout linearLayout3 = (LinearLayout) linearLayout2.getChildAt(1);
AutoCompleteTextView autoComplete = (AutoCompleteTextView) linearLayout3.getChildAt(0);
//Set the input text color
autoComplete.setTextColor(Color.WHITE);
// set the hint text color
autoComplete.setHintTextColor(Color.WHITE);
//Some drawable (e.g. from xml)
autoComplete.setDropDownBackgroundResource(R.drawable.drop_down_bg);
Related
In my activity, I use default ActionBar
<style name="AppTheme" parent="Theme.AppCompat"> and getSupportActionBar()
How can I custom the style of this ActionBar?
Change ActionBar color and title color
Align title to center
Add more top padding to ActionBar
For the color, I tried these two style, but it also change color of whole Activity, I just want to change ActionBar
<item name="colorPrimary"></item>
<item name="android:textColorPrimary"></item>
I alo tried actionBarStyle, but it is not working
<style name="AppTheme" parent="Theme.AppCompat">
<item name="colorPrimary">#color/darkgray</item>
<item name="colorPrimaryDark">#color/black</item>
<item name="colorAccent">#color/gold</item>
<item name="android:textColorPrimary">#color/gold</item>
<item name="android:textColorSecondary">#color/darkgray</item>
<item name="android:windowBackground">#color/black</item>
<item name="android:colorBackground">#color/black</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<style name="MyActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#color/gray</item>
<item name="android:textColor">#color/black</item>
</style>
I suggest you to include the Toolbar in your layout and use the Theme.AppCompat.NoActionBar theme for your Activity :
Layout :
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/yourColor">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="#color/yourColor"
android:text="yourTitle" />
</android.support.v7.widget.Toolbar>
Manifest :
<activity
android:name="yourActivity"
android:theme="#style/Theme.AppCompat.NoActionBar" />
I'm trying to change my Toolbar's menu item text color here, but it doesn't work. Here's my style:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="toolbarStyle">#style/AppTheme.ToolbarStyle</item>
<item name="buttonStyle">#style/AppTheme.ButtonStyle</item>
<item name="colorControlHighlight">#color/colorPrimary</item>
</style>
<style name="AppTheme.ToolbarStyle" parent="Base.Theme.AppCompat.Light.DarkActionBar">
<item name="android:background">#color/colorPrimary</item>
<item name="titleTextColor">#android:color/white</item>
<item name="titleTextAppearance">#style/TextAppearance.AppCompat.Widget.ActionBar.Title
</item>
<item name="actionMenuTextColor">#android:color/white</item>
</style>
layout xml:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="#string/app_name"
app:titleMarginStart="#dimen/margin_l"
/>
I have tried to set the Toolbar theme directly in xml, but the menu item is still back. Is there a solution to this?
Add these lines in your AppTheme style
<item name="actionMenuTextColor">#color/white</item>
<item name="android:actionMenuTextColor">#color/white</item>
Having a material toolbar you can play with styling modifying text title and menu texts as follows:
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="#android:color/white"
android:elevation="6dp"
android:theme="#style/App.ToolbarStyle"
app:titleTextAppearance="#style/App.ToolbarTitleTex"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:menu="#menu/create_item_menu"
app:titleTextColor="#android:color/black" />
Where this style lets you change the color of the icon of the left:
<style name="App.ToolbarStyle" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
<item name="colorOnPrimary">#color/colorPrimary</item>
</style>
Also you can change the title text appearance with another style:
<style name="App.ToolbarTitleTex" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
<item name="android:textSize">18sp</item>
<item name="fontFamily">#font/roboto_bold</item>
</style>
And finally to change the menu item style you need to add this item property to the main style/theme of the app (the one you set in the AndroidManifest file:
<item name="actionMenuTextAppearance">#style/App.ToolbarMenuItem</item>
With:
<style name="App.ToolbarMenuItem" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
<item name="android:textSize">14sp</item>
<item name="fontFamily">#font/roboto_bold</item>
<item name="textAllCaps">true</item>
<item name="android:textStyle">bold</item>
</style>
The final result would be something like this:
You need to declare a Theme like this
<style name="Theme.PopupOverlay.Menu" parent="ThemeOverlay.AppCompat.Light" >
<item name="android:textColor">#android:color/white</item>
</style>
And then, in your Toolbar in layout view you must specify to use that theme
<androidx.appcompat.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/Theme.PopupOverlay.Menu" />
Modern way under Material3 theming.
<style name="AppTheme" parent="Theme.Material3.Dark">
<item name="toolbarStyle">#style/ToolBarStyle</item>
...
</style>
<style name="ToolBarStyle" parent="#style/Widget.Material3.Toolbar">
<item name="titleTextColor">#android:color/holo_green_light</item>
<item name="navigationIconTint">#android:color/holo_blue_light</item>
<item name="materialThemeOverlay">#style/ToolbarThemeOverlay</item>
</style>
<style name="ToolbarThemeOverlay" parent="">
<item name="actionMenuTextColor">#android:color/holo_red_light</item>
</style>
materialThemeOverlay - is the key to apply the colors to action menu items
In your theme file you have to put this :
<style name="AppTheme.ActionBar" parent="Theme.AppCompat.Light.DarkActionBar">
...
<item name="actionMenuTextColor">#color/text_color</item>
...
</style>
and apply above theme to Toolbar view as like this android:theme="#style/AppTheme.ActionBar"
detailed example:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:layout_gravity="top"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:theme="#style/AppTheme.ActionBar"/>
When adding some alpha to my Toolbar background color, I notice there is a background applied to the title's TextView:
Here is my layout:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#0099cc">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="#style/FullscreenActionBarStyle"
app:titleTextAppearance="#style/ActionBarTitle"/>
<ImageView
android:id="#+id/fullscreen_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/image"/>
</FrameLayout>
And my styles.xml:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowActionBar">false</item>
<item name="windowActionBar">false</item>
</style>
<style name="FullscreenTheme" parent="AppTheme">
<item name="android:windowBackground">#null</item>
<item name="metaButtonBarStyle">?android:attr/buttonBarStyle</item>
<item name="metaButtonBarButtonStyle">?android:attr/buttonBarButtonStyle</item>
<item name="android:actionBarStyle">#style/FullscreenActionBarStyle</item>
<item name="android:windowActionBarOverlay">true</item>
<!--For compatibility-->
<item name="actionBarStyle">#style/FullscreenActionBarStyle</item>
<item name="windowActionBarOverlay">true</item>
</style>
<style name="FullscreenActionBarStyle" parent="Widget.AppCompat.ActionBar">
<item name="background">#color/black_overlay</item>
<item name="android:background">#color/black_overlay</item>
</style>
<style name="ActionBarTitle" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">50sp</item>
</style>
</resources>
"black_overlay" color value is #66000000
I am using AppCompat and Support libraries v24.2.1.
Do you have any idea on how to get rid of this text background?
Cheers.
As you can see in the following issue, the problem comes from the attribute app:theme. It is applied to every view that a viewgroup inflate.
Replace app:theme by style:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
style="#style/FullscreenActionBarStyle"
app:titleTextAppearance="#style/ActionBarTitle"/>
Alright, removing the background properties on the FullscreenActionBarStyle style and putting it in the Toolbar layout definition make it work.
As #apelsoczi pointed out, settings these properties in the toolbar style also apply them on children components.
Encapsulate a TextView inside the Toolbar and set the value of that.
<android.support.v7.widget.Toolbar
...>
<TextView ... />
</android.support.v7.widget.Toolbar>
I'm trying to modify the text size of my ActionBar and I tried styling it but it doesn't change anything... That's my styles page.
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionBarStyle">#style/AppTheme.Styled.ActionBar.TitleTextStyle</item>
<!-- Customize your theme here. -->
</style>
<style name="AppTheme.ActionBar">
<item name="android:titleTextStyle">#style/AppTheme.Styled.ActionBar.TitleTextStyle</item>
</style>
<style name="AppTheme.Styled.ActionBar.TitleTextStyle" parent="#android:style/Widget.TextView">
<item name="android:textSize">19sp</item>
</style>
Also I had this on my styles.xml but doesn't work either
<style name="Theme.FixedSize" parent="#android:style/Theme.Holo.Light.DarkActionBar">
<item name="actionBarSize">4dip</item>
<item name="android:actionBarSize">4dip</item>
<item name="android:textSize">3sp</item>
</style>
I also have tried with a nasty way but it doesn't work only works with the color.
mActionBar.setTitle(Html.fromHtml("<font size=\"3\" color=\"white\">" + getString(R.string.app_name_device)));
After you say to me... I know now it's used Toolbar BUT I have to do it now with ActionBar.
EDIT
I hided the ActionBar like this :
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<!-- Customize your theme here. -->
</style>
Then I added a ToolBar like this :
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:id="#+id/toolbar"
app:titleTextAppearance="#style/Toolbar.TitleText" />
But the Layout messed up, it goes up and now the ToolBar is collapsed with the first TextView
You can do it programmatically like this
Html.fromHtml("<big><font color=\"white\">" + getString(R.string.app_name_device)+"</big>")
for small text you can change tag <big> with <small>
and if you want to provide specific size of Title Text then you should use Toolbar and use below theme/style
Create one layout toolbar.xml and put below code
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:id="#+id/toolbar"
app:titleTextAppearance="#style/Toolbar.TitleText" />
and change size in
<style name="Toolbar.TitleText" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">18sp</item>
</style>
and you can inculde above layout in your each Activity layout files like below
<include
layout="#layout/toolbar"
/>
Toolbar in your Activity
ToolBar mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayShowHomeEnabled(true);
getSupportActionBar().setTitle(Html.fromHtml("<big><font color=\"white\">" + getString(R.string.app_name_device)+"</big>"));
I do it so:
import android.support.v7.app.ActionBar;
public void title_change(String text) {
TextView tv = new TextView(this);
tv.setText(text);
tv.setTextSize(15);
getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
getSupportActionBar().setCustomView(tv);
}
I'm having the following setup:
toolbar.xml
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res/com.citylifta"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:theme="#style/ActionBarTheme" />
themes.xml:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="windowActionBar">false</item>
<item name="actionBarTheme">#style/ActionBarTheme</item>
</style>
<style name="ActionBarTheme" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:textAllCaps">true</item>
<item name="android:background">#color/dark_button</item>
</style>
now, if I omit the attr app:theme="#style/ActionBarTheme", the toolbar gets totally black...
How to define the toolbar's styling as a part of the AppTheme properly?