Giter Club home page Giter Club logo

stickytimeline's Introduction

StickyTimeLine

Maven Central

StickyTimeLine is timeline view for android.

What's New? 🎉

  • [Improvement] lib version update

Result Screen

Feel free to send me a pull request with your app and I'll link you here:

Sample

Get it on Google Play

AlleysMap

Get it on Google Play

StockRoom

Get it on Google Play

How to Use

Gradle

Maven Central

    dependencies {
        implementation 'io.github.sangcomz:StickyTimeLine:x.x.x'
    }

Usage

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="xyz.sangcomz.stickytimeline.MainActivity">

    <xyz.sangcomz.stickytimelineview.TimeLineRecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</android.support.constraint.ConstraintLayout>

MainActivity.kt

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        val recyclerView: TimeLineRecyclerView = findViewById(R.id.recycler_view)
        
        //Currently only LinearLayoutManager is supported.
        recyclerView.layoutManager = LinearLayoutManager(this,
                LinearLayoutManager.VERTICAL,
                false)

        //Get data
        val singerList = getSingerList()


        //Add RecyclerSectionItemDecoration.SectionCallback
        recyclerView.addItemDecoration(getSectionCallback(singerList))
        
        //Set Adapter
        recyclerView.adapter = SingerAdapter(layoutInflater,
                singerList,
                R.layout.recycler_row)
    }

    //Get data method
    private fun getSingerList(): List<Singer> = SingerRepo().singerList


    //Get SectionCallback method
    private fun getSectionCallback(singerList: List<Singer>): RecyclerSectionItemDecoration.SectionCallback {
        return object : RecyclerSectionItemDecoration.SectionCallback {
            //In your data, implement a method to determine if this is a section.
            override fun isSection(position: Int): Boolean =
                    singerList[position].debuted != singerList[position - 1].debuted

            //Implement a method that returns a SectionHeader.
            override fun getSectionHeader(position: Int): SectionInfo? =
                    SectionInfo(singerList[position].debuted, singerList[position].group)
        }
    }
}

JavaExampleActivity.java

public class JavaExampleActivity extends AppCompatActivity {

    private Drawable icFinkl, icBuzz, icWannaOne, icGirlsGeneration, icSolo;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initDrawable();

        TimeLineRecyclerView recyclerView = findViewById(R.id.recycler_view);

        recyclerView.setLayoutManager(new LinearLayoutManager(this,
                RecyclerView.VERTICAL,
                false));

        List<Singer> singerList = getSingerList();

        recyclerView.addItemDecoration(getSectionCallback(singerList));

        recyclerView.setAdapter(new SingerAdapter(getLayoutInflater(), singerList, R.layout.recycler_row));
    }

    private RecyclerSectionItemDecoration.SectionCallback getSectionCallback(final List<Singer> singerList) {
        return new RecyclerSectionItemDecoration.SectionCallback() {

            @Nullable
            @Override
            public SectionInfo getSectionHeader(int position) {
                Singer singer = singerList.get(position);
                Drawable dot;
                switch (singer.getGroup()) {
                    case "FIN.K.L": {
                        dot = icFinkl;
                        break;
                    }
                    case "Girls' Generation": {
                        dot = icGirlsGeneration;
                        break;
                    }
                    case "Buzz": {
                        dot = icBuzz;
                        break;
                    }
                    case "Wanna One": {
                        dot = icWannaOne;
                        break;
                    }
                    default: {
                        dot = icSolo;
                    }
                }
                return new SectionInfo(singer.getDebuted(), singer.getGroup(), dot);
            }

            @Override
            public boolean isSection(int position) {
                return !singerList.get(position).getDebuted().equals(singerList.get(position - 1).getDebuted());
            }
        };
    }

    private List<Singer> getSingerList() {
        return new SingerRepo().getSingerList();
    }

    private void initDrawable() {
        icFinkl = AppCompatResources.getDrawable(this, R.drawable.ic_finkl);
        icBuzz = AppCompatResources.getDrawable(this, R.drawable.ic_buzz);
        icWannaOne = AppCompatResources.getDrawable(this, R.drawable.ic_wannaone);
        icGirlsGeneration = AppCompatResources.getDrawable(this, R.drawable.ic_girlsgeneration);
        icSolo = AppCompatResources.getDrawable(this, R.drawable.ic_wannaone);
    }
}
caution
  • Currently only LinearLayoutManager is supported.

recycler_row.xml

<?xml version="1.0" encoding="utf-8"?>
<!--Don't set margin value in the parent view-->
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/full_name_tv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp" />

</android.support.v7.widget.CardView>
caution
  • Don't set margin value in the parent view.

attribute

Method Name Description Default Value
sectionBackgroundColor To change section section background color #f9f9f9
sectionTitleTextColor To change section title color #414fca
sectionSubTitleTextColor To change section sub title color #d16767
timeLineColor To change line color in timeline #51ae45
timeLineDotColor To change dot color in timeline #51ae45
timeLineCircleStrokeColor To change dot stroke color in timeline #f9f9f9
sectionTitleTextSize To change section title text size 14sp
sectionSubTitleTextSize To change section sub title text size 12sp
timeLineWidth To change line width in timeline 4dp
isSticky To change Sticky functionality in the Timeline true
customDotDrawable To change the circle to custom drawable null
sectionBackgroundColorMode To change section background area(for horizontal mode) MODE_FULL
timeLineDotRadius To change dot radius 8dp
timeLineDotStrokeSize To change dot stroke size 4dp

Contribute

We welcome any contributions.

Inspired by

  • tim.paetz, I was inspired by his code. And I used some of his code in the library.

License

Copyright 2019 Jeong Seok-Won

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

stickytimeline's People

Contributors

carohauta avatar ehdrms2034 avatar jurgen178 avatar sangcomz avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

stickytimeline's Issues

New ection overlapping the last item before section.

Describe the bug
New section background is overlapping the before item last item.

image

Maybe there is already solution for it but I could not figure it out.

My recycler view model -->

<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="wrap_content" app:cardBackgroundColor="@color/white" app:cardCornerRadius="@dimen/general_view_radius_margin">

FEATURE REQUEST: Customize drawable for dots in timeline view

Hi,

Is there a way to customize / replace the drawable for dots in timelive view.

I can see in the "getHeaderView" method it currently uses a static image for each indicator in timeline.

If there is no such function available to change / customize the icons in the timeline at this time,
can you please update the project or help me submit a PR for this feature.

TIA

Best,
Harshit

Item positions are shifted with each update

Hi there, displayed items are shifted to the right bottom side each time the view is updated.

When data is updated in a loop using
recyclerView.addItemDecoration(getSectionCallback(dataList))
the display items have the correct position during the first iteration, but start to shift to the right/bottom with each iteration.

As a test, setting the defaultOffset to 0 stops the shifting, so it seems an offset accumulates each time.
private var defaultOffset: Int = 0.DP(context).toInt()

Screenshot_20210325-145724

Screenshot_20210325-145730

Screenshot_20210325-145737

sectionLineColor, sectionCircleColor Not found when trying to change from xml

Error:error: attribute 'com.bla.bla:sectionCircleColor' not found.
Error:error: attribute 'com.bla.bla:sectionLineColor' not found.
Error:attribute 'com.bla.bla:sectionCircleColor' not found.
Error:attribute 'com.bla.bla:sectionLineColor' not found.
Error:failed linking file resources.
Error:java.util.concurrent.ExecutionException: java.util.concurrent.ExecutionException: com.android.tools.aapt2.Aapt2Exception: AAPT2 error: check logs for details
Error:java.util.concurrent.ExecutionException: com.android.tools.aapt2.Aapt2Exception: AAPT2 error: check logs for details
Error:com.android.tools.aapt2.Aapt2Exception: AAPT2 error: check logs for details
Error:Execution failed for task ':app:processDebugResources'.

Failed to execute aapt

duplication in recycler view

when I use glide in adapter to set the images for each item , my items in recycler will be duplicated.
I have no idea , when I remove Glide or Picasso it is ok.
duplication_problem

this is my code

public class NotifyAdapter extends RecyclerView.Adapter<NotifyAdapter.ViewHolder> {
    private LayoutInflater layoutInflater;
    private List<NotifyModel> notifyList;
    private Context context;
    @LayoutRes
    private int rowLayout;

    public NotifyAdapter(LayoutInflater layoutInflater, List<NotifyModel> notifyList, int rowLayout , Context context) {
        this.layoutInflater = layoutInflater;
        this.notifyList = notifyList;
        this.rowLayout = rowLayout;
        this.context = context;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View v = layoutInflater.inflate(rowLayout, parent, false);
        return new ViewHolder(v);
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        NotifyModel notifyModel = notifyList.get(position);
        holder.fullName.setText(notifyModel.getMessage());
        Picasso.get().load(notifyModel.getImgurl()).into(holder.imageView);
        Log.d("Running", "onBindViewHolder: " + position);    
    
    }

    @Override
    public int getItemCount() {
        return notifyList.size();
    }

    public static class ViewHolder extends RecyclerView.ViewHolder {
        public TextView fullName;
        public ImageView imageView;
        public ViewHolder(View view) {
            super(view);
            fullName = view.findViewById(R.id.name_textView);
            imageView = view.findViewById(R.id.image_view);
        }
    }
}

Thanks!

Last item of any section is behind of section header

@sangcomz Hi.
this is my item.xml code:

<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">


    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/mainlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >

        <...

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.cardview.widget.CardView>

and other part of code is exactly your example code.
but here is the result:
Capturesdfgsdg

EDIT:
The result has captured from android emulator with API 29.
on the real devices and other emulators like NOX player and etc. it's OK!

Suggestion

Items width match content and side by side, continuing in next row....

Failed linking file resources.

I am implementing this library in my app, the only problem come when i try to change the color in the xml.

I get the error " failed linking file resources. "

<xyz.sangcomz.stickytimelineview.TimeLineRecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:sectionCircleColor="#565656"
    />

Thera any way to change the color programatically? or some import ?

Thanks

Section Background Bug

in api version 21, section background default color doesn't match parent's background color.
for example, look at this picture
스크린샷 2019-10-14 오후 5 04 05

but there aren't bug in api 24~

WHEN I INTEGRATE IN FRAGMENT

2018-10-12 00:34:33.259 16375-16375/com.kickz.jeasteelpayroll E/AndroidRuntime: at com.kickz.jeasteelpayroll.TimeAttendanceRepo.getTimeattendanceList(TimeAttendanceRepo.kt:13)
at com.kickz.jeasteelpayroll.TimeAttendanceRepo.getTimeattendanceList(TimeAttendanceRepo.kt:13)
at com.kickz.jeasteelpayroll.TimeAttendanceRepo.getTimeattendanceList(TimeAttendanceRepo.kt:13)
at com.kickz.jeasteelpayroll.TimeAttendanceRepo.getTimeattendanceList(TimeAttendanceRepo.kt:13)
at com.kickz.jeasteelpayroll.TimeAttendanceRepo.getTimeattendanceList(TimeAttendanceRepo.kt:13)
at com.kickz.jeasteelpayroll.TimeAttendanceRepo.getTimeattendanceList(TimeAttendanceRepo.kt:13)
at com.kickz.jeasteelpayroll.TimeAttendanceRepo.getTimeattendanceList(TimeAttendanceRepo.kt:13)
at com.kickz.jeasteelpayroll.TimeAttendanceRepo.getTimeattendanceList(TimeAttendanceRepo.kt:13)
at com.kickz.jeasteelpayroll.TimeAttendanceRepo.getTimeattendanceList(TimeAttendanceRepo.kt:13)
at com.kickz.jeasteelpayroll.TimeAttendanceRepo.getTimeattendanceList(TimeAttendanceRepo.kt:13)
at com.kickz.jeasteelpayroll.TimeAttendanceRepo.getTimeattendanceList(TimeAttendanceRepo.kt:13)
at com.kickz.jeasteelpayroll.TimeAttendanceRepo.getTimeattendanceList(TimeAttendanceRepo.kt:13)
at com.kickz.jeasteelpayroll.TimeAttendanceRepo.getTimeattendanceList(TimeAttendanceRepo.kt:13)
at com.kickz.jeasteelpayroll.TimeAttendanceRepo.getTimeattendanceList(TimeAttendanceRepo.kt:13)
at com.kickz.jeasteelpayroll.TimeAttendanceRepo.getTimeattendanceList(TimeAttendanceRepo.kt:13)
at com.kickz.jeasteelpayroll.TimeAttendanceRepo.getTimeattendanceList(TimeAttendanceRepo.kt:13)
at com.kickz.jeasteelpayroll.TimeAttendanceRepo.getTimeattendanceList(TimeAttendanceRepo.kt:13)
at com.kickz.jeasteelpayroll.TimeAttendanceRepo.getTimeattendanceList(TimeAttendanceRepo.kt:13)
at com.kickz.jeasteelpayroll.TimeAttendanceRepo.getTimeattendanceList(TimeAttendanceRepo.kt:13)
at com.kickz.jeasteelpayroll.TimeAttendanceRepo.getTimeattendanceList(TimeAttendanceRepo.kt:13)
at com.kickz.jeasteelpayroll.TimeAttendanceRepo.getTimeattendanceList(TimeAttendanceRepo.kt:13)
at com.kickz.jeasteelpayroll.TimeAttendanceRepo.getTimeattendanceList(TimeAttendanceRepo.kt:13)
at com.kickz.jeasteelpayroll.TimeAttendanceRepo.getTimeattendanceList(TimeAttendanceRepo.kt:13)
at com.kickz.jeasteelpayroll.TimeAttendanceRepo.getTimeattendanceList(TimeAttendanceRepo.kt:13)
at com.kickz.jeasteelpayroll.TimeAttendanceRepo.getTimeattendanceList(TimeAttendanceRepo.kt:13)
at com.kickz.jeasteelpayroll.TimeAttendanceRepo.getTimeattendanceList(TimeAttendanceRepo.kt:13)
at com.kickz.jeasteelpayroll.TimeAttendanceRepo.getTimeattendanceList(TimeAttendanceRepo.kt:13)
at com.kickz.jeasteelpayroll.TimeAttendanceRepo.getTimeattendanceList(TimeAttendanceRepo.kt:13)
at com.kickz.jeasteelpayroll.TimeAttendanceRepo.getTimeattendanceList(TimeAttendanceRepo.kt:13)
at com.kickz.jeasteelpayroll.TimeAttendanceRepo.getTimeattendanceList(TimeAttendanceRepo.kt:13)
at com.kickz.jeasteelpayroll.TimeAttendanceRepo.getTimeattendanceList(TimeAttendanceRepo.kt:13)
at com.kickz.jeasteelpayroll.TimeAttendanceRepo.getTimeattendanceList(TimeAttendanceRepo.kt:13)
at com.kickz.jeasteelpayroll.TimeAttendanceRepo.getTimeattendanceList(TimeAttendanceRepo.kt:13)
at com.kickz.jeasteelpayroll.TimeAttendanceRepo.getTimeattendanceList(TimeAttendanceRepo.kt:13)
at com.kickz.jeasteelpayroll.TimeAttendanceRepo.getTimeattendanceList(TimeAttendanceRepo.kt:13)
at com.kickz.jeasteelpayroll.TimeAttendanceRepo.getTimeattendanceList(TimeAttendanceRepo.kt:13)
at com.kickz.jeasteelpayroll.TimeAttendanceRepo.getTimeattendanceList(TimeAttendanceRepo.kt:13)
at com.kickz.jeasteelpayroll.TimeAttendanceRepo.getTimeattendanceList(TimeAttendanceRepo.kt:13)
at com.kickz.jeasteelpayroll.TimeAttendanceRepo.getTimeattendanceList(TimeAttendanceRepo.kt:13)
at com.kickz.jeasteelpayroll.TimeAttendanceRepo.getTimeattendanceList(TimeAttendanceRepo.kt:13)
at com.kickz.jeasteelpayroll.TimeAttendanceRepo.getTimeattendanceList(TimeAttendanceRepo.kt:13)

change DotDrawable for each row of items

You suppose i have some images in each recyclerview rows, and i would like to have different image on each row on dot, by customDotDrawable we can change all of row in same time, and now how can i set different image for each row of time line?

java

Thanks for this awesome project. Would be good to have Java code sample on the home page and/or a sample app in Java. :)

RTL Support

Hello,

there is any why to use this time line in RTL apps?
i'm trying to change the line to be at right of the items.

In list extra spaces added between items, while loading the data from web service.

I have implemented your library in my project which is written in java language. In my project there is need to call data from web service so 1st time when I call web service at that time data properly shown but when I call web service 2nd time for more data at that time data is displayed in the list with extra space in between the items, extra space in between items and headers as well as width of the item is also changed which is shown in below picture.
Can you help me to solve this problem
Thanking you in advance

Properly shows data when 1st time I call data from web service
display_proper_data

Extra spaces is added in list when 2nd time I call data from web service
extra_space_data_1
extra_space_data_2
extra_space_data_3

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.