Time picker customisation - android

Project has the design of time picker dialog.
the design as follows
then default dialog design is like below
I want the top section of this time picker dialog should be same as the expected design.
I have tried following xml code. nothing helped.
<TimePicker
android:id="#+id/timePicker"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:numbersBackgroundColor="#ddd"
android:overScrollMode="never"
android:headerTimeTextAppearance="#drawable/bg_time"
android:headerAmPmTextAppearance="#color/yellow"
android:amPmBackgroundColor="#color/yellow"
android:headerBackground="#android:color/transparent"
/>
And I have added following code to set the title color to transparent. so that I can put my view on the top section.
android:headerTextColor = "#android:color/transparent"
but it says and threw the error
"Unknown Attribute android:headerTextColor"
. in the design part of the XML layout, it set the transparent color to title. but when I run the app it threw the error of
"Android resource linking failed".

Use Material TimePicker to achieve the following design
val picker = MaterialTimePicker.Builder()
.setTimeFormat(TimeFormat.CLOCK_12H)
.setHour(12)
.setMinute(10)
.setTitleText("Select Appointment time")
.build()
To show dialog
picker.show(supportFragmentManager, picker.toString())
Using theme attributes and styles in res/values/styles.xml to change color according to your need:
<style name="Theme.App" parent="Theme.MaterialComponents.*">
...
<item name="colorPrimary">#color/shrine_pink_100</item>
<item name="colorOnPrimary">#color/shrine_pink_900</item>
<item name="colorOnSurface">#color/shrine_pink_100</item>
<item name="chipStyle">#style/Widget.App.Chip</item>
</style>

You need to create a custom style in themes.xml. And then set that theme/style to your time picker in xml. This is example of a style:
<style name="MyTimePickerWidgetStyle" parent="#android:style/Widget.Material.TimePicker">
<item name="android:headerBackground">#color/stayGray</item>
<item name="android:numbersTextColor">#fff</item>
<item name="android:numbersInnerTextColor">#fff</item>
<item name="android:numbersSelectorColor">#color/stayGray</item>
<item name="android:amPmTextColor">#fff</item>
</style>
This is how you set style to time picker in xml.
<TimePicker
android:id="#+id/timePickerGoal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/MyTimePickerWidgetStyle"
style="#style/MyTimePickerWidgetStyle"/>

Related

Spinner DatePicker does not change text color

I am trying to change the text color from the DatePicker using an XML style with no luck. My app theme is Theme.MaterialComponents.Light and the style code that I am using is the following.
<style name="MyDatePicker" >
<item name="android:textColorPrimary">#color/textColorPrimary</item>
<item name="colorControlNormal">#color/colorAccent</item>
</style>
<DatePicker
android:id="#+id/datePicker"
style="#style/MyDatePicker"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:datePickerMode="spinner" />
I have seen many posts tackling this issue, but unfortunately none of the answers worked for me. I am using version 1.2.0 of the material library.
Is there any other way to solve this issue? Thanks!
Since DatePicker is a ViewGroup, you apply the defined style to it (and its children) using the theme attribute.
style, in contrast, is applied to the parent DatePicker only and its children remain unaffected.
So change to:
android:theme="#style/MyDatePicker"

Styling Android EditText

I'm trying to style edit text widgets in my app. Right now if I use this:
<style name="MyEditText" parent="#android:style/Widget.EditText">
<item name="android:textColor">#color/input_text</item>
<item name="android:gravity">left</item>
</style>
It will show black background on phone I use for testing. I'd like to get something that looks the same everywhere. I think I will be OK with this style (I also believe this is "standard"). How do I pull this stale or should I make my own somehow?
EDIT:
Here is my code for TextEdit
<EditText
style="#style/MyEditText"
android:id="#+id/et_serverURL" android:layout_width="fill_parent" android:layout_height="wrap_content" android:maxLength="25"
android:imeOptions="actionNext" android:singleLine="true" android:inputType="textUri"
android:hint="#string/str_login_activity_server_url_hint"
/>
The style shown in your image is called Holo. You can use it like so
<style name="MyEditText" parent="#android:style/Widget.Holo.EditText">
<!-- Your custom attributes here -->
</style>
EDIT
If you want your app to use your themes as you have them right now but have your EditText be Holo then you can override the <item name="android:editTextStyle"></item>under your current theme to use MyEditText instead of the default parent style. Then set your theme either to your activity, or to your application.

How to change default ProgressBar circle color on Android

I am currently using an external library in my Android project imported via gradle.
This library show a notification bar with a ProgressBar circle.
This is the code I found in it's sources :
<ProgressBar
android:id="#+id/progress_bar"
android:layout_height="match_parent"
android:layout_marginBottom="4dp"
android:layout_marginTop="4dp"
style="#style/SuperActivityToast_Progress_ProgressBar"/>
The style associated is this one :
<style name="SuperActivityToast_Progress_ProgressBar" parent="android:Widget.Holo.ProgressBar">
<item name="android:layout_width">32dp</item>
<item name="android:layout_marginLeft">8dp</item>
</style>
If I understand correclty, the color of the circle shown is derived from the default one ( green on my phone ).
I need to change it!
Now, I can't modify the source code, and the library itself doesn't offer me the possibility to set the style programmatically.
There is a way to change the default style at app level or better override this specific style?
Thanks
Davide
If you are using the AppCompat theme, it uses the accentColor to tint the circle.
If you want to tint it to a different color than the Theme, then you should consider using ThemeOverylay. E.g. If you want to make the circle tint red you could do the following:
in your styles.xml
<style name="RedAccent" parent="ThemeOverlay.AppCompat.Light">
<item name="colorAccent">#F00</item>
</style>
in your ProgressBar, set the theme to be RedAccent.
<ProgressBar
android:id="#+id/progress_bar"
android:layout_width="32dp"
android:layout_height="32dp"
android:theme="#style/RedAccent"/>
And your circle will now be in red color!
After several attempts I found a solution :
ProgressBar progBar = (ProgressBar) context.getActivity().findViewById(R.id.progress_bar);
if (progBar != null) {
progBar.setVisibility(View.VISIBLE);
progBar.setIndeterminate(true);
progBar.getIndeterminateDrawable().setColorFilter(0xFFFFFFFF, android.graphics.PorterDuff.Mode.MULTIPLY);
}
Simply, i'll get a reference of the progress bar object created by the library and i change it's attributes. ( in my activity i must do that in a "OnStart" method otherwise it is null )
The most important part is the "setColorFilter" that do the magic.
For future references, this change has worked for me is:
Changing the colorControlActivated within AppTheme in your values/styles.xml file:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Main theme colors -->
....
<!-- Color for circle in progress bar -->
<item name="colorControlActivated">#DC0808</item>
</style>
With this approach, you do not need to perform any action on your <ProgressBar/> tag within your xml file.
Just add color in ProgressBar like below :
<ProgressBar
android:id="#+id/progressbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:visibility="gone"
android:indeterminateTint="#color/colorPrimary" // add color here
android:layout_centerVertical="true"/>

How to apply backgroundTint to AppCompatButton in Dialog?

I have a DialogFragment that contains a Button:
<Button
android:id="#+id/btn_wishlist_rename"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/white"
android:theme="#style/WishlistDialogButton"
android:text="#string/rename" />
The theme is defined like this:
<style name="WishlistDialogButton" parent="Widget.AppCompat.Button">
<item name="android:textColor">#color/white</item>
<item name="colorButtonNormal">#color/default_blue</item>
<item name="backgroundTint">#color/default_blue</item>
</style>
When I just embed the Fragment within the layout of my Activity everything works fine: I get a Material Design raised button with white text and blue background.
However, when the Fragment is used as a dialog the backgroundTint is not applied anymore: I get a Material Design raised button with white text but with grey background.
Is there a way to fix this - preferably without creating all the drawables from scratch or importing some third party library?

How to change textsize in datepicker?

The default textsize in datepicker is too big for my app. I've seen a way suggested to change it here, but fishing around for the textviews nested inside the datepicker class seems clunky and error prone.
Is there a better/cleaner way to do it?
Setting a theme to DatePicker layout and adding android:textSize to it works for me.
In your layout's xml add a DatePicker applying a theme as shown below -
<DatePicker xmlns:android="http://schemas.android.com/apk/res/android"
android:theme="#style/NumberPickerStyle"
android:datePickerMode="spinner"
android:calendarViewShown="false"
android:layout_gravity="center_horizontal"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>
and then define the NumberPickerStyle in styles.xml specifying android:textSize like this -
<style name="NumberPickerStyle">
<item name="android:textSize">#dimen/number_picker_text_size</item>
</style>
The easiest way to change the font size of datepicker/timepicker/numberpicker is customizing the theme.
In styles file, set the default font size in the following way.
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="android:textSize">22sp</item>
</style>
Sean's approach made some glitches in the UI of picker itself in case there're a number of pickers and I think it's not perfect to apply text size to all the components under the picker.
Below is what I've used and it works perfect without any UI glitches.
<style name="PickerTheme" parent="Theme.AppCompat.NoActionBar">
<item name="android:editTextStyle">#style/PickerEditText</item>
</style>
<style name="PickerEditText" parent="ThemeOverlay.AppCompat.Dark">
<item name="android:textSize">24sp</item>
</style>
Sean's code works. but it is changing font size for all the other components also(textViews, buttons, etc...) So Here is the solution.
Create different style for time picker and use it on time picker theme.
<style name="my_time_picker_style">
<item name="android:textSize">24sp</item>
</style>
and use it on your timepicker
android:theme="#style/my_time_picker_style"
Look at video, how I did https://youtu.be/JMJ2ujhk9c0
use below code:
ViewGroup childpicker = (ViewGroup)datePicker.findViewById(Resources.getSystem().getIdentifier("month", "id", "android"));
EditText mornthEt = (EditText)childpicker.getChildAt(1);// month widget
//change textsize and textcolor for mornthEt
mornthEt.setTextSize(30);
mornthEt.setTextColor(Color.GREEN);
use below code
DatePicker picker = (DatePicker)findViewById(R.id.dp_date);
ViewGroup childpicker
= (ViewGroup)
findViewById(Resources.getSystem().getIdentifier("month" /*rest is:
day, year*/, "id", "android"));
EditText textview = (EditText)
picker.findViewById(Resources.getSystem().getIdentifier("timepicker_input",
"id", "android"));
textview.setTextSize(30);
textview.setTextColor(Color.GREEN);

Categories

Resources