WEBVTT 00:00.470 --> 00:03.650 Hello developers, and welcome to this challenge. 00:03.650 --> 00:10.550 In this challenge, I want from you to create exactly like this UI here. 00:10.550 --> 00:20.780 I have a big border in red color, then I have margin, then I have another border in blue. 00:20.810 --> 00:30.320 I have two texts, one strikethrough and line through and underlined and the other is only underlined. 00:30.320 --> 00:34.640 Moreover, this text is margined from the start. 00:34.640 --> 00:40.430 So take your time, pause the video and try to write your code. 00:40.430 --> 00:42.800 I hope you find the solution. 00:42.830 --> 00:48.050 Otherwise let's code it together inside the greeting composable. 00:48.050 --> 00:50.600 I need to start with the column. 00:50.630 --> 00:57.620 This column contains two composables text one and text two. 00:57.650 --> 01:00.030 I'll start defining the text. 01:00.060 --> 01:03.300 Hello master coding application. 01:03.300 --> 01:07.050 Then I need to define another text. 01:10.230 --> 01:12.570 Download it from Play store. 01:12.600 --> 01:15.150 I'll design the first text. 01:15.150 --> 01:21.450 So here I'll specify the color equals to color dot red. 01:21.480 --> 01:25.230 The font size would be 48 SP. 01:25.590 --> 01:30.000 Always use SP instead of dp with text. 01:30.030 --> 01:33.270 Then I need to add the padding. 01:33.270 --> 01:37.620 So modifier modifier dot padding. 01:37.620 --> 01:47.700 And here I need to specify the padding 16 or 50 dpi whatever you want, but I need to concentrate on 01:47.700 --> 01:49.140 the padding start. 01:49.140 --> 01:54.240 So I'm making sure that you can use the padding correctly. 01:54.270 --> 01:55.440 Font style. 01:55.440 --> 02:02.230 You can use font on Styleitalic and you can use the font family Dot serif. 02:02.260 --> 02:09.580 Okay, but I want to make sure that you can use the padding and you pay attention to the start. 02:09.610 --> 02:10.150 Okay. 02:10.150 --> 02:17.530 Then the second trick I want to make sure that you get it is the text decoration. 02:17.530 --> 02:23.620 And here I need to use text decoration dot combine method. 02:23.620 --> 02:27.940 I need to combine a list of text decorations. 02:27.940 --> 02:31.900 So I need to apply two text decorations for that. 02:31.900 --> 02:41.500 I put it inside a list of and use the combine method line through and text decoration dot underline 02:41.500 --> 02:42.340 so that. 02:42.340 --> 02:49.720 Two tricks in this coding challenge where the modifier padding start and the text decoration, you make 02:49.750 --> 02:58.780 sure that we use the list of because we have two text Decoration the the line through and the underline. 02:58.780 --> 03:01.480 Then let's move to the second text. 03:01.480 --> 03:08.740 The second text text decoration equals to text decoration dot underline okay. 03:08.770 --> 03:11.770 The second text is very simple. 03:11.770 --> 03:20.590 Now to make the borders for the whole column and the whole composable, I need to make sure that I used 03:20.590 --> 03:24.880 the borders and the paddings inside the column. 03:24.880 --> 03:32.050 So here I'll start with the column and I'll start defining some attributes. 03:32.080 --> 03:39.640 Modifier modifier dot padding I'll start with the first padding which is horizontal. 03:39.640 --> 03:42.880 You can specify all equals to 16 dpi. 03:43.030 --> 03:51.310 Then I need to use a border which is six dpi in width and the color will be red. 03:51.340 --> 03:56.180 Then I need to use banding another banding 16 dpi. 03:56.330 --> 04:04.250 Then I need to use a border which is two dpi and the color will be blue. 04:04.250 --> 04:09.050 And the last thing is the padding for DPI. 04:09.110 --> 04:12.050 Okay, so congratulations guys! 04:12.050 --> 04:19.190 We succeeded in building this UI that contains two texts and two borders. 04:19.190 --> 04:24.260 So this challenge was very exciting because we have three tricks. 04:24.260 --> 04:28.160 The first trick was in using the padding with the start. 04:28.220 --> 04:29.840 Make sure you pay attention to it. 04:29.840 --> 04:37.580 And the second trick was using a list of text decoration inside this text, because I need to use the 04:37.580 --> 04:39.980 line through and the underline. 04:39.980 --> 04:47.510 And the third trick was using the padding and border efficiently in order to create two borders with 04:47.510 --> 04:49.160 three paddings.