CustomView (Gallery Indicator View)

Guys, We learn how to create custom view in android...Here is the example of Gallery Indicator View

1) Create gallery_indicator_selector.xml  in drawable folder (drawable of gallery indicator)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="@dimen/dimen__5" />
    <stroke
        android:width="1dp"
        android:color="@color/black_transparent_color" />
    <solid android:color="@color/black_transparent_color" />
</shape>

2) Create view xml file : view_gallery_indicator.xml (in layout folder)

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="@dimen/dimen__80"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@drawable/gallery_indicator_selector"
    android:orientation="horizontal"
    android:paddingBottom="@dimen/dimen__5"
    android:paddingLeft="@dimen/dimen__8"
    android:paddingRight="@dimen/dimen__8"
    android:paddingTop="@dimen/dimen__5">

    <ImageView
        android:id="@+id/view_gallery_indicator_image"
        android:layout_width="@dimen/dimen__16"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        app:srcCompat="@drawable/ic_gallery_collections" />

    <TextView
        android:id="@+id/view_gallery_indicator_counter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="@dimen/dimen__8"
        android:text="1/20"
        android:textSize="@dimen/font_size_13"
        android:textColor="@color/colorWhite" />
</LinearLayout>

3) Create CustomView jave file : GalleryIndicatorView.java (Create new package views->GalleryIndicatorView.java)

public class GalleryIndicatorView extends LinearLayout {

    private TextView texIndicator;

    public GalleryIndicatorView(Context context) {
        super(context);
        stuff(null);
    }

    public GalleryIndicatorView(Context context, AttributeSet attrs) {
        super(context, attrs);
        stuff(attrs);
    }

    public GalleryIndicatorView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        stuff(attrs);
    }

    public GalleryIndicatorView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        stuff(attrs);
    }

    /**
     * set/init view and its controls here
     *
     * @param attrs -- Attributes
     */
    private void stuff(AttributeSet attrs) {
        LayoutInflater.from(getContext()).inflate(R.layout.view_gallery_indicator, this);
        texIndicator = (TextView) findViewById(R.id.view_gallery_indicator_counter);
    }

    /**
     * set indicator counter
     *
     * @param text -- counter string
     */
    public void setIndicatorText(String text) {
        texIndicator.setText(text);
    }
}

In above java file you can define your custom view's getter setter property whatever you needed and access from wherever you use this custom view

4) Create Your layout xml file where you can use you custom view like this :

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
  xmlns:app="http://schemas.android.com/apk/res-auto">

    <views.GalleryIndicatorView
        android:id="@+id/view_hotel_detail_gallery_indicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
     />
</FrameLayout>