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 :
1 2 3 4 5 6 7 8 | <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 Name | Default Value | Description |
|---|---|---|
| app:marker=”@drawable/marker” | Green Colored Oval Drawable | sets marker drawable |
| app:markerSize=”25dp” | 25dp | sets marker size |
| app:markerInCenter=”false” | true | sets the marker in center of line if `true` |
| app:markerPaddingLeft=”0dp” | 0dp | sets the marker left padding, applicable only with horizontal orientation |
| app:markerPaddingTop=”0dp” | 0dp | sets the marker top padding, applicable only with vertical orientation |
| app:markerPaddingRight=”0dp” | 0dp | sets the marker right padding, applicable only with horizontal orientation |
| app:markerPaddingBottom=”0dp” | 0dp | sets the marker bottom padding, applicable only with vertical orientation |
| app:startLineColor=”@color/primarColor” | Dark Grey Line | sets start line color |
| app:endLineColor=”@color/primarColor” | Dark Grey Line | sets end line color |
| app:lineWidth=”2dp” | 2dp | sets line width |
| app:lineOrientation=”horizontal” | vertical | sets orientation of line ie `horizontal` or `vertical` |
| app:linePadding=”5dp” | 0dp | sets line padding around marker |
| app:lineStyle=”dash” | normal | sets line style ie `normal` or `dashed` |
| app:lineStyleDashGap=”4dp” | 4dp | sets line dash gap |
| app:lineStyleDashLength=”8dp” | 8dp | sets 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