Skip to content

Commit

Permalink
[Docs] Minor code block improvements
Browse files Browse the repository at this point in the history
Resolves #3570

GIT_ORIGIN_REV_ID=ca0c9b122e669dd53ba4fbe1a06b3ec3e38ce58d
PiperOrigin-RevId: 564766453
  • Loading branch information
pubiqq authored and leticiarossi committed Sep 13, 2023
1 parent 5f2b4b2 commit d7e75bb
Show file tree
Hide file tree
Showing 7 changed files with 46 additions and 65 deletions.
2 changes: 1 addition & 1 deletion docs/components/BottomSheet.md
Expand Up @@ -208,7 +208,7 @@ edge) if the navigation bar is transparent and `app:enableEdgeToEdge` is true.
To enable edge-to-edge by default for modal bottom sheets, you can override
`?attr/bottomSheetDialogTheme` like the below example:

```
```xml
<style name="AppTheme" parent="Theme.Material3.*">
...
<item name="bottomSheetDialogTheme">@style/ThemeOverlay.App.BottomSheetDialog</item>
Expand Down
46 changes: 18 additions & 28 deletions docs/components/Carousel.md
Expand Up @@ -86,7 +86,7 @@ Next, set your `RecyclerView`s layout manager to a new `CarouselLayoutManager`.
android:clipToPadding="false" />
```

```kotlin
```kt
carouselRecyclerView.setLayoutManager(CarouselLayoutManager())
```

Expand Down Expand Up @@ -114,7 +114,7 @@ by medium and small items, depending on the size of the `RecyclerView`
container.

You can use the multi-browse strategy by passing in no arguments to the
CarouselLayoutManager constructor: `new CarouselLayoutManager()`.
CarouselLayoutManager constructor: `CarouselLayoutManager()`.

## Hero strategy

Expand All @@ -140,14 +140,13 @@ carousels with `match_parent` as the width will have more and more large items
as the screen size grows.

You can use the hero strategy by passing in the strategy to the
CarouselLayoutManager constructor: `new CarouselLayoutManager(new
HeroStrategy())`.
CarouselLayoutManager constructor: `CarouselLayoutManager(HeroStrategy())`.

With the hero strategy, it is recommended to use the `CarouselSnapHelper` to snap to the nearest item like so:

```
SnapHelper snapHelper = new CarouselSnapHelper();
snapHelper.attachToRecyclerView(carouselRecyclerView);
```kt
val snapHelper = CarouselSnapHelper()
snapHelper.attachToRecyclerView(carouselRecyclerView)
```

## Fullscreen strategy
Expand All @@ -158,8 +157,8 @@ A fullscreen strategy shows one item at a time that takes up the entire space
of the carousel.

You can use the fullscreen strategy by passing in the strategy to the
CarouselLayoutManager constructor: `new CarouselLayoutManager(new
FullScreenStrategy())`.
CarouselLayoutManager constructor:
`CarouselLayoutManager(FullScreenStrategy())`.

With the fullscreen strategy, it is recommended to use a vertical orientation
carousel by either setting the orientation on the CarouselLayoutManager with the
Expand All @@ -171,17 +170,9 @@ landscape in order to maintain the aspect ratios of your images.
It is also recommended to use the `CarouselSnapHelper`
to snap to the nearest item like so:

```
SnapHelper snapHelper = new CarouselSnapHelper();
snapHelper.attachToRecyclerView(carouselRecyclerView);
```

It is also recommended to use the `CarouselSnapHelper`
to snap to the nearest item like so:

```
SnapHelper snapHelper = new CarouselSnapHelper();
snapHelper.attachToRecyclerView(carouselRecyclerView);
```kt
val snapHelper = CarouselSnapHelper()
snapHelper.attachToRecyclerView(carouselRecyclerView)
```

## Attributes
Expand Down Expand Up @@ -211,13 +202,12 @@ by setting an
[`onMaskChangedListener`](https://developer.android.com/reference/com/google/android/material/carousel/OnMaskChangedListener)
on your `MaskableFrameLayout` inside your `RecyclerView.ViewHolder`.

```kotlin
(viewHolder.itemView as MaskableFrameLayout).setOnMaskChangedListener(
```kt
(viewHolder.itemView as MaskableFrameLayout).setOnMaskChangedListener {
maskRect ->
// Any custom motion to run when mask size changes
viewHolder.title.setTranslationX(maskRect.left);
viewHolder.title.setAlpha(lerp(1F, 0F, 0F, 80F, maskRect.left));
);
viewHolder.title.setTranslationX(maskRect.left)
viewHolder.title.setAlpha(lerp(1F, 0F, 0F, 80F, maskRect.left))
}
```

Expand All @@ -227,7 +217,7 @@ In the example above, a title is translated so it appears pinned to the left mas

You can control the alignment of the focal (large) items in the carousel by setting the `app:carousel_alignment` attribute on your RecyclerView, if you are also setting the RecyclerView's LayoutManager through `app:layoutManager`:

```
```xml
<androidx.recyclerview.widget.RecyclerView
...
app:layoutManager="com.google.android.material.carousel.CarouselLayoutManager"
Expand All @@ -237,8 +227,8 @@ You can control the alignment of the focal (large) items in the carousel by sett

If CarouselLayoutManager is being set programmatically, you may set the alignment as well programmatically:

```
carouselLayoutManager.setCarouselAlignment(CarouselLayoutManager.CENTER);
```kt
carouselLayoutManager.setCarouselAlignment(CarouselLayoutManager.CENTER)
```

By default, the focal alignment is start-aligned.
Expand Down
2 changes: 1 addition & 1 deletion docs/components/DatePicker.md
Expand Up @@ -117,7 +117,7 @@ To show the picker to the user:

Subscribe to button clicks or dismiss events with the following calls:

```
```kt
picker.addOnPositiveButtonClickListener {
// Respond to positive button click.
}
Expand Down
4 changes: 2 additions & 2 deletions docs/components/TimePicker.md
Expand Up @@ -60,7 +60,7 @@ time format you choose.
You can use either `TimeFormat.CLOCK_12H` (1 ring) or `TimeFormat.CLOCK_24H` (2 rings),
depending on the location of the device:

```
```kt
val isSystem24Hour = is24HourFormat(this)
val clockFormat = if (isSystem24Hour) TimeFormat.CLOCK_24H else TimeFormat.CLOCK_12H
```
Expand Down Expand Up @@ -88,7 +88,7 @@ To show the time picker to the user:

Subscribe to positive button click, negative button click, cancel and dismiss events with the following calls:

```
```kt
picker.addOnPositiveButtonClickListener {
// call back code
}
Expand Down
10 changes: 5 additions & 5 deletions docs/components/TopAppBar.md
Expand Up @@ -322,18 +322,18 @@ background.

In code:

```
appBarLayout.setStatusBarForeground(
MaterialShapeDrawable.createWithElevationOverlay(getContext()));
```kt
appBarLayout.statusBarForeground =
MaterialShapeDrawable.createWithElevationOverlay(context)
```

Or if using Tonal Surface Colors instead of Elevation Overlays, you can simply
set the `statusBarForeground` to `colorSurface` to let `AppBarLayout`
automatically match the status bar color to its own background:

```
```kt
appBarLayout.setStatusBarForegroundColor(
MaterialColors.getColor(appBarLayout, R.attr.colorSurface));
MaterialColors.getColor(appBarLayout, R.attr.colorSurface))
```

### Center aligned top app bar example
Expand Down
6 changes: 3 additions & 3 deletions docs/theming/Color.md
Expand Up @@ -690,7 +690,7 @@ activity can be seen below. Since we are overriding color resources in xml at
runtime, make sure the method is invoked before you inflate the view to take
effect.

```
```java
import com.google.android.material.color.DynamicColorsOptions;
import com.google.android.material.color.DynamicColors;

Expand All @@ -712,7 +712,7 @@ import com.google.android.material.color.DynamicColors;
An example usage for applying content-based dynamic colors to a specific
fragment/view:

```
```java
import com.google.android.material.color.DynamicColorsOptions;
import com.google.android.material.color.DynamicColors;

Expand Down Expand Up @@ -762,7 +762,7 @@ your branded or custom themes, we have created the following API in the

In your application class’ `onCreate()` method, call:

```
```java
ColorContrast.applyToActivitiesIfAvailable(
this,
new ColorContrastOptions.Builder()
Expand Down
41 changes: 16 additions & 25 deletions docs/theming/Motion.md
Expand Up @@ -40,7 +40,7 @@ Attribute | Default value | Description

To customize an easing value, override any of the attributes in your app’s theme to your own interpolator resource.

```
```xml
<style name="Theme.MyTheme" parent="Theme.Material3.DayNight.NoActionBar">
....
<item name="motionEasingEmphasizedInterpolator">@interpolator/my_app_emphasized_interpolator</item>
Expand Down Expand Up @@ -80,7 +80,7 @@ ensure your transitions have a consistent sense of speed.
To override a duration attribute, assign the attribute to your desired
millisecond integer value.

```
```xml
<style name="Theme.MyTheme" parent="Theme.Material3.DayNight.NoActionBar">
....
<item name="motionDurationLong2">450</item>
Expand All @@ -106,7 +106,7 @@ When implementing your own animations, use an easing and duration theme attribut

When creating animations in xml, set your animation's `interpolator` and `duration` properties to a Material motion theme attribute.

```
```xml
<!-- res/anim/slide_in.xml –>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="?attr/motionEasingDurationMedium1"
Expand All @@ -122,28 +122,18 @@ When creating animations in xml, set your animation's `interpolator` and `durati
If creating animations in Java or Kotlin, Material provides a `MotionUtils` class to help facilitate loading `interpolator` and `duration` theme attributes.
```
ValueAnimator animator = ValueAnimator.ofFloat(currentProgress, newProgress);
animator.addUpdateListener(
new AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float progress = (float) animation.getAnimatedValue();
myView.setAlpha(progress)
setActiveIndicatorProgress(progress, newProgress);
}
});
animatior.setInterpolator(
MotionUtils.resolveThemeInterpolator(
getContext(),
R.attr.motionEasingStandardInterpolator, // easing theme attribute
new FastOutSlowInInterpolator())); // default fallback interpolator
animator.setDuration(
MotionUtils.resolveThemeDuration(
getContext(),
R.attr.motionDurationLong1, // duration theme attribute
500L)); // default fallback duration
animator.start();
```kt
val interpolator = MotionUtils.resolveThemeInterpolator(
context,
R.attr.motionEasingStandardInterpolator, // interpolator theme attribute
FastOutSlowInInterpolator() // default fallback interpolator
)
val duration = MotionUtils.resolveThemeDuration(
context,
R.attr.motionDurationLong1, // duration theme attribute
500 // default fallback duration
)
```
## Transitions
Expand Down Expand Up @@ -237,6 +227,7 @@ will be shared. Add a matching `transitionName` to each of these Views.
android:id="@+id/start_view"
android:transitionName="shared_element_container" />
```

```xml
<!--fragment_b.xml-->
<View
Expand Down

0 comments on commit d7e75bb

Please sign in to comment.