Posts

Showing posts with the label MDC

Material Chip in Android

Image
Chip , a Material Design Component is used as an action like setting an alarm or a choice like selecting a gender or to filter items like dress types or input types like hints. Similar to RadioGroup , if we want to create a group of chips with single selection behavior we use ChipGroup and set singleSelection variable to true. <com.google.android.material.chip.ChipGroup android:id="@+id/genderChip" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginStart="@dimen/edit_text_horizontal_margin" android:layout_marginTop="@dimen/edit_text_vertical_margin" android:layout_marginEnd="@dimen/edit_text_horizontal_margin" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/fullNameTextInputLayout" app:singleSelection="true"> ...

How to Change Material Chip Text Size, Text Style and Font

Chips in Android is a Material Design Component used primarily for actions or choice or during filters or as an input. The attributes like textColor , textStyle and fontFamily are ignored when added to the Material Chips directly. We need to modify these values using textAppearance . <com.google.android.material.chip.Chip android:id="@+id/maleChip" style="@style/Widget.MaterialComponents.Chip.Choice" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checkable="true" android:layoutDirection="locale" android:text="@string/chip_text_male" android:textAppearance="@style/AppTheme.GenderChip" android:textColor="@color/colorWhiteText" app:chipBackgroundColor="@drawable/select_chip" app:chipEndPadding="@dimen/chip_horizontal_margin" app:chipStartPadding="@dimen/chip_horizontal_margin...

Alert Dialog - Material Design Component

Image
Alert Dialog in Android is a blocking window shown to the user for immediate user attention and interaction. To build and show an alert dialog, we will be using MaterialAlertDialogBuilder . It is an extension of AlertDialog.Builder that we are familiar with but provides Material theming to the dialog. The below pictures shows the subtle differences in using MaterialAlertDialogBuilder and AlertDialog.Builder . Dialog built with MaterialAlertDialogBuilder Dialog built with AlertDialog.Builder Before, we start implementing the Material Alert Dialog, add Material Design Components to our project. Now, let's create the Alert Dialog. private fun showAlert(context: Context) { // Build the dialog val builder = MaterialAlertDialogBuilder(context) // Set Dialog title .setTitle(context.getString(R.string.alert_dialog_title)) // Set Dialog message .setMessage( context.getString( R.string.alert_dialo...

How to Migrate to Material Components (MDC)

Image
Material Components (MDC) is built by developers at Google (separate from the Android team) with intentions of helping developers build Material Design in their web and mobile-based apps. This is the next iteration of Material Design released in 2014. Follow the steps mentioned below to migrate the app to use the Material Design Components instead of AppCompat or default UI components. 1) Add the Material Components dependency to the module level build.gradle file. implementation 'com.google.android.material:material:1.1.0-alpha02' 2) In the styles.xml Replace AppCompat with MaterialComponents . If you performed the action successfully then your base application theme will look like this.     <!-- Base application theme. -->     <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">         <item name="colorPrimary">@color/colorPrimary</item>         <item ...