Skip to content

Instantly share code, notes, and snippets.

@plusmobileapps
Created June 9, 2022 15:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save plusmobileapps/72bb58c707449c730384b96d47c55c62 to your computer and use it in GitHub Desktop.
Save plusmobileapps/72bb58c707449c730384b96d47c55c62 to your computer and use it in GitHub Desktop.
CustomTextField with non standard hint not embedded in outline
/**
* MIT License
*
* Copyright (c) 2022 Andrew Steinmetz
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
@Composable
fun CustomTextField(
modifier: Modifier = Modifier,
text: String,
hint: String,
onTextChanged: (String) -> Unit
) {
Box(
modifier = modifier.border(BorderStroke(1.dp, Color.Gray), RoundedCornerShape(4.dp))
) {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(start = 8.dp, top = 4.dp, bottom = 4.dp, end = 8.dp)
) {
Text(modifier = Modifier.fillMaxWidth(), text = hint, style = MaterialTheme.typography.caption, color = Color.Gray)
BasicTextField(
modifier = Modifier.fillMaxWidth(),
value = text,
onValueChange = onTextChanged,
textStyle = MaterialTheme.typography.subtitle2,
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number)
)
}
}
}
@Preview
@Composable
fun CustomTextFieldPreview() {
var text by remember { mutableStateOf("$23.45") }
Surface {
Column(modifier = Modifier.padding(16.dp)) {
CustomTextField(text = text, hint = "You Send", onTextChanged = { text = it })
}
}
}
@plusmobileapps
Copy link
Author

plusmobileapps commented Jun 9, 2022

Super simple example of making a custom text field from someone's question on reddit, to be production ready and accessible there is a little bit more work to finish this POC.

custom-text-input mp4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment