Membuat Timeline Di Android Menggunakan Library Timeline-View

06-01-2020

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

Tulisan Lain Menampilkan Image/Gambar dari Url Pada Android Menggunakan Picasso