I try like this:
styles.xml:
<style name="EditTextStyle" parent="Widget.AppCompat.EditText">
<item name="android:layout_marginBottom">12dp</item>
<item name="android:backgroundTint">#color/editTextUnderline</item>
<item name="android:drawableLeft">#drawable/ic_sample_action</item>
<item name="android:drawablePadding">8dp</item>
<item name="android:paddingTop">15dp</item>
<item name="android:paddingBottom">25dp</item>
<item name="android:textColor">#color/colorTextPrimary</item>
<item name="android:textColorHint">#color/editTextHintColor</item>
<item name="android:textSize">16sp</item>
<item name="android:fontFamily">#font/viga</item>
<item name="android:inputType">text</item>
</style>
And then I use it in layout file:
<EditText
style="#style/EditTextStyle"
android:id="#+id/input_title"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:hint="Title"
android:text="#={viewModel.title}" />
However I do not see any changes. Why could that be?
I chanded style parent to #style/Widget.AppCompat.EditText and it worked.
Related
The Hint is always vertically centred and I want it to be aligned to the bottom of the view close to the border with a bit padding. I managed to do it for the text of the TextInputEditText but I cannot do it for the hint.
Here's how it looks
And here is my layout XML:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/first_name_layout"
style="#style/My.TextInputLayout.FilledBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/first_name"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/first_name_edit_text"
style="#style/TextInputEditTextForm"
android:inputType="textPersonName" />
</com.google.android.material.textfield.TextInputLayout>
And my styles.xml
<style name="My.TextInputLayout.FilledBox" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
<item name="materialThemeOverlay">#style/MyThemeOverlayFilledPadding</item>
<item name="android:gravity">bottom</item>
<item name="android:textColorHint">#color/gray</item>
<item name="boxBackgroundColor">#android:color/transparent</item>
<item name="boxStrokeColor">#color/grey_little</item>
<item name="boxStrokeWidth">0.5dp</item>
<item name="hintTextAppearance">#style/FormInputLabel</item>
<item name="hintTextColor">#color/gray</item>
</style>
<style name="MyThemeOverlayFilledPadding">
<item name="colorControlActivated">#color/gray_light</item>
<item name="editTextStyle">#style/MyTextInputEditText_filledBox_padding</item>
</style>
<style name="MyTextInputEditText_filledBox_padding" parent="#style/Widget.MaterialComponents.TextInputEditText.FilledBox">
<item name="android:paddingBottom">5dp</item>
</style>
<style name="TextInputEditTextForm" >
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">match_parent</item>
<item name="android:gravity">bottom</item>
<item name="android:lines">1</item>
<item name="android:textColor">#color/gray_x_dark</item>
<item name="android:textSize">#dimen/text_xx_small</item>
</style>
<style name="MyThemeOverlayFilledPaddingHint">
<item name="android:paddingBottom">5dp</item>
<item name="android:gravity">bottom</item>
</style>
<style name="FormInputLabel" parent="TextAppearance.Design.Hint">
<item name="android:textSize">#dimen/text_xxxx_small</item>
<item name="materialThemeOverlay">#style/MyThemeOverlayFilledPaddingHint</item>
<item name="android:gravity">bottom</item>
</style>
The hint is drawn by helper class CollapsingTextHelper which is available in private-package scope.
You can access the field via reflection but accessing private field is only available on pre Orea devices
In newly published Material Design Component, there is no Spinner component. That's why I want to use Exposed Dropdown Menus to implement something similar like Spinner. The Problem I am facing is AutoCompleteTextView is not aligned in center compare to the endIconDrawable. My Code is given bellow
activity.main.xml
<com.google.android.material.textfield.TextInputLayout
style="#style/OutLinedEditTextStyle.Spinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Select Country"
android:layout_margin="#dimen/_10sdp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.578"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/materialToolbar"
app:layout_constraintVertical_bias="0.0">
<AutoCompleteTextView
android:id="#+id/filled_exposed_dropdown"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:completionThreshold="1"
android:dropDownVerticalOffset="#dimen/_5sdp"/>
</com.google.android.material.textfield.TextInputLayout>
style.xml
<resources xmlns:tools="http://schemas.android.com/tools">
<style name="OutLinedEditTextStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="boxBackgroundMode">outline</item>
<item name="boxBackgroundColor">#color/colorWindowBackground</item>
<item name="boxStrokeColor">#color/colorTextPrimary</item>
<item name="boxStrokeErrorColor">#color/red</item>
<item name="boxStrokeWidth">#dimen/_2sdp</item>
<item name="boxStrokeWidthFocused">#dimen/_2sdp</item>
<item name="errorTextColor">#color/red</item>
<item name="errorEnabled">true</item>
<item name="hintEnabled">true</item>
<item name="hintTextColor">#color/colorTextPrimary</item>
<item name="android:textColorHint">#color/colorTextSecondary</item>
</style>
<style name="OutLinedEditTextStyle.Spinner">
<item name="materialThemeOverlay">#style/ThemeOverlay.MaterialComponents.AutoCompleteTextView.FilledBox</item>
<item name="endIconMode">custom</item>
<item name="endIconDrawable">#drawable/ic_download</item>
<item name="endIconContentDescription">Drop down</item>
</style>
</resources>
Finally I can solve the problem. The fault was, I inherit the wrong Parent class of Dropdown menu.
<style name="SpinnerStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="boxBackgroundMode">outline</item>
<item name="boxBackgroundColor">#color/colorWindowBackground</item>
<item name="boxStrokeColor">#color/colorTextPrimary</item>
<item name="boxStrokeErrorColor">#color/red</item>
<item name="boxStrokeWidth">#dimen/_2sdp</item>
<item name="boxStrokeWidthFocused">#dimen/_2sdp</item>
<item name="errorTextColor">#color/red</item>
<item name="errorEnabled">true</item>
<item name="hintEnabled">true</item>
<item name="hintTextColor">#color/colorTextPrimary</item>
<item name="android:textColorHint">#color/colorTextSecondary</item>
<item name="endIconMode">clear_text</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>
Instead of setting the layout_toRightof, layout_toLeftof, layout_above and layout_below parameters everytime a view is created, is there a way to include it in the styles.xml file such that it becomes easier to implement instead of typing it every single time? This is the intended layout.
I've included my activityMain.xml and styles.xml files below.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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:padding="24dp"
tools:context="com.example.android.musiclibrary.MainActivity"
android:background="#fcfcfc">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
style="#style/song_group">
<ImageView
android:src="#drawable/n30_Seconds_to_Mars"
android:id="#+id/thumbnail1"
style="#style/icon"
/>
<TextView
android:layout_toRightOf="#id/thumbnail1"
android:text="Up In The Air"
android:id="#+id/song1"
style="#style/song"
/>
<TextView
android:layout_toRightOf="#id/thumbnail1"
android:text="30 seconds to Mars"
style="#style/artist"
/>
</RelativeLayout>
</LinearLayout>
</ScrollView>
Here's my styles.xml 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/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="icon">
<item name="android:scaleType">fitCenter</item>
<item name="android:maxWidth">42dp</item>
<item name="android:maxHeight">42dp</item>
<item name = "android:adjustViewBounds">true</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">match_parent</item>
</style>
<style name="song">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_marginLeft">6dp</item>
<item name="android:textColor">#000000</item>
<item name="android:textSize">17sp</item>
</style>
<style name="artist">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_alignParentBottom">true</item>
<item name="android:layout_marginLeft">6dp</item>
<item name="android:textSize">14sp</item>
<item name="android:textColor">#000000</item>
<item name="android:textStyle">italic</item>
</style>
<style name="song_group">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">0dp</item>
<item name="android:orientation">horizontal</item>
<item name="android:layout_weight">1</item>
<item name="android:padding">10dp</item>
</style>
</resources>
I have been trying to apply style to a EditText and a Toolbar and it seems not to work, it's the first time that is happening to me, here is my code for styles:
<resources>
<style name="WifiHome" parent="#style/Theme.AppCompat.NoActionBar">
<item name="android:windowBackground">#color/light_blue</item>
<item name="android:textAppearance">#style/WifiHomeTextAppearance</item>
<item name="android:textViewStyle">#style/MyTextViewStyle</item>
<item name="android:textColor">#color/dark_blue</item>
</style>
<style name="WifiHomeBarStyle" parent="#style/Widget.AppCompat.Toolbar">
<item name="android:background">#color/dark_blue</item>
<item name="colorControlNormal">#color/white</item>
<item name="colorControlActivated">#color/white</item>
<item name="colorControlHighlight">#color/white</item>
<item name="background">#color/dark_blue</item>
</style>
<style name="EditTextStyle" parent="#style/Widget.AppCompat.EditText">
<item name="colorControlNormal">#color/dark_blue</item>
<item name="colorControlActivated">#color/dark_blue</item>
<item name="colorControlHighlight">#color/dark_blue</item>
</style>
<style name="MyTextViewStyle" parent="android:Widget.TextView">
<item name="android:textAppearance">#style/WifiHomeTextAppearance</item>
</style>
<style name="WifiHomeTextAppearance" parent="#android:style/TextAppearance.Medium">
<item name="android:textColor">#color/dark_blue</item>
<item name="android:textSize">15dp</item>
</style>
<style name="WifiHomeTextAppearance.Large" parent="#style/WifiHomeTextAppearance">
<item name="android:textSize">18dp</item>
<item name="android:textStyle">bold</item>
</style>
Here the declaration of EditText:
<EditText
style="#style/EditTextStyle"
android:id="#+id/txtPass"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:textColor="#color/dark_blue"
android:layout_below="#id/lblPass"/>
And the declaration of toolbar:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
style="#style/WifiHomeBarStyle"
android:id="#+id/app_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/dark_blue"
android:minHeight="?attr/actionBarSize" />
Simply it doesn't work, no effect.
Try changing your code like this,
<style name="WifiHome" parent="#style/Theme.AppCompat.NoActionBar">
<item name="android:windowBackground">#color/light_blue</item>
<item name="android:textAppearance">#style/WifiHomeTextAppearance</item>
<item name="android:textViewStyle">#style/MyTextViewStyle</item>
<item name="android:textColor">#color/dark_blue</item>
<item name="colorControlNormal">#color/dark_blue</item>
<item name="colorControlActivated">#color/dark_blue</item>
<item name="colorControlHighlight">#color/dark_blue</item>
</style>
OR something like this in your EditText definition,
style="#style/Widget.AppCompat.EditText