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 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

Tagged : #

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *