transferwise / sequence-layout Goto Github PK

View Code? Open in Web Editor NEW

478.0 27.0 59.0 271 KB

A vertical sequence UI component for Android

License: Apache License 2.0

Kotlin 100.00%

android layout progress-bar

sequence-layout's Introduction

sequence-layout

A vertical sequence UI component for Android.

Animates a progress bar to the first active step in the sequence and then periodically runs a pulse animation on that step.

Setup

Add the JitPack maven repository to your root build.gradle:

allprojects {
    repositories {
      maven { url "https://jitpack.io" }
    }
}

And then the actual library dependency to your module's build.gradle:

dependencies {
    implementation 'com.github.transferwise:sequence-layout:... // use latest version'
}

Usage

Take a look at the sample app in this repository.

In XML layout

You can define steps in your XML layout:

<com.transferwise.sequencelayout.SequenceLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.transferwise.sequencelayout.SequenceStep
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:anchor="30 Nov"
        app:title="First step"/>

    <com.transferwise.sequencelayout.SequenceStep
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:title="Second step"/>

    <com.transferwise.sequencelayout.SequenceStep
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:active="true"
        app:anchor="Today"
        app:subtitle="Subtitle of this step."
        app:title="Third step"
        app:titleTextAppearance="@style/TextAppearance.AppCompat.Title"/>

    <com.transferwise.sequencelayout.SequenceStep
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:title="Fourth step"/>

    <com.transferwise.sequencelayout.SequenceStep
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:anchor="2 Dec"
        app:title="Fifth step"/>
</com.transferwise.sequencelayout.SequenceLayout>

Custom attributes for SequenceLayout:

Attribute	Description
`progressForegroundColor`	foreground color of the progress bar
`progressBackgroundColor`	background color of the progress bar

Custom attributes for SequenceStep:

Attribute	Description
`active`	boolean to indicate if step is active. There should only be one active step per `SequenceLayout`.
`anchor`	text for the left side of the step
`anchorMinWidth`	minimum width for the left side of the step
`anchorMaxWidth`	maximum width for the left side of the step
`anchorTextAppearance`	styling for the left side of the step
`title`	title of the step
`titleTextAppearance`	styling for the title of the step
`subtitle`	subtitle of the step
`subtitleTextAppearance`	styling for the subtitle of the step

Programmatically

Alternatively, define an adapter that extends SequenceAdapter<T>, like this:

class MyAdapter(private val items: List<MyItem>) : SequenceAdapter<MyAdapter.MyItem>() {

    override fun getCount(): Int {
        return items.size
    }

    override fun getItem(position: Int): MyItem {
        return items[position]
    }

    override fun bindView(sequenceStep: SequenceStep, item: MyItem) {
        with(sequenceStep) {
            setActive(item.isActive)
            setAnchor(item.formattedDate)
            setAnchorTextAppearance(...)
            setTitle(item.title)
            setTitleTextAppearance()
            setSubtitle(...)
            setSubtitleTextAppearance(...)
        }
    }

    data class MyItem(val isActive: Boolean,
                      val formattedDate: String,
                      val title: String)
}

... and use it for a SequenceLayout:

val items = listOf(MyItem(...), MyItem(...), MyItem(...))
sequenceLayout.setAdapter(MyAdapter(items))

sequence-layout's People

Contributors

Stargazers

Watchers

sequence-layout's Issues

setActive is not working

Hi,
I need to set the steps dynamically to active or not depending on a status.
So I thought I set it programatically. But the setActive is not working.
However setTitle works fine. What is wrong with this code?
I dont want to use the Adapter if there is another way.

SequenceStep step_accepted;

step_accepted = rootView.findViewById(R.id.stepAccepted);
step_accepted.setActive(true);

xml

<com.transferwise.sequencelayout.SequenceLayout
                android:layout_marginTop="10dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <com.transferwise.sequencelayout.SequenceStep
                    android:id="@+id/stepAccepted"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:anchor="13:50"
                    app:title="@string/status_layout_order_accepted"
                    app:subtitle="@string/status_layout_order_accepted_subtitle"
                    app:subtitleTextAppearance="@style/TextAppearance.MaterialComponents.Subtitle1"
                    />
</com.transferwise.sequencelayout.SequenceLayout>

Partial Status

can add partial step means filled halfway

Unable to Remove Anchor Space

I do not need anchor in my implementation of this amazing sequence-layout , is there any way to remove that leading space. I tried a couple of things like setting width of each step to 0 and width 1dp with blank anchor but neither worked .
I there any way or workaround for this.
Thanks a lot in advance. Have a good day.

Jitpack download issue.

Hey guys seems like you did not pay for repo.

* What went wrong:
Execution failed for task ':app:checkFlavorDevDuplicateClasses'.
> Could not resolve all files for configuration ':app:flavorDevRuntimeClasspath'.
   > Could not resolve com.github.transferwise:sequence-layout:1.2.0.
     Required by:
         project :app
      > Could not resolve com.github.transferwise:sequence-layout:1.2.0.
         > Could not get resource '[https://jitpack.io/com/github/transferwise/sequence-layout/1.2.0/sequence-layout-1.2.0.pom'.](https://jitpack.io/com/github/transferwise/sequence-layout/1.2.0/sequence-layout-1.2.0.pom)
            > Could not GET '[https://jitpack.io/com/github/transferwise/sequence-layout/1.2.0/sequence-layout-1.2.0.pom'.](https://jitpack.io/com/github/transferwise/sequence-layout/1.2.0/sequence-layout-1.2.0.pom) Received status code 521 from server:

Failed to resolve: com.github.transferwise:sequence-layout:1.0.7

ERROR: Failed to resolve: com.github.transferwise:sequence-layout:1.0.7

with many items, it doesn't scroll

Many thanks for the great widget. I face an issue when steps are a lot, it doesn't scroll and when I put it inside scroll view, the step height is weird and I have no direct way to control step height

vertical progress line now showing in Right to left layout(Arabic)

vertical progress line now showing in Right to left layout(Arabic)

. please check this.

Caused by: java.lang.RuntimeException: Manifest merger failed : uses-sdk:minSdkVersion 16 cannot be smaller than version 19 declared in library

Caused by: java.lang.RuntimeException: Manifest merger failed : uses-sdk:minSdkVersion 16 cannot be smaller than version 19 declared in library [com.github.transferwise:sequence-layout:1.0.7] /Users/hello/.gradle/caches/transforms-1/files-1.1/sequence-layout-1.0.7.aar/1ea43b079bf1b9914c7819ce940b4b1e/AndroidManifest.xml as the library might be using APIs not available in 16

Can I use this library in API Level 16?

Causes Memory Leak when used in Fragment

I have single activity layout architecture in my project. So, I use fragments for everything.

The problem with fragments is that their views get destroyed when onViewDestroyed is called. Let's say I go to next screen, then the previous Fragment's views will get destroyed. Therefore we need to clear the reference to the view we may be holding to prevents leaks.

Is there a way to slow down the animation time of progress

Progress bar not shown

Unfortunately progress bar not shown when Layout Direction is RTL!!!

Horizontal position

Any way to have this horizontal. That way it can double up as a breadcrumb for android?

If not can you at least guide me on what to edit in the source to achieve said functionality

Any way to increase anchor textView width?

The anchor text view seems to be using a static width and the texts are not shown fully. It is ellipsized at teh end with ...

How to change the text view width??

Scroll to particular SequenceStep

I had taken 30+ SequenceStep in SequenceLayout inside of NestedScrollView

Is there any way to scroll automatically up to selected SequenceStep. For example, If I am activating 25th SequenceStep then it has to scroll 25th position automatically.

Please help. Thanks in advance.

how to enlarge the text

Build method

@transferwise, @saschoar : Hi, there is a way to use the module without having to declare the layout in the xml file.
For example, using a build method?
Did I somehow define it as simply a java code?

Library is not importing in new Android Studio Arctic Fox

While importing the jitpack dependencies on gradle file it is not getting the classes of sequence layout.
Saying cannot resolve the sequence layout dependency

Please realease jar of this library.

I want to use this library into Mit App Inventor 2. But I can't use aar library there. Need to use jar library there. So please make jar of this library and make all views programmatically.
(Thanks)

animation not working first time why?

when I open activity, animations not working and if I reopen that activity it works what the reason?

Is there a way to use the EditText for this?

In the Sequence Step, is there a way i can manage EditText to collect input from users instead of having the app:title="First step"

can we manually decide that when a step will active

I tried to set a step active by using setActive() method within a block other than onCreate. But this is not working.
I am unable to show the next step active manually.
Is there a way to set active a step manually?
What i want is Set a step active at run time on some action.
This is the code where i want to change the active step within click listener.
sequenceLayout.start() works only in OnCreate method
step1.setOnClickListener(new View.OnClickListener() {
@OverRide
public void onClick(View view) {
Toast.makeText(Main2Activity.this, "clicked", Toast.LENGTH_SHORT).show();

            if (sequenceStep2.isActive()){
                Toast.makeText(Main2Activity.this, "step 2 Active", Toast.LENGTH_SHORT).show();
                sequenceStep2.setActive(false);
                sequenceStep1.setActive(true);
                sequenceLayout.start();
            }
            if (sequenceStep3.isActive()){
                Toast.makeText(Main2Activity.this, "step 3 Active", Toast.LENGTH_SHORT).show();
                sequenceStep3.setActive(false);
                sequenceStep1.setActive(true);
                sequenceLayout.start();
            }
            if (sequenceStep4.isActive()){
                Toast.makeText(Main2Activity.this, "step 4 Active", Toast.LENGTH_SHORT).show();
                sequenceStep4.setActive(false);
                sequenceStep1.setActive(true);
                sequenceLayout.start();
            }

            if (sequenceStep5.isActive()){
                Toast.makeText(Main2Activity.this, "step 5 Active", Toast.LENGTH_SHORT).show();
                sequenceStep5.setActive(false);
                sequenceStep1.setActive(true);
                sequenceLayout.start();
            }
        }
    });

setActive() seems to work when called in onCreate but not from Observable callback

When I call SequenceStep.setActive() from onCreate or any non-callback method it works fine, but I put it in an Observable's callback, setActive() never moves the sequence-layout even when logging statements indicate that the given part of the code was called.

Sample:

mutableData.observe(this, Observer { data ->
if (data != null) {
println("iscloudUp = " + isCloudUp)
sequence.setActive(true)
}
})

Starting from first point every time when I call start()

I am working with 25 points that is used to show syncing process from server.

When one table got synced, I am activating second point.
Same as when second table got synced, I am activating third point. etc... etc..

I am doing following process while activating any point:

previousStep.setActive(false);
currentStep.setActive(true);
currentStep.setSubtitle("Getting data... Please wait...");
sequenceLayout.sequenceLayout.start();

With that code Its starting from first point every time even I reached last point.

Please help.