I am using the material slider, I want to change the custom font slider's toast
can anyone guide me
how to change the slider's font style?
My code:
<com.google.android.material.slider.Slider
android:theme="#style/ThemeOverlay.PrimaryPalette.Red"
style="#style/Widget.App.Slider"
android:id="#+id/sliderRadius"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stepSize="1"
android:valueFrom="0"
android:valueTo="20" />
<style name="Widget.App.Slider" parent="Widget.MaterialComponents.Slider">
<item name="android:textAppearance">#style/TextAppearance.App.Tooltip</item>
</style>
<style name="TextAppearance.App.Tooltip" parent="TextAppearance.MaterialComponents.Tooltip">
<item name="android:textColor">#color/purple_500</item>
<item name="fontFamily">#font/josefin_sans_semibold</item>
<item name="android:fontFamily">#font/josefin_sans_semibold</item>
</style>
<style name="ThemeOverlay.PrimaryPalette.Red" parent="">
<item name="colorPrimary">#e53935</item>
<item name="colorPrimaryDark">#ab000d</item>
<!-- <item name="android:textAppearance">#style/TextAppearance.App.Tooltip</item>-->
</style>
implementation 'com.google.android.material:material:1.3.0'
You can use something like:
<com.google.android.material.slider.Slider
style="#style/App.Slider"/>
with:
<style name="App.Slider" parent="#style/Widget.MaterialComponents.Slider">
<item name="labelStyle">#style/App.Tooltip</item>
</style>
<style name="App.Tooltip" parent="Widget.MaterialComponents.Tooltip">
<!-- background color of the Tooltip -->
<item name="backgroundTint">#color/...</item>
<!-- textAppearance of the Tooltip -->
<item name="android:textAppearance">#style/TextAppearance.App.Tooltip</item>
</style>
<style name="TextAppearance.App.Tooltip" parent="TextAppearance.MaterialComponents.Tooltip">
<item name="android:textColor">#color/....</item>
</style>
Related
I am migrating from M2 to M3 and my basic materialThemeOverlay no longer works. I follow the code at the bottom of the doc closely, it matched pretty much what I had for M2:
styles.xml
<style name="SecondaryThemeOverlay" parent="">
<item name="colorPrimary">#color/md_theme_light_secondary</item>
<item name="colorOnPrimary">#color/md_theme_light_onSecondary</item>
</style>
<style name="Widget.Button.Secondary" parent="Widget.Material3.Button">
<item name="materialThemeOverlay">#style/SecondaryThemeOverlay</item>
</style>
layout.xml:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Standard Button" />
<Button
style="#style/Widget.Button.Secondary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Standard Button Secondary" />
lib version is com.google.android.material:material:1.6.0-beta01, and the Activity is an AppCompatActivity.
App theme parent is Theme.Material3.DayNight.NoActionBar.
Also note that setting the backgroundTint works fine.
You should use ThemeOverlay on materialThemeOverlay like this.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Button style on both light and night mode -->
<style name="AppButtonStyle" parent="Widget.Material3.Button">
<item name="materialThemeOverlay">#style/ThemeOverlay.App.Button</item>
<item name="android:textAppearance">#style/TextAppearance.App.Button</item>
<item name="shapeAppearanceOverlay">#style/ShapeAppearance.App.SmallComponent</item>
</style>
<!-- Button with text style on both light and night mode -->
<style name="AppButtonTextStyle" parent="Widget.Material3.Button.TextButton">
<item name="materialThemeOverlay">#style/ThemeOverlay.App.Button.TextButton</item>
<item name="android:textAppearance">#style/TextAppearance.App.Button</item>
<item name="shapeAppearanceOverlay">#style/ShapeAppearance.App.SmallComponent</item>
</style>
<!-- Button outline style on both light and night mode -->
<style name="AppOutlinedButtonStyle" parent="Widget.Material3.Button.OutlinedButton">
<item name="materialThemeOverlay">#style/ThemeOverlay.App.Button.OutlinedButton</item>
<item name="android:textAppearance">#style/TextAppearance.App.Button</item>
<item name="shapeAppearanceOverlay">#style/ShapeAppearance.App.SmallComponent</item>
</style>
<style name="ThemeOverlay.App.Button" parent="ThemeOverlay.Material3.Button">
<!-- Background color -->
<item name="colorPrimary">#color/primaryDarkAccent</item>
<!-- Text color -->
<item name="colorOnPrimary">#android:color/white</item>
</style>
<style name="ThemeOverlay.App.Button.TextButton" parent="ThemeOverlay.Material3.Button.TextButton">
<!-- Background color -->
<item name="colorPrimary">#color/primaryDarkAccent</item>
<!-- Text color -->
<item name="colorOnSurface">#android:color/white</item>
</style>
<style name="ThemeOverlay.App.Button.OutlinedButton" parent="ThemeOverlay.Material3.Button">
<!-- Background color -->
<item name="colorOnSurface">#color/primaryDarkAccent</item>
<!-- Text color -->
<item name="colorPrimary">#color/primaryDarkAccent</item>
</style>
<style name="TextAppearance.App.Button" parent="TextAppearance.Material3.LabelLarge">
<item name="fontFamily">sans-serif-medium</item>
<item name="android:fontFamily">sans-serif-medium</item>
</style>
</resources>
Use it like this in you main theme.
<item name="materialButtonStyle">#style/AppButtonStyle</item>
Unfortunately the sample in the documentation seems incorrect as always.
I have this SeekBar in my app:
<SeekBar
android:id="#+id/volume_seek_bar"
android:layout_width="match_parent"
android:layout_height="40dp"
android:theme="#style/Volume_Seekbar" />
And this is the style file:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/toolbar_background</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="ProgressBarStyle">
<item name="colorAccent">#color/colorPrimary</item>
</style>
<style name="Volume_Seekbar">
<item name="colorPrimary">#color/app_blue</item>
<item name="colorPrimaryDark">#color/toolbar_background</item>
<item name="colorAccent">#color/app_blue</item>
</style>
I want to use the style to change the color of the SeekBar but it keeps taking the color definition from the AppTheme style. Any idea what is the problem?
With a SeekBar you can use:
<SeekBar
android:theme="#style/MySeekBar"
/>
with:
<style name="MySeekBar">
<item name="android:progressBackgroundTint">#color/....</item>
<item name="android:progressTint">#color/...</item>
<item name="android:colorControlActivated">#color/....</item>
</style>
Now you can also use the new Slider components provided by the Material Components Library:
<com.google.android.material.slider.Slider
android:valueFrom="0"
android:valueTo="300"
android:value="200"
android:theme="#style/slider_red"
/>
You can override the default color using something like:
<style name="slider_red">
<item name="colorPrimary">#......</item>
</style>
Note: Slider requires the version 1.2.0 of the Material Components.
I am using TextInputEditText in my registration screen. I am able to set the style of floating label. I want to set the custom font on hint and text of TextInputEditText using style. Does anyone know whats way of it ?
<android.support.design.widget.TextInputLayout
android:id="#+id/til_registration_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:paddingEnd="#dimen/default_view_padding_right_8dp"
android:paddingStart="#dimen/default_view_padding_left_8dp"
android:textColorHint="#color/colorSecondaryText"
app:hintTextAppearance="#style/AppTheme.InputLayoutStyle"
app:layout_constraintTop_toBottomOf="#id/textview_registration_title">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/registration_name"
android:imeOptions="actionNext"
android:singleLine="true"
android:textColor="#color/colorPrimaryText" />
</android.support.design.widget.TextInputLayout>
styles.xml
<style name="AppTheme.InputLayoutStyle" parent="TextAppearance.AppCompat">
<item name="android:textColor">#color/colorPrimary</item>
<item name="fontFamily">#font/lato_light</item>
</style>
<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="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="android:textViewStyle">#style/AppTheme.TextView</item>
<item name="buttonStyle">#style/AppTheme.Button</item>
</style>
I want to set style for entire application.
Old question but worth to answer.
Just set the "textInputStyle" to style the TextInputLayouts and "editTextStyle" to style the TextInputEditTexts in your app 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="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="android:textViewStyle">#style/AppTheme.TextView</item>
<item name="buttonStyle">#style/AppTheme.Button</item>
<item name="textInputStyle">
#style/MyCustomTextInputStyle
</item>
<item name="editTextStyle">
#style/MyCustomEditTextStyle
</item>
</style>
<style name="MyCustomTextInputStyle" parent="Widget.Design.TextInputLayout">
<item name="android:textColorHint">#color/colorSecondaryText</item>
<item name="hintTextAppearance">#style/any_style_you_may_want"</item>
</style>
<style name="MyCustomEditTextStyle" parent="Widget.AppCompat.EditText">
<item name="android:textColor">#color/colorPrimary</item>
<item name="fontFamily">#font/lato_light</item>
</style>
This will apply the same style to all TextInputLayout and TextInputEditText in you application.
I need to change cursor color and bottom line color to #FFFFFF of EditText in xml.
How I can to do that?
My styles.xml :
<resources>
<style name="AppTheme" parent="#style/Theme.AppCompat.Light.NoActionBar">
<item name="android:actionMenuTextColor">#color/toolbar_text_color</item>
<item name="colorAccent">#FFFFFF</item>
<item name="colorPrimary">#FFFFFF</item>
<item name="android:editTextStyle">#style/EditTextStyle</item>
<!--<item name="actionMenuTextColor">#color/toolbar_text_color</item>-->
</style>
<!-- Toolbar theme. -->
<style name="ToolbarTheme" parent="#style/Theme.AppCompat.NoActionBar">
<item name="actionMenuTextColor">#color/toolbar_text_color</item>
<item name="android:actionMenuTextColor">#color/toolbar_text_color</item>
<item name="android:textColorSecondary">#color/hockeyapp_button_background_pressed</item>
<item name="android:textColor">#color/toolbar_text_color</item>
<item name="android:background">#color/toolbar_bg_color</item>
</style>
<style name="EditTextStyle" parent="Widget.AppCompat.EditText">
<item name="colorControlNormal">#FFFFFF</item>
<item name="colorControlActivated">#FFFFFF</item>
<item name="colorControlHighlight">#FFFFFF</item>
</style>
</resources>
Definitinion of EditText :
<EditText
android:id="#+id/ed_profile_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="sans-serif"
android:hint="Profile id"
android:textColorHint="#color/white"
android:textSize="20dp"
android:layout_marginTop="20dp" />
Use material design EditText. Link for this Material Edit Text Library
Gradle line to add:
compile 'com.rengwuxian.materialedittext:library:2.1.4'
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)