{"id":8061,"date":"2025-04-15T11:52:35","date_gmt":"2025-04-15T11:52:35","guid":{"rendered":"https:\/\/www.branex.ae\/blog\/?p=8061"},"modified":"2026-07-06T13:57:22","modified_gmt":"2026-07-06T13:57:22","slug":"build-your-first-android-apk-app-using-android-studio","status":"publish","type":"post","link":"https:\/\/www.branex.ae\/blog\/build-your-first-android-apk-app-using-android-studio\/","title":{"rendered":"How to Build Your First Android APK App Using Android Studio?"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Are you planning to build your first Android mobile app?\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you\u2019re unsure where to begin, Android Studio is the official tool for Android development. It\u2019s beginner-friendly, especially when you get the hang of it.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This guide will take you through the basics of installing Android Studio, setting up your project, and creating a simple Android add to get you started.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You will require no advanced coding skills &#8211; just curiosity and patience.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s begin.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">So, before we start, install Android Studio on your computer. You will first need to check whether your computer supports the minimum system requirements for installing Android Studio. You can find this information usually at the bottom of the page from where you install Android Studio. If you need more detailed instructions on how to set up Android Studio, you can refer to codelab at Android Developer Studio and understand its installation.\u00a0<\/span><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_87 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.branex.ae\/blog\/build-your-first-android-apk-app-using-android-studio\/#What_is_the_Codelab\" >What is the Codelab?\u00a0<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.branex.ae\/blog\/build-your-first-android-apk-app-using-android-studio\/#How_to_Start\" >How to Start?\u00a0<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.branex.ae\/blog\/build-your-first-android-apk-app-using-android-studio\/#Create_an_Android_App_Project_Using_the_Template\" >Create an Android App Project Using the Template\u00a0<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"What_is_the_Codelab\"><\/span><b>What is the Codelab?\u00a0<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Codelab is where you create your first Android app.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You start with a project template that is offered to you by Android Studio. In fact, you can customize this template by using programming languages such as Kotlin and Jetpack Compose.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We will try to meet the Android Studio as much as possible and attach the necessary screenshots from the codelab. The UI in the screenshots can be a bit different because of UI changes, so it\u2019s fine if your Android Studio screens appear slightly different than our screenshot.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"How_to_Start\"><\/span><b>How to Start?\u00a0<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">You will require basic knowledge of Kotlin.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You will also be required to install and configure the latest version of Android Studio.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The objective is to develop an Android app which lets you customize your introduction.\u00a0<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Create_an_Android_App_Project_Using_the_Template\"><\/span><b>Create an Android App Project Using the Template\u00a0<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">To start with your project in Android Studio, click on the Empty Activity option from the project template. The templates are available for your developers in the Android Studio.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Double-click the Android Studio icon to start using Android Studio on the desktop. You will automatically be directed to the welcome screen titled \u201cWelcome to Android Studio.\u201d\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Click \u201cNew Project\u201d to select a template from the list.\u00a0<\/span><\/p>\n<p><a href=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/1.png\"><img decoding=\"async\" class=\"size-full wp-image-8065 aligncenter\" src=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/1.png\" alt=\"\" width=\"601\" height=\"485\" srcset=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/1.png 601w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/1-300x242.png 300w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/1-181x146.png 181w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/1-50x40.png 50w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/1-93x75.png 93w\" sizes=\"(max-width: 601px) 100vw, 601px\" \/><\/a><\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/developer.android.com\/\" target=\"_blank\" rel=\"nofollow noopener\"><span style=\"font-weight: 400;\">Image Source<\/span><span style=\"font-weight: 400;\">\u00a0<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400;\">The list of templates will appear as follows:<\/span><\/p>\n<p><a href=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image15.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-8074\" src=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image15.png\" alt=\"\" width=\"856\" height=\"669\" srcset=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image15.png 856w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image15-300x234.png 300w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image15-187x146.png 187w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image15-50x39.png 50w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image15-96x75.png 96w\" sizes=\"(max-width: 856px) 100vw, 856px\" \/><\/a><\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/developer.android.com\/\" target=\"_blank\" rel=\"nofollow noopener\"><span style=\"font-weight: 400;\">Image Source<\/span><span style=\"font-weight: 400;\">\u00a0<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400;\">A project template in Android Studio is a blueprint for creating a specific type of app.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Templates provide you with the initial structure to base your app. The template you choose offers the starter code for the app, so you can continue using it based on your requirements.\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Select the &#8220;Phone and Tablet&#8221; option<\/b><span style=\"font-weight: 400;\"> if it\u2019s not already selected.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Choose the <\/span><b>&#8220;Empty Activity&#8221;<\/b><span style=\"font-weight: 400;\"> template. This is perfect for starting a simple project with just one screen\u2014it even comes preloaded with the message <\/span><i><span style=\"font-weight: 400;\">\u201cHello Android!\u201d<\/span><\/i><span style=\"font-weight: 400;\">.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Click <\/span><b>Next<\/b><span style=\"font-weight: 400;\"> to continue.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">You\u2019ll now see the <\/span><b>New Project<\/b><span style=\"font-weight: 400;\"> setup screen. Here, you can configure the basic settings for your app.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">In the <\/span><b>Name<\/b><span style=\"font-weight: 400;\"> field, enter <\/span><b>&#8220;Greeting Card&#8221;<\/b><span style=\"font-weight: 400;\"> as the name of your project.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Leave the <\/span><b>Package name<\/b><span style=\"font-weight: 400;\"> as it is\u2014<\/span><span style=\"font-weight: 400;\">com.example.greetingcard<\/span><span style=\"font-weight: 400;\">. This defines how your files will be organized.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Keep the <\/span><b>Save location<\/b><span style=\"font-weight: 400;\"> unchanged. Just note the folder path so you can easily find your project later.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In the <\/span><b>Minimum SDK<\/b><span style=\"font-weight: 400;\"> dropdown, select <\/span><b>API 24: Android 7.0 (Nougat)<\/b><span style=\"font-weight: 400;\">. This sets the lowest version of Android your app will support.<\/span><\/p>\n<p><a href=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image6.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-8075\" src=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image6.png\" alt=\"\" width=\"856\" height=\"669\" srcset=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image6.png 856w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image6-300x234.png 300w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image6-187x146.png 187w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image6-50x39.png 50w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image6-96x75.png 96w\" sizes=\"(max-width: 856px) 100vw, 856px\" \/><\/a><\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/developer.android.com\/\" target=\"_blank\" rel=\"nofollow noopener\"><span style=\"font-weight: 400;\">Image Source<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400;\">Now, click Finish.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It will take some time while the Android Studio is set up. You can track the progress through a progress bar, and you will see a message that Android Studio configures your project.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">As soon as it loads, you will see a What\u2019s New pane with updates on new features in Android Studio. Here\u2019s a sample screenshot of what this \u201cWhat\u2019s New\u201d option will appear like:\u00a0<\/span><\/p>\n<p style=\"text-align: center;\"><span style=\"font-weight: 400;\"><a href=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image4.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-8076\" src=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image4.png\" alt=\"\" width=\"892\" height=\"1600\" srcset=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image4.png 892w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image4-167x300.png 167w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image4-856x1536.png 856w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image4-81x146.png 81w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image4-28x50.png 28w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image4-42x75.png 42w\" sizes=\"(max-width: 892px) 100vw, 892px\" \/><\/a><br \/>\n<a href=\"https:\/\/developer.android.com\/\" target=\"_blank\" rel=\"nofollow noopener\">Image Source<\/a><\/span><\/p>\n<p><span style=\"font-weight: 400;\">On the top right corner of the Android Studio screen, you will find the Split option to view both code and design. You can click the \u201cCode\u201d to view code only or \u201cDesign\u201d to view design.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">As soon as you press the \u201cSplit\u201d option, your screen will split into three areas:\u00a0<\/span><\/p>\n<p style=\"text-align: center;\"><span style=\"font-weight: 400;\"><a href=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image3.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-8077\" src=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image3.png\" alt=\"\" width=\"856\" height=\"551\" srcset=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image3.png 856w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image3-300x193.png 300w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image3-227x146.png 227w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image3-50x32.png 50w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image3-117x75.png 117w\" sizes=\"(max-width: 856px) 100vw, 856px\" \/><\/a><br \/>\n<a href=\"https:\/\/developer.android.com\/\" target=\"_blank\" rel=\"nofollow noopener\">Image Source<\/a><\/span><\/p>\n<p><b>Project view<\/b><span style=\"font-weight: 400;\">: Displays all the files and folders in your project. It helps you navigate through your code, resources, and configuration files.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<p><b>Code view<\/b><span style=\"font-weight: 400;\">: This is where you write and edit the actual code for your app.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<p><b>Design view<\/b><span style=\"font-weight: 400;\">: This lets you preview your app&#8217;s layout and visual elements as you build it.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Within the <\/span><b>Design view<\/b><span style=\"font-weight: 400;\">, you will see a blank pane with a certain text appearing on it.\u00a0<\/span><\/p>\n<p style=\"text-align: center;\"><span style=\"font-weight: 400;\"><a href=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image7.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-8078\" src=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image7.png\" alt=\"\" width=\"856\" height=\"589\" srcset=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image7.png 856w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image7-300x206.png 300w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image7-212x146.png 212w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image7-50x34.png 50w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image7-109x75.png 109w\" sizes=\"(max-width: 856px) 100vw, 856px\" \/><\/a><br \/>\n<a href=\"https:\/\/developer.android.com\/\" target=\"_blank\" rel=\"nofollow noopener\">Image Source<\/a><br \/>\n<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Simply click on the \u201cBuild &amp; Refresh\u201d option.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You will automatically see a preview appear with a text box claiming, \u201c<\/span><i><span style=\"font-weight: 400;\">Hello, Android!<\/span><\/i><span style=\"font-weight: 400;\">\u201d\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><a href=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image5.png\"><img decoding=\"async\" class=\"size-full wp-image-8079 aligncenter\" src=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image5.png\" alt=\"\" width=\"700\" height=\"236\" srcset=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image5.png 700w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image5-300x101.png 300w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image5-260x88.png 260w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image5-50x17.png 50w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image5-150x51.png 150w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><br \/>\nIf you want to explore the project files, here\u2019s what you need to do:\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">In <\/span><b>Android Studio<\/b><span style=\"font-weight: 400;\">, click on the <\/span><b>Project<\/b><span style=\"font-weight: 400;\"> tab to view your project&#8217;s files and folders.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">You\u2019ll see the package name <\/span><b>com.example.greetingcard<\/b><span style=\"font-weight: 400;\">\u2014this is where your code lives.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">A <\/span><b>package<\/b><span style=\"font-weight: 400;\"> is just a folder that organizes your code.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Android Studio structures your project using these packages.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Select <\/span><b>Android<\/b><span style=\"font-weight: 400;\"> from the drop-down menu in the Project tab for a cleaner view if needed.<\/span><\/li>\n<\/ul>\n<p style=\"text-align: center;\"><span style=\"font-weight: 400;\"><a href=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image12.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-8080\" src=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image12.png\" alt=\"\" width=\"856\" height=\"542\" srcset=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image12.png 856w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image12-300x190.png 300w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image12-231x146.png 231w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image12-50x32.png 50w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image12-118x75.png 118w\" sizes=\"(max-width: 856px) 100vw, 856px\" \/><\/a><br \/>\n<a href=\"https:\/\/developer.android.com\/\" target=\"_blank\" rel=\"nofollow noopener\">Image Source<\/a><br \/>\n<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The above is the default project view in Android Studio.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It\u2019s designed to help you access the files you\u2019ll be working with. You can open the same project in a file browser like Finder or Windows Explorer; the folder structure will look different.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Start with the \u201cProject Source Files\u201d from the drop-down menu.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Browse the files like you would from any file browser of your choice.\u00a0<\/span><\/p>\n<p style=\"text-align: center;\"><span style=\"font-weight: 400;\"><a href=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image14.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-8081\" src=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image14.png\" alt=\"\" width=\"856\" height=\"367\" srcset=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image14.png 856w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image14-300x129.png 300w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image14-260x111.png 260w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image14-50x21.png 50w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image14-150x64.png 150w\" sizes=\"(max-width: 856px) 100vw, 856px\" \/><\/a><br \/>\n<a href=\"https:\/\/developer.android.com\/\" target=\"_blank\" rel=\"nofollow noopener\">Image Source<\/a><br \/>\n<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now that you know where the project\u2019s source code is located, it\u2019s time to start designing the code for your <\/span><b>Greeting Card<\/b><span style=\"font-weight: 400;\"> app.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Open the <\/span><b>MainActivity.kt<\/b><span style=\"font-weight: 400;\"> file in <\/span><b>Code view<\/b><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You\u2019ll see some auto-generated functions\u2014notably, <\/span><span style=\"font-weight: 400;\">onCreate()<\/span><span style=\"font-weight: 400;\"> and <\/span><span style=\"font-weight: 400;\">setContent()<\/span><span style=\"font-weight: 400;\">. These are the starting points of your app\u2019s behavior and layout.<\/span><\/p>\n<p><strong>Code Block:<\/strong><\/p>\n<pre style=\"background: transparent !important; padding: 0; border: 0; overflow: hidden;\"><strong><mark style=\"background-color: #7aff1e; color: #000;\">class MainActivity : ComponentActivity() {\r\n    override fun onCreate(savedInstanceState: Bundle?) {\r\n        super.onCreate(savedInstanceState)\r\n        setContent {\r\n            GreetingCardTheme {\r\n                \/\/ A surface container using the 'background' color from the theme\r\n                Surface(\r\n                    modifier = Modifier.fillMaxSize(),\r\n                    color = MaterialTheme.colorScheme.background\r\n                ) {\r\n                    Greeting(\"Android\")\r\n                }\r\n            }\r\n        }\r\n    }\r\n}<\/mark>\r\n<\/strong><\/pre>\n<p><span style=\"font-weight: 400;\">Now, two predominant functions are available in the code snippet from Kotlin above.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The <\/span><span style=\"font-weight: 400;\">onCreate()<\/span><span style=\"font-weight: 400;\">\u00a0 <\/span><span style=\"font-weight: 400;\">function appears as the entry point to the Android app and calls up other functions to build a seamless user interface. In Kotlin programs, the function <\/span><span style=\"font-weight: 400;\">main()<\/span><span style=\"font-weight: 400;\"> is the initial point filling the role.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The <\/span><a href=\"https:\/\/developer.android.com\/reference\/kotlin\/androidx\/compose\/ui\/platform\/ComposeView#setContent(kotlin.Function0)\" target=\"_blank\" rel=\"nofollow noopener\"><span style=\"font-weight: 400;\">setContent()<\/span><\/a><span style=\"font-weight: 400;\"> function within the <\/span><span style=\"font-weight: 400;\">onCreate()<\/span><span style=\"font-weight: 400;\"> function defines the layout using composable functions. Functions that are marked as <\/span><span style=\"font-weight: 400;\">@Composable<\/span><span style=\"font-weight: 400;\"> annotation explain the Kotlin compiler.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It\u2019s used by Jetpack Compose to generate UI.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, we will check the <\/span><span style=\"font-weight: 400;\">Greeting()<\/span><span style=\"font-weight: 400;\"> function. It\u2019s also a composable function; however, it receives input and displays output on the screen.\u00a0<\/span><\/p>\n<p><strong>[Code Block]<\/strong><\/p>\n<pre style=\"background: transparent !important; padding: 0; border: 0; overflow: hidden;\"><strong><mark style=\"background-color: #7aff1e; color: #000;\">@Composable\r\nfun Greeting(name: String, modifier: Modifier = Modifier) {\r\n    Text(\r\n        text = \"Hello $name!\",\r\n        modifier = modifier\r\n    )\r\n}<\/mark>\r\n<\/strong><\/pre>\n<p><span style=\"font-weight: 400;\">Note how @composable appears above the code snippet. It indicates the following code block is a composable function dependent on a specific input to display an output on the screen.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To learn more about Kotlin&#8217;s functions, you can refer to <\/span><a href=\"https:\/\/kotlinlang.org\/docs\/functions.html\" target=\"_blank\" rel=\"nofollow noopener\"><span style=\"font-weight: 400;\">Kotlin\u2019s Function official doc<\/span><\/a><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">As per the code above, the <\/span><span style=\"font-weight: 400;\">Greeting()<\/span><span style=\"font-weight: 400;\"> function takes in a name and displays Hello to the person.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We will update the <\/span><span style=\"font-weight: 400;\">Greeting()<\/span><span style=\"font-weight: 400;\"> function to introduce ourselves instead of saying \u201cHello!\u201d:<\/span><\/p>\n<pre style=\"background: transparent !important; padding: 0; border: 0; overflow: hidden;\"><strong><mark style=\"background-color: #7aff1e; color: #000;\">@Composable\r\nfun Greeting(name: String, modifier: Modifier = Modifier) {\r\n    Text(\r\n        text = \"Hi, my name is $name!\",\r\n        modifier = modifier\r\n    )\r\n}<\/mark>\r\n<\/strong><\/pre>\n<p><span style=\"font-weight: 400;\">Your Android will automatically update the preview.<br \/>\n<a href=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image2.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-8082\" src=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image2.png\" alt=\"\" width=\"856\" height=\"161\" srcset=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image2.png 856w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image2-300x56.png 300w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image2-260x49.png 260w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image2-50x9.png 50w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image2-150x28.png 150w\" sizes=\"(max-width: 856px) 100vw, 856px\" \/><\/a><br \/>\n<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, this works well. You have changed the text, but it introduces you as Android.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">And you\u2019re probably not Android. You need to personalize the message to get introduced with your name on the screen. In order to achieve that, you need to add a cool feature like<\/span> <span style=\"font-weight: 400;\">GreetingPreview()<\/span> <span style=\"font-weight: 400;\">function, which will let you see what your composable will appear to be without proceeding with the complete app. You can enable preview by annotating <\/span><span style=\"font-weight: 400;\">@Composable<\/span> <span style=\"font-weight: 400;\">with <\/span><span style=\"font-weight: 400;\">@Preview<\/span><span style=\"font-weight: 400;\">. <\/span><span style=\"font-weight: 400;\">The following annotation will allow Android Studio to see the file within the design view. The <\/span><span style=\"font-weight: 400;\">@Preview <\/span><span style=\"font-weight: 400;\">annotation will recall a parameter called <\/span><span style=\"font-weight: 400;\">showBackground.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If <\/span><span style=\"font-weight: 400;\">showBackground<\/span><span style=\"font-weight: 400;\"> is set to true, it will add a background to your composable preview.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, update the <\/span><span style=\"font-weight: 400;\">GreetingPreview()<\/span> <span style=\"font-weight: 400;\">function with your name and voila!\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Your name will appear on your personalized greeting card.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s the Kotlin code:\u00a0<\/span><\/p>\n<pre style=\"background: transparent !important; padding: 0; border: 0; overflow: hidden;\"><strong><mark style=\"background-color: #7aff1e; color: #000;\">@Preview(showBackground = true)\r\n@Composable\r\nfun GreetingPreview() {\r\n    GreetingCardTheme {\r\n        Greeting(\"Ashad\")\r\n    }\r\n}<\/mark>\r\n<\/strong><\/pre>\n<p><span style=\"font-weight: 400;\">We have finally got the introduction text, but it\u2019s not leaving quite the impact.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can also change the background color by choosing a different color in the introduction.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can also surround the text with a <\/span><a href=\"https:\/\/developer.android.com\/reference\/kotlin\/androidx\/compose\/material\/package-summary#Surface(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,kotlin.Function0)\" target=\"_blank\" rel=\"nofollow noopener\"><span style=\"font-weight: 400;\">Surface<\/span><\/a><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To surround it with Surface, highlight the line of text and press (Alt+Enter for Windows or Option+Enter on Mac). Now, choose \u201cSurround with widget\u201d and continue.\u00a0<\/span><\/p>\n<p style=\"text-align: center;\"><span style=\"font-weight: 400;\"><a href=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image9.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-8083\" src=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image9.png\" alt=\"\" width=\"856\" height=\"304\" srcset=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image9.png 856w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image9-300x107.png 300w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image9-260x92.png 260w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image9-50x18.png 50w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image9-150x53.png 150w\" sizes=\"(max-width: 856px) 100vw, 856px\" \/><\/a><br \/>\n<a href=\"https:\/\/developer.android.com\/\" target=\"_blank\" rel=\"nofollow noopener\">Image Source<\/a><\/span><\/p>\n<p><span style=\"font-weight: 400;\">You should select the \u201cSurround with Container\u201d option from the options.\u00a0<\/span><\/p>\n<p style=\"text-align: center;\"><span style=\"font-weight: 400;\"><a href=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image1.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-8084\" src=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image1.png\" alt=\"\" width=\"856\" height=\"326\" srcset=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image1.png 856w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image1-300x114.png 300w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image1-260x99.png 260w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image1-50x19.png 50w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image1-150x57.png 150w\" sizes=\"(max-width: 856px) 100vw, 856px\" \/><\/a><br \/>\n<a href=\"https:\/\/developer.android.com\/\" target=\"_blank\" rel=\"nofollow noopener\">Image Source<\/a><br \/>\n<\/span><\/p>\n<p><span style=\"font-weight: 400;\">By default, the container option that appears will give you <\/span><span style=\"font-weight: 400;\">Box<\/span><span style=\"font-weight: 400;\">, but you can eventually change this to another container type, which will learn about <\/span><span style=\"font-weight: 400;\">Box<\/span> <span style=\"font-weight: 400;\">layout later in the course.\u00a0<\/span><\/p>\n<p style=\"text-align: center;\"><span style=\"font-weight: 400;\"><a href=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image11.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-8085\" src=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image11.png\" alt=\"\" width=\"856\" height=\"346\" srcset=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image11.png 856w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image11-300x121.png 300w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image11-260x105.png 260w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image11-50x20.png 50w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image11-150x61.png 150w\" sizes=\"(max-width: 856px) 100vw, 856px\" \/><\/a><br \/>\n<a href=\"https:\/\/developer.android.com\/\" target=\"_blank\" rel=\"nofollow noopener\">Image Source<\/a><\/span><\/p>\n<p><span style=\"font-weight: 400;\">You replace the <\/span><span style=\"font-weight: 400;\">Box<\/span><span style=\"font-weight: 400;\"> option with the type <\/span><span style=\"font-weight: 400;\">Surface()<\/span><span style=\"font-weight: 400;\"> instead.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Within the <\/span><span style=\"font-weight: 400;\">Surface()<\/span><span style=\"font-weight: 400;\"> option, you can add a <\/span><span style=\"font-weight: 400;\">Color<\/span><span style=\"font-weight: 400;\"> parameter and set it to <\/span><span style=\"font-weight: 400;\">Color<\/span><span style=\"font-weight: 400;\"> option.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">By default, the Color is set to Red.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can also change the background color by scrolling to the top.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Press the three buttons and add the following statement at the bottom of the list of imports.\u00a0<\/span><\/p>\n<pre style=\"background: transparent !important; padding: 0; border: 0; overflow: hidden;\"><strong><mark style=\"background-color: #7aff1e; color: #000;\">import androidx.compose.ui.graphics.Color<\/mark>\r\n<\/strong><\/pre>\n<p><span style=\"font-weight: 400;\">Here\u2019s the complete list of imports that will appear like this.\u00a0<\/span><\/p>\n<pre style=\"background: transparent !important; padding: 0; border: 0; overflow: hidden;\"><strong><mark style=\"background-color: #7aff1e; color: #000;\">import android.os.Bundle\r\nimport androidx.activity.ComponentActivity\r\nimport androidx.activity.compose.setContent\r\nimport androidx.compose.foundation.layout.Box\r\nimport androidx.compose.foundation.layout.fillMaxSize\r\nimport androidx.compose.material3.MaterialTheme\r\nimport androidx.compose.material3.Surface\r\nimport androidx.compose.material3.Text\r\nimport androidx.compose.runtime.Composable\r\nimport androidx.compose.ui.Modifier\r\nimport androidx.compose.ui.tooling.preview.Preview\r\nimport com.example.greetingcard.ui.theme.GreetingCardTheme\r\nimport androidx.compose.ui.graphics.Color<\/mark>\r\n<\/strong><\/pre>\n<p><span style=\"font-weight: 400;\">The best way to keep these imports organized is to arrange them alphabetically and remove the unnecessary ones. You can press Help on the top toolbar and type in Optimize Import.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can also open the Optimize Imports directly from the menu: Just type in Code &gt; Optimize Imports. You can always use the first option if you can\u2019t recall where it is.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The entire list of imports will automatically get arranged.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The same list of imports mentioned above will now be organized as:\u00a0<\/span><\/p>\n<pre style=\"background: transparent !important; padding: 0; border: 0; overflow: hidden;\"><strong><mark style=\"background-color: #7aff1e; color: #000;\">import android.os.Bundle\r\nimport androidx.activity.ComponentActivity\r\nimport androidx.activity.compose.setContent\r\nimport androidx.compose.foundation.layout.fillMaxSize\r\nimport androidx.compose.material3.MaterialTheme\r\nimport androidx.compose.material3.Surface\r\nimport androidx.compose.material3.Text\r\nimport androidx.compose.runtime.Composable\r\nimport androidx.compose.ui.Modifier\r\nimport androidx.compose.ui.graphics.Color\r\nimport androidx.compose.ui.tooling.preview.Preview\r\nimport com.example.greetingcard.ui.theme.GreetingCardTheme<\/mark>\r\n<\/strong><\/pre>\n<p><span style=\"font-weight: 400;\">These are just a few cool features you can only find in Android Studio.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In our case, we want to specify a color, \u201cCyan,\u201d for the background.\u00a0<\/span><\/p>\n<p style=\"text-align: center;\"><span style=\"font-weight: 400;\"><a href=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image8.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-8086\" src=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image8.png\" alt=\"\" width=\"856\" height=\"432\" srcset=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image8.png 856w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image8-300x151.png 300w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image8-260x131.png 260w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image8-50x25.png 50w, https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2025\/04\/image8-150x75.png 150w\" sizes=\"(max-width: 856px) 100vw, 856px\" \/><\/a><br \/>\n<a href=\"https:\/\/developer.android.com\/\" target=\"_blank\" rel=\"nofollow noopener\">Image Source<\/a><\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s the code:\u00a0<\/span><\/p>\n<pre style=\"background: transparent !important; padding: 0; border: 0; overflow: hidden;\"><strong><mark style=\"background-color: #7aff1e; color: #000;\">@Composable\r\nfun Greeting(name: String, modifier: Modifier = Modifier) {\r\n   Surface(color = Color.Cyan) {\r\n       Text(\r\n           text = \"Hi, my name is $name!\",\r\n           modifier = modifier\r\n       )\r\n   }\r\n}<\/mark>\r\n<\/strong><\/pre>\n<p><span style=\"font-weight: 400;\">While setting the background color is one thing, adding some space (padding) around the text is another. You need to add a \u201cModifier,\u201d which you can use to augment or decorate a composable. A standard modifier used for adding space around an element is <\/span><span style=\"font-weight: 400;\">padding, <\/span><span style=\"font-weight: 400;\">which you can implement using the <\/span><a href=\"https:\/\/developer.android.com\/reference\/kotlin\/androidx\/compose\/ui\/Modifier#(androidx.compose.ui.Modifier).padding(androidx.compose.ui.unit.Dp)\" target=\"_blank\" rel=\"nofollow noopener\"><span style=\"font-weight: 400;\">Modifier.padding()<\/span><\/a> <span style=\"font-weight: 400;\">function.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can add padding to the modifier with a size of 24. Dp.<\/span><\/p>\n<pre style=\"background: transparent !important; padding: 0; border: 0; overflow: hidden;\"><strong><mark style=\"background-color: #7aff1e; color: #000;\">@Composable\r\nfun Greeting(name: String, modifier: Modifier = Modifier) {\r\n    Surface(color = Color.Cyan) {\r\n        Text(\r\n            text = \"Hi, my name is $name!\",\r\n            modifier = modifier.padding(24.dp)\r\n        )\r\n    }\r\n}<\/mark>\r\n<\/strong><\/pre>\n<p><span style=\"font-weight: 400;\">Also, add the following imports to your import statement section.\u00a0<\/span><\/p>\n<pre style=\"background: transparent !important; padding: 0; border: 0; overflow: hidden;\"><strong><mark style=\"background-color: #7aff1e; color: #000;\">import androidx.compose.ui.unit.dp\r\nimport androidx.compose.foundation.layout.padding<\/mark>\r\n<\/strong><\/pre>\n<p><span style=\"font-weight: 400;\">Now, that\u2019s a solid achievement.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Feel free to experiment by changing the text, adjusting colors, or adding new elements to make it your own. While simple apps like this are easy to create, building something more advanced requires more profound expertise.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">At <\/span><a href=\"https:\/\/www.branex.ae\/\"><b>Branex<\/b><\/a><span style=\"font-weight: 400;\">, we specialize in building high-performance and feature-rich Android applications.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Looking to build a mobile app from scratch? We are here to help every step of the way.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Disclaimer<\/span><span style=\"font-weight: 400;\">: <\/span><i><span style=\"font-weight: 400;\">All information and images referenced in this article are sourced from the official <a href=\"https:\/\/developer.android.com\" target=\"_blank\" rel=\"nofollow noopener\">Android Developers website<\/a><\/span><\/i><i><span style=\"font-weight: 400;\">. This content is shared strictly for educational and learning purposes only.<\/span><\/i><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Are you planning to build your first Android mobile app?\u00a0 If you\u2019re unsure where to begin, Android Studio is the official tool for Android development. It\u2019s&#8230;<\/p>\n","protected":false},"author":11,"featured_media":8088,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420],"tags":[],"class_list":["post-8061","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile-app-development"],"_links":{"self":[{"href":"https:\/\/www.branex.ae\/blog\/wp-json\/wp\/v2\/posts\/8061","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.branex.ae\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.branex.ae\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.branex.ae\/blog\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.branex.ae\/blog\/wp-json\/wp\/v2\/comments?post=8061"}],"version-history":[{"count":1,"href":"https:\/\/www.branex.ae\/blog\/wp-json\/wp\/v2\/posts\/8061\/revisions"}],"predecessor-version":[{"id":9473,"href":"https:\/\/www.branex.ae\/blog\/wp-json\/wp\/v2\/posts\/8061\/revisions\/9473"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.branex.ae\/blog\/wp-json\/wp\/v2\/media\/8088"}],"wp:attachment":[{"href":"https:\/\/www.branex.ae\/blog\/wp-json\/wp\/v2\/media?parent=8061"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.branex.ae\/blog\/wp-json\/wp\/v2\/categories?post=8061"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.branex.ae\/blog\/wp-json\/wp\/v2\/tags?post=8061"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}