Style date picker like the google calendar app in compose - android

I'm having some trouble styling a date picker in the way the google calendar app does. This is the code for showing the picker in a compose project using material you.
#Composable
fun rememberDatePicker(): DatePickerDialog {
val context = LocalContext.current
val datePickerDialog = DatePickerDialog(
context,
R.style.DatePickerDialogTheme,
{ _, year: Int, month: Int, dayOfMonth: Int ->
println("$year, $month, $dayOfMonth")
},
2022, 5, 1
)
return remember { datePickerDialog }
}
val datePicker = rememberDatePicker()
// onClick
datePicker.show()
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="DatePickerDialogTheme" parent="android:Theme.DeviceDefault.Dialog" />
</resources>
The dialog looks like this (top) and not exactly like the google app (bottom). I'm not sure which theme to use and if it's even possible to achieve that look with compose. Also is it possible to switch automatically from light and dark theme or should I create two themes and apply them conditionally?
Keep in mind that I'm new to android and compose and learning a bunch at the momentet :)

Related

How to "initialize" Material 3 theme design in Android Studio

I'm sure this is a newbie question, but I'm trying to implement a Material 3 theme. I have added the themes.kt & colors.kt to my com.my.project.ui.theme package. But I don't understand what I can do next to implement these colors as my app is not using these colors and is still using the default material 3 colors that came when I started the app. I'm not finding the disconnect.
I have added the dependencies and removed the old Material dependency
//implementation 'androidx.compose.material:material:1.3.1'
implementation 'androidx.compose.material3:material3:1.1.0-alpha03'
implementation "androidx.compose.material3:material3-window-size-class:1.1.0-alpha03"
implementation "com.google.accompanist:accompanist-flowlayout:0.24.8-beta"
One thing I notice is the function in themes.kt is saying it is never used (grayed out).
#Composable
fun DzoicTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: #Composable () -> Unit) {
val useDynamicColors = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S
val colors = when {
useDynamicColors && darkTheme -> dynamicDarkColorScheme(LocalContext.current)
useDynamicColors && !darkTheme -> dynamicLightColorScheme(LocalContext.current)
darkTheme -> DarkColors
else -> LightColors
}
MaterialTheme(
colorScheme = colors,
typography = Typography,
shapes = Shapes,
content = content
)
}
Where does this function get called (DzoicTheme)? Default was AppTheme but instructions said to change it. Is the name important here? Most tutorials show utilizing material 3 colors from the activity compose functions but I do all my design in xml layout files, does this matter? Any help here would be appreciated!

MaterialDatePicker and TimePickerDialog are styled differently when using dark theme

I currently use MaterialDatePicker, and because the material team isn't working on the corresponding TimePicker, I've chosen to use TimePickerDialog.
val calendarConstraints = CalendarConstraints.Builder().setOpenAt(datetimeAsUTC)
val datePicker: MaterialDatePicker<Long> = MaterialDatePicker
.Builder
.datePicker()
.setSelection(datetimeAsUTC)
.setCalendarConstraints(calendarConstraints.build())
.setTitleText(label)
.build()
datePicker.show(requireFragmentManager(), datePicker.toString())
val timePicker : TimePickerDialog = TimePickerDialog(requireContext(), { _, hour, minute ->
vm.process(event(hour, minute))
},
datetime.value?.hourOfDay ?: 0,
datetime.value?.minuteOfHour ?: 0,
DateFormat.is24HourFormat(requireContext())
)
timePicker.show()
They work great, but their styling doesn't match under dark theme
This seems like an issue a lot of people would have run into, so hopefully there's an easy solution.
I could try to change the colors myself, but I don't have a lot of experience with this, and considering
I'm not looking for a custom look, but a standard one that would match other apps, I think there's a better solution.
Use the MaterialTimePicker in the Material Compoments Library:
val materialTimePicker = MaterialTimePicker.Builder()
.setTimeFormat(TimeFormat.CLOCK_24H)
.setHour(22)
.setMinute(10)
.build()
materialTimePicker.show(supportFragmentManager, "fragment_tag")
Note: this code requires at least the version 1.3.0-alpha03.

How to change color loader with minimal player style in YouTubePlayer?

YouTubePlayerSupportFragment has a minimal style. loader color is green. You need to change the color of the loader to another
current loader
I created a player
private var player: YouTubePlayer? = null
var fragment: YouTubePlayerSupportFragment = YouTubePlayerSupportFragment.newInstance()
and initialized it.
Where set the minimal style of the player
fragment.initialize(DEVELOPER_KEY, object : YouTubePlayer.OnInitializedListener {
override fun onInitializationSuccess(p0: YouTubePlayer.Provider?, p1: YouTubePlayer?, p2: Boolean) {
player = p1
player?.setPlayerStyle(YouTubePlayer.PlayerStyle.MINIMAL)
if (!p2) {
player?.cueVideo(getIdVideo(uri))
}
}
override fun onInitializationFailure(p0: YouTubePlayer.Provider?, p1: YouTubeInitializationResult?) {
}
})
As a result, the video is loaded with a green progressBar.
Styles accent color is red
I looked in the YouTube documentation and did not find anything there that could help me.
All visual modification you could do with help of `YouTubePlayer.PlayerStyle But it is not so flexible as you want I guess and you could just choose some default styles like here
https://developers.google.com/youtube/android/player/reference/com/google/android/youtube/player/YouTubePlayer.PlayerStyle
One more variant which is VERY flexible to play videos is ExoPlayer which i prefer better and here is an example. CHECK THIS LINK BELOW. Even Udacity and google forums recommend it
https://medium.com/fungjai/playing-video-by-exoplayer-b97903be0b33
Easy to customize it

How to set font size for items in Xamarin Picker?

I try to change the items font size in Xamarin.Picker for my Android app. In my project, I use BindablePicker that inherits from Picker class. Source here.
I spent some time to do research and I found that I should create a PickerRenderer class and render the Picker.
My renderer class:
public class BindablePickerRenderer : PickerRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
{
base.OnElementChanged(e);
var picker = e.NewElement;
BindablePicker bp = (BindablePicker)this.Element;
if (this.Control != null)
{
var pickerStyle = new Style(typeof(BindablePicker))
{
Setters =
{
new Setter { Property = VisualElement.BackgroundColorProperty, Value = Color.Red }
}
};
picker.Style = pickerStyle;
}
}
}
For test purposes I set the backgroundColor for Picker and it works fine. However, in my PickerRenderer class I only have access to Control property which is type of Android.Widget.EditText.
The effect :
Question
How can I access to Picker items, and set the font size for them? Is this possible?
Here is my repository with an example project.
https://github.com/k8mil/PickerRendererXamarin
Related links
https://developer.xamarin.com/api/type/Xamarin.Forms.Picker/
Changing the default text color of a Picker control in Xamarin Forms for Windows Phone 8.1
Font size in Picker control in xamarin forms
I has been able to resolve this by add the line:
Control.TextSize = 30;
On OnElementChanged method:
public class BindablePickerRenderer : PickerRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
{
base.OnElementChanged(e);
if (this.Control != null)
{
Control.TextSize = 30;
}
}
}
Maybe this can help someone that is looking for change font size of a Bindable picker.
After some research I don't think this is possible for a generic picker.
You would likely have an easier time just rolling your own picker control in Forms code using a clickable label that pops up a list to select from.
I was able to style a date or time picker using styles in the Android styles.xml file, but since Android does not have a built in generic picker widget, I imagine that Forms is rolling it's own picker list as I can't find the dialog widget to theme that changes your list text size.
For a DatePicker, I can just add the following to the main style element in styles.xml:
<item name="android:datePickerDialogTheme">#style/AppCompatDialogStyle</item>
and then add a new style element in style.xml
<style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
<item name="android:textSize">60sp</item>
</style>
The above does change the text size for a DatePicker (no custom renderer required). Also the customer picker renderer is a bit of a misnomer... it really is just rendering the edit text field that shows the picked item, and allows opening the picker list on click.
I know this is not a solution, but just an indication as to what I found when checking this out and a suggestion that it is likely easiest to not use the Forms Picker type if you want such customization.

Android Material Design Datepicker with AppCompat

I'm trying to add the new Android 5.0 Material Design Datepicker to my pre 5.0 application using AppCompat. I've added
compile "com.android.support:appcompat-v7:21.0.0"
to my build.gradle file and updated my Theme to:
<?xml version="1.0" encoding="utf-8"?>
<style name="AppTheme.Base" parent="#style/Theme.AppCompat.Light">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
</style>
but the Datepicker still looks like this:
And not like this:
Can anybody tell me how to get the new datepicker to work on pre 5.0 devices?
Thanks in advance.
Update:
As well pointed out by jfcartier, there's now also MaterialDateTimePicker. It's probably a nicer solution than the one below since it has a nice themable API.
You could try the android-betterpickers library. It has a CalendarDatePickerDialog widget that looks like the one you want. It provides a light and a dark theme, but for customizing colors you'd have to add it as a library project and change the code yourself.
Usage is pretty straightforward once you add the library to your project.
// Create date picker listener.
CalendarDatePickerDialog.OnDateSetListener dateSetListener = new CalendarDatePickerDialog.OnDateSetListener() {
#Override
public void onDateSet(CalendarDatePickerDialog dialog, int year, int monthOfYear, int dayOfMonth) {
// Set date from user input.
Calendar date = Calendar.getInstance();
date.set(Calendar.HOUR_OF_DAY, 9);
date.set(Calendar.MINUTE, 0);
date.set(Calendar.YEAR, year);
date.set(Calendar.MONTH, monthOfYear);
date.set(Calendar.DAY_OF_MONTH, dayOfMonth);
// Do as you please with the date.
}
};
// Create dismiss listener.
CalendarDatePickerDialog.OnDialogDismissListener dismissListener = new CalendarDatePickerDialog.OnDialogDismissListener() {
#Override
public void onDialogDismiss(DialogInterface dialoginterface) {
// Do something when the user dismisses the dialog.
}
};
// Show date picker dialog.
CalendarDatePickerDialog dialog = new CalendarDatePickerDialog();
dialog.setOnDateSetListener(dateSetListener);
dialog.setOnDismissListener(dismissListener);
dialog.setThemeDark(false);
dialog.show(getSupportFragmentManager(), "DATE_PICKER_TAG");
The end result should look like this (sorry for the poor quality).
Material components is the recommended way for date picker
With the Material Components for Android you can use the new MaterialDatePicker.
add the following to your build.gradle
implementation 'com.google.android.material:material:1.1.0'
For kotlin
val builder = MaterialDatePicker.Builder.datePicker()
val picker = builder.build()
picker.show(parentFragmentManager, "date_picker_tag")
For Java
MaterialDatePicker.Builder<Long> builder =
MaterialDatePicker.Builder.datePicker();
MaterialDatePicker<Long> picker = builder.build();
picker.show(getSupportFragmentManager(), picker.toString());
It supports the following configurations
portrait - mode date picker
landscape - mode date picker
date range picker
Mobile input picker
Additional reference
Here is the official design guideline
A complete demo app can be found here
I liked this library. It's a clone of Flavien Laurent Date and Time Picker with some improvements. Both of them are based on Official Google Date and Time Picker for Android 4.3+ but adapted for Android 2.1+.

Categories

Resources