ShapeView

Drawing shapes can be achieved in many ways and depend mostly on how complex your shape is. This Kotlin library intends to leverage how to draw basic shapes so that you need only focus on how to draw your shape using this toolbox.

Half circle edge shape	Ticket shape

Gradle Dependency

Add this in your root build.gradle file:

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

Then add the dependencies that you need in your project.

dependencies {
  compile 'com.github.StephenVinouze:ShapeView:1.1.1'
}

Usage

An abstract ShapeView class allows you to configure two paths: one path is used to fill your content while the other can be used to draw a stroke around your shape. This class exposes three custom XML attributes:

• shapeColor: define which color will fill your shape
• shapeStrokeColor: define which color will be used for the stroke around your shape (if any)
• shapeStrokeWidth: define the width of your stroke (if any)
• [NEW] shapeDashOnWidth: define the width of your stroke's dash filled line (if any)
• [NEW] shapeDashOffWidth: define the width between your stroke's dash (if any)

These attributes lets you define both in XML and programmatically your basic shapes. Starting from that, you can easily extend ShapeView to draw your own shapes by using the Path instance that the class provides.

Finally, ShapeView extends from RelativeLayout so you can easily put any view inside your shape.

Examples

This library provides two shapes: a basic HalfCircleEdgeShapeView and a more complex TicketShapeView

HalfCircleEdgeShapeView

This class extends from ShapeView and overrides both onSizeChanged() and onDraw() methods. The idea is to draw a shape with half circle at both left and right edges by using the Path instance. This shape can for instance be used as a Button.

<com.github.stephenvinouze.shapeview.shapes.HalfCircleEdgeShapeView
        android:layout_width="250dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:padding="10dp"
        app:shapeColor="@color/colorAccent"
        app:shapeStrokeColor="@color/colorPrimaryDark"
        app:shapeStrokeWidth="2dp"
 app:shapeDashOnWidth="4dp"
        app:shapeDashOffWidth="2dp">
 
 <!-- Any subviews you want -->
 
</com.github.stephenvinouze.shapeview.shapes.HalfCircleEdgeShapeView>

TicketShapeView

Similar to the previous shape, we define the shape using the Path instance to draw a ticket like shape. We provide a few custom XML attributes to define both innerRadius and outerRadius that will be applied to this shape. You can also specify where the inner radius will be applied.

<com.github.stephenvinouze.shapeview.shapes.TicketShapeView
        android:layout_width="250dp"
        android:layout_height="150dp"
        app:innerOffset="30dp"
        app:innerRadius="5dp"
        app:outerRadius="7dp"
        app:shapeColor="@color/colorAccent">
 
 <!-- Any subviews you want -->
 
</com.github.stephenvinouze.shapeview.shapes.TicketShapeView>

License

Copyright 2016 Stephen Vinouze.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.