I am trying to use a SearchView in my layout (not inside of a ToolBar or ActionBar).
<FrameLayout android:layout_width="0dp" android:layout_weight="50" android:layout_height="wrap_content" >
<android.support.v7.widget.SearchView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|left" style="#style/MySearchViewStyle" />
</FrameLayout>
I am using AppCompat, but it looks different on pre-lollipop. The EditText is missing the bottom border in pre-lollipop devices.
Lollipop Search displays border correctly:
Pre-lollipop Search displays NO border:
My theme is basic:
<style name="Theme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- TOOLBAR -->
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<!-- Search -->
<item name="searchViewStyle">#style/MySearchViewStyle</item>
<item name="android:searchViewStyle">#style/MySearchViewStyle</item>
<!-- COLOURS -->
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/accent</item>
</style>
<style name="MySearchViewStyle" parent="Widget.AppCompat.SearchView">
<item name="android:editTextStyle">#style/EditText</item>
<item name="editTextStyle">#style/EditText</item>
</style>
<style name="EditText">
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:inputType">text</item>
<item name="android:cursorVisible">true</item>
<item name="android:maxLength">1000</item>
<item name="android:selectAllOnFocus">true</item>
<item name="android:paddingTop">4dp</item>
</style>
Any help to get my styles consistent would be great thanks.
As per Source code at https://github.com/android/platform_frameworks_support/blob/master/v7/appcompat/res/layout/abc_search_view.xml
search_src_text view has background set to #null
To get bottom line i used
searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text).setBackgroundResource(R.drawable.abc_textfield_search_default_mtrl_alpha);
UPDATE: For Kotlin + Androidx
searchView.findViewById<EditText>(androidx.appcompat.R.id.search_src_text).setBackgroundResource(R.drawable.abc_textfield_search_default_mtrl_alpha)
Related
And my Second Question :
I use a TextInputLayout :
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColorHint="#color/LightBlue"
android:theme="#style/ThemeOverlay.AppTheme.TextInputEditText.Outlined"
app:boxStrokeColor="#color/selector"
app:boxStrokeWidth="3dp"
app:startIconTint="#color/white">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/numberOfPlayer_txt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="true"
android:focusableInTouchMode="true"
android:inputType="numberDecimal"
android:textColor="#color/gold" />
</com.google.android.material.textfield.TextInputLayout>
The Styles file
<style name="AppTheme"
parent="Theme.MaterialComponents.Light.NoActionBar.Bridge">
<!-- 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:windowBackground">#color/Thistle</item>
<!-- use in get player information -->
<item name="CustomTextStyle">#style/Widget.App. TextInputLayout.
OutlinedBox</item>
</style>
<style name="ThemeOverlay.AppTheme.TextInputEditText.Outlined"
parent="">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="boxCornerRadiusBottomEnd">20dp</item>
<item name="boxCornerRadiusBottomStart">20dp</item>
<item name="boxCornerRadiusTopEnd">20dp</item>
<item name="boxCornerRadiusTopStart">20dp</item>
<item name="android:hint">Number of player</item>
<item name="hintTextColor">#color/card1</item>
<item name="startIconDrawable">#drawable/ic_people</item>
</style>
<style name="Widget.App.TextInputLayout.OutlinedBox"
parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="boxStrokeColor">#color/player_information</item>
<item name="boxCornerRadiusBottomEnd">15dp</item>
<item name="boxCornerRadiusBottomStart">15dp</item>
<item name="boxCornerRadiusTopEnd">15dp</item>
<item name="boxCornerRadiusTopStart">15dp</item>
<item name="android:textColorHint">#color/white</item>
<item name="startIconDrawable">#drawable/player</item>
<item name="startIconTint">#color/gold</item>
<item name="elevation">5dp</item>
<item name="boxStrokeWidth">2dp</item>
<itemname="materialThemeOverlay">#style/ThemeOverlay.App.
TextInputEditText.OutlinedBox</item>
<item name="hintTextColor">#color/AntiqueWhite</item>
<!-- .... -->
</style>
<style name="ThemeOverlay.App.TextInputEditText.OutlinedBox"
parent="ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox">
<!-- to change the cursor color -->
<item name="colorControlActivated">#color/white</item>
</style>
That is my selector file
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/DarkSeaGreen"
android:state_focused="true"/>
<item android:color="#color/white"/>
</selector>
and Attrs
<resources>
<attr name="customTextInputStyle" format="reference" />
<attr name="CustomTextStyle" formet ="reference"/>
</resources>
When I change the version of the material 1.1.0 to 1.3.0 ,The shape of The text input layout1 I created before is distorted. It became wider than it was before. I could not find the reason for this change.As you can see in the picture, the text inputlayout is very wide and the hinttext still looks black on the back.
The main issue is in the ThemeOverlay. You have to add the parent ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox.
<style name="ThemeOverlay.App.TextInputEditText.OutlinedBox" parent="#style/ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox">
<item name="colorPrimary">#color/...</item>
</style>
It is needed because the default style Widget.MaterialComponents.TextInputLayout.OutlinedBox which you are extending has defined a own materialThemeOverlay and
without the parent dependency you are losing the default behaviour.
Also in your xml layout remove android:theme="#style/ThemeOverlay.AppTheme.TextInputEditText.Outlined". You don't need it because you are already using materialThemeOverlay in the style and the theme defined in the xml layout overrides it and this theme overlay is wrong.
Also:
use a min width because you are using a big corner radius 15dp
<com.google.android.material.textfield.TextInputLayout
android:minWidth="150dp"
android:layout_width="wrap_content"
Finally the color used by the hint:
<item name="android:textColorHint">#color/red600Dark</item>
<item name="hintTextColor">#color/teal_700</item>
Final layout:
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.App.TextInputLayout.OutlinedBox"
android:minWidth="150dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:startIconTint="#color/white">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/numberOfPlayer_txt"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:inputType="numberDecimal"
android:textColor="#color/gold" />
</com.google.android.material.textfield.TextInputLayout>
with:
<style name="Widget.App.TextInputLayout.OutlinedBox"
parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="boxStrokeColor">#color/text_input_stroke_selector</item>
<item name="boxCornerRadiusBottomEnd">15dp</item>
<item name="boxCornerRadiusBottomStart">15dp</item>
<item name="boxCornerRadiusTopEnd">15dp</item>
<item name="boxCornerRadiusTopStart">15dp</item>
<item name="startIconDrawable">#drawable/ic_...</item>
<item name="startIconTint">#color/...</item>
<item name="elevation">5dp</item>
<item name="boxStrokeWidth">2dp</item>
<item name="materialThemeOverlay">#style/ThemeOverlay.App.TextInputEditText.OutlinedBox</item>
<item name="android:textColorHint">#color/....</item>
<item name="hintTextColor">#color/....</item>
</style>
<style name="ThemeOverlay.App.TextInputEditText.OutlinedBox" parent="#style/ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox">
<item name="colorPrimary">#color/....</item>
</style>
I have a FAB in my layout as:
<android.support.design.widget.FloatingActionButton
android:id="#+id/click_receipt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="08dp"
android:clickable="true"
android:src="#drawable/ic_action_photo" />
The theme I use for this Activity is:
<!-- Detail Activity-->
<style name="NoActionBar" parent="#style/Theme.AppCompat.Light.NoActionBar">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorControlHighlight">#color/color_accent</item>
<item name="colorControlNormal">#color/color_accent</item>
<item name="searchViewStyle">#style/AppTheme.SearchView</item>
</style>
However the colorPrimary / colorPrimaryDark dont seem to take effect on the FAB.
Earlier I was using a universal theme for the app which is:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="actionBarStyle">#style/MyActionBar</item>
<item name="colorPrimary">#color/actionBar_bg</item>
<item name="colorPrimaryDark">#color/color_primary_dark</item>
<item name="colorAccent">#color/color_accent</item>
<item name="android:spinnerStyle">#style/Widget.AppCompat.Spinner.Underlined</item>
</style>
<style name="MyActionBar" parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:background">#color/actionBar_bg</item>
<item name="background">#color/actionBar_bg</item>
</style>
The results with above were proper, but I dont find much difference in my custom theme for this Activity, what do I miss here?
The FAB is taking colorAccent - you will have to set this
I've define a Style for the button
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:fontFamily">sans-serif</item>
<item name="android:windowBackground">#color/background</item>
<item name="android:buttonStyle">#style/AppTheme.Button</item>
<item name="android:textViewStyle">#style/AppTheme.TextView</item>
<item name="android:editTextStyle">#style/AppTheme.EditText</item>
<item name="android:checkboxStyle">#style/AppTheme.CheckBox</item>
</style>
button style:
<style name="AppTheme.Button" parent="android:Widget.Button">
<item name="android:background">#drawable/button_background</item>
<item name="android:textColor">#color/white</item>
<item name="android:textSize">#dimen/normal_text</item>
</style>
I can see it properly on the Android Studio preview, but doesn't work on device. It works on device if I set it in the element inside the layout.
<Button
android:id="#+id/btn_login"
style="#style/AppTheme.Button"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="LOGIN"/>
I just want to define it in the AppTheme
It's a bug, they will fix it in the new release of the AppCompat.
More info: https://code.google.com/p/android/issues/detail?id=170476
I want to achieve this:
But I am haven't been able to decrease the height of the tabs in ActionBarCompat. My tab height currently is the default one.
I read that if I decrease the size of ActionBar I can decrease the size of the tabs, and I have tried that but I want my ActionBar to stay at its normal size.
I have tried generating custom styles from Android Action Bar Style Generator but it didn't help me change the height of the tabs.
This is my style.xml
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="Theme.Musclemonster" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="actionBarItemBackground">#drawable/selectable_background_musclemonster</item>
<item name="popupMenuStyle">#style/PopupMenu.Musclemonster</item>
<item name="dropDownListViewStyle">#style/DropDownListView.Musclemonster</item>
<item name="actionBarTabStyle">#style/Theme.Musclemonster.TabsStyle</item>
<item name="actionDropDownStyle">#style/DropDownNav.Musclemonster</item>
<item name="actionBarStyle">#style/ActionBar.Solid.Musclemonster</item>
<item name="actionModeBackground">#drawable/cab_background_top_musclemonster</item>
<item name="actionModeSplitBackground">#drawable/cab_background_bottom_musclemonster</item>
<item name="actionModeCloseButtonStyle">#style/ActionButton.CloseMode.Musclemonster</item>
<item name="actionBarTabTextStyle">#style/Theme.Musclemonster.TabsTextStyle</item>
<!-- Light.DarkActionBar specific -->
<item name="actionBarWidgetTheme">#style/Theme.Musclemonster.Widget</item>
</style>
<style name="ActionBar.Solid.Musclemonster" parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="background">#drawable/ab_solid_musclemonster</item>
<item name="backgroundStacked">#drawable/ab_stacked_solid_musclemonster</item>
<item name="backgroundSplit">#drawable/ab_bottom_solid_musclemonster</item>
<item name="progressBarStyle">#style/ProgressBar.Musclemonster</item>
</style>
<style name="ActionBar.Transparent.Musclemonster" parent="#style/Widget.AppCompat.ActionBar">
<item name="background">#drawable/ab_transparent_musclemonster</item>
<item name="progressBarStyle">#style/ProgressBar.Musclemonster</item>
</style>
<style name="PopupMenu.Musclemonster" parent="#style/Widget.AppCompat.PopupMenu">
<item name="android:popupBackground">#drawable/menu_dropdown_panel_musclemonster</item>
</style>
<style name="DropDownListView.Musclemonster" parent="#style/Widget.AppCompat.ListView.DropDown">
<item name="android:listSelector">#drawable/selectable_background_musclemonster</item>
</style>
<style name="ActionBarTabStyle.Musclemonster" parent="#style/Widget.AppCompat.ActionBar.TabView">
<item name="android:background">#drawable/tab_indicator_ab_musclemonster</item>
</style>
<style name="DropDownNav.Musclemonster" parent="#style/Widget.AppCompat.Spinner.DropDown.ActionBar">
<item name="android:background">#drawable/spinner_background_ab_musclemonster</item>
<item name="android:popupBackground">#drawable/menu_dropdown_panel_musclemonster</item>
<item name="android:dropDownSelector">#drawable/selectable_background_musclemonster</item>
</style>
<style name="ProgressBar.Musclemonster" parent="#style/Widget.AppCompat.ProgressBar.Horizontal">
<item name="android:progressDrawable">#drawable/progress_horizontal_musclemonster</item>
</style>
<style name="ActionButton.CloseMode.Musclemonster" parent="#style/Widget.AppCompat.ActionButton.CloseMode">
<item name="android:background">#drawable/btn_cab_done_musclemonster</item>
</style>
<!-- this style is only referenced in a Light.DarkActionBar based theme -->
<style name="Theme.Musclemonster.Widget" parent="#style/Theme.AppCompat">
<item name="popupMenuStyle">#style/PopupMenu.Musclemonster</item>
<item name="dropDownListViewStyle">#style/DropDownListView.Musclemonster</item>
</style>
<!-- This style is for tabs -->
<style name="Theme.Musclemonster.TabsStyle" parent="#style/Widget.AppCompat.Base.ActionBar.TabView">
<item name="android:background">#drawable/tabbackground</item>
</style>
<style name="Theme.Musclemonster.TabsTextStyle" parent="#style/Widget.AppCompat.Base.ActionBar.TabText">
<item name="android:textColor">#android:color/white</item>
</style>
</resources>
This was generated by the Action Bar Style Generator. I have tried a lot of links from Google. I have around 20 tabs opened up in my Google Chrome right now. If I have missed any, kindly let me know. Or just let me know how can I achieve this style of tabs. Thanks!
What you need is ViewPager with title strip control instead of tabs, look at tutorial here and download the sample app to customize it.
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.PagerTitleStrip
android:id="#+id/pager_title_strip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#33b5e5"
android:textColor="#fff"
android:paddingTop="4dp"
android:paddingBottom="4dp" />
Hope this helped!
I would like to set my spinner drop down color to white, whilst keeping the other elements in my theme the default color. Here is the situation:
<android.support.v7.widget.Toolbar
android:layout_height="#dimen/action_bar_height"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="#style/ToolbarTheme.Base"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"/>
</android.support.v7.widget.Toolbar>
And the style is:
<!-- My base app theme -->
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/theme_tint</item>
<!-- <item name="colorControlNormal">#FFFFFF</item> -->
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="android:typeface">sans</item>
<item name="android:windowBackground">#color/background_primary</item>
</style>
<!-- My Toolbar theme -->
<style name="ToolbarTheme.Base" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="colorControlNormal">#FFFFFF</item>
</style>
If I was to put <item name="colorControlNormal">#FFFFFF</item> in the App theme (commented out above) then the spinner drop down will do to white BUT the checkbox will also turn white. So how can I get the spinner ONLY to go white?
Finally, I have found a solution on how to change arrow color of Spinner to white.
1) In styles.xml, add the following style:
<style name="ActionBarThemeOverlay" parent="">
<item name="android:textColorPrimary">#ffffff</item>
<item name="colorControlNormal">#ffffff</item>
<item name="colorControlHighlight">#ff33b5e5</item>
</style>
<style name="Widget.MyTheme.HeaderBar.Spinner" parent="Widget.AppCompat.Light.Spinner.DropDown.ActionBar">
<item name="android:theme">#style/ActionBarThemeOverlay</item>
</style>
2) In the layout, where you use the Spinner (in your case with Toolbar), add the style to your spinner:
<Spinner
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/my_spinner"
style="#style/Widget.MyTheme.HeaderBar.Spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
Just stumbled across this questions. Even though it has been asked some time ago I just wanted to leave an answer that should work:
Toolbar *.xml
<android.support.v7.widget.Toolbar
<!-- leave the theme stuff out of here -->
style="#style/MyToolbarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content">
Styles / Themes
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- your other attributes -->
<!-- following is used to tint the checkbox - purple for demo purpose -->
<item name="colorControlNormal">#2196F3</item>
</style>
<style name="MyToolbarStyle">
<item name="android:minHeight">?actionBarSize</item>
<item name="android:background">?colorPrimary</item>
<item name="popupTheme">#style/ThemeOverlay.AppCompat.Light</item>
<item name="theme">#style/MyToolbarTheme</item>
</style>
<style name="MyToolbarTheme">
<!-- Used to tint the back arrow, menu and spinner arrow -->
<item name="colorControlNormal">#FFF</item>
</style>
Result
Note: I made the checkbox purple for demo purpose