> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/android/maps/llms.txt)

# Line gradient

![Style a line with colored gradient.](https://docs.mapbox.com/android/assets/ideal-img/maps-examples-line-gradient.15fe3a6.480.png)

This example demonstrates how to create a line gradient on a map using the **Maps SDK for Android**. The `LineGradientActivity` class has functionality that allows users to increase the trim offset of a line gradient on a map. The `createStyle()` function sets up a style with Mapbox Standard, a GeoJSON source, and a [`LineLayer`](https://docs.mapbox.com/android/maps/api/latest/mapbox-maps-android/com.mapbox.maps.extension.style.layers.generated/-line-layer/) with specified [`lineCap`](https://docs.mapbox.com/android/maps/api/latest/mapbox-maps-android/com.mapbox.maps.extension.style.layers.generated/-line-layer/line-cap.html), [`lineJoin`](https://docs.mapbox.com/android/maps/api/latest/mapbox-maps-android/com.mapbox.maps.extension.style.layers.generated/-line-layer/line-join.html), [`lineWidth`](https://docs.mapbox.com/android/maps/api/latest/mapbox-maps-android/com.mapbox.maps.extension.style.layers.generated/-line-layer/line-width.html), and a customized [`lineGradient`](https://docs.mapbox.com/android/maps/api/latest/mapbox-maps-android/com.mapbox.maps.extension.style.layers.generated/-line-layer/line-gradient.html) that transitions through different colors. The gradient is created using the [`interpolate`](https://docs.mapbox.com/android/maps/api/latest/mapbox-maps-android/com.mapbox.maps.extension.style.expressions.dsl.generated/interpolate.html) function with various color stops specified along the line progress.

The example utilizes classes such as `Feature`, `LineString`, `Point`, [`Style`](https://docs.mapbox.com/android/maps/api/latest/mapbox-maps-android/com.mapbox.maps/-style/), [`LineLayer`](https://docs.mapbox.com/android/maps/api/latest/mapbox-maps-android/com.mapbox.maps.extension.style.layers.generated/-line-layer/), and [`geoJsonSource`](https://docs.mapbox.com/android/maps/api/latest/mapbox-maps-android/com.mapbox.maps.extension.style.sources.generated/-geo-json-source/) from the Mapbox Maps SDK to define and style the line gradient. Additionally, interaction with the map is enabled by updating the line trim offset when the user clicks a specific button. The initialization of the map style, source, and layers is defined in the `createStyle()` function.

> **Note: Android Examples App Available**
> 
> This example code is part of the **Maps SDK for Android Examples App**, a working Android project [available on GitHub](https://github.com/mapbox/mapbox-maps-android/tree/v11.29.0/). Android developers are encouraged to run the examples app locally to interact with this example in an emulator and explore other features of the Maps SDK.
> 
> See our [Run the Maps SDK for Android Examples App](https://docs.mapbox.com/help/tutorials/maps-sdk-android-examples-app/) tutorial for step-by-step instructions.

**Kotlin**

Title: `LineGradientActivity.kt`

[View on GitHub](https://github.com/mapbox/mapbox-maps-android/blob/v11.29.0/app/src/main/java/com/mapbox/maps/testapp/examples/linesandpolygons/LineGradientActivity.kt)

```kt
package com.mapbox.maps.testapp.examples.linesandpolygons

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.mapbox.geojson.Feature
import com.mapbox.geojson.LineString
import com.mapbox.geojson.Point
import com.mapbox.maps.MapboxExperimental
import com.mapbox.maps.Style
import com.mapbox.maps.extension.style.expressions.dsl.generated.interpolate
import com.mapbox.maps.extension.style.layers.generated.LineLayer
import com.mapbox.maps.extension.style.layers.generated.lineLayer
import com.mapbox.maps.extension.style.layers.getLayerAs
import com.mapbox.maps.extension.style.layers.properties.generated.LineCap
import com.mapbox.maps.extension.style.layers.properties.generated.LineJoin
import com.mapbox.maps.extension.style.sources.generated.geoJsonSource
import com.mapbox.maps.extension.style.style
import com.mapbox.maps.logI
import com.mapbox.maps.testapp.databinding.ActivityLineGradientBinding

class LineGradientActivity : AppCompatActivity() {

  @OptIn(MapboxExperimental::class)
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val binding = ActivityLineGradientBinding.inflate(layoutInflater)
    setContentView(binding.root)
    binding.mapView.mapboxMap.loadStyle(createStyle()) { style ->
      logI(TAG, "Style loaded: ${style.styleURI}")
      // Increase trim offset when user click the increase trim offset button.
      binding.trimOffsetButton.setOnClickListener {
        val lineLayer = style.getLayerAs<LineLayer>(LAYER_ID)
        val lastTrimPosition = lineLayer?.lineTrimOffset?.last() ?: 0.0
        lineLayer?.let { layer ->
          layer.lineTrimOffset(listOf(0.0, (lastTrimPosition + 0.05).coerceAtMost(1.0)))
          layer.lineTrimColor("rgba(6, 1, 255, 0.2)")
          layer.lineTrimFadeRange(listOf(0.0, 0.0001))
        }
      }
    }
  }

  private fun createStyle() = style(style = Style.STANDARD) {
    +geoJsonSource(id = SOURCE_ID) {
      feature(Feature.fromGeometry(LineString.fromLngLats(POINTS)))
      lineMetrics(true)
    }
    +lineLayer(LAYER_ID, SOURCE_ID) {
      lineCap(LineCap.ROUND)
      lineJoin(LineJoin.ROUND)
      lineWidth(LINE_WIDTH)
      lineGradient(
        interpolate {
          linear()
          lineProgress()
          // blue
          stop { literal(0.0); rgb { literal(6); literal(1); literal(255) } }
          // royal blue
          stop { literal(0.1); rgb { literal(59); literal(118); literal(227) } }
          // cyan
          stop { literal(0.3); rgb { literal(7); literal(238); literal(251) } }
          // lime
          stop { literal(0.5); rgb { literal(0); literal(255); literal(42) } }
          // yellow
          stop { literal(0.7); rgb { literal(255); literal(252); literal(0) } }
          // red
          stop { literal(1.0); rgb { literal(255); literal(30); literal(0) } }
        }
      )
    }
  }

  companion object {
    private const val TAG = "LineGradientActivity"
    private const val LAYER_ID = "layer-id"
    private const val SOURCE_ID = "source-id"
    private const val LINE_WIDTH = 14.0
    private val POINTS = listOf(
      Point.fromLngLat(-77.044211, 38.852924),
      Point.fromLngLat(-77.045659, 38.860158),
      Point.fromLngLat(-77.044232, 38.862326),
      Point.fromLngLat(-77.040879, 38.865454),
      Point.fromLngLat(-77.039936, 38.867698),
      Point.fromLngLat(-77.040338, 38.86943),
      Point.fromLngLat(-77.04264, 38.872528),
      Point.fromLngLat(-77.03696, 38.878424),
      Point.fromLngLat(-77.032309, 38.87937),
      Point.fromLngLat(-77.030056, 38.880945),
      Point.fromLngLat(-77.027645, 38.881779),
      Point.fromLngLat(-77.026946, 38.882645),
      Point.fromLngLat(-77.026942, 38.885502),
      Point.fromLngLat(-77.028054, 38.887449),
      Point.fromLngLat(-77.02806, 38.892088),
      Point.fromLngLat(-77.03364, 38.892108),
      Point.fromLngLat(-77.033643, 38.899926)
    )
  }
}
```