I am trying to get my time picker to look like this:
The desired outcome
So I am doing what I found on This guide
And this is what I actually get:The true outcome
This is my custom style:
<style name="customTimePicker" parent="#android:style/Widget.Material.TimePicker">
<item name="android:timePickerMode">clock</item>
<item name="android:headerBackground">#0076a3</item>
<item name="android:numbersTextColor">#ffffff</item>
<item name="android:numbersInnerTextColor">#ffffff</item>
<item name="android:numbersSelectorColor">#fbc014</item>
<item name="android:numbersBackgroundColor">#004a80</item>
<item name="android:amPmTextColor">#ffffff</item>
</style>
And this is how I use it in my XML file:
<TimePicker
android:id="#+id/tpAnalog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:theme="#style/customTimePicker"
style="#style/customTimePicker"
android:visibility="visible"/>
On the preview screen on the android studio, it looks almost like I want preview on Android studio
So why when I ran it on my device this is not working?
Edit: I forgot to use this line of code on my activity theme:
<item name="android:timePickerStyle">#style/customTimePicker</item>
It seems to solve all my issues except that I still can't change the text color of the selected number. This is the text I want to change. Is that possible?
<style name="MyAppTheme" parent="Theme.AppCompat.Light">
<item name="colorAccent">#ff6d00</item>
<item name="colorControlActivated">#33691e</item>
<item name="android:selectableItemBackgroundBorderless">#color/colorPrimaryDark</item>
<item name="colorControlHighlight">#d50000</item>
Use this style it's work for me for the change background color.
<style name="MyTimePickerWidgetStyle" parent="#android:style/Widget.Material.TimePicker">
<item name="android:headerBackground">#0076A3</item>
<item name="android:numbersTextColor">#b71c1c</item>
<item name="android:numbersInnerTextColor">#f44336</item>
<item name="android:numbersSelectorColor">#DCA811</item>
<item name="android:numbersBackgroundColor">#004A80</item>
<item name="android:amPmTextColor">#fff</item>
</style>
<TimePicker
android:id="#+id/timePicker"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:background="#359EF3"
android:theme="#style/MyTimePickerWidgetStyle"
style="#style/MyTimePickerWidgetStyle" />
Related
I have one button and letterspacing is not working with it. Please check my following snippet code
<style name="ButtonText_v2" parent="TextAppearance.AppCompat">
<item name="fontFamily">#font/silka_regular</item>
<item name="android:letterSpacing">0.1</item>
<item name="android:textSize">#dimen/dimen_14dp</item>
</style>
<style name="PrimaryButton_v2" parent="Widget.AppCompat.Button">
<item name="android:background">#drawable/button_selector_primary</item>
<item name="android:textColor">#color/white</item>
<item name="textAllCaps">true</item>
<item name="textAppearance">#style/ButtonText_v2</item>
</style>
layout.xml File
<Button
android:text="Button"
android:layout_height="56dp"
android:layout_width="200dp"
style="#style/PrimaryButton_v2"
android:layout_margin="15dp"
/>
You can't apply letter spacing in button/custom button because their is some limitation in button component in which you can't make text appearance and background customization and more limitation
the solution for this is instead of button you can use text view and make custom text view it will also work similar to button and customize it according to requirement.
for example :-
https://stackoverflow.com/questions/9477336/how-to-make-a-custom-textview#:~:text=Create%20a%20Custom%20View%20for%20Textview.%20Make%20the,values%20Make%20entries%20of%20all%20fonts%20in%20strings.xml
Add android:letterSpacing in PrimaryButton_v2 it will work perfectly.
<style name="ButtonText_v2" parent="TextAppearance.AppCompat">
<item name="fontFamily">#font/silka_regular</item>
<item name="android:textSize">#dimen/dimen_14dp</item>
</style>
<style name="PrimaryButton_v2" parent="Widget.AppCompat.Button">
<item name="android:background">#drawable/button_selector_primary</item>
<item name="android:textColor">#color/white</item>
<item name="textAllCaps">true</item>
<item name="textAppearance">#style/ButtonText_v2</item>
<item name="android:letterSpacing">0.1</item>
</style>
layout.xml File
<Button
android:text="Button"
android:layout_height="56dp"
android:layout_width="200dp"
style="#style/PrimaryButton_v2"
android:layout_margin="15dp"
/>
I am trying to make my textview textColor white in my AppTheme but it appears as black in my fragment. The fragment has been set to have a background like so:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:fillViewport="true"
android:layout_height="wrap_content"
android:id="#+id/fragment_settings"
android:background="?android:attr/windowBackground"
The page looks like this now:
The theme looks like this:
<resources>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<!-- <item name="android:statusBarColor">#android:color/transparent</item> -->
</style>
<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/whiteText</item>
<item name="android:buttonStyle">#style/MyButton</item>
<item name="android:statusBarColor">#android:color/black</item>
<item name="android:colorBackground">#2d314d</item>
<item name="android:textColorPrimary">#color/whiteText</item>
<item name="android:textColorPrimaryInverse">#android:color/holo_red_dark</item>
<item name="android:textColorSecondary">#android:color/holo_blue_bright</item>
<item name="android:textColorSecondaryInverse">#android:color/holo_red_dark</item>
<item name="android:colorForeground">#android:color/holo_blue_bright</item>
<item name="android:windowBackground">?android:attr/colorBackground</item>
</style>
<style name="MyButton" parent="android:Widget.Button">
<item name="android:background">#FF5A79</item>
<item name="android:textColor">#color/whiteText</item>
</style>
</resources>
Also, not sure this is related but just in case, I was using the Theme Editor and it gives a warning - Not enough contrast with colorButtonNormal - by the android:textcolorPrimary. I don't know much about what colorButtonNormal is nor can I find any info about it. This is what my theme editor looks like with my current settings:
While I'm at it another problem is the text color is white inside the editText fields (WEIGHT and AGE) which is where I need to change it to be black.
Thanks for any help, this android styling stuff is driving me nuts.
Go for this
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:fillViewport="true"
android:layout_height="wrap_content"
android:id="#+id/fragment_settings"
android:background="#android:color/white"/>
this will solve your problem. You are setting parent="Theme.AppCompat.Light.DarkActionBar" that is why everything is black
I have a specific implementation of error handling in edit texts. Is there any way i could achieve something like shown below.
I managed to achieve almost similar result. Only part remaining is the validator.
Any help would be appretiated
Edit 1: Attaching code for to help.
<android.support.design.widget.TextInputLayout
style="#style/FrameTextLayout"
android:layout_width="match_parent"
app:theme="#style/GreyHighlight">
<android.support.design.widget.TextInputEditText
android:id="#+id/fragment_sign_up_one.text_email"
style="#style/FrameEditText"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:hint="#string/email"
android:inputType="textEmailAddress" />
</android.support.design.widget.TextInputLayout>
Values in values\styles.xml
<style name="GreyHighlight" parent="AppThemeNoAction">
<item name="colorControlNormal">#color/colorHeather</item>
<item name="colorControlActivated">#color/colorHeather</item>
<item name="textColorError">#color/colorHeather</item>
</style>
<style name="FrameTextLayout">
<item name="android:background">#drawable/border_background</item>
<item name="android:paddingTop">8dp</item>
<item name="android:layout_height">53dp</item>
<item name="android:layout_marginTop">16dp</item>
</style>
<style name="FrameEditText">
<item name="android:background">#android:color/transparent</item>
<item name="android:maxLines">1</item>
<item name="android:textSize">16.7sp</item>
<item name="android:textColor">#color/colorDarkIndigo</item>
<item name="android:paddingBottom">8dp</item>
<item name="android:paddingLeft">16dp</item>
<item name="android:paddingRight">16dp</item>
<item name="android:paddingTop">8dp</item>
</style>
Also on the sidenote how do we centre hint inside a TextInputLayout. Example attached.
Currently,
Edit 2: Managed to center hint by disabling hint when not in focus by using app:hintEnabled="false" on TextInputLayout.
So i ended up creating a custom view that fulfilled what i needed.
If anyone is interested I created a library for it.
CustomFormViews
I am new to android programming and I want to use DatePicker element in my layout. I am able to use it successfully but I can't figure out how to change its selected date color. I have read many threads on this site and they talk about changing color in a DatePickerDialog. I have tried to follow similar approaches for the DatePicker element but could not do it. I can change the date's textColor using calendarTextColor attribute. My code for layout file is as follows:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center">
<DatePicker
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/datePicker"
android:datePickerMode="calendar"
android:spinnersShown="false"
android:layout_gravity="center"
android:layout_marginTop="-52dp"
android:layout_marginBottom="-20dp"
style="#style/MyDatePickerStyleTheme"
/>
</LinearLayout>
And here is the corresponding styles.xml code:
<style name="MyDatePickerStyleTheme" parent="#android:style/Theme.Holo.Light.Dialog">
<item name="colorAccent"> #00ff00 </item>
<item name="android:datePickerStyle">#style/MyDatePickerStyle</item>
<item name="android:colorPrimary"> #00ff00 </item>
<item name="android:colorPrimaryDark"> #00ff00 </item>
<item name="android:colorAccent"> #00ff00 </item>
<item name="android:backgroundTint"> #00ff00 </item>
<!-- <item name="android:calendarTextColor"> #00ff00 </item> -->
</style>
<style name="MyDatePickerStyle">
<item name="android:calendarTextColor"> #00ff00 </item>
</style>
Some extra points I like to add:
android:calendarTextColor attribute is working if I put it inside MyDatePickerStyleTheme but not working when putting inside MydatePickerStyle. In other words the later theme style is not having any effect.
On different android versions (Lollipop and Marshmallow), same code gives very different looking layouts.
I just want to change selected date color for now, but how to change spacing between the dates and other styles in a good manner.
Any help would be highly appreciated.
Add to your styles.xml
<style name="MyDatePickerDialogTheme" parent="android:Theme.Material.Light.Dialog">
<item name="android:datePickerStyle">#style/MyDatePickerStyle</item>
<item name="android:colorAccent">#color/beautiful_color</item>
</style>
<style name="MyDatePickerStyle" parent="#android:style/Widget.Material.Light.DatePicker">
<item name="android:headerBackground">#color/beautiful_color</item>
<item name="android:datePickerMode">calendar</item>
</style>
Then in the layout where is your view, add the android:theme attribute, instead of the style
<DatePicker
android:theme="#style/MyDatePickerDialogTheme"
android:id="#+id/datePicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<style name="MyDatePickerDialogTheme" parent="Theme.AppCompat.Light.Dialog">
<!-- this is new -->
<item name="colorAccent">#color/accent</item>
<item name="android:datePickerStyle">#style/MyDatePickerStyle</item>
<item name="android:colorAccent">#color/primDark</item>
<style name="MyDatePickerStyle" parent="#android:style/Widget.Material.Light.DatePicker">
<item name="android:headerBackground">#color/prim</item>
<item name="android:calendarTextColor">#color/primDark</item>
<item name="android:dayOfWeekBackground">#color/primDark</item>
<item name="android:yearListSelectorColor">#color/accent</item>
<item name="android:datePickerMode">calendar</item>
<item name="android:minDate">01/01/2000</item>
please go through the below link it working perfectly fine for me...
[change date picker theme color]
https://github.com/wdullaer/MaterialDateTimePicker
OK, I don't need nor want AppCompat stuff. This is for a ROM utility app, so I know exactly what API is supported (I literally control the whole system). I don't need anything below API 22 and I'm compiling to that API.
I want to know what I can add to my styles.xml to get the switch color to match the rest of the theme (#color/primary_color). Here is what I have ... (and some of this is likely un-necessary from testing too much at once).
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="android:Theme.Material.Light.DarkActionBar">
<item name="android:colorButtonNormal">#color/primary_color</item>
<item name="android:shadowColor">#android:color/black</item>
<item name="android:colorControlHighlight">#color/primary_color</item>
<item name="android:textViewStyle">#style/BlackText</item>
<item name="android:actionMenuTextColor">#color/hilight_color</item>
<item name="android:colorControlActivated">#color/primary_color</item>
<item name="android:colorPrimary">#color/blackness</item>
<item name="android:colorAccent">#color/primary_color</item>
</style>
<style name="BlackText">
<item name="android:textColor">#android:color/black</item>
</style>
</resources>
In xml layout:
<android.support.v7.widget.SwitchCompat
android:id="#+id/switch_subs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:button="#null"
android:padding="20dp"
android:theme="#style/ColorSwitchStyle" />
In styles.xml
<style name="ColorSwitchStyle">
<item name="colorControlActivated">#color/colorPrimary</item>
</style>
*** in my case colorPrimary is blue.