Google update android design comes material design.
A material design is a UI widget. You can apply material design in apps and make advance looking.
Material design is standard styling UI design. Using material components we’ll make our app a beautiful UI design.
What feature of material design?
You can style new modern design themes on your apps easily. Using the materials widget, you can apply the floating action button. Show and hide app navigation drawer. You can make material design collapsing toolbars, tabs, a button nav bar, EditText, hamburger and more.
Also, you can apply beautiful animation using material design.
What is included in this tutorial?
In this tutorial, we’ll use material design edit text and floating action button. We’ll make a simple material design app.
Simply will use two material design edit text and a floating action button.
Which library support material design?
Since the new android update, you don’t need to add dependency as already added.
Download the latest android studio.
How to download android studio.
Or update android studio
Help – > Check for update…
You can add As follows dependencies.
Implementaion’com.google.android.materail:material:<version>’
Also, you can change the theme using material design
The below image uses the following component.
<style name="Theme.MaterialDesign"parent="Theme.MaterialComponents.DayNight.DarkActionBar">
No action bar theme in material design
<style name="Theme.MaterialDesign" parent="Theme.MaterialComponents.NoActionBar">
A light theme in material design
<style name="Theme.MaterialDesign" parent="Theme.MaterialComponents.Light">
For hide action bar use
<style name="Theme.MaterialDesign" parent="Theme.MaterialComponents.Light.NoActionBar">
And more theme design provides by material design.
How to make a material design layout in the xml file?
Now, we’ll make the material design layout in the XML file.
In the XML file we’ll make two material design edit text with floating action buttons.
Below material design edit text design.
<com.google.android.material.textfield.TextInputLayout
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:hint="Full Name"
app:endIconMode="clear_text">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text" />
</com.google.android.material.textfield.TextInputLayout>
In the above example, we have use the “full name” material design edit text box.
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
this is used when we click on the button hint text to go outline box.
app:endIconMode="clear_text"
when type text in edit text, you can directly clear text by clicking on the cross sign.
Let’s see the second edit text box.
<com.google.android.material.textfield.TextInputLayout
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:hint="password"
app:endIconMode="password_toggle">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text" />
</com.google.android.material.textfield.TextInputLayout>
app:endIconMode="password_toggle">
The toggle icon is used to hide and show password.
In the last, use the material design floating action button.
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_baseline_check_24"
app:backgroundTint="@color/white" />
android:src="@drawable/ic_baseline_check_24"
for use drawable icon.
Now let’s run a program
See the output as shown below the image.
Watch on YouTube.
