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

Related Posts
Flutter Swiper : Membuat Image / Layout Slider di Flutter

Flutter menawarkan lebih dari satu pilihan package untuk membuat image / layout slider yang bisa diimplementasikan di android dan iOS. Read more

Cara Unlock Bootloader di Realme XT

Bagi yang suka mengoprek smartphone android, kebanyakan device android sudah melakukan lock bootloader. Padahal langkah awal sebelum mengoprek lebih jauh, Read more

Implementasi Autentikasi Fingerprint Pada Flutter

Ada kalanya kita perlu mengimplementasikan autentikasi berupa sidik jari (fingerprint) dalam aplikasi yang kita kembangkan. Dalam flutter implementasi sidik jari Read more

Melakukan Migrasi Flutter Menggunakan AndroidX

Dalam mengembangkan aplikasi android, AndroidX merupakan peningkatan besar dari Android dalam penerapan Library Support. Dalam mengembangkan aplikasi flutter, seringkali kita Read more

Tagged : #

Leave a Reply

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