SocialOrbitLayout

Adjustable custom view that can be used for loading screens or welcome pages inside social apps to show floating objects around an orbit. Inspired by Blogging app landing page.

All the example images are generated from thispersondoesnotexist.com.

🛠️Setup

1. Add the JitPack repository to your build file.

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

2. Add the dependency

dependencies {
    implementation 'com.github.turkergoksu:SocialOrbitLayout:1.0.0'
}

🕹️Usage

<me.turkergoksu.lib.view.SocialOrbitLayout
            android:id="@+id/socialOrbitLayout"
            android:layout_width="match_parent"
            android:layout_height="400dp"
            app:innerOrbitAngleDistance="120"
            app:innerOrbitAnimDuration="30000"
            app:innerOrbitColor="#e0ecff"
            app:innerOrbitRadius="90dp"
            app:innerOrbitStartAngle="20"
            app:innerOrbitWidth="40dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:outerOrbitAngleDistance="90"
            app:outerOrbitAnimDuration="60000"
            app:outerOrbitColor="#d3d3d3"
            app:outerOrbitPadding="40dp"
            app:outerOrbitStartAngle="70"
            app:outerOrbitWidth="2dp" />

Currently, you can programmatically add FloatingImage to Orbit with given Bitmap.

⚠️ You may set Orbit attributes programmatically but it will be overwritten by the values in the layout.

var orbit = Orbit.Builder()
        .setFloatingObjectList(
                mutableListOf(
                    // .
                    // .
                    // .
                    FloatingImage.Builder()
                        .setBitmap(BitmapFactory.decodeResource(resources, R.drawable.dummy1))
                        .setBackgroundColor(Color.parseColor("#2e7fff"))
                        .setSize(70f)
                        .setLocation(FloatingObjectLocation.CENTER)
                        .build(),
                    FloatingImage.Builder()
                        .setBitmap(BitmapFactory.decodeResource(resources, R.drawable.dummy2))
                        .setSize(50f)
                        .setLocation(FloatingObjectLocation.INNER)
                        .build(),
                    FloatingImage.Builder()
                        .setBitmap(BitmapFactory.decodeResource(resources, R.drawable.dummy3))
                        .setLocation(FloatingObjectLocation.OUTER)
                        .build(),
                    // .
                    // .
                    // .
                )
        )
        .setOuterOrbitWidth(width = 2f)
        .setInnerOrbitColor(Color.parseColor("#2e7fff"))
        .setOuterOrbitAngleDistance(distance = 90.0)
        .setOuterOrbitAnimDuration(duration = 60000)
        .setInnerOrbitRadius(radius = 90f)
        .setInnerOrbitAngleDistance(distance = 120.0)
        .setInnerOrbitAnimDuration(duration = 30000)
        .build()
socialOrbitLayout.setOrbit(orbit)

If you don't want to create a FloatingImageBuilder for every FloatingImage object, you may create a single builder and change it's attributes. This implementation actually better for objects that shares same attributes(Or the majority). Check the following example.

val floatingImageBuilder = FloatingImage.Builder()
                .setBackgroundColor(Color.RED)
                .setBorderWidth(3f)
                .setSize(50f)
                
var orbit = Orbit.Builder()
        .setFloatingObjectList(
                mutableListOf(
                    // .
                    // .
                    // .
                    floatingImageBuilder.copy() // copy() is crucial here!
                        .setBitmap(BitmapFactory.decodeResource(resources, R.drawable.dummy1))
                        .setBackgroundColor(Color.WHITE)
                        .setSize(70f)
                        .setLocation(FloatingObjectLocation.CENTER)
                        .build(),
                    floatingImageBuilder.copy()
                        .setBitmap(BitmapFactory.decodeResource(resources, R.drawable.dummy2))
                        .setLocation(FloatingObjectLocation.INNER)
                        .build(),
                    floatingImageBuilder.copy()
                        .setBitmap(BitmapFactory.decodeResource(resources, R.drawable.dummy3))
                        .setBorderWidth(2f)
                        .build(),
                    // .
                    // .
                    // .
                )
        )
        .build()
socialOrbitLayout.setOrbit(orbit)

📝Attributes