DOCSEARCHbyAlgolia
Submit Docs

Material Design Login for Android

repository·master·Indexed 43 days ago

https://github.com/yellow5a5/material-design-login

A Material Design inspired login and sign-up animation demo for Android. Features components like CatchScrollLayout for swipe-based transitions, SignUpContainer for registration logic, and UnderlineDevider for segmented dividers.

Tokens
1.1K
Snippets
4
Records
4
Agent score
5%

What's inside Material Design Login

  1. Implement the login/signup transition using CatchScrollLayout

    master

    To implement the Material Design login/signup transition, use CatchScrollLayout to monitor external sliding events. The layout's height should typically be set to match_parent to cover the monitored area.

    Inside the CatchScrollLayout, you must include a SignUpContainer. You can then use the IScrollCallBack to respond to scroll progress, which allows you to drive animations (like updating the SignUpContainer's animation proportion) based on the user's swipe gesture.

    <yellow5a5.materialdesignlogin.View.CatchScrollLayout
    android:id="@+id/catch_sroll_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    android:clickable="true">
    
    <yellow5a5.materialdesignlogin.View.SignUpContainer
        android:id="@+id/sign_up_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</yellow5a5.materialdesignlogin.View.CatchScrollLayout>
    mCatchScrollLayout.setIScrollCallBack(new CatchScrollLayout.IScrollCallBack() {
    @Override
    public void onScrollProcess(int process, boolean isLeft) {
        // Adjust process based on direction if necessary
        if (!isLeft){
            process = 100 - process;
        }
        // Drive the container animation
        mSignUpContainer.setAnimProportion(process);
    }
});

  2. Configure the SignUpContainer callbacks

    master

    The SignUpContainer handles the logic for logging in and registering. You can listen for confirmation events (e.g., when a user completes a login or registration action) by implementing the IConfirmCallBack interface via setIConfirmCallBack.

    mSignUpContainer.setIConfirmCallBack(new SignUpContainer.IConfirmCallBack() {
    @Override
    public void goNext() {
        // Handle the next action after login/signup confirmation
    }
});

  3. Use the UnderlineDevider component

    master

    The UnderlineDevider is an independent component used to display a segmented divider. You can configure the number of segments using the app:devide_count attribute in XML or by calling the setDevider method programmatically. You can also set the color via app:devide_color.

    <yellow5a5.materialdesignlogin.View.UnderlineDevider
    android:id="@+id/underline_v"
    android:layout_width="match_parent"
    android:layout_height="2dp"
    android:layout_gravity="bottom"
    app:devide_color="#ffffff"
    app:devide_count="2" />

  4. CatchScrollLayout.IScrollCallBack interface

    master

    The IScrollCallBack interface is used to monitor the progress of a scroll event within a CatchScrollLayout.

    public interface IScrollCallBack {
    /**
     * @param process The current scroll progress.
     * @param isLeft True if the scroll is towards the left, false otherwise.
     */
    void onScrollProcess(int process, boolean isLeft);
}