How to Give Custom Shape to Android View?

0
3893

In every application we (developer) want to make an attractive UI and for that we’ve to handle the Android View. Sometime it’s easy for us but sometime it’s bit complicated when we need some custom Android View.
So today i am going to show you an Android Library named ShapeOfView which give a custom shape to any Android View Useful for Material Design 2.

See some of other article too:

  1. Create own ViewPager Transformations Animation
  2. Creative View Pager Android Animation 
  3. GravityView – Sensor Based 
  4. FloatingView Animation

1Example of screens you can build with ShapeOfView :

screen screen

 

 

 

 

 

 

 

 

I think now you’re ready to implement that type of View in you upcoming or existing Android application.

[reposcript id=”git_repo” gituser=”florent37″ gitname=”ShapeOfView”]

Let’s see one more sample you can do with Shape Of View:

Example of Custom Shape to Android View
Example of Custom Shape to Android View

2Download this library

Maven

<dependency>
  <groupId>com.github.florent37</groupId>
  <artifactId>shapeofview</artifactId>
  <version>1.2.0</version>
  <type>pom</type>
</dependency>

Gradle

compile 'com.github.florent37:shapeofview:1.2.0'

Ivy

<dependency org='com.github.florent37' name='shapeofview' rev='1.2.0'>
  <artifact name='shapeofview' ext='pom' ></artifact>
</dependency>

Download whole demo project

3How to Create your own Shape for Android View?

Using Drawable (no elevation)

screen

<com.github.florent37.shapeofview.ShapeOfView
        android:layout_width="100dp"
        android:layout_height="100dp"

        app:shape_clip_drawable="@drawable/YOUR_DRAWABLE"
        >

    <!-- YOUR CONTENT -->

 </com.github.florent37.shapeofview.ShapeOfView>

Using Path (with elevation)

This method generates also a shadow path (with Lollipop elevation API 21+)

Wrap your view with a ShapeOfView

<com.github.florent37.shapeofview.ShapeOfView
        android:id="@+id/myShape"
        android:layout_width="30dp"
        android:layout_height="15dp"
        android:elevation="6dp">

        <!-- YOUR CONTENT -->

 </com.github.florent37.shapeofview.ShapeOfView>

Then generate a path in your code :

ShapeOfView shapeOfView = findViewById(R.id.myShape)
shapeOfView.setClipPathCreator(new ClipPathManager.ClipPathCreator() {
       @Override
       public Path createClipPath(int width, int height) {
           final Path path = new Path();

            //eg: triangle
           path.moveTo(0, 0);
           path.lineTo(0.5 * width, height);
           path.lineTo(width, 0);
           path.close();

           return path;
       }
});

4Use implemented Android View shapes

ShapesOfView came with pre-created shapes :

Triangle

screen

<com.github.florent37.shapeofview.shapes.TriangleView
         android:layout_width="150dp"
         android:layout_height="150dp"
         android:elevation="4dp"

         app:shape_triangle_percentBottom="0.5"
         app:shape_triangle_percentLeft="0"
         app:shape_triangle_percentRight="0">

            <!-- YOUR CONTENT -->

</com.github.florent37.shapeofview.shapes.TriangleView>

Circle

screen

<com.github.florent37.shapeofview.shapes.CircleView
        android:layout_width="150dp"
        android:layout_height="150dp"

        android:elevation="4dp"
        app:shape_circle_borderColor="@android:color/black"
        app:shape_circle_borderWidth="2dp">

            <!-- YOUR CONTENT -->

</com.github.florent37.shapeofview.shapes.CircleView>

RoundRect

screen

<com.github.florent37.shapeofview.shapes.RoundRectView
        android:layout_width="150dp"
        android:layout_height="100dp"
        android:elevation="4dp"
        app:shape_roundRect_bottomLeftRadius="10dp"
        app:shape_roundRect_bottomRightRadius="10dp"
        app:shape_roundRect_topLeftRadius="10dp"
        app:shape_roundRect_topRightRadius="10dp"
        
        app:shape_roundRect_borderColor="@android:color/black"
        app:shape_roundRect_borderWidth="2dp"
        >


            <!-- YOUR CONTENT -->

</com.github.florent37.shapeofview.shapes.RoundRectView>

ClipCorner

screen

<com.github.florent37.shapeofview.shapes.CutCornerView
        android:id="@+id/clipCorner"
        android:layout_width="150dp"
        android:layout_height="100dp"
        android:elevation="4dp"
        app:shape_cutCorner_bottomRightSize="20dp">

         <!-- YOUR CONTENT -->

</com.github.florent37.shapeofview.shapes.CutCornerView>

5Arc

screen

<com.github.florent37.shapeofview.shapes.ArcView
        android:layout_width="150dp"
        android:layout_height="100dp"
        android:elevation="4dp"
        app:shape_arc_cropDirection="outside"
        app:shape_arc_height="20dp"
        app:shape_arc_position="bottom"
        >

         <!-- YOUR CONTENT -->

</com.github.florent37.shapeofview.shapes.ArcView>

Diagonal

screen

<com.github.florent37.shapeofview.shapes.DiagonalView
        android:layout_width="150dp"
        android:layout_height="100dp"
        android:elevation="4dp"
        app:shape_diagonal_angle="10"
        app:shape_diagonal_direction="left"
        app:shape_diagonal_position="bottom">

         <!-- YOUR CONTENT -->

</com.github.florent37.shapeofview.shapes.DiagonalView>

Bubble

screen

<com.github.florent37.shapeofview.shapes.BubbleView
        android:layout_width="150dp"
        android:layout_height="150dp"
        app:shape_bubble_arrowHeight="10dp"
        app:shape_bubble_arrowWidth="10dp"
        app:shape_bubble_arrowPosition="bottom"
        app:shape_bubble_borderRadius="20dp"
        >

         <!-- YOUR CONTENT -->

</com.github.florent37.shapeofview.shapes.BubbleView>

Star

screen

screen

<com.github.florent37.shapeofview.shapes.StarView
        android:layout_width="150dp"
        android:layout_height="150dp"
        app:shape_star_noOfPoints="5">

         <!-- YOUR CONTENT -->

</com.github.florent37.shapeofview.shapes.StarView>

Polygon

screen

<com.github.florent37.shapeofview.shapes.PolygonView
            android:layout_width="150dp"
            android:layout_height="100dp"
            app:shape_polygon_noOfSides="9"
            >
         <!-- YOUR CONTENT -->

</com.github.florent37.shapeofview.shapes.PolygonView>

6Animation for Android View

All shapes methods from above can be animated

For example, you can animate a RoundRect corner :

anim

ValueAnimator.ofFloat(0f, 200f, 0f).apply {
     addUpdateListener { animation -> roundRect.bottomLeftRadius = (animation.animatedValue as Float).toInt() }
     duration = 800
     repeatCount = ValueAnimator.INFINITE
     repeatMode = ValueAnimator.REVERSE
}.start()

That’s it !! Now show me your interest in comment section. So i’ll motivate to share some more piece of cake for you.

We’re here to help each other that’s developer community do. Feel free to ask me any question or suggestion in comment section.

Share your thoughts

Loading Facebook Comments ...
Loading Disqus Comments ...