𝓖𝓻𝓮𝓮𝓽𝓲𝓷𝓰𝓼
Hello, dear Hive Learners, I hope you all are well. We are going to continue our Android Development course. Today we will add a new Button on our mobile screen. We can use this Button with an icon with it. Sometimes we also need to show the icon with the text, We use the Material Button with the style property.
GitHub Link
Use this GitHub project to clone into your directory. It will always get updated in the next lecture. So that you will never miss the latest code. Happy Coding!.
What Should I Learn
- What is Material Button
- How to set Icon
- How to align the icon and text
Assignment
- Add a Material Button in your Activitty
- Change the icon and set the tint
- Align the icon and text
We need to add the Material Button to our design activity if you remember it comes from the same library that we add in our Lecture-6. This library gives us a bunch of Material Design to implement that is very useful than the default options.
<com.google.android.material.button.MaterialButton
style="@style/Widget.AppCompat.ImageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
The Button is looking so empty so If I need to add our Hive Learners logo as the start icon in this button I use these code lines. I also set the text in the Button and the size of the icon and TintMode to multiple so that our icon color looks original. Otherwise, it will turn black or white.
app:icon="@drawable/hive_logo"
app:iconSize="30dp"
app:iconTintMode="multiply"
android:text="Hive Learners"
If you notice the text Hive Learners in the button is not in the center of the button. Or we can say that the icon and the text are not aligned. We can fix it by using the inside gravity option. Use this code in the Button and set it in the center.
android:gravity="center"
I hope you enjoy today's lecture and learn something new, From tomorrow we will learn how to link this design item with the code to act actually.
here is the full main_activity.xml code.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<Button
android:id="@+id/start_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#3F51B5"
android:text="Hive Learners Start Button Colored"
android:textColor="#FFEB3B" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-smallcaps"
android:text="faisalamin"
android:textColor="@color/teal_700"
android:textSize="16sp"
android:textStyle="italic|bold" />
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Enter Password"
app:passwordToggleEnabled="true">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:text="+923451111111"
android:textColor="@color/black"
android:textColorHint="@color/purple_200"
android:textSize="14sp" />
</com.google.android.material.textfield.TextInputLayout>
<ImageView
android:layout_width="200dp"
android:layout_height="200dp"
android:src="@drawable/hive_logo" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.AppCompat.ImageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:icon="@drawable/hive_logo"
app:iconSize="30dp"
app:iconTintMode="multiply"
android:text="Hive Learners"
android:gravity="center"/>
</LinearLayout>
Thank You
