EMBRACING BIOMIMICRY: App features inspired by nature

What is Biomimicry in design?

Nature provides many design inspirations, and its basic concepts may well be used in Android application development to enhance an application’s usability. In this article, we look at easy-to-implement swipe buttons and other controls taken from biomimicry, which is the imitation of structures and functions by different structures and systems found in nature. Moreover, biomimicry provides nature’s solutions to address human challenges.

Some of its applications in Android Development:

1. Swipe Buttons:

   Swipe gestures reflect the smooth, continuous movement like water or wind. For instance, consider a swipe-to-unlock button. This mimics our natural, real-world action of sliding objects.

   To get a quick understanding, follow these steps using Android Studio:

   • Use a constraint layout as a base

   • Add a MotionLayout for defining the swipe path

   • Use onTouchEvent() with a GestureDetector for the swipe motion

2. Expand or Collapse:

   The way flowers bloom can inspire creating expand/collapse effects on menus, dropdowns, etc. in applications.

   Steps to follow to create this effect on a card view using Android Studio:

   In the XML layout, after setting up a card view and a text view with collapsible content inside, here is the code snippet.

val cardView = findViewById<CardView>(R.id.cardView)
        val collapsibleContent = findViewById<TextView>(R.id.collapsibleContent)

        (cardView.parent as ViewGroup).layoutTransition = LayoutTransition()

        cardView.setOnClickListener {
            if (collapsibleContent.visibility == View.GONE) {
                collapsibleContent.visibility = View.VISIBLE // Expand
            } else {
                collapsibleContent.visibility = View.GONE // Collapse
            }
        }

3. Adapt Dynamic Colors:

   This is inspired by how colors in nature often balance or fit each other. Dynamic colors adapt to the user’s wallpaper and respond accordingly to the light and dark themes.

   Refer to the online resource provided below for the implementation of dynamic colors using Android Studio.

   MATERIAL 3 DESIGN: https://developer.android.com/develop/ui/views/theming/dynamic-colors

4. Pull-to-Refresh:

   The pull-to-refresh interaction resembles nature’s elasticity of materials.

   A Brief Overview:

   • Add SwipeRefreshLayout dependency

To use SwipeRefreshLayout in your app, add the following dependency to your build.gradle file:

    dependencies {
        implementation("androidx.swiperefreshlayout:swiperefreshlayout:1.2.0-alpha01")
    }

• Add the SwipeRefreshLayout Widget

To add the swipe-to-refresh widget to an existing app, add SwipeRefreshLayout as the parent of a single ListView or GridView. SwipeRefreshLayout only supports a single ListView or GridView child.

The following example demonstrates how to add the SwipeRefreshLayout widget to an existing layout file containing a ListView:

    <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/swiperefresh"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ListView
            android:id="@android:id/list"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

Then, in MainActivity.kt,

    class MainActivity : AppCompatActivity(), SwipeRefreshLayout.OnRefreshListener {
     lateinit var swipeRefreshLayout: SwipeRefreshLayout
     lateinit var listView: ListView

    override fun onCreate(savedInstanceState: Bundle?) {
     super.onCreate(savedInstanceState)
     setContentView(R.layout.activity_main)
     listView = findViewById(R.id.list)
     swipeRefreshLayout = findViewById(R.id.swiperefresh)
     swipeRefreshLayout.setOnRefreshListener(this)
    }
    override fun onRefresh(){
     Handler(Looper.getMainLooper()).postDelayed({
     Toast.makeText( this , "Refreshed", Toast.LENGTH_LONG).show()
     swipeRefreshLayout.isRefreshing = false
    }, 300)
    }

5. Ripple Effect:

   This effect can be easily implemented on a button. It is inspired by the natural ripples in water. This subtle animation gives users a natural feel and makes it visually appealing.

   Here, the ?attr/selectableItemBackground adds a ripple effect within the view's bounds.

   To ensure the theme and ripple effects work well together, it is better to use app:background provided by the Material Components library or AppCompat.

   Code Snippet:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:background="?attr/selectableItemBackground"
        android:clickable="true"
        android:focusable="true"/>