How to create Different Shapes

Different ShapeView

dependencies {
    implementation 'com.github.florent37:shapeofview:(lastest version)'
} 

       Version 1.4.0

1.3.2

1.3.1

1.3.0

1.2.0

1.1.2

1.1.1

1.1.0

1.0.9

1.0.8

1.0.7

1.0.6

1.0.5

1.0.4

1.0.0

Circle
<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
<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
<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>

Arc
<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
<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>

Triangle
<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>

Bubble
<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
<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
<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>

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

Using Drawable (no elevation)
<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)
<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;
       }
});

//Reference link
https://github.com/florent37/ShapeOfView

SliderImage

compile 'me.relex:circleindicator:1.2.2@aar'

Step 1 :

SlidePagerAdapter .java

public class SlidePagerAdapter extends PagerAdapter {
    int[] mResources = {
            R.drawable.ooty,
            R.drawable.ooty2,
            R.drawable.ooty,
            R.drawable.ooty2,
            R.drawable.ooty,
            R.drawable.ooty2,};
    Context mContext;
    LayoutInflater mLayoutInflater;

    public SlidePagerAdapter(Context context) {
        mContext = context;
        mLayoutInflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

    @Override    public int getCount() {
        return mResources.length;
    }

    @Override    public boolean isViewFromObject(View view, Object object) {

        return view == ((LinearLayout) object);
    }

    @Override    public Object instantiateItem(ViewGroup container, int position) {
        View itemView = mLayoutInflater.inflate(R.layout.slide, container, false);

        ImageView imageView = (ImageView) itemView.findViewById(R.id.image);
        imageView.setImageResource(mResources[position]);

        container.addView(itemView);

        return itemView;
    }

    @Override    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((LinearLayout) object);
}
}

Step 2:

public class MainActivity extends AppCompatActivity{
ViewPager mPager;
SlidePagerAdapter slidePagerAdapter;
CircleIndicator indicator;
@Overrideprotected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

mPager = (ViewPager) view.findViewById(R.id.pager);
indicator = (CircleIndicator) view.findViewById(R.id.indicator);



slidePagerAdapter = new SlidePagerAdapter(getActivity());
mPager.setAdapter(slidePagerAdapter);
indicator.setViewPager(mPager);
}}


Step 3:

activity_main.xml
<LinearLayout    android:layout_width="match_parent"  
  android:layout_height="wrap_content"    
android:orientation="vertical">
    <LinearLayout        
android:layout_width="match_parent"
        android:layout_height="300dp"  
      android:id="@+id/layout_image" 
       android:orientation="vertical" 
       android:background="@drawable/ooty"  
      android:gravity="center">
        <RelativeLayout        
    android:layout_width="match_parent"   
         android:layout_height="match_parent">
            <android.support.v4.view.ViewPager 
               android:id="@+id/pager"     
           android:layout_width="match_parent" 
               android:layout_height="match_parent"
               android:clickable="false">

            </android.support.v4.view.ViewPager>

            <me.relex.circleindicator.CircleIndicator  
              android:id="@+id/indicator"    
            android:layout_width="match_parent" 
               android:layout_height="48dp"  
              android:layout_alignParentBottom="true"/>

        </RelativeLayout>
    </LinearLayout>
    <LinearLayout




Step 4:


slide.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
 android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView    android:id="@+id/image"
   android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:adjustViewBounds="true"
    android:layout_gravity="center"
    android:src="@drawable/ooty"
    android:scaleType="centerCrop"/>
</LinearLayout>