Day44 of #100DaysOfCode

#CodeTogether Day 44/100

Hii folks 🙌

Today I learned to add Material Design Components and icons to our app.

Unit 2: Layouts

Pathway 2: Get user input in an app — Part 2

Source: https://developer.android.com/courses/android-basics-kotlin/course

Create a more polished user experience

So, we will start by adding the dependency to the app/build.gradle

dependencies {
    ...
    implementation 'com.google.android.material:material:<version>'
}

After this we will replace the cost of service EditText with a Material text field (which is composed of a TextInputLayout and TextInputEditText) in the activity.xml file.

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/cost_of_service"
    android:layout_width="160dp"
    android:layout_height="wrap_content"
    android:hint="@string/cost_of_service"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/cost_of_service_edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="numberDecimal" />

</com.google.android.material.textfield.TextInputLayout>

Now, we will modify our mainActivity.kt file by changing the user input from the TextInputEditText element with resource ID cost_of_service_edit_text.

private fun calculateTip() {
    // Get the decimal value from the cost of service text field
    val stringInTextField = binding.costOfServiceEditText.text.toString()
    val cost = stringInTextField.toDoubleOrNull()
    
    ...
}

Now the app looks something like this:

Then in the activity_main.xml layout, we will change the XML tag from Switch to com.google.android.material.switchmaterial.SwitchMaterial.

...
<com.google.android.material.switchmaterial.SwitchMaterial
    android:id="@+id/round_up_switch"
    android:layout_width="0dp"
    android:layout_height="wrap_content" ... />
...

After that we will add icons to the apps from the Material Icons. We will insert icons and position elements in the app.

The Design view should look like this. All three icons are correctly positioned.

We will add the OutlinedBox style to the app’s text field, and all the text now looks consistent!

Today I Learned:

• To use ConstraintLayout to position elements in our layout.
• We test our app for edges cases (e.g. rotating your app in landscape mode) and make improvements where applicable.

That is all for Day44 ✅

Thanks for reading, See you tomorrow!