Text Fields - Jetpack Compose - Subtítulos bilingües
Oh Hello there and welcome back to my new video.
In this video I'm going to show you how to implement and use text fields.
So a text field is basically an input field and it's similar to the added text which we already have in a traditional view system.
So here I have created just a basic compose activity project and now I'm going to show you how to implement and customize
the one simple text field.
So instead it's a greeting a composable function I'm going to add the one text field.
So here you can see that we have a many different options.
field, the basic text field and the outline the text field as well.
Of course I'm going to show you the difference between each one of those but for now we're
going to start by using this simple text field and here on the right side
you can see all the parameters which we can use inside one simple text field so we hear a value on a value change.
we have, of course, a modifier, then we have this enabled read only and so on.
So now we're going to experiment and explore each one of those.
So let's add here a new text field.
Okay, so the first parameter here, which we need to add is a value parameter.
So let's add here, for example, one string that says a type here, all right.
And of course we need to add the one more parameter, which is a mandatory parameter, and that is on a change.
So before we continue, let me just run this on Android emulator, so I can show you how this text field will actually look like.
Okay, so that's how our text field looks like.
So of course we can click that.
And if we try to type here, anything, as you can see, nothing will happen.
And now I'm going to show you how to fix that, or how to basically implement that on value change parameter in a text field.
But before that, let me just add here a one column, and let's open this screen so we can actually see that.
So let's add here one column and let's add the modifier parameter.
So let's add here a fill max size.
So we can show this column in a full width and height of our screen.
And inside that column, we're going to add our text field.
Okay, so now we can see the whole screen on our preview here.
And now I'm going to center this text field on the center of our column.
And that I'm going to add a horizontal alignment.
So alignment center horizontally and vertical arrangement center.
Okay, so if you're not familiar with those properties for horizontal alignment and arrangement,
then I highly suggest you to go back and watch one of my videos from a Jetpack Compose playlist.
about a rows and columns.
Okay, so let's just rebuild that and now our text field will be centered here on our screen.
Okay, perfect.
So there it is.
So now as you have seen already, if we try to type here in our text field then nothing will happen.
And the reason why is because we haven't defined the state.
So inside our composable function here, I need to define a one variable named a text.
And here I'm going to use a buy keyword.
So I can call this remember,
and inside this remember I'm going to call a mutable state of, and here I'm going to pass a default value type here.
So this text variable, here's the type of a mutable state.
usable state, which means that this variable will be observed by our composable function.
And now instead of a hard coding that value here, I'm going to just call this a text variable in this value parameter.
And now in this on value change, I need to call this text, and I need to set its value to the new.
string, which we're going to type inside our text field.
So we can of course now set the new string to our text.
So here we can just add the name to a new text.
So now whenever we type something inside our text field, then a that new text will be saved inside our text variable.
And now let's run our app again.
And now you will see that we are going to be able to basically type inside our text field.
Okay, so now you can see we can type.
Okay, and that's how it works.
So basically here, we are setting the default value for our text field.
And of course, we can just type here and empty string if we want.
So that's on us.
We change that to whatever we want,
and whenever we type something inside our text field,
then this own value change listener will be triggered,
and whenever that happens, we want to set the value of our text variable here to that new text.
And whenever we update this text variable from above, then a recomposition will occur.
this text will change and then this text field will recompose because it's
observing this text variable which is actually a state and whenever this text state is changed then this value will be updated as well.
Okay, so now let's explore some other properties of our text field so if we press a control P
We can see some other different properties.
So for example,
we have enabled and here we can set its value to false It's the fourth value is true,
but we can change that and now let's run our app again,
and let's check it out Okay,
so now you can see that this text field is not enabled and we cannot put a focus on this text field anymore because it's this disabled.
Next here let's explore some other properties.
So we also have one property called the read-only and its default value is false.
So basically this read-only property will control the editable state of the text field.
So when we set that to true, the text copy text from it.
And read only text fields are usually used to display pre-filled forms that user cannot edit.
Okay, so let's set that to true and let's remove this enabled modifier or property.
Okay, so now let's build our app again and let's check that out.
So now you can see that we can focus our text field.
Okay, but we cannot type anything.
Okay, so the keyboard does not show up because this text field has a read only property set to true.
And the only thing that we can do here, we can select this text from this text field, and we can copy that.
Okay, so let's remove that as well.
Next, here we have a property called the label and the incident is a label.
we can add just a simple text.
And here we can say maybe a name or maybe the title.
So whatever you want.
Okay, and when we run our Android emulator, then you will see that here we have a label on top of our text field, which says a title.
Okay, so that's basically how you can implement that so it's very easy.
Alright, let's continue on our text field.
We can also set here one parameter called a single line and we can set it to true.
It's the fourth value is false.
So basically when this parameter is set to true then this text field becomes a single horizontally scrolling text field instead of a wrapping.
into multiple lines and the keyboard will be informed to not show the return key as IMEE action
and if you set this single line to true then this max lines parameter will be ignored.
So let's run the app so we can check that out.
Okay so now we can just type here anything and you will see that basically we will
be able to write here in our text field only in a single line okay and if we remove this parameter
let's check it out and see what will happen now okay so now let's type here again and as you can see
when that parameter is not specified then here our text field will expand automatically and we can
write multiple lines here of course we can set here a new parameter which is a max lines and here we can specify an integer value for example of number two and now we can write
only two lines inside our text field so let's check that out again okay so let's type here just to fill out two lines inside our text field
okay so there you go if you exceed the number of lines then you will be able to
scroll this text field easily okay but this text field will not be expanded
anymore because we have specified a max lines of number two okay so let's remove
that as well so now I'm going to show you how you can specify two more items icons on your text field.
So here we have two parameters.
The first one is called the leading icon and this icon will be specified on the start of our text field.
And here let's call the icon button.
Okay, and inside this icon button, we're going to specify one icon.
And here I'm going to use image of that.
and here I'm going to call icons.field and here for example I can choose maybe email icon and also
there is a one important or mandatory parameter which we also need to specify here and that is a
content description so here I can just write email icon all right so let's just refactor that code
a little bit all right so now it looks even better.
And let's run our app again.
Okay, so there we go.
So now our text field contains this icon at the start of our field.
And also we can specify here one more icon, which is called trailing icon.
Okay, so here I'm going to just copy this again.
And I can change this, for example, to something different.
for example this check icon okay so this trailing icon will appear at the end of
our text field okay so there it is and of course here you can implement on
click listener for this icon as well so here you can just write basically anything
you want for example we can just a log a simple text here okay so let's
just run our app and let's observe our log get here okay so now whenever we press
this icon then this log should trigger so let's just observe our log head.
Okay, so there it is, as you can see, it works perfectly fine.
Okay, so next let's see what more parameters do we have inside our text field.
So now I'm going to show you one parameter called keyboard options.
So we have a keyboard options and a keyboard actions.
So let's choose the keyboard options first.
And with this keyboard options, we can basically control our software keyboard.
And it's called here a keyboard options, okay.
these keyboard options we can specify multiple parameters and for example here I'm going to
call a keyboard type and let's choose a keyboard type so now we can select a password email number
number password phone text you arrive and so on so we can choose for example this email then
Now we can specify here also parameter called the IMEE action in here we can specify action
don send default go next non previous and search.
So for example, let's type here go and let's run our app.
Okay.
So now as you can see, when I select this text field, then this IMEE action.
call the go will display this button and of course we can change that to
something different for example maybe done so let's run our app again okay let's
focus that and there we go so this IME action icon has been changed so now
it's a checkmark icon and of course we can type here a search or send or
something else
okay so now let's put focus on our text field again and there we go so this
IME action has been changed and if you're wondering how can you add on-click
listener for this IME action well easily and now we need to specify here a keyboard
actions okay so let's call the keyboard action So here we have many different parameters like on done,
on go, on next, on previous, on search and on sand.
And in our case, we have selected the search IME action.
So let's type here on a search.
And here we can just log a simple text.
So let's just type here IME action, click.
Okay, so let's just run our app again.
Let's observe our log head.
Okay, and now let's focus here and let's press this search icon and there we go.
So we have triggered that click listener for this IME action and it works perfectly fine.
Okay, so here you have seen many different parameters which we can specify.
on this text field.
So you have already seen how to basically create a state inside our composable function and that state contains a simple string and
whenever this text state is changed by updating its value then our text field
will also recompose and that the new text value will be applied.
to our text field.
And course, there are also some different parameters which we can specify to change our text field.
And of course, we're going to explore some other properties of this text field in the future videos.
So before we finish this video, I'm going to change this text field to an outline text field.
Okay, so now, you will see that we're going to get a totally different design of our text field.
So now our text field has this outline stroke and it looks very nice.
So this outline the text field and the previous text field are predefined composable functions which comes with the compose library
and we can just use them out of the box.
And I have already told you that there is something called a basic text field.
So this basic text field works almost the same as our regular text field,
but it doesn't contain some properties which our regular text field contains, like leading icon and trailing icon and so on.
So let's hear a specific question.
this basic text field and let's see how will that look like.
So here we're going to receive an error because we cannot use those two properties, a leading icon and a trailing icon, okay?
And of course we don't have this label either.
So now let's run our app again and let's see how this basic text field will look like.
So now you will see that this basic text field will not contain any design so it's just a basic and very simple input field
which you can use and our text field and outline the text field is built on top
of this basic text field but of course here you can also specify for example a
modifier maybe a background so we can also add here a padding
For example a 16 DP on each on every side and now let's run our app again and now you
should see that our basic text field will have a light gray background.
Okay, so there it is.
So now we can see the actual size of our basic text field.
Okay, so that's how it looks like.
So that was all I wanted to share with you in this video.
you have seen how you can add a simple text field to your project,
how you can customize some of its main properties,
and also in some of the next videos I'm going to show you some more interesting features which this text field has to offer.
So be sure to comment down below if you want to see more videos about Jetpack Compose, like this video.
you'll need to find a jail for of course and see you in the next one!
Idioma de traducción
Seleccionar
Desbloquea más funciones
Instala la extensión Trancy para desbloquear más funciones, incluyendo subtítulos de IA, definiciones de palabras de IA, análisis gramatical de IA, habla de IA, etc.
Compatible con las principales plataformas de video
Trancy no solo proporciona soporte de subtítulos bilingües para plataformas como YouTube, Netflix, Udemy, Disney+, TED, edX, Kehan, Coursera, sino que también ofrece traducción de palabras/frases de IA, traducción inmersiva de texto completo y otras funciones para páginas web regulares. Es un verdadero asistente de aprendizaje de idiomas todo en uno.
Navegadores de todas las plataformas
Trancy es compatible con todos los navegadores de plataformas, incluida la extensión del navegador Safari de iOS.
Modos de visualización múltiple
Admite modos de teatro, lectura, mixtos y otros modos de visualización para una experiencia bilingüe integral.
Modos de práctica múltiple
Admite modos de dictado de oraciones, evaluación oral, opción múltiple, dictado y otros modos de práctica.
Resumen de video de IA
Utiliza OpenAI para resumir videos y comprender rápidamente el contenido clave.
Subtítulos de IA
Genera subtítulos de IA precisos y rápidos para YouTube en solo 3-5 minutos.
Definiciones de palabras de IA
Toca las palabras en los subtítulos para buscar definiciones, con definiciones impulsadas por IA.
Análisis gramatical de IA
Analiza la gramática de las oraciones para comprender rápidamente los significados de las oraciones y dominar puntos de gramática difíciles.
Más funciones web
Además de los subtítulos de video bilingües, Trancy también proporciona traducción de palabras y traducción de texto completo para páginas web.