Multi Touch Gestures in Android using Jetpack Compose
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.w3wiki.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.w3wiki.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.
Contact Us