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 :
[cc lang="xml"]
[/cc]
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
Komentar
Belum ada komentar. Jadilah yang pertama berkomentar!