1
00:00:02,480 --> 00:00:04,160
Vale, creo que está grabando.

2
00:00:04,559 --> 00:00:12,820
A ver, vamos a hacer las otras dos cajas que nos quedan del ejercicio 1, ¿vale?

3
00:00:13,619 --> 00:00:18,219
Entonces, nos venimos a Android Studio.

4
00:00:21,179 --> 00:00:22,539
Vale, tenemos esta.

5
00:00:23,239 --> 00:00:27,960
Bueno, pues entonces vamos a empezar haciendo el preview, no sé cuántos.

6
00:00:28,960 --> 00:00:32,000
Y a show, outbound.

7
00:00:33,920 --> 00:00:46,920
Composable y la función primera que se va a llamar Unmybox2, como muy original.

8
00:00:48,920 --> 00:00:51,920
Vale, entonces tenemos que hacer una caja.

9
00:00:56,920 --> 00:01:01,920
Vale, entonces tenemos que hacer una caja cuadrada.

10
00:01:01,920 --> 00:01:11,719
Vale, entonces las cajas cuadradas me parece que pueden salir así, ponemos modifier y

11
00:01:11,719 --> 00:01:33,620
y simplemente size. Y en el size le ponemos un tamaño como, yo que sé, 250 de pez, ¿vale?

12
00:01:33,620 --> 00:01:42,920
Y le vamos a poner un color, fijaos que el truco de estas cosas, vale, el truco simplemente

13
00:01:42,920 --> 00:01:50,219
aquí es, esto no es, digamos, un rectángulo finito y dentro, esto es una caja y dentro

14
00:01:50,219 --> 00:01:55,260
otra caja y dentro, y están solapadas unas sobre otras, ¿vale? Con lo cual, lo que hay

15
00:01:55,260 --> 00:01:59,040
en el fondo es una caja totalmente verde. Pues, vamos a poner una caja verde.

16
00:02:03,040 --> 00:02:09,860
Y decíamos, el color lo llevamos aquí, en el background.

17
00:02:12,919 --> 00:02:14,800
color

18
00:02:14,800 --> 00:02:16,099
green

19
00:02:16,099 --> 00:02:18,979
a ver si me la pinta

20
00:02:18,979 --> 00:02:21,479
se supone que, ves, aquí tengo

21
00:02:21,479 --> 00:02:23,500
la de antes y aquí en este

22
00:02:23,500 --> 00:02:25,780
propio, bueno, que tampoco es chiquitilla

23
00:02:25,780 --> 00:02:26,379
pero

24
00:02:26,379 --> 00:02:29,300
tampoco pasa nada, vamos a dejarla así

25
00:02:29,300 --> 00:02:29,939
chiquitilla

26
00:02:29,939 --> 00:02:33,639
y una cosa

27
00:02:33,639 --> 00:02:35,379
lo que va dentro de esta caja

28
00:02:35,379 --> 00:02:37,400
vale, que es

29
00:02:37,400 --> 00:02:39,560
otra caja roja

30
00:02:39,560 --> 00:02:40,919
y esta caja roja

31
00:02:40,919 --> 00:02:42,979
que está dentro de la caja verde

32
00:02:42,979 --> 00:02:45,060
como está, pues está

33
00:02:45,060 --> 00:02:46,300
perfectamente centrada

34
00:02:46,300 --> 00:02:49,039
en la caja verde le tenemos que decir

35
00:02:49,039 --> 00:02:50,919
que lo que vaya adentro va a ir centrado

36
00:02:50,919 --> 00:02:52,699
y eso como lo hacíamos

37
00:02:52,699 --> 00:02:55,340
pues con content alignment

38
00:02:55,340 --> 00:02:57,360
y le decíamos

39
00:02:57,360 --> 00:02:58,599
alignment

40
00:02:58,599 --> 00:03:00,340
center

41
00:03:00,340 --> 00:03:02,659
como todavía no tengo nada

42
00:03:02,659 --> 00:03:03,500
pues esto no

43
00:03:03,500 --> 00:03:05,919
control alt l

44
00:03:05,919 --> 00:03:08,659
y así esto tiene mejor

45
00:03:08,659 --> 00:03:09,900
pinta

46
00:03:09,900 --> 00:03:12,620
Vale, pues aquí dentro hay otra caja, ¿no?

47
00:03:12,939 --> 00:03:19,819
Bueno, pues para no ocurrar, sí, hombre, esto, en fin

48
00:03:19,819 --> 00:03:24,939
Pues dentro de esta caja vamos a meter otra caja

49
00:03:24,939 --> 00:03:28,479
Y esta caja va a ser más pequeña

50
00:03:28,479 --> 00:03:32,259
O sea, mi idea es hacerlas de tamaño cada vez menor

51
00:03:32,259 --> 00:03:36,919
¿Veis? Si pones solamente 6 y un tamaño, pues te lo hace cuadrada

52
00:03:36,919 --> 00:03:40,419
Entonces, no la podemos hacer muy grande

53
00:03:40,419 --> 00:03:41,560
Porque si se sale

54
00:03:41,560 --> 00:03:44,500
Pues no te queda una caja, te queda un rectángulo

55
00:03:44,500 --> 00:03:46,759
Porque no puede salirse por los bordes laterales

56
00:03:46,759 --> 00:03:47,800
No sé si me he explicado

57
00:03:47,800 --> 00:03:51,460
Bueno, pues entonces, de 200 vamos a pasar a

58
00:03:51,460 --> 00:03:54,479
De 250, perdón, vamos a pasar a 200

59
00:03:54,479 --> 00:03:58,900
Y esta caja va a ser roja

60
00:03:58,900 --> 00:04:01,319
¿Vale?

61
00:04:03,889 --> 00:04:04,669
A ver si la pinta

62
00:04:04,669 --> 00:04:05,770
A ver si la pinta

63
00:04:05,770 --> 00:04:06,969
A ver si la pinta

64
00:04:08,610 --> 00:04:19,420
Sí, la he pintado. Pues así vamos a hacer todas. Dentro de la caja roja tenemos una

65
00:04:19,420 --> 00:04:30,079
caja de color azul, amarillo y luego negro. Vamos a hacerla también a mano para ir machacando

66
00:04:30,079 --> 00:04:39,980
los conceptos. Hacemos una box con el modifier y ahora le ponemos el tamaño. Pues si la

67
00:04:39,980 --> 00:04:50,000
roja de fuera era 200 pues esta es 150 vale y qué más esto es el tamaño y luego le ponemos el fondo

68
00:04:51,000 --> 00:04:55,540
creo que era azul o sea background color

69
00:04:58,920 --> 00:05:04,120
blue bueno controla el tele a ver si así

70
00:05:04,120 --> 00:05:07,259
y dentro de esta caja

71
00:05:07,259 --> 00:05:09,560
a que no le he puesto

72
00:05:09,560 --> 00:05:11,079
he puesto

73
00:05:11,079 --> 00:05:13,620
los paréntesis para pasarle

74
00:05:13,620 --> 00:05:14,779
los parámetros pero

75
00:05:14,779 --> 00:05:17,439
no he puesto las llaves

76
00:05:17,439 --> 00:05:18,939
para luego meter contenido

77
00:05:18,939 --> 00:05:21,579
y el contenido, ah y tampoco

78
00:05:21,579 --> 00:05:22,399
he hecho una cosa

79
00:05:22,399 --> 00:05:25,600
bueno, vais a ver, no voy a hacer nada más de momento

80
00:05:25,600 --> 00:05:27,740
y voy a meter la caja siguiente

81
00:05:27,740 --> 00:05:29,720
dentro del azul

82
00:05:29,720 --> 00:05:31,360
que creo que era amarilla

83
00:05:31,360 --> 00:05:32,220
entonces ponemos

84
00:05:32,220 --> 00:05:33,839
modifier

85
00:05:33,839 --> 00:05:35,800
size

86
00:05:35,800 --> 00:05:39,720
ahora que toca

87
00:05:39,720 --> 00:05:41,860
pues 150, bajamos

88
00:05:41,860 --> 00:05:43,800
50 pues 100 dp

89
00:05:43,800 --> 00:05:47,899
bueno y que más

90
00:05:47,899 --> 00:05:49,060
queremos el color

91
00:05:49,060 --> 00:05:51,800
punto background

92
00:05:51,800 --> 00:05:53,500
y

93
00:05:53,500 --> 00:05:55,199
esta que era amarilla

94
00:05:55,199 --> 00:05:56,800
vamos a hacerla amarilla

95
00:05:56,800 --> 00:05:58,459
color

96
00:05:58,459 --> 00:06:00,480
yellow

97
00:06:02,220 --> 00:06:04,839
vale, control alt L

98
00:06:04,839 --> 00:06:06,879
vale, entonces

99
00:06:06,879 --> 00:06:09,000
¿veis lo que ha pasado? que de repente

100
00:06:09,000 --> 00:06:10,959
la caja amarilla está

101
00:06:10,959 --> 00:06:12,899
dentro de la caja azul, pero no se lo ha

102
00:06:12,899 --> 00:06:14,439
puesto en el centro, sino que se ha ido

103
00:06:14,439 --> 00:06:16,519
a la esquina de arriba, que es lo que te hace

104
00:06:16,519 --> 00:06:17,680
cuando tú

105
00:06:17,680 --> 00:06:20,819
no los posicionas a puesta

106
00:06:20,819 --> 00:06:22,839
es decir, por defecto se te va a poner arriba

107
00:06:22,839 --> 00:06:24,860
a la izquierda, entonces ¿qué quieres?

108
00:06:25,199 --> 00:06:27,040
que lo que haya dentro

109
00:06:27,040 --> 00:06:28,160
de la caja azul

110
00:06:28,160 --> 00:06:30,959
esté centrado, bueno pues ya sabemos

111
00:06:30,959 --> 00:06:43,600
que nos tenemos que ir a la caja blue y decirle content alignment y es alignment.center y

112
00:06:43,600 --> 00:06:51,600
ahora la caja amarilla se va al centro. Vale, y ahora queremos una caja dentro de la caja

113
00:06:51,600 --> 00:07:12,100
amarilla que sea negra. Tenemos que meterle llaves. Y hacemos box y en el modifier, size

114
00:07:12,100 --> 00:07:21,600
chiquitilla. Ah, mira, esta se queda en 50 de pesos. Y el color negro. Bueno, pues ahora, punto,

115
00:07:23,759 --> 00:07:36,319
background, color black. Pero color bien escrito, si es posible. Color blu, no, black.

116
00:07:36,319 --> 00:07:39,459
control al tele

117
00:07:39,459 --> 00:07:43,100
vale y otra vez

118
00:07:43,100 --> 00:07:44,540
me volví a pasar

119
00:07:44,540 --> 00:07:47,160
con la misma piedra

120
00:07:47,160 --> 00:07:49,579
porque en la caja amarilla tengo que decirle

121
00:07:49,579 --> 00:07:51,319
que lo de dentro tiene que ir central

122
00:07:51,319 --> 00:07:53,279
entonces en la caja amarilla

123
00:07:53,279 --> 00:07:54,399
pum pum

124
00:07:54,399 --> 00:07:57,439
con tenta alignment

125
00:07:57,439 --> 00:07:58,579
le decimos

126
00:07:58,579 --> 00:07:59,519
alignment

127
00:07:59,519 --> 00:08:02,339
center

128
00:08:02,339 --> 00:08:04,899
y ya

129
00:08:04,899 --> 00:08:06,100
más o menos

130
00:08:06,100 --> 00:08:08,800
me ha quedado por lo que quería hacer

131
00:08:08,800 --> 00:08:10,980
¿vale?

132
00:08:11,819 --> 00:08:14,459
ahora, el MyBox 3

133
00:08:14,459 --> 00:08:16,540
que parece un diseño súper raro

134
00:08:16,540 --> 00:08:21,439
bueno, no sé, así a simple vista puede parecer una cosa muy rara de hacer

135
00:08:21,439 --> 00:08:23,800
porque parecen como Ls, ¿no?

136
00:08:23,920 --> 00:08:25,439
en distintas posiciones y tal

137
00:08:25,439 --> 00:08:30,040
bueno, pues el truco está en que la única diferencia entre las dos cajas

138
00:08:30,040 --> 00:08:38,659
es cómo están ubicadas las cajas unas dentro de otras.

139
00:08:39,240 --> 00:08:44,440
¿Veis? Es decir, empezamos con la caja verde, que es la que ocupa todo.

140
00:08:44,720 --> 00:08:47,639
Insisto, esto son cajas dentro de cajas y dentro de cajas.

141
00:08:48,159 --> 00:08:54,059
Pero según cómo las alinees, pues te va a quedar un dibujete u otro.

142
00:08:54,480 --> 00:08:56,500
Entonces, vamos a empezar. Bueno, vamos a hacer una cosa.

143
00:08:56,500 --> 00:09:03,399
como veis es por fuera verde, luego rojo, luego azul, vamos a copiarlo todo y así vamos más rápido

144
00:09:03,399 --> 00:09:21,940
con el preview y todo, lo cogemos, lo copiamos, lo pegamos y en lugar de mybox2 lo llamamos mybox3

145
00:09:21,940 --> 00:09:25,559
dice que render pro

146
00:09:25,559 --> 00:09:27,340
ya tengo dos calcaditas

147
00:09:27,340 --> 00:09:28,539
pero ahora voy a fijarme

148
00:09:28,539 --> 00:09:31,620
en la alineación

149
00:09:31,620 --> 00:09:33,580
si es que la única diferencia entre esta y esta

150
00:09:33,580 --> 00:09:34,639
es la alineación, entonces

151
00:09:34,639 --> 00:09:37,320
dentro de la caja verde

152
00:09:37,320 --> 00:09:39,740
la caja roja está

153
00:09:39,740 --> 00:09:40,940
arriba

154
00:09:40,940 --> 00:09:43,379
a la derecha, o sea

155
00:09:43,379 --> 00:09:44,860
top, end

156
00:09:44,860 --> 00:09:46,820
entonces cambiamos

157
00:09:46,820 --> 00:09:49,480
dentro de la caja verde, le decimos

158
00:09:49,480 --> 00:09:50,720
que lo que haya dentro

159
00:09:50,720 --> 00:09:53,019
lo que hay adentro

160
00:09:53,019 --> 00:09:54,960
tiene que ser en lugar de center

161
00:09:54,960 --> 00:09:56,480
esta es la verde, ¿no?

162
00:09:56,559 --> 00:09:59,120
pues le tenemos que decir alignment

163
00:09:59,120 --> 00:10:02,659
top end

164
00:10:02,659 --> 00:10:04,039
se me acaba de caer

165
00:10:04,039 --> 00:10:06,960
lo que utilizo como micrófono

166
00:10:06,960 --> 00:10:09,299
¿veis? y aquí ya se me ha colocado

167
00:10:09,299 --> 00:10:09,980
aquí, bueno

168
00:10:09,980 --> 00:10:13,279
¿qué más? dentro de la roja

169
00:10:13,279 --> 00:10:14,740
que tenemos la azul, ¿no?

170
00:10:14,879 --> 00:10:17,580
y la azul está abajo a la izquierda

171
00:10:17,580 --> 00:10:18,700
o sea, botón

172
00:10:18,700 --> 00:10:20,620
start

173
00:10:20,620 --> 00:10:22,919
En la caja roja

174
00:10:22,919 --> 00:10:23,799
No tenemos que poner

175
00:10:23,799 --> 00:10:25,860
Porque es el contenedor de la caja azul

176
00:10:25,860 --> 00:10:27,399
Entonces, vamos allá

177
00:10:27,399 --> 00:10:28,440
Vamos allá, vamos allá

178
00:10:28,440 --> 00:10:29,059
Se me olvida

179
00:10:29,059 --> 00:10:29,679
Se me olvida

180
00:10:29,679 --> 00:10:32,000
En la red

181
00:10:32,000 --> 00:10:33,299
Entonces le decíamos

182
00:10:33,299 --> 00:10:36,019
Era bottom start, ¿no?

183
00:10:37,379 --> 00:10:38,399
Bottom start

184
00:10:38,399 --> 00:10:39,840
Vamos a ver

185
00:10:39,840 --> 00:10:40,779
Renderiza

186
00:10:40,779 --> 00:10:41,960
Y eso es

187
00:10:41,960 --> 00:10:42,860
¿Vale?

188
00:10:43,019 --> 00:10:44,639
Ya se va apareciendo un poco más

189
00:10:44,639 --> 00:10:46,080
Luego, ¿qué tengo?

190
00:10:46,159 --> 00:10:47,059
¿Dónde tengo la amarilla?

191
00:10:47,200 --> 00:10:49,220
La amarilla está dentro del azul

192
00:10:49,220 --> 00:10:51,120
pero está

193
00:10:51,120 --> 00:10:53,879
abajo a la derecha

194
00:10:53,879 --> 00:10:55,860
o sea, está dentro del azul

195
00:10:55,860 --> 00:10:57,080
bottom end

196
00:10:57,080 --> 00:10:58,720
bueno, pues vamos allá

197
00:10:58,720 --> 00:11:01,360
vamos allá, dentro del azul

198
00:11:01,360 --> 00:11:02,279
dentro del azul

199
00:11:02,279 --> 00:11:05,240
en lugar de center

200
00:11:05,240 --> 00:11:06,379
le decimos

201
00:11:06,379 --> 00:11:11,740
y automastar sería abajo a la izquierda

202
00:11:11,740 --> 00:11:13,080
bottom end

203
00:11:13,080 --> 00:11:19,389
bueno, se parece

204
00:11:19,389 --> 00:11:21,470
se parece

205
00:11:21,470 --> 00:11:23,629
y ahora vemos que

206
00:11:23,629 --> 00:11:26,149
dentro de la amarilla tenemos la negra

207
00:11:26,149 --> 00:11:28,509
arriba a la

208
00:11:28,509 --> 00:11:30,029
izquierda, o sea top

209
00:11:30,029 --> 00:11:31,190
start

210
00:11:31,190 --> 00:11:33,309
top start

211
00:11:33,309 --> 00:11:35,429
en la amarilla

212
00:11:35,429 --> 00:11:37,789
amarilla en la amarilla, aquí

213
00:11:37,789 --> 00:11:44,200
top start

214
00:11:44,200 --> 00:11:45,940
y

215
00:11:45,940 --> 00:11:48,799
divinamente ya tengo hechas las dos

216
00:11:48,799 --> 00:11:50,759
bajitas, paramos