Skip to content

Commit

Permalink
add trackpad ui
Browse files Browse the repository at this point in the history
  • Loading branch information
prafullmishra committed Jun 28, 2021
1 parent d768cd1 commit aa31f52
Show file tree
Hide file tree
Showing 12 changed files with 303 additions and 6 deletions.
123 changes: 123 additions & 0 deletions .idea/codeStyles/Project.xml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 5 additions & 0 deletions .idea/codeStyles/codeStyleConfig.xml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 7 additions & 0 deletions .idea/misc.xml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ Features

Screenshots
-----------
![](https://media.giphy.com/media/iMDUg4MLcZhrHB1rjk/giphy.gif) ![](https://media.giphy.com/media/fevvR9F2oakq6LQqOS/giphy.gif) ![](/screenshots/Screenshot_imac.png) ![](/screenshots/Screenshot_home.png)
![](https://media.giphy.com/media/iMDUg4MLcZhrHB1rjk/giphy.gif) ![](https://media.giphy.com/media/fevvR9F2oakq6LQqOS/giphy.gif) ![](https://media.giphy.com/media/u019tDdjPhkijV52Y2/giphy.gif) ![](/screenshots/Screenshot_imac.png) ![](/screenshots/Screenshot_home.png)

Get Started
-----------
Expand Down
7 changes: 3 additions & 4 deletions app/src/main/java/com/prafullm/jetcomposer/MainActivity.kt
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,7 @@ import androidx.navigation.compose.NavHost
import androidx.navigation.compose.rememberNavController
import com.prafullm.jetcomposer.model.Destination
import com.prafullm.jetcomposer.model.HomeItem
import com.prafullm.jetcomposer.navigation.addHomeScreen
import com.prafullm.jetcomposer.navigation.addMac
import com.prafullm.jetcomposer.navigation.addParallax
import com.prafullm.jetcomposer.navigation.addTvStatic
import com.prafullm.jetcomposer.navigation.*
import com.prafullm.jetcomposer.ui.theme.JetComposerTheme

class MainActivity : ComponentActivity() {
Expand All @@ -25,6 +22,7 @@ class MainActivity : ComponentActivity() {
HomeItem(R.string.item_parallax, R.string.item_parallax_sub, Destination.Parallax),
HomeItem(R.string.item_tv_static, R.string.item_tv_static_sub, Destination.TvStatic),
HomeItem(R.string.item_mac, R.string.item_mac_sub, Destination.Mac),
HomeItem(R.string.item_trackpad, R.string.item_trackpad_sub, Destination.TrackPad),
)

@ExperimentalAnimationApi
Expand Down Expand Up @@ -59,6 +57,7 @@ fun JetComposerApp(items: List<HomeItem>, onThemeSwitch:() -> Unit) {
addTvStatic()
addParallax()
addMac()
addTrackPad()
}
}

Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
package com.prafullm.jetcomposer.model

import androidx.annotation.DrawableRes
import androidx.annotation.StringRes

/**
Expand All @@ -20,4 +19,5 @@ sealed class Destination(val destinationName: String) {
object TvStatic: Destination("tv_static")
object Parallax: Destination("parallax")
object Mac: Destination("imac")
object TrackPad: Destination("trackpad")
}
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,12 @@ fun NavGraphBuilder.addMac() {
composable(route = Destination.Mac) { Mac({}) }
}

@ExperimentalAnimationApi
@ExperimentalComposeUiApi
fun NavGraphBuilder.addTrackPad() {
composable(route = Destination.TrackPad) { TrackPad() }
}

/*
* Utility wrapper ext function for NavGraphBuilder.compose()
*/
Expand Down
142 changes: 142 additions & 0 deletions app/src/main/java/com/prafullm/jetcomposer/screens/TrackPad.kt
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
package com.prafullm.jetcomposer.screens

import android.view.MotionEvent
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.animation.animateColorAsState
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Button
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.Card
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Rect
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.input.pointer.pointerInteropFilter
import androidx.compose.ui.layout.LayoutCoordinates
import androidx.compose.ui.layout.boundsInParent
import androidx.compose.ui.layout.onGloballyPositioned
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.res.vectorResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.prafullm.jetcomposer.R
import com.prafullm.jetcomposer.ui.theme.darkBlue
import com.prafullm.jetcomposer.ui.theme.lightBlue
import kotlin.math.max

@ExperimentalAnimationApi
@ExperimentalComposeUiApi
@Preview
@Composable
fun TrackPad() {
var coordinate by remember { mutableStateOf(Offset(10f, 10f)) }
var buttonBounds by remember { mutableStateOf(Rect(Offset.Zero, Offset.Zero)) }
var isAboveButton by remember { mutableStateOf(false) }
var isButtonTapped by remember { mutableStateOf(false) }

val backgroundColor = animateColorAsState(targetValue = if(isButtonTapped) lightBlue else Color.White)
var downStartTime = 0L

Column(
Modifier
.fillMaxSize()
.background(Color.White)
.padding(16.dp)) {
Card(
backgroundColor = backgroundColor.value,
modifier = Modifier
.weight(1f)
.fillMaxWidth(),
elevation = 3.dp,
shape = RoundedCornerShape(5)
) {
Box(contentAlignment = Alignment.Center) {
Button(
onClick = { },
shape = RoundedCornerShape(50),
elevation = ButtonDefaults.elevation(0.dp, 0.dp, 0.dp),
colors = ButtonDefaults.buttonColors(
backgroundColor = darkBlue,
contentColor = Color.White
),
contentPadding = PaddingValues(horizontal = 16.dp),
modifier = Modifier.onGloballyPositioned { c: LayoutCoordinates->
buttonBounds = c.boundsInParent()
}
){
Row(){
AnimatedVisibility(visible = !isButtonTapped) {
Text(
text = "Tap",
color = Color.White,
fontSize = 15.sp
)
}
AnimatedVisibility(visible = isButtonTapped) {
Text(
text = "Tapped!",
color = Color.White,
fontSize = 15.sp
)
}
}
}
Box(modifier = Modifier.fillMaxSize()) {
Box(
modifier = Modifier
.size(24.dp)
.offset(
with(LocalDensity.current) { coordinate.x.toDp() },
with(LocalDensity.current) { coordinate.y.toDp() }
)
) {
Image(
imageVector = ImageVector.vectorResource(if(!isAboveButton) R.drawable.ic_cursor else R.drawable.ic_pointing_hand),
contentDescription = null,
modifier = Modifier
.fillMaxSize(),
)
}
}

}
}
Spacer(modifier = Modifier.height(16.dp))
Card(
backgroundColor = Color.LightGray,
modifier = Modifier
.weight(1f)
.fillMaxWidth()
.pointerInteropFilter { m ->
when (m.action) {
MotionEvent.ACTION_UP -> {
if (System.currentTimeMillis() - downStartTime < 200L) {
if (isAboveButton) isButtonTapped = !isButtonTapped
}
}
MotionEvent.ACTION_DOWN -> {
downStartTime = System.currentTimeMillis()
}
MotionEvent.ACTION_MOVE -> {
val eventOffset = Offset(max(0f, m.x), max(0f, m.y))
coordinate = eventOffset
isAboveButton = buttonBounds.contains(eventOffset)
}
}
true
},
elevation = 2.dp,
shape = RoundedCornerShape(5)
) {}
}
}
2 changes: 2 additions & 0 deletions app/src/main/java/com/prafullm/jetcomposer/ui/theme/Color.kt
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ package com.prafullm.jetcomposer.ui.theme
import androidx.compose.ui.graphics.Color

val droidGreen = Color(0xFF3ddd86)
val lightBlue = Color(0xFFCAE3FF)
val darkBlue = Color(0xFF006ee6)

val White = Color(0xFFFFFFFF)
val Black50 = Color(0xFFf6f6f6)
Expand Down
7 changes: 7 additions & 0 deletions app/src/main/res/drawable/ic_cursor.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<vector android:height="24dp" android:viewportHeight="18.2"
android:viewportWidth="11.6" android:width="15.296703dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#FF000000" android:pathData="M0,16L0,0L11.6,11.6L4.8,11.6l-0.4,0.1Z"/>
<path android:fillColor="#FF000000" android:pathData="M9.1,16.7l-3.6,1.5L0.8,7.1l3.7,-1.5Z"/>
<path android:fillColor="#FF000000" android:pathData="M2.83,9.393l1.8441,-0.7742l3.0966,7.3764l-1.8441,0.7742z"/>
<path android:fillColor="#FF000000" android:pathData="M1,2.4L1,13.6l3,-2.9 0.4,-0.1h4.8Z"/>
</vector>
4 changes: 4 additions & 0 deletions app/src/main/res/drawable/ic_pointing_hand.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<vector android:height="24dp" android:viewportHeight="15.249"
android:viewportWidth="14.466" android:width="22.767656dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#FF000000" android:pathData="M2.866,12.004c-0.3,-0.4 -0.6,-1.1 -1.2,-2 -0.3,-0.5 -1.2,-1.5 -1.5,-1.9a1.183,1.183 0,0 1,-0.1 -1,1.41 1.41,0 0,1 1.4,-1.1 2.666,2.666 0,0 1,1.4 0.7c0.2,0.2 0.5,0.6 0.7,0.8s0.2,0.3 0.4,0.5c0.2,0.3 0.3,0.5 0.2,0.1 -0.1,-0.5 -0.2,-1.3 -0.4,-2.1a8.112,8.112 0,0 0,-0.3 -1.1c-0.1,-0.5 -0.2,-0.8 -0.3,-1.3 -0.1,-0.3 -0.2,-1.1 -0.3,-1.5a2.273,2.273 0,0 1,0.3 -1.8,1.227 1.227,0 0,1 1.3,-0.2 2.567,2.567 0,0 1,0.9 1.3,8.3 8.3,0 0,1 0.5,2c0.2,1 0.5,2.5 0.5,2.8a7.519,7.519 0,0 1,0 -1.5,1.12 1.12,0 0,1 0.7,-0.8 2.769,2.769 0,0 1,0.9 -0.1,2.177 2.177,0 0,1 0.8,0.5 4.338,4.338 0,0 1,0.4 1.8,9.005 9.005,0 0,1 0.3,-1.6 1.794,1.794 0,0 1,0.7 -0.5,1.7 1.7,0 0,1 1,0 1.157,1.157 0,0 1,0.7 0.5,8.469 8.469,0 0,1 0.4,1.7 5.946,5.946 0,0 1,0.3 -0.7,1.034 1.034,0 0,1 1.9,0.6v2.3a9.852,9.852 0,0 1,-0.2 1.7,6.068 6.068,0 0,1 -0.7,1.4 6.069,6.069 0,0 0,-1.2 1.8,4.142 4.142,0 0,0 -0.1,1 5.527,5.527 0,0 0,0.1 0.9,4.521 4.521,0 0,1 -1.2,0 25.852,25.852 0,0 0,-2.8 0L5.266,15.204s0.2,-1 -0.2,-1.4l-1.1,-1.1Z"/>
</vector>
2 changes: 2 additions & 0 deletions app/src/main/res/values/strings.xml
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,7 @@
<string name="item_parallax_sub">Interact in 3D space</string>
<string name="item_mac">Composed iMac</string>
<string name="item_mac_sub">Because why not?</string>
<string name="item_trackpad">Trackpad</string>
<string name="item_trackpad_sub">View that mirrors gestures</string>

</resources>

0 comments on commit aa31f52

Please sign in to comment.