Video: Android Tutorial (Kotlin) – 23 – Drawables (9Patch)
Hi everyone, Welcome back to CodeAndroid. Today we are going to see about Drawables. In specific will see how to add images as background for the views. Without good UI we can't create a successful app. To make the app looks good, and easy to understand, we need to use images. But, There is an issue in using images, If we use the small image it will look pixellated on larger devices. To avoid this we need to use 9patch images. Let's see how to create 9patch image. To demonstrate this I am creating a new application. copying the message.
png image select "drawable". paste the image here. Select "drawable" folder. Open activity_main.xml. Change the root layout to LinearLayout. Removing the unwanted attribute, for the textview. setting the message image as a background for the textview using background attribute. Selecting message from drawables. You can see the text is displayed above the image but in top-left. Setting gravity to the center so that the text will be centered to the textview. If we zoom the layout, You can see the text placed partially on the image. Let's add some more text. See the image is losing its structure. To fix this we need to create the 9patch for this image. To do that, right click on the image. Select "create 9patch" file. Give new file name. I am appending "new". Don't remove .9.png extension. Let's change the background to the new one. Still, it is looking the same. Because we didn't specified any property for the 9patch image. Double click on 9patch.
Instead of image viewer, we will get this editor. In this editor, you can able to see 1px border all around the image. This is the place where we specify the 9patch properties. Left and top borders are used for stretchable area. Right and Bottom borders are used for Content area. On the right pane, we can see the preview of 9pach. If the view height is more than the actual height of image then it will look like this. If the view width is more than the actual width of the image then it will look like this. If the view width and height is more than the actual image size then it will look like this. In left side border we need to select the vertically stretchable areas. To select click and drag on the 1pixel border. the selection will be highlited by black color If you hover over the image you will see some highlights. While stretching 9pach the highlighted part will be duplicated again and again until the image reaches required size.
Similarly, we need to select horizontally stretchable areas in the top 1px border. I am selecting a small area in the center. Select show patches. It will highlights the stretchable areas. Right and bottom side we need to select the content area. Right side area will specify the vertical padding. Bottom side will specify the horizontal padding. I am selecting the area's leaving the corners. So that the corners will not be stretched. Select show content. This will hight the content area in preview pan. Left side padding is less compared to right side. To adjust it I am changing the bottom border a bit. Now it's looking fine. Go to the layout file. Click on preview panel and press "r" on your keyboard. The preview will be re-rendered. You can see the text is exactly placed in the message popup. I am changing the text for checking different scenarios. To display text in next line we need to use "\n" character. If I give more than one line of content also it is displaying properly.
I want the content to be left aligned, so I am removing gravity attribute. You can see all the corners are looking good without any stretching. Let's see Tips. You can download the google recommended icons from "material.io" Here is how you download and use the icons. That's all for this tutorial guys. If you like this, please give a thumbs up If you have any doubts please put it in the comment section. I will try to answer it. Also If you need any tutorial on android let me know in the comment section. I will try to do it. Hope you like it. I will see you on my next video. Have a good day. .