Open In App

Multi Touch Gestures in Android using Jetpack Compose

Improve
Improve
Like Article
Like
Save
Share
Report

Android provides a variety of tools and methods using which we can create different types of transformations. These transformations could be applied to any view or element and can be operated upon touch. The most common transformation is zooming in and out which is available on applications like Internet Browser and Image Gallery. So in this article, we will show you how you could apply different transformations in Android using Jetpack Compose. Follow the below steps once the IDE is ready.

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. While choosing the template, select Empty Compose Activity. If you do not find this template, try upgrading the Android Studio to the latest version. We demonstrated the application in Kotlin, so make sure you select Kotlin as the primary language while creating a New Project.

Step 2: Working with the MainActivity.kt file

Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.

Kotlin




package com.geeksforgeeks.jcmultitouch
 
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.rememberTransformableState
import androidx.compose.foundation.gestures.transformable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.*
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer
 
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
 
            // Creating a Simple Scaffold
            // Layout for the application
            Scaffold(
 
                // Creating a Top Bar
                topBar = { TopAppBar(title = { Text("GFG | Multi-touch Gestures", color = Color.White) }, backgroundColor = Color(0xff0f9d58)) },
 
                // Creating Content
                content = {
 
                    // Creating a Column Layout
                    Column(Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
 
                        // setting up all transformation states
                        var scale by remember { mutableStateOf(1f) }
                        var rotation by remember { mutableStateOf(0f) }
                        var offset by remember { mutableStateOf(Offset.Zero) }
                        val state = rememberTransformableState { zoomChange, offsetChange, rotationChange ->
                            scale *= zoomChange
                            rotation += rotationChange
                            offset += offsetChange
                        }
 
                        Box(
                            Modifier
                                // apply other transformations
                                // like rotation and zoom
                                .graphicsLayer(
                                    scaleX = scale,
                                    scaleY = scale,
                                    rotationZ = rotation,
                                    translationX = offset.x,
                                    translationY = offset.y
                                )
                                // add transformable to listen to
                                // multitouch transformation
                                // events after offset
                                .transformable(state = state)
                                .background(Color.Blue)
                                .fillMaxSize()
                        )
                    }
                }
            )
        }
    }
}


Java




package com.geeksforgeeks.jcmultitouch;
 
import android.os.Bundle;
import androidx.activity.ComponentActivity;
import androidx.appcompat.app.AppCompatActivity;
 
public class MainActivity extends ComponentActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // Creating a Simple Scaffold
        // Layout for the application
        Scaffold scaffold = new Scaffold(this);
 
        // Creating a Top Bar
        TopAppBar topAppBar = new TopAppBar(this);
        topAppBar.setTitle(new Text(
            "GFG | Multi-touch Gestures", Color.White));
        topAppBar.setBackgroundColor(new Color(0xff0f9d58));
        scaffold.setTopBar(topAppBar);
 
        // Creating Content
        Column content = new Column(this);
        content.setModifier(new Modifier().fillMaxSize());
        content.setHorizontalAlignment(
            Alignment.CenterHorizontally);
        content.setVerticalArrangement(Arrangement.Center);
 
        // setting up all transformation states
        MutableState<Float> scale = new MutableState<>(1f);
        MutableState<Float> rotation
            = new MutableState<>(0f);
        MutableState<Offset> offset
            = new MutableState<>(Offset.Zero);
        TransformableState state = new TransformableState();
        state.setTransformableStateChangeListener(
            new TransformableState
                .TransformableStateChangeListener() {
                    @Override
                    public void onTransformableStateChange(
                        float zoomChange,
                        Offset offsetChange,
                        float rotationChange)
                    {
                        scale.setValue(scale.getValue()
                                       * zoomChange);
                        rotation.setValue(
                            rotation.getValue()
                            + rotationChange);
                        offset.setValue(
                            offset.getValue().plus(
                                offsetChange));
                    }
                });
 
        Box box = new Box(this);
        box.setModifier(
            // apply other transformations
            // like rotation and zoom
            new Modifier()
                .graphicsLayer(scale.getValue(),
                               scale.getValue(),
                               rotation.getValue(),
                               offset.getValue().x,
                               offset.getValue().y)
                // add transformable to listen to
                // multitouch transformation
                // events after offset
                .transformable(state)
                .background(Color.Blue)
                .fillMaxSize());
        content.add(box);
 
        scaffold.setContent(content);
    }
}


Output:

You can see that we are able to zoom in and out as well as rotate the object using touch.



Last Updated : 02 Feb, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads