I want to create MaterialButtonToggleGroup without having my AppTheme inheriting Theme.MaterialComponents.Light.DarkActionBar. So I tried to inherit Theme.MaterialComponents.Light.DarkActionBar.Bridge but then the MaterialButtonToggleGroup is completely gone, does not show anything on the view. It does work when I remove the .Bridge. How to correctly use MaterialButtonToggleGroup without inheriting from a Material Components theme?
styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar.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="borderlessButtonStyle">#style/Widget.App.Button.TextButton</item>
<item name="materialButtonOutlinedStyle">#style/Widget.App.Button.OutlinedButton</item>
<item name="materialButtonStyle">#style/Widget.App.Button</item>
</style>
<style name="Widget.App.Button.TextButton" parent="Widget.MaterialComponents.Button.TextButton">
<item name="materialThemeOverlay">#style/ThemeOverlay.App.Button.TextButton</item>
<item name="android:textAppearance">#style/TextAppearance.App.Button</item>
<item name="shapeAppearance">#style/ShapeAppearance.App.SmallComponent</item>
</style>
<style name="Widget.App.Button.OutlinedButton" parent="Widget.MaterialComponents.Button.OutlinedButton">
<item name="materialThemeOverlay">#style/ThemeOverlay.App.Button.TextButton</item>
<item name="android:textAppearance">#style/TextAppearance.App.Button</item>
<item name="shapeAppearance">#style/ShapeAppearance.App.SmallComponent</item>
</style>
<style name="Widget.App.Button" parent="Widget.MaterialComponents.Button">
<item name="materialThemeOverlay">#style/ThemeOverlay.App.Button</item>
<item name="android:textAppearance">#style/TextAppearance.App.Button</item>
<item name="shapeAppearance">#style/ShapeAppearance.App.SmallComponent</item>
</style>
<style name="ThemeOverlay.App.Button.TextButton" parent="">
<item name="colorPrimary">#color/colorPrimary</item>
</style>
<style name="ThemeOverlay.App.Button" parent="">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorOnPrimary">#ffffff</item>
</style>
<style name="TextAppearance.App.Button" parent="TextAppearance.MaterialComponents.Button">
<item name="fontFamily">serif</item>
<item name="android:fontFamily">serif</item>
</style>
<style name="ShapeAppearance.App.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent">
<item name="cornerFamily">cut</item>
<item name="cornerSize">4dp</item>
</style>
</resources>
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<com.google.android.material.button.MaterialButtonToggleGroup
android:id="#+id/toggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1"
style="#style/Widget.App.Button.OutlinedButton"
/>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 2"
style="#style/Widget.App.Button.OutlinedButton"
/>
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 3"
style="#style/Widget.App.Button.OutlinedButton"
/>
</com.google.android.material.button.MaterialButtonToggleGroup>
</LinearLayout>
I overlooked that the error log said that the buttons inside MaterialButtonToggleGroup must be MaterialButton. When not inheriting Material Components theme, I have to explicitly use MaterialButton class instead of Button class.
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 need to apply a custom style to a Spinner.
These are my styles in styles.xml:
<style name="spinnerItemStyle">
<item name="android:textColor">#color/font</item>
<item name="android:textSize">#dimen/small_text</item>
</style>
<style name="spinnerDropDownItemStyle">
<item name="android:padding">10dp</item>
<item name="android:textColor">#color/font</item>
<item name="android:textSize">#dimen/small_text</item>
<item name="android:background">#color/unpressed2</item>
</style>
And I'm doing this in the layout:
android:spinnerItemStyle="#style/spinnerItemStyle"
android:spinnerDropDownItemStyle="#style/spinnerDropDownItemStyle"
<Spinner
android:id="#+id/songSpinner"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="30dp"
android:layout_marginRight="30dp"
android:textSize="#dimen/small_text"
android:entries="#array/songs_array"
android:spinnerItemStyle="#style/spinnerItemStyle"
android:spinnerDropDownItemStyle="#style/spinnerDropDownItemStyle"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.18"
app:layout_constraintTop_toBottomOf="#+id/musicSeekBar"
app:layout_constraintWidth_percent="0.5" />
The problem is that Spinner is ignoring the styles applied.
And also I disscovered that it works perfectly if I do this in my custom app theme inside styles.xml:
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="colorButtonNormal">#color/unpressed2</item>
<item name="android:buttonStyle">#style/ButtonColor</item>
<item name="android:textColor">#color/font</item>
<!-- spinner styles -->
<item name="android:spinnerItemStyle">
#style/spinnerItemStyle
</item>
<item name="android:spinnerDropDownItemStyle">
#style/spinnerDropDownItemStyle
</item>
</style>
Why works with my second approach and not with the first?
styles.xml File
Add below xml code in your styles.xml File.
<style name="CustomSpinner" parent="AppTheme">
<item name="android:spinnerItemStyle">#style/spinnerItemStyle</item>
<item name="android:spinnerDropDownItemStyle">#style/spinnerDropDownItemStyle</item>
</style>
yourlayout.xml
In Spinner use this styles
For E.g:-
<Spinner
android:id="#+id/songSpinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:theme="#style/CustomSpinner">
</Spinner>
I am using BottomNavigationView but observing a strange issue.
When used with the theme "Theme.AppCompat.Light.DarkActionBar", Text and Icon Resize animation works fine on each item when clicked.
But When used with theme "Theme.MaterialComponents.Light.DarkActionBar",
it's not working, No Resize animation happening.
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#212121"
app:itemIconTint="#color/nav_item_color_state"
app:itemTextColor="#color/nav_item_color_state"
app:menu="#menu/bottom_menu_main"/>
nav_item_color_state.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/action_nav_feed"
android:icon="#android:drawable/ic_input_add"
android:checked="true"
android:title="List"/>
<item
android:id="#+id/action_nav_info"
android:icon="#android:drawable/ic_notification_overlay"
android:title="Info"/>
<item
android:id="#+id/action_nav_profile"
android:icon="#android:drawable/ic_delete"
android:title="Profile"/>
</menu>
style.xml
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<!-- Theme.AppCompat.Light.DarkActionBar -->
Try using the properties app:itemTextAppearanceActive and app:itemTextAppearanceInactive
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#212121"
app:itemIconTint="#color/nav_item_color_state"
app:itemTextAppearanceActive="#style/BottomNavigationView.Active"
app:itemTextAppearanceInactive="#style/BottomNavigationView"
app:itemTextColor="#color/nav_item_color_state"
app:menu="#menu/bottom_menu_main"/>
In styles.xml
<style name="BottomNavigationView"
parent="#style/TextAppearance.AppCompat.Caption">
<item name="android:textSize">10sp</item>
</style>
<style name="BottomNavigationView.Active"
parent="#style/TextAppearance.AppCompat.Caption">
<item name="android:textSize">15sp</item>
</style>
There's no need to set theme for this View, these styles will do the thing.
I have so specific problem. I'm applying theme for all textviews. It appears on preview but when I run this app on phone I face with unstyled textview. The styles I set for other views are working. only textviewstyle is not working.
In this sample textview color is green in preview but when i run it on phone its black. Why?
style.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:textViewStyle">#style/myTextViewStyle</item>
<item name="android:buttonStyle">#style/myButtonStyle</item>
<item name="android:editTextStyle">#style/myEditTextStyle</item>
<!-- Customize your theme here. -->
</style>
<style name="myTextViewStyle" parent="#android:style/Widget.TextView">
<item name="android:textColor">#00ff00</item>
<item name="android:textSize">24sp</item>
</style>
<style name="myButtonStyle" parent="#android:style/Widget.Button">
<item name="android:textColor">#00ff00</item>
<item name="android:textSize">24sp</item>
</style>
<style name="myEditTextStyle" parent="#android:style/Widget.EditText">
<item name="android:textColor">#00ff00</item>
<item name="android:textSize">24sp</item>
</style>
activity_main.xml
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="button" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="edit text" />
"textViewStyle" is not defined in v22.1.1. You can find more detail from the link:
https://code.google.com/p/android/issues/detail?id=170476
I can never apply the style of the Facebook API in myself (Login button and share), I put in "theme" and insert the code styles.xml. The design appears but is invisible, how do I apply correctly?
sorry if it's a stupid question
XML
<RelativeLayout 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" android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context="com.morais.daniela.doctorquiz.AutenticationActivity">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:src="#drawable/xxxhdpi"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button4"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="45dp"
android:theme="#style/com_facebook_loginview_default_style" />
</RelativeLayout>
Styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
</style>
<style name="FullscreenTheme" parent="android:Theme.NoTitleBar.Fullscreen">
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowBackground">#null</item>
<item name="metaButtonBarStyle">#style/ButtonBar</item>
<item name="metaButtonBarButtonStyle">#style/ButtonBarButton</item>
</style>
<style name="RatingBar">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="SRB_size">50sp</item>
</style>
<!-- Backward-compatible version of ?android:attr/buttonBarStyle -->
<style name="ButtonBar">
<item name="android:paddingLeft">2dp</item>
<item name="android:paddingTop">5dp</item>
<item name="android:paddingRight">2dp</item>
<item name="android:paddingBottom">0dp</item>
<item name="android:background">#android:drawable/bottom_bar</item>
</style>
<style name="com_facebook_loginview_default_style" parent="com_facebook_button">
<item name="android:drawableLeft">#drawable/com_facebook_button_icon</item>
</style>
<!-- Backward-compatible version of ?android:attr/buttonBarButtonStyle -->
<style name="ButtonBarButton" />
</resources>