I was using Material design 1.1.0
For Tabs with Viewpager2 . I updated it to '1.2.0-alpha05' Material library version it was working fine for single module but was crashing for another module where I've developed my custom material designed TextInputLayout. I changed theme from 'Theme.AppCompat.Light.NoActionBar' to Theme.MaterialComponents.Light.NoActionBar and crash fixed. After fixing crash and upgrading theme it is showing me white floating label , buttons , indiators etc anyone please guide me where am I doing wrong.?
GITHUb Issue Ticket Link :
https://github.com/material-components/material-components-android/issues/1207
TextInputLayout
Style.xml (Old File)
#color/white
#color/colorPrimary_New
#color/a465661
old file had conflict with material while using AppCompact with parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense" after updating to 1.2.0-alpha05 it was resolved but style background is not working now
Library
materialVersion = '1.2.0-alpha05'
"com.google.android.material:material:$materialVersion"
.XML (Design)
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayout"
style="#style/contentInputLayoutStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_8dp"
android:paddingStart="5dp"
android:paddingLeft="5dp"
app:helperTextEnabled="true"
android:layout_marginLeft="#dimen/_8dp"
android:layout_marginEnd="#dimen/_8dp"
android:layout_marginRight="#dimen/_8dp"
app:errorEnabled="false"
app:layout_constraintBottom_toTopOf="#+id/errorTextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:hint="#string/EnterMobileNumber">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/textInputEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="phone"
android:gravity="start"
android:textDirection="anyRtl"
tools:text="0335510023"
android:background="#null"
android:paddingEnd="#dimen/inputFieldPadding_36dp"
android:paddingRight="#dimen/inputFieldPadding_36dp" />
</com.google.android.material.textfield.TextInputLayout>
Style.xml
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar" >
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/white</item>
<item name="colorPrimaryDark">#color/green</item>
<item name="colorAccent">#color/a465661</item>
</style>
<style name="contentInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
<item name="boxStrokeColor">#color/border_stroke_grey</item>
<item name="android:textColor">#color/black</item>
<item name="android:textStyle">normal</item>
<item name="errorTextAppearance">#style/error_label</item>
<item name="counterOverflowTextAppearance">#style/AppTheme.TextFloatLabelAppearance</item>
<item name="android:actionOverflowButtonStyle">#style/AppTheme.TextFloatLabelAppearance
</item>
<item name="hintTextAppearance">#style/text_label</item>
</style>
<style name="text_label" parent="TextAppearance.Design.Hint">
<item name="android:textSize">#dimen/title_heading_12sp</item>
<item name="colorControlNormal">#color/black</item>
<item name="colorControlActivated">#color/black</item>
<item name="colorControlHighlight">#color/black</item>
</style>
<style name="text_label_green" parent="TextAppearance.Design.Hint">
<item name="android:textSize">#dimen/title_heading_12sp</item>
<item name="colorControlNormal">#color/green_field</item>
<item name="android:background">#null</item>
<item name="colorControlActivated">#color/green_field</item>
<item name="colorControlHighlight">#color/green_field</item>
</style>
<style name="AppTheme.TextFloatLabelAppearance" parent="text_label">
<!-- Floating label appearance here -->
<item name="android:textColor">#color/label_title_black</item>
<item name="android:textSize">#dimen/title_heading_12sp</item>
<item name="android:background">#android:color/transparent</item>
<item name="colorControlNormal">#color/label_title_black</item>
<item name="colorControlHighlight">#color/label_title_black</item>
<item name="colorControlActivated">#color/label_title_black</item>
</style>
<style name="material_edit_text" parent="Widget.AppCompat.EditText">
<item name="android:paddingStart">50dp</item>
<item name="android:paddingLeft">50dp</item>
<item name="android:background">#null</item>
<item name="android:textSize">16sp</item>
</style>
<style name="error_label" parent="TextAppearance.Design.Hint">
<item name="android:textSize">0sp</item>
<item name="android:textColor">#color/red</item>
<item name="android:visibility">gone</item>
</style>
<style name="BtnCustomStyle">
<item name="android:background">#drawable/btn_confirm_selector</item>
<item name="android:textColor">#android:color/white</item>
<item name="android:textSize">15dp</item>
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">46dp</item>
<item name="android:layout_marginStart">10dp</item>
<item name="android:layout_marginEnd">10dp</item>
<item name="android:textAllCaps">false</item>
<item name="android:foreground">android:attr/selectableItemBackground</item>
</style>
Style(v27).xml (deleted file)
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/white</item>
<item name="colorPrimaryDark">#color/colorPrimary_New</item>
<item name="colorAccent">#color/a465661</item>
<item name="android:windowLayoutInDisplayCutoutMode">never</item>
</style>
Update
"Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
this line was causing crash while using appCompact Theme.
Read topic on material design UI update. According to this document I've to add few attributes that are below!
<!-- New MaterialComponents attributes. -->
<item name="colorOnPrimary">#color/whitee</item>
<item name="colorOnSecondary">#color/colorPrimary_New</item>
<item name="colorOnSurface">#color/a465661</item>-->
<item name="colorSurface">#color/a465661</item>-->
<item name="colorOnBackground">#212121</item>-->
<item name="android:colorBackground">#color/background</item>
<item name="colorError">#F44336</item>-->
<item name="colorOnError">#FFFFFF</item>
but , I tried changing color for TextInputLayout its working fine but for button its not. anyone please guide me how to handle this with new material design.?
update :
android:theme="#style/Theme.MaterialComponents.Light"
add the above-mentioned theme to the widget and it will solve your issue.for example.
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="0dp"
android:layout_marginStart="0dp"
android:theme="#style/Theme.MaterialComponents.Light"
app:itemIconTint="#drawable/bottom_navigation_background"
app:itemTextColor="#drawable/bottom_navigation_background"
android:layout_alignParentBottom="true"
app:menu="#menu/navigation"
app:labelVisibilityMode="labeled"
app:itemTextAppearanceActive="#style/BottomNavigationActive"
app:itemTextAppearanceInactive="#style/BottomNavigationInactive" />
Related
Can I create custom reformat code?
When I press Ctrl + Alt + L in themes file the result will be like this
<resources>
<style name="Theme.Test" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/purple_500</item>
<item name="colorPrimaryVariant">#color/purple_700</item>
<item name="colorOnPrimary">#color/white</item>
</style>
</resources>
I want it like this one
<resources>
<style name="Theme.Test" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/purple_500</item>
<item name="colorPrimaryVariant">#color/purple_700</item>
<item name="colorOnPrimary">#color/white</item>
</style>
</resources>
Is it possible to do that?
I'm trying to style a ListPreference Dialog to suit a dark theme, with the accent color given by my code. However, the text color for each option does not seem to change no matter what attribute I add to it. Is there a way to do this without having to create my own Dialog class?
P.s. I have tried the solution given in this answer: ListPreference text color
And no, it does not seem to work.
Here's the required code from styles.xml: (Not the entire code but it's all I need to show)
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="dialogPreferenceStyle">#style/DialogBoxTheme</item>
<item name="listDividerAlertDialog">#style/DialogBoxTheme</item>
<item name="alertDialogStyle">#style/DialogBoxTheme</item>
<item name="alertDialogTheme">#style/DialogBoxTheme</item>
</style>
<style name="DialogBoxTheme" parent="ThemeOverlay.AppCompat.Dialog.Alert">
<item name="android:layout_centerHorizontal">true</item>
<item name="android:layout_centerVertical">true</item>
<item name="android:layout_gravity">center</item>
<item name="android:layout_width">320dp</item>
<item name="android:layout_height">200dp</item>
<item name="android:layout_marginStart">16dp</item>
<item name="android:layout_marginEnd">16dp</item>
<item name="android:textColorPrimary">#color/colorPrimary</item>
<item name="android:textColorSecondary">#color/colorPrimary</item>
<item name="android:textColorHint">#color/Silver</item>
<item name="android:textColorTertiary">#color/colorAccent</item>
<item name="android:textColor">#color/colorPrimary</item>
<item name="android:colorAccent">#color/colorAccent</item>
<item name="android:background">#color/cpWhite</item>
<item name="textColorAlertDialogListItem">#color/colorPrimary</item>
<item name="android:textColorAlertDialogListItem">#color/colorPrimary</item>
</style>
(note that I've set colorPrimary and colorAccent to vary with the theme)
Here's the output that it gives:
ListPreference Dialog appearance
Answering my own question:
I forgot to add the attribute
<item name="android:alertDialogTheme">#style/DialogBoxTheme</item>
to the AppTheme in styles.xml.
I made new style in styles.xml file and am trying to use it at the TextView objects in activity_main.xml file but I keep getting error: cannot resolve flag. What's wrong? I was trying to make other styles and it's the same error.
Styles.xml:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#ff0000</item>
<item name="colorPrimaryDark">#ffffff</item>
<item name="colorAccent">#19df19</item>
</style>
<style name="pytanie">
<item name="android:textSize">20sp</item>
<item name="android:textAllCaps">true</item>
<item name="android:textStyle">italic</item>
<item name="android:textColor">000000</item>
<item name="android:textColorHighlight">#ff0000</item>
</style>
In main_activity.xml:
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center_horizontal"
android:text="pytanie numer 1"
android:textStyle="#styles/pytanie"/>
seems like I am the only one on SO with such problem. Why, android, why ?...
have a look at the image. Only the title is centered (phew). The other two items... help!
here is the relevant xml mojo
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/dl_base"
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:fitsSystemWindows="true"
tools:openDrawer="start">
<android.support.design.widget.CoordinatorLayout
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:fitsSystemWindows="false"
tools:context="com.farmdog.farmdog.HelperActivity">
<android.support.design.widget.AppBarLayout
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:paddingTop="#dimen/appbar_padding_topbottom"
android:paddingBottom="#dimen/appbar_padding_topbottom"/>
</android.support.design.widget.AppBarLayout>
and the styles:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<!-- colorPrimaryDark wont work on API level < 21 -->
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowBackground">#color/mainBkgndHard</item>
<item name="android:textColor">#color/appTextColor</item>
<item name="android:buttonStyle">#style/ButtonTheme</item>
<!-- attempt taking actionbar shadow away -->
<item name="elevation">0dp</item>
<item name="android:windowContentOverlay">#null</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="actionMenuTextColor">#color/appTextColor</item>
<item name="titleTextColor">#color/appTextColor</item>
<item name="colorControlNormal">#color/appTextColor</item>
<item name="android:layout_centerVertical">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="colorPrimary">#color/colorActionBar</item>
</style>
You have set toolbar paddingTop and paddingBottom. You should remove them. I hope it will help resolve your problem.
I use ActionBar in my Application. And I customized my own actionbar theme as the android developer site puts. unfortunately, My style doesn't work anyway. Every time my app is runned, there is an IllegalStateException thrown. And the detail is "You need to use a Theme.AppCompat theme (or descendant) with this activity.". Then, my custom style is here:
<resources>
<!-- the theme applied to the application or activity -->
<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#8FB01C</item>
<!-- colorPrimaryDark is used for the status bar -->
<item name="colorPrimaryDark">#CCE96B</item>
<item name="colorAccent">#303A0A</item>
</style>
<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
<!-- the theme applied to the application or activity -->
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="android:actionBarTabTextStyle">#style/TabTextStyle</item>
<item name="android:actionMenuTextColor">#color/action_bar_text_color</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">#style/MyActionBar</item>
<item name="actionBarTabTextStyle">#style/TabTextStyle</item>
<item name="actionMenuTextColor">#color/action_bar_text_color</item>
</style>
<!-- ActionBar theme. -->
<style name="ActionBarTheme" parent="AppTheme">
<!-- when hide or show ActionBar frequently, use this attribute. -->
<item name="windowActionBarOverlay">true</item>
</style>
<!-- general styles for the action bar -->
<style name="MyActionBar" parent="#style/Widget.AppCompat.ActionBar">
<item name="android:titleTextStyle">#style/TitleTextStyle</item>
<item name="android:background">#drawable/actionbar_background</item>
<item name="android:backgroundStacked">#drawable/actionbar_background</item>
<item name="android:backgroundSplit">#drawable/actionbar_background</item>
<!-- Support library compatibility -->
<item name="titleTextStyle">#style/TitleTextStyle</item>
<item name="background">#drawable/actionbar_background</item>
<item name="backgroundStacked">#drawable/actionbar_background</item>
<item name="backgroundSplit">#drawable/actionbar_background</item>
</style>
<!-- action bar title text -->
<style name="TitleTextStyle" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#400040</item>
</style>
<!-- action bar tab text -->
<style name="TabTextStyle" parent="#style/Widget.AppCompat.ActionBar.TabText">
<item name="android:textColor">#400040</item>
</style>
</resources>
And my manifest about this activity is here:
<activity
android:name=".HomeActivity"
android:label="#string/app_name"
android:launchMode="singleInstance"
android:theme="#style/ActionBarTheme"
android:uiOptions="splitActionBarWhenNarrow" >
</activity>
But the strange thing is when I set android:theme="#style/ActionBarTheme" to android:theme="#style/Theme.Appcomat.Light", it works well. But the style is not what I want. So, it does confuse me. So, I want to know why my custom style doesn't work.
Alright, After the ActionBarTheme is changed into this:
<style name="ActionBarTheme" parent="#style/Theme.AppCompat.Light">
<item name="colorPrimary">#8FB01C</item>
<item name="colorPrimaryDark">#CCE96B</item>
<item name="colorAccent">#4D4DFF</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="android:actionBarTabTextStyle">#style/TabTextStyle</item>
<item name="android:actionMenuTextColor">#color/action_bar_text_color</item>
<item name="actionBarStyle">#style/MyActionBar</item>
<item name="actionBarTabTextStyle">#style/TabTextStyle</item>
<item name="actionMenuTextColor">#color/action_bar_text_color</item>
<item name="windowActionBarOverlay">true</item>
</style>
it works well. Yep, here:
<style name="ActionBarTheme" parent="AppTheme">
It doesn't work. So I want to know why. Can't custom style be inherited, something wrong with my dev environment, or something else?
Maybe this is just the problem of your IDE. If you are using Eclipse, project-->clean, and then select your project, OK, then your project will rebuild. If you are using Android Studio, then, Build-->Rebuild Project or Clean Project, then take a look at the result.