{"id":586,"date":"2024-06-11T10:55:47","date_gmt":"2024-06-11T10:55:47","guid":{"rendered":"https:\/\/robotqa.com\/blog\/?p=586"},"modified":"2024-06-11T10:55:47","modified_gmt":"2024-06-11T10:55:47","slug":"building-a-modern-ui-with-material-components-for-android","status":"publish","type":"post","link":"https:\/\/robotqa.com\/blog\/building-a-modern-ui-with-material-components-for-android\/","title":{"rendered":"Building a Modern UI with Material Components for Android"},"content":{"rendered":"<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/blog.robotqa.com\/wp-content\/uploads\/2024\/06\/202406110953034.png\" alt=\"android-material-component\" width=\"1400\" height=\"921\" class=\"aligncenter size-full wp-image-557\" srcset=\"https:\/\/blog.robotqa.com\/wp-content\/uploads\/2024\/06\/202406110953034.png 1400w, https:\/\/blog.robotqa.com\/wp-content\/uploads\/2024\/06\/202406110953034-300x197.png 300w, https:\/\/blog.robotqa.com\/wp-content\/uploads\/2024\/06\/202406110953034-1024x674.png 1024w, https:\/\/blog.robotqa.com\/wp-content\/uploads\/2024\/06\/202406110953034-768x505.png 768w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" \/>\n<p><\/p>\nMaterial Components for Android (MDC-Android) is a comprehensive library that helps developers implement Google&#8217;s Material Design in Android applications. Using Material Components, you can create beautiful, responsive, and consistent UIs that follow the latest design guidelines. In this blog, we&#8217;ll walk through a simple example of how to use Material Components to build a modern UI.\n<h3><strong>Setting Up Material Components<\/strong><\/h3>\nBefore diving into the code, ensure you have the MDC-Android library set up in your project.\n<ul>\n \t<li><strong>Add the dependency<\/strong> to your <code>build.gradle<\/code> file:<\/li>\n\n<pre class=\"lang:xhtml decode:true \">dependencies {\n    implementation 'com.google.android.material:material:1.8.0'\n}\n<\/pre>\n \t<li><strong>Sync the project<\/strong> to download the necessary dependencies.<\/li>\n<\/ul>\n<h3><strong>Example: Creating a Login Screen<\/strong><\/h3>\nLet&#8217;s create a modern login screen using Material Components. This screen will include:\n<ul>\n \t<li>A <code>TextInputLayout<\/code> for the email and password fields.<\/li>\n \t<li>A <code>MaterialButton<\/code> for the login action.<\/li>\n \t<li>A <code>TextView<\/code> for a forgot password link.<\/li>\n<\/ul>\n<h4><strong>Step 1: Define the Layout<\/strong><\/h4>\nCreate an XML layout file (<code>activity_main.xml<\/code>) with the following content:\n<pre class=\"lang:xhtml decode:true \">&lt;RelativeLayout\n    xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    android:padding=\"16dp\"\n    android:background=\"?android:attr\/windowBackground\"&gt;\n\n    &lt;com.google.android.material.textfield.TextInputLayout\n        android:id=\"@+id\/emailTextInputLayout\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        android:layout_marginBottom=\"16dp\"\n        app:boxStrokeColor=\"@color\/colorPrimary\"&gt;\n\n        &lt;com.google.android.material.textfield.TextInputEditText\n            android:id=\"@+id\/emailEditText\"\n            android:layout_width=\"match_parent\"\n            android:layout_height=\"wrap_content\"\n            android:hint=\"Email\"\n            android:inputType=\"textEmailAddress\"\/&gt;\n    &lt;\/com.google.android.material.textfield.TextInputLayout&gt;\n\n    &lt;com.google.android.material.textfield.TextInputLayout\n        android:id=\"@+id\/passwordTextInputLayout\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        android:layout_below=\"@id\/emailTextInputLayout\"\n        android:layout_marginBottom=\"24dp\"\n        app:boxStrokeColor=\"@color\/colorPrimary\"&gt;\n\n        &lt;com.google.android.material.textfield.TextInputEditText\n            android:id=\"@+id\/passwordEditText\"\n            android:layout_width=\"match_parent\"\n            android:layout_height=\"wrap_content\"\n            android:hint=\"Password\"\n            android:inputType=\"textPassword\"\/&gt;\n    &lt;\/com.google.android.material.textfield.TextInputLayout&gt;\n\n    &lt;com.google.android.material.button.MaterialButton\n        android:id=\"@+id\/loginButton\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        android:layout_below=\"@id\/passwordTextInputLayout\"\n        android:backgroundTint=\"@color\/colorPrimary\"\n        android:text=\"Login\"\n        android:textColor=\"@android:color\/white\"\/&gt;\n\n    &lt;TextView\n        android:id=\"@+id\/forgotPasswordTextView\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:layout_below=\"@id\/loginButton\"\n        android:layout_marginTop=\"16dp\"\n        android:layout_centerHorizontal=\"true\"\n        android:text=\"Forgot password?\"\n        android:textColor=\"@color\/colorPrimary\"\n        android:textStyle=\"bold\"\/&gt;\n\n&lt;\/RelativeLayout&gt;\n<\/pre>\n<h4><strong>Step 2: Styling<\/strong><\/h4>\nEnsure you have defined the colors in your <code>res\/values\/colors.xml<\/code> file:\n<pre class=\"lang:xhtml decode:true \">&lt;resources&gt;\n    &lt;color name=\"colorPrimary\"&gt;#6200EE&lt;\/color&gt;\n    &lt;color name=\"colorPrimaryDark\"&gt;#3700B3&lt;\/color&gt;\n    &lt;color name=\"colorAccent\"&gt;#03DAC5&lt;\/color&gt;\n&lt;\/resources&gt;\n<\/pre>\n<h4><strong>Step 3: Initialize in Activity<\/strong><\/h4>\nIn your <code>MainActivity.java<\/code> or <code>MainActivity.kt<\/code> file, initialize the views:\n<pre class=\"lang:java decode:true \">package com.example.materialcomponents;\n\nimport android.os.Bundle;\nimport androidx.appcompat.app.AppCompatActivity;\nimport com.google.android.material.textfield.TextInputLayout;\nimport com.google.android.material.textfield.TextInputEditText;\nimport com.google.android.material.button.MaterialButton;\nimport android.widget.TextView;\nimport android.widget.Toast;\n\npublic class MainActivity extends AppCompatActivity {\n\n    @Override\n    protected void onCreate(Bundle savedInstanceState) {\n        super.onCreate(savedInstanceState);\n        setContentView(R.layout.activity_main);\n\n        TextInputLayout emailTextInputLayout = findViewById(R.id.emailTextInputLayout);\n        TextInputEditText emailEditText = findViewById(R.id.emailEditText);\n        TextInputLayout passwordTextInputLayout = findViewById(R.id.passwordTextInputLayout);\n        TextInputEditText passwordEditText = findViewById(R.id.passwordEditText);\n        MaterialButton loginButton = findViewById(R.id.loginButton);\n        TextView forgotPasswordTextView = findViewById(R.id.forgotPasswordTextView);\n\n        loginButton.setOnClickListener(v -&gt; {\n            String email = emailEditText.getText().toString();\n            String password = passwordEditText.getText().toString();\n            if (email.isEmpty() || password.isEmpty()) {\n                Toast.makeText(MainActivity.this, \"Please enter both email and password\", Toast.LENGTH_SHORT).show();\n            } else {\n                \/\/ Perform login action\n                Toast.makeText(MainActivity.this, \"Login successful\", Toast.LENGTH_SHORT).show();\n            }\n        });\n\n        forgotPasswordTextView.setOnClickListener(v -&gt; {\n            \/\/ Handle forgot password action\n            Toast.makeText(MainActivity.this, \"Forgot password clicked\", Toast.LENGTH_SHORT).show();\n        });\n    }\n}\n<\/pre>\n<!-- CTA Section -->\n<p><\/p>\n<div class=\"bg-primary text-white text-center\">\n<div class=\"container space-1\"><span class=\"h6 d-block d-lg-inline-block font-weight-light mb-lg-0\"> <span class=\"font-weight-semi-bold\">Need Debugging?<\/span> \u2013 Try RobotQA and Start Debugging on Real Devices. <\/span> <a class=\"btn btn-sm btn-white transition-3d-hover font-weight-normal ml-3\" href=\"https:\/\/plugins.jetbrains.com\/plugin\/24460-robotqa-real-device-debugging-on-cloud\">Download Plugin<\/a><\/div>\n<\/div>\n<p><\/p>\n<!-- End CTA Section -->\n<h3><strong>Conclusion<\/strong><\/h3>\nMaterial Components for Android provide a powerful way to build modern and visually appealing UIs. By using components such as <code>TextInputLayout<\/code>, <code>TextInputEditText<\/code>, and <code>MaterialButton<\/code>, you can create a clean and responsive login screen that adheres to Material Design guidelines. Experiment with other components like <code>BottomNavigationView<\/code>, <code>FloatingActionButton<\/code>, and <code>Snackbar<\/code> to further enhance your application&#8217;s UI.\n\nBy following this guide, you should have a solid foundation for using Material Components in your Android projects. Happy coding!","protected":false},"excerpt":{"rendered":"<p>Material Components for Android (MDC-Android) is a comprehensive library that helps developers implement Google&#8217;s Material Design in Android applications. Using Material Components, you can create beautiful, responsive, and consistent UIs that follow the latest design guidelines. In this blog, we&#8217;ll&#8230;<\/p>\n","protected":false},"author":1,"featured_media":557,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[39],"class_list":["post-586","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-app-debugging","tag-android-development"],"_links":{"self":[{"href":"https:\/\/robotqa.com\/blog\/wp-json\/wp\/v2\/posts\/586","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/robotqa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/robotqa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/robotqa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/robotqa.com\/blog\/wp-json\/wp\/v2\/comments?post=586"}],"version-history":[{"count":0,"href":"https:\/\/robotqa.com\/blog\/wp-json\/wp\/v2\/posts\/586\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/robotqa.com\/blog\/wp-json\/wp\/v2\/media\/557"}],"wp:attachment":[{"href":"https:\/\/robotqa.com\/blog\/wp-json\/wp\/v2\/media?parent=586"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/robotqa.com\/blog\/wp-json\/wp\/v2\/categories?post=586"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/robotqa.com\/blog\/wp-json\/wp\/v2\/tags?post=586"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}