Code Example

Kotlin Android VectorView Snippets

Implement VectorView widget in android via these simple examples.

1. bardss/PaintableVectorView

PaintableVectorView enables to change color of paths/groups in Vector Drawable (SVG).

PaintableVectorView enables to change color of paths/groups in Vector Drawable (SVG)

PaintableVectorView Example Tutorial

7499316

PaintableVectorView Example Tutorial

PaintableVectorView enables to change color of paths/groups in Vector Drawable (SVG)

Demo

PaintableVectorView Example Tutorial

Step 1: Dependency

Add the following lines in your root build.gradle at the end of repositories:

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

Add the dependency

dependencies {
    implementation 'com.github.bardss:PaintableVectorView:1.0.0'
}

Step 2: Usage

Create PaintableVectorView and add to the layout:

val paintableView = PaintableVectorView(
    context = this,
    drawableId = R.drawable.ic_car,
    paintType = PaintType.PAINT_PATH,
    paintColor = resources.getColor(R.color.blue)
)
layout.addView(paintableView)

Set other paint type:

paintableView.paintType = PaintType.PAINT_GROUP

Set other paint color:

paintableView.paintColor = resources.getColor(R.color.blue)

Reset layers color in PaintableVectorView:

paintableView.resetColors()

PaintableVectorView enables to change color of paths/groups in Vector Drawable (SVG).

Example

Here is a simple example:

1. MainActivity.kt

Here is the full code for our MainActivity.kt file:

package com.jakubaniola.paintablevectorviewapp

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.jakubaniola.paintablevectorview.PaintType
import com.jakubaniola.paintablevectorview.PaintableVectorView
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    private lateinit var paintableView: PaintableVectorView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }

    override fun onStart() {
        super.onStart()
        paintableView = PaintableVectorView(
            this,
            R.drawable.ic_car,
            PaintType.PAINT_GROUP,
            resources.getColor(R.color.blue)
        )
        setupPaintableView()
        setupResetButton()
        setupPaintTypeButtons()
        setupPaintColorButtons()
    }

    private fun setupResetButton() {
        resetColorsButton.setOnClickListener {
            paintableView.resetColors()
        }
    }

    private fun setupPaintTypeButtons() {
        drawPathButton.setOnClickListener {
            paintableView.paintType = PaintType.PAINT_PATH
        }
        drawGroupButton.setOnClickListener {
            paintableView.paintType = PaintType.PAINT_GROUP
        }
    }

    private fun setupPaintColorButtons() {
        paintBlueButton.setOnClickListener {
            paintableView.paintColor = resources.getColor(R.color.blue)
        }
        paintRedButton.setOnClickListener {
            paintableView.paintColor = resources.getColor(R.color.red)
        }
        paintGreenButton.setOnClickListener {
            paintableView.paintColor = resources.getColor(R.color.green)
        }
        paintYellowButton.setOnClickListener {
            paintableView.paintColor = resources.getColor(R.color.yellow)
        }
    }

    private fun setupPaintableView() {
        paintableBoxLayout.addView(paintableView)
    }
}

2. activity_main.xml

Here is the full code for our activity_main.xml file:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:id="@+id/clickOnImageTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:text="@string/click_on_the_image"
        android:textSize="24sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <FrameLayout
        android:id="@+id/paintableBoxLayout"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_margin="18dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/clickOnImageTextView" />

    <TextView
        android:id="@+id/paintTypeTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:text="@string/choose_paint_type"
        android:textSize="14sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/paintableBoxLayout" />

    <Button
        android:id="@+id/drawPathButton"
        android:layout_width="100dp"
        android:layout_height="48dp"
        android:text="@string/path"
        app:layout_constraintEnd_toStartOf="@id/drawGroupButton"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/paintTypeTextView" />

    <Button
        android:id="@+id/drawGroupButton"
        android:layout_width="100dp"
        android:layout_height="48dp"
        android:text="@string/group"
        app:layout_constraintStart_toEndOf="@id/drawPathButton"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/paintTypeTextView" />

    <TextView
        android:id="@+id/paintColorTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:text="Choose paint color"
        android:textSize="14sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/drawPathButton" />

    <Button
        android:id="@+id/paintBlueButton"
        android:layout_width="100dp"
        android:layout_height="32dp"
        android:background="@color/blue"
        android:text="@string/blue"
        app:layout_constraintEnd_toStartOf="@id/drawGroupButton"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/paintColorTextView" />

    <Button
        android:id="@+id/paintRedButton"
        android:layout_width="100dp"
        android:layout_height="32dp"
        android:background="@color/red"
        android:text="@string/red"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/drawPathButton"
        app:layout_constraintTop_toBottomOf="@+id/paintColorTextView" />

    <Button
        android:id="@+id/paintGreenButton"
        android:layout_width="100dp"
        android:layout_height="32dp"
        android:background="@color/green"
        android:text="@string/green"
        app:layout_constraintEnd_toStartOf="@id/drawGroupButton"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/paintBlueButton" />

    <Button
        android:id="@+id/paintYellowButton"
        android:layout_width="100dp"
        android:layout_height="32dp"
        android:background="@color/yellow"
        android:text="@string/yellow"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/drawPathButton"
        app:layout_constraintTop_toBottomOf="@+id/paintBlueButton" />

    <Button
        android:id="@+id/resetColorsButton"
        android:layout_width="160dp"
        android:layout_height="48dp"
        android:layout_marginTop="32dp"
        android:text="@string/reset_colors"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/paintYellowButton" />

</androidx.constraintlayout.widget.ConstraintLayout>

Reference

You can DOWNLOAD FULL CODE.
You can also browse code or read more here.
Follow code author here.

Read More.

Related Posts