Tampilan timeline sering digunakan dalam beberapa aplikasi. Timeline berguna untuk menampilkan seperti tracking suatu pesanan atau barang, atau berupa menjelaskan langkah-langkah dalam suatu proses. Untuk menampilkan Timeline pada android dapat menggunakan library, salah satunya adalah library Timeline-View. Library Timeline-View berbasis recycleview.

Berikut sejumlah tampilan implementasi Timeline-View :

Cara Setup

Tambahkan pada gradle :

dependencies {
    implementation 'com.github.vipulasri:timelineview:1.1.3'
}

Lalu pada layout xml :

<com.github.vipulasri.timelineview.TimelineView
   android:id="@+id/timeline"
   android:layout_width="wrap_content"
   android:layout_height="match_parent"
   app:markerSize="20dp"
   app:lineWidth="2dp"
   app:startLineColor="@color/colorPrimary"
   app:endLineColor="@color/colorPrimary"/>

Lalu untuk pilihan atribut :

Attribute NameDefault ValueDescription
app:marker=”@drawable/marker”Green Colored Oval Drawablesets marker drawable
app:markerSize=”25dp”25dpsets marker size
app:markerInCenter=”false”truesets the marker in center of line if `true`
app:markerPaddingLeft=”0dp”0dpsets the marker left padding, applicable only with horizontal orientation
app:markerPaddingTop=”0dp”0dpsets the marker top padding, applicable only with vertical orientation
app:markerPaddingRight=”0dp”0dpsets the marker right padding, applicable only with horizontal orientation
app:markerPaddingBottom=”0dp”0dpsets the marker bottom padding, applicable only with vertical orientation
app:startLineColor=”@color/primarColor”Dark Grey Linesets start line color
app:endLineColor=”@color/primarColor”Dark Grey Linesets end line color
app:lineWidth=”2dp”2dpsets line width
app:lineOrientation=”horizontal”verticalsets orientation of line ie `horizontal` or `vertical`
app:linePadding=”5dp”0dpsets line padding around marker
app:lineStyle=”dash”normalsets line style ie `normal` or `dashed`
app:lineStyleDashGap=”4dp”4dpsets line dash gap
app:lineStyleDashLength=”8dp”8dpsets line dash length

Pada Bagian RecycleHolder, ada tambahan parameter viewType. Selain itu juga memanggil method initLine :

public class TimeLineViewHolder extends RecyclerView.ViewHolder {
        public  TimelineView mTimelineView;

        public TimeLineViewHolder(View itemView, int viewType) {
            super(itemView);
            mTimelineView = (TimelineView) itemView.findViewById(R.id.timeline);
            mTimelineView.initLine(viewType);
        }
    }

Pada bagian RecycleAdapter melakukan override getItemViewType :

@Override
    public int getItemViewType(int position) {
        return TimelineView.getTimeLineViewType(position, getItemCount());
    }

Lalu lewatkan viewType ke Holder :

@Override
    public TimeLineViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = View.inflate(parent.getContext(), R.layout.item_timeline, null);
        return new TimeLineViewHolder(view, viewType);
    }

Untuk lebih jelasnya bisa ke https://github.com/vipulasri/Timeline-View

Tagged : #

Leave a Reply

Your email address will not be published. Required fields are marked *