material-components-android | Modular and customizable Material Design UI components for Android | User Interface library

by material-components Java Version: 1.6.0-rc01 License: Apache-2.0

Download this library from

kandi X-RAY | material-components-android Summary

material-components-android is a Java library typically used in User Interface applications. material-components-android has no bugs, it has no vulnerabilities, it has build file available, it has a Permissive License and it has high support. You can download it from GitHub.

Material Components for Android (MDC-Android) help developers execute Material Design. Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional Android apps. Material Components for Android is a drop-in replacement for Android's Design Support Library.

Support

Quality

Security

License

Reuse

kandi-support Support

material-components-android has a highly active ecosystem.
It has 13557 star(s) with 2684 fork(s). There are 426 watchers for this library.
There were 4 major release(s) in the last 6 months.
There are 397 open issues and 1819 have been closed. On average issues are closed in 375 days. There are 40 open pull requests and 0 closed requests.
It has a positive sentiment in the developer community.
The latest version of material-components-android is 1.6.0-rc01

This Library - Support

Best in #User Interface

Average in #User Interface

This Library - Support

Best in #User Interface

Average in #User Interface

quality kandi Quality

material-components-android has 0 bugs and 0 code smells.

This Library - Quality

Best in #User Interface

Average in #User Interface

This Library - Quality

Best in #User Interface

Average in #User Interface

security Security

material-components-android has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
material-components-android code analysis shows 0 unresolved vulnerabilities.
There are 0 security hotspots that need review.

This Library - Security

Best in #User Interface

Average in #User Interface

This Library - Security

Best in #User Interface

Average in #User Interface

license License

material-components-android is licensed under the Apache-2.0 License. This license is Permissive.
Permissive licenses have the least restrictions, and you can use them in most projects.

This Library - License

Best in #User Interface

Average in #User Interface

This Library - License

Best in #User Interface

Average in #User Interface

build Reuse

material-components-android releases are available to install and integrate.
Build file is available. You can build the component from source.
Installation instructions are available. Examples and code snippets are not available.
material-components-android saves you 101018 person hours of effort in developing the same functionality from scratch.
It has 128768 lines of code, 8336 functions and 2514 files.
It has medium code complexity. Code complexity directly impacts maintainability of the code.

This Library - Reuse

Best in #User Interface

Average in #User Interface

This Library - Reuse

Best in #User Interface

Average in #User Interface

Top functions reviewed by kandi - BETA

kandi has reviewed material-components-android and discovered the below as its top functions. This is intended to give you an instant insight into material-components-android implemented functionality, and help decide if they suit your requirements.

Initializes the textfield s error buttons .
Is called when a state changes .
Sets the EditText .
Calculates the base offsets .
Attaches the window insets to be applied to the given child view .
Draws the shadow .
Creates the reveal animation for a child .
Adds actions to the month navigation dialogs .
Set attributes from theme
Wrap a view in bottom sheet .

material-components-android Key Features

Modular and customizable Material Design UI components for Android

material-components-android Examples and Code Snippets

See all related Code Snippets

How does this android code get the activity from ? material-components-android-codelabs

Copy

Download

// getters
val newThing = stuff.getThing()
val newThing = stuff.thing

// setters
stuff.setThing(newThing)
stuff.thing = newThing

// boolean setters
dog.setGood(true)
dog.isGood = true

// boolean getters
val goodBoy = dog.isGood()
val goodBoy = dog.isGood

BottomNavigationView - why is there not enough space for the badge Drawable?

Copy

Download

val menuItemId: Int = bottomNavigation.getMenu().getItem(1).getItemId()
val badge: BadgeDrawable = bottomNavigation.getOrCreateBadge(menuItemId)
badge.setVisible(true)
badge.setNumber(4)
badge.setVerticalOffset(10) //value in pix
badge.setHorizontalOffset(-10) //value in pix

Return MaterialTimePicker

Copy

Download

MaterialTimePicker materialTimePicker = new MaterialTimePicker.Builder()
            .setTimeFormat(TimeFormat.CLOCK_24H)
            .build();


    pick.setOnClickListener(v -> materialTimePicker.show(getSupportFragmentManager(),
            DiConstant.TIME_PICKER));

    materialTimePicker.addOnPositiveButtonClickListener(dialog -> {
        int newHour = materialTimePicker.getHour();
        int newMinute = materialTimePicker.getMinute();
        String time = String.format(Locale.getDefault(), "%02d:%02d", newHour, newMinute);
        pick.setText(time);
    });

return materialTimePicker.show(getSupportFragmentManager(),
            "TIME_PICKER");

-----------------------

MaterialTimePicker materialTimePicker = new MaterialTimePicker.Builder()
            .setTimeFormat(TimeFormat.CLOCK_24H)
            .build();


    pick.setOnClickListener(v -> materialTimePicker.show(getSupportFragmentManager(),
            DiConstant.TIME_PICKER));

    materialTimePicker.addOnPositiveButtonClickListener(dialog -> {
        int newHour = materialTimePicker.getHour();
        int newMinute = materialTimePicker.getMinute();
        String time = String.format(Locale.getDefault(), "%02d:%02d", newHour, newMinute);
        pick.setText(time);
    });

return materialTimePicker.show(getSupportFragmentManager(),
            "TIME_PICKER");

LiveData update of BadgeDrawable in ToolBar MenuItem

Copy

Download

// This is an indicator of whether we need to show the badge or not
private var isFilterOn: Boolean = false

private var filterBadge: BadgeDrawable? = null

@SuppressLint("UnsafeExperimentalUsageError")
override fun onPrepareOptionsMenu(menu: Menu) {
    super.onPrepareOptionsMenu(menu)

    val filterItem = menu.findItem(R.id.action_filter)
    val toolbar = requireActivity().findViewById<Toolbar>(R.id.toolbar)

    if(filterBadge != null) {
        BadgeUtils.detachBadgeDrawable(filterBadge!!, toolbar, R.id.action_filter)
        filterBadge = null
    }

    if(isFilterOn) {
        filterBadge = BadgeDrawable.create(requireContext()).also {
            BadgeUtils.attachBadgeDrawable(it, toolbar, R.id.action_filter)
        }
    }

CountDown Timer with CircularProgressIndicator

Copy

Download

progressIndicator.progress = (millisUntilFinished / 1000).toInt()

Floating Action Button Android Studio does not show me background color and image in preview

Copy

Download

Android Studio > Menu bar > Help>check for updates.

How to change the Material Design TextInputLayout Hint Text Color?

Copy

Download

<style name="CustomOutlineBox" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="boxStrokeColor">@color/text_input_layout_stroke_color</item>
    <item name="android:textColorHint">@color/text_color_hint</item>
    <item name="hintTextColor">@color/green</item>
</style>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:alpha="..." android:color="@color/red" android:state_enabled="false"/>
    <item android:alpha="..." android:color="@color/blue"/>
</selector>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:alpha="..." android:color="@color/green" android:state_focused="true"/>
    <item android:alpha="..." android:color="@color/green" android:state_hovered="true"/>
    <item android:alpha="..." android:color="@color/red" android:state_enabled="false"/>
    <item android:alpha="..." android:color="@color/blue"/>  <!-- unfocused -->
</selector>

-----------------------

<style name="CustomOutlineBox" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="boxStrokeColor">@color/text_input_layout_stroke_color</item>
    <item name="android:textColorHint">@color/text_color_hint</item>
    <item name="hintTextColor">@color/green</item>
</style>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:alpha="..." android:color="@color/red" android:state_enabled="false"/>
    <item android:alpha="..." android:color="@color/blue"/>
</selector>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:alpha="..." android:color="@color/green" android:state_focused="true"/>
    <item android:alpha="..." android:color="@color/green" android:state_hovered="true"/>
    <item android:alpha="..." android:color="@color/red" android:state_enabled="false"/>
    <item android:alpha="..." android:color="@color/blue"/>  <!-- unfocused -->
</selector>

-----------------------

<style name="CustomOutlineBox" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="boxStrokeColor">@color/text_input_layout_stroke_color</item>
    <item name="android:textColorHint">@color/text_color_hint</item>
    <item name="hintTextColor">@color/green</item>
</style>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:alpha="..." android:color="@color/red" android:state_enabled="false"/>
    <item android:alpha="..." android:color="@color/blue"/>
</selector>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:alpha="..." android:color="@color/green" android:state_focused="true"/>
    <item android:alpha="..." android:color="@color/green" android:state_hovered="true"/>
    <item android:alpha="..." android:color="@color/red" android:state_enabled="false"/>
    <item android:alpha="..." android:color="@color/blue"/>  <!-- unfocused -->
</selector>

Refresh Fragment view when RecyclerView.Adapter is changed

Copy

Download

class StaggeredProductCardRecyclerViewAdapter(private val theList: List) {

    private var listOfItems = theList

    fun removeItem(position: Int) {
        listOfItems = listOfItems.remove(position)
        notifyDatasetChanged()
    }
}

val featured = view.findViewById(R.id.featured) as Button
// set on-click listener
featured.setOnClickListener {
       adapter.removeItem(1)
}

class StaggeredProductCardRecyclerViewAdapter(private val initList: List<ProductEntry>?) : RecyclerView.Adapter<StaggeredProductCardViewHolder>() {

    private var productList: List<ProductEntry>? = initList

    override fun getItemViewType(position: Int): Int {
        return position % 3
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): StaggeredProductCardViewHolder {
        var layoutId = R.layout.shr_staggered_product_card_first
        if (viewType == 1) {
            layoutId = R.layout.shr_staggered_product_card_second
        } else if (viewType == 2) {
            layoutId = R.layout.shr_staggered_product_card_third
        }

        val layoutView = LayoutInflater.from(parent.context).inflate(layoutId, parent, false)
        return StaggeredProductCardViewHolder(layoutView)
    }

    override fun onBindViewHolder(holder: StaggeredProductCardViewHolder, position: Int) {
        if (productList != null && position < productList.size) {
            val product = productList[position]
            holder.productTitle.text = product.title
            holder.productPrice.text = product.price
            ImageRequester.setImageFromUrl(holder.productImage, product.url)
        }
    }

    override fun getItemCount(): Int {
        return productList?.size ?: 0
    }

    fun replaceList(items: List<ProductEntry>?) {
        productList = items
        notifyDatasetChanged()
    }
}

...
featured.setOnClickListener {
       adapter.replaceList(ProductEntry.initProductEntryList(resources, "featured"))
}

-----------------------

class StaggeredProductCardRecyclerViewAdapter(private val theList: List) {

    private var listOfItems = theList

    fun removeItem(position: Int) {
        listOfItems = listOfItems.remove(position)
        notifyDatasetChanged()
    }
}

val featured = view.findViewById(R.id.featured) as Button
// set on-click listener
featured.setOnClickListener {
       adapter.removeItem(1)
}

class StaggeredProductCardRecyclerViewAdapter(private val initList: List<ProductEntry>?) : RecyclerView.Adapter<StaggeredProductCardViewHolder>() {

    private var productList: List<ProductEntry>? = initList

    override fun getItemViewType(position: Int): Int {
        return position % 3
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): StaggeredProductCardViewHolder {
        var layoutId = R.layout.shr_staggered_product_card_first
        if (viewType == 1) {
            layoutId = R.layout.shr_staggered_product_card_second
        } else if (viewType == 2) {
            layoutId = R.layout.shr_staggered_product_card_third
        }

        val layoutView = LayoutInflater.from(parent.context).inflate(layoutId, parent, false)
        return StaggeredProductCardViewHolder(layoutView)
    }

    override fun onBindViewHolder(holder: StaggeredProductCardViewHolder, position: Int) {
        if (productList != null && position < productList.size) {
            val product = productList[position]
            holder.productTitle.text = product.title
            holder.productPrice.text = product.price
            ImageRequester.setImageFromUrl(holder.productImage, product.url)
        }
    }

    override fun getItemCount(): Int {
        return productList?.size ?: 0
    }

    fun replaceList(items: List<ProductEntry>?) {
        productList = items
        notifyDatasetChanged()
    }
}

...
featured.setOnClickListener {
       adapter.replaceList(ProductEntry.initProductEntryList(resources, "featured"))
}

-----------------------

class StaggeredProductCardRecyclerViewAdapter(private val theList: List) {

    private var listOfItems = theList

    fun removeItem(position: Int) {
        listOfItems = listOfItems.remove(position)
        notifyDatasetChanged()
    }
}

val featured = view.findViewById(R.id.featured) as Button
// set on-click listener
featured.setOnClickListener {
       adapter.removeItem(1)
}

class StaggeredProductCardRecyclerViewAdapter(private val initList: List<ProductEntry>?) : RecyclerView.Adapter<StaggeredProductCardViewHolder>() {

    private var productList: List<ProductEntry>? = initList

    override fun getItemViewType(position: Int): Int {
        return position % 3
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): StaggeredProductCardViewHolder {
        var layoutId = R.layout.shr_staggered_product_card_first
        if (viewType == 1) {
            layoutId = R.layout.shr_staggered_product_card_second
        } else if (viewType == 2) {
            layoutId = R.layout.shr_staggered_product_card_third
        }

        val layoutView = LayoutInflater.from(parent.context).inflate(layoutId, parent, false)
        return StaggeredProductCardViewHolder(layoutView)
    }

    override fun onBindViewHolder(holder: StaggeredProductCardViewHolder, position: Int) {
        if (productList != null && position < productList.size) {
            val product = productList[position]
            holder.productTitle.text = product.title
            holder.productPrice.text = product.price
            ImageRequester.setImageFromUrl(holder.productImage, product.url)
        }
    }

    override fun getItemCount(): Int {
        return productList?.size ?: 0
    }

    fun replaceList(items: List<ProductEntry>?) {
        productList = items
        notifyDatasetChanged()
    }
}

...
featured.setOnClickListener {
       adapter.replaceList(ProductEntry.initProductEntryList(resources, "featured"))
}

-----------------------

    supportFragmentManager.beginTransaction().detach(yourFragment).commitNow()
    supportFragmentManager.beginTransaction().attach(yourFragment).commitNow()

Extending MaterialButton: Should it be done? SavedState has package visibility

Copy

Download

public class MyButton extends MaterialButton
{
    private String text;

    //....


    static class SavedState extends AbsSavedState {
        @Nullable CharSequence myText;

        SavedState(Parcelable superState) {
            super(superState);
        }

        SavedState(@NonNull Parcel source, ClassLoader loader) {
            super(source, loader);
            myText = TextUtils.CHAR_SEQUENCE_CREATOR.createFromParcel(source);
        }

        @Override
        public void writeToParcel(@NonNull Parcel dest, int flags) {
            super.writeToParcel(dest, flags);
            TextUtils.writeToParcel(myText, dest, flags);
        }

        @NonNull
        @Override
        public String toString() {
            return "MyButton.SavedState{"
                    + " text="
                    + myText
                    + "}";
        }

        public static final Creator<SavedState> CREATOR =
                new ClassLoaderCreator<SavedState>() {
                    @NonNull
                    @Override
                    public SavedState createFromParcel(@NonNull Parcel in, ClassLoader loader) {
                        return new SavedState(in, loader);
                    }

                    @Nullable
                    @Override
                    public SavedState createFromParcel(@NonNull Parcel in) {
                        return new SavedState(in, null);
                    }

                    @NonNull
                    @Override
                    public SavedState[] newArray(int size) {
                        return new SavedState[size];
                    }
                };
    }

    @Nullable
    @Override
    public Parcelable onSaveInstanceState() {
        Parcelable superState = super.onSaveInstanceState();
        SavedState ss = new SavedState(superState);
        ss.myText = text;
        return ss;
    }

    @Override
    public void onRestoreInstanceState(@Nullable Parcelable state) {
        if (!(state instanceof SavedState)) {
            super.onRestoreInstanceState(state);
            return;
        }
        SavedState ss = (SavedState) state;
        super.onRestoreInstanceState(ss.getSuperState());
        text = ss.myText.toString();
    }
}

Material DateRangePicker enable Accept button with single date

Copy

Download

@SuppressLint("RestrictedApi")
class CustomMaterialDatePicker : RangeDateSelector() {

    private var first = true
    private var firstDate: Long? = null

    override fun select(selection: Long) {
        if (first || selection < firstDate!!) {
            super.select(selection)
            super.select(selection)
            firstDate = selection
            first = false
        } else {
            super.select(firstDate!!)
            super.select(selection)
            if (selection != firstDate) {
                first = true
            }
        }
    }
}

@SuppressLint("RestrictedApi")
private fun showDatePicker() {
    val selector = CustomMaterialDatePicker()
    val builder = MaterialDatePicker.Builder.customDatePicker(selector)
    builder.setTheme(R.style.CustomCalendarDatePickerTheme)
    builder.setCalendarConstraints(limitRange().build())

    val picker = builder.build()
    picker.addOnPositiveButtonClickListener {
        tv_date.text = formatRange(it.first!!, it.second!!)
        startDate = it.first
        endDate = it.second
    }

    picker.show(supportFragmentManager, picker.toString())
}

-----------------------

@SuppressLint("RestrictedApi")
class CustomMaterialDatePicker : RangeDateSelector() {

    private var first = true
    private var firstDate: Long? = null

    override fun select(selection: Long) {
        if (first || selection < firstDate!!) {
            super.select(selection)
            super.select(selection)
            firstDate = selection
            first = false
        } else {
            super.select(firstDate!!)
            super.select(selection)
            if (selection != firstDate) {
                first = true
            }
        }
    }
}

@SuppressLint("RestrictedApi")
private fun showDatePicker() {
    val selector = CustomMaterialDatePicker()
    val builder = MaterialDatePicker.Builder.customDatePicker(selector)
    builder.setTheme(R.style.CustomCalendarDatePickerTheme)
    builder.setCalendarConstraints(limitRange().build())

    val picker = builder.build()
    picker.addOnPositiveButtonClickListener {
        tv_date.text = formatRange(it.first!!, it.second!!)
        startDate = it.first
        endDate = it.second
    }

    picker.show(supportFragmentManager, picker.toString())
}

See all related Code Snippets

Community Discussions

Trending Discussions on material-components-android

Android material CardView ripple effect changes content color
How does this android code get the activity from ? material-components-android-codelabs
How to implement only a single component from a dependency in Android Studio?
How to add multiple project folders in Github repository
How to run the selected project from the Github repository in Android Studio
BottomNavigationView - why is there not enough space for the badge Drawable?
Return MaterialTimePicker
LiveData update of BadgeDrawable in ToolBar MenuItem
CountDown Timer with CircularProgressIndicator
Floating Action Button Android Studio does not show me background color and image in preview

Trending Discussions on material-components-android

QUESTION

Android material CardView ripple effect changes content color

Asked 2021-Dec-18 at 08:01

I recently moved from using custom card components to material design 3 cards. To my surprise, the ripple color, when pressing on the card, changes the content color. I tried this on the catalog project of the material-design-components repository and the card behaves the same way. My current code for changing the ripple color and the card background:

<style name="Widget.App.Card.Filled" parent="Widget.Material3.CardView.Filled">
   <item name="rippleColor">#4D4D4D</item>
   <item name="cardBackgroundColor">@android:color/transparent</item>
</style>

I also got a demo showing this behavior: https://i.imgur.com/t4WW4CY.mp4. The font color changes to a light gray based on the ripple effect. I am also using material buttons but there the ripple effect is not affecting the content. I am using the version 1.5.0-rc01.

Does anyone have an idea if that is intended and how I can only change the background color on press using the attributes given by the material design components.

Update:

My card view XML (its the one from the material-components github + custom style):

<com.google.android.material.card.MaterialCardView
      style="@style/Widget.App.Card.Filled"
      android:id="@+id/card"
      android:layout_width="match_parent"
      android:layout_height="0dp"
      android:layout_weight="0.4"
      android:layout_margin="16dp"
      android:clickable="true"
      android:focusable="true"
      app:contentPadding="@dimen/cat_card_content_padding">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="@string/cat_card_states_card_content"
        android:textAppearance="?attr/textAppearanceBody1"/>
  </com.google.android.material.card.MaterialCardView>

ANSWER

Answered 2021-Dec-18 at 08:01

I think this is happening because of the ripple color applying to the foreground instead of background. So yeah this is intended and i don't think you can change that.

Have a look at the source code : MaterialCardViewHelper.java

Note : This does not happen in buttons bcoz buttons applies ripple to the background instead of foreground.

Source code for button : MaterialButtonHelper.java

Source https://stackoverflow.com/questions/70379992

QUESTION

BottomNavigationView - why is there not enough space for the badge Drawable?

Asked 2021-Jun-23 at 10:21

I use a BottomNavigationView from the material library: const val material = "com.google.android.material:material:1.4.0-rc01"

and set/update a badge on it using the following binding:

@BindingAdapter("cartCount")
fun BottomNavigationView.updateCartCount(count: Int) {
    getOrCreateBadge(R.id.action_cart).apply {
        isVisible = count > 0
        if (isVisible) number = count
    }
}

Here's the View in XML (inside a ConstraintLayout)

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav"
        cartCount="@{viewModel.cartCount}"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/white"
        app:elevation="8dp"
        app:itemIconTint="@color/bottom_nav_item_color"
        app:itemTextColor="@color/bottom_nav_item_color"
        app:labelVisibilityMode="labeled"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/menu_bottom_nav" />

My issue is that there seems to be not enough space for the badge:

Which is more noticeable when the item is selected:

What I have tried to fix the issue, to no avail:

using a different material version, trying different versions (starting with 1.3.0)
increasing the height of the BottomNavigationView, here I set it to a ridiculous 100dp:

changing the size of the icons
setting bottom_navigation_notification_padding and some other attrs from this answer
looking for some info in the material release notes

I was unable to find any "known issue" related to my problem. What am I missing?

ANSWER

Answered 2021-Jun-23 at 10:21

In com.google.android.material:material v1.3.0 and above you can use setVerticalOffset or setHorizontalOffset of BadgeDrawable to move the Badge vertically or horizontally with a specific amount in pixels.

setVerticalOffset(int px)

Sets how much (in pixels) to vertically move this badge towards the center of its anchor.

setHorizontalOffset(int px)

Sets how much (in pixels) to horizontally move this badge towards the center of its anchor.

Example:

val menuItemId: Int = bottomNavigation.getMenu().getItem(1).getItemId()
val badge: BadgeDrawable = bottomNavigation.getOrCreateBadge(menuItemId)
badge.setVisible(true)
badge.setNumber(4)
badge.setVerticalOffset(10) //value in pix
badge.setHorizontalOffset(-10) //value in pix

Result with and without offset:

Source https://stackoverflow.com/questions/68019544

QUESTION

LiveData update of BadgeDrawable in ToolBar MenuItem

Asked 2021-Mar-11 at 07:50

I want to show a badge on a toolbar action. The badge number is updated by a LiveData value.

This is how I attach the badge:

BadgeUtils.attachBadgeDrawable(inboxBadgeDrawable, toolbar, R.id.menu_inbox);

I tried different places for that call, including Activity.onCreateOptionsMenu(), Activity.onPrepareOptionsMenu() and androidx.lifgecycle.Observer.onChanged().

When anything changes (toolbar or badge content), the badge is misplaced, traveling down left. Or it is duplicated to another action.

I guess attachBadgeDrawable tries to find the container view of R.id.menu_inbox inside the toolbar, inserts the badge and updates it's offsets. If the container view of the menu item changes, the old container view still has the old badge and there is no (sensible) way to remove it. Also, application of the offsets seems to stack.

So, is there any other intended way of using the BadgeDrawable on a toolbar action icon?

I understand that this feature is still experimental. Will this issue be addressed and if yes, how long will it approximately take? (I use com.google.android.material:material:1.3.0-beta01 right now.)

This question is mainly addressed to the developers of the component because usage questions should be asked here according to https://github.com/material-components/material-components-android.

EDIT: I also created an issue (feature request) on the project's tracker: https://github.com/material-components/material-components-android/issues/1967

ANSWER

Answered 2021-Feb-26 at 13:00

I'm not sure it is an official solution but this is still a workaround. I ended up with detaching the BadgeDrawable on every onPrepareOptionsMenu, in case the menu items were changed or rearranged

// This is an indicator of whether we need to show the badge or not
private var isFilterOn: Boolean = false

private var filterBadge: BadgeDrawable? = null

@SuppressLint("UnsafeExperimentalUsageError")
override fun onPrepareOptionsMenu(menu: Menu) {
    super.onPrepareOptionsMenu(menu)

    val filterItem = menu.findItem(R.id.action_filter)
    val toolbar = requireActivity().findViewById<Toolbar>(R.id.toolbar)

    if(filterBadge != null) {
        BadgeUtils.detachBadgeDrawable(filterBadge!!, toolbar, R.id.action_filter)
        filterBadge = null
    }

    if(isFilterOn) {
        filterBadge = BadgeDrawable.create(requireContext()).also {
            BadgeUtils.attachBadgeDrawable(it, toolbar, R.id.action_filter)
        }
    }

}

Source https://stackoverflow.com/questions/65597372

QUESTION

CountDown Timer with CircularProgressIndicator

Asked 2020-Dec-19 at 10:27

I try to add a countdown timer with a circular progress indicator (from material design components) into my app but I have problems with the setting of the initial value of the circular progress indicator.

Here are the relevant parts of my code I have wrote:

countDownTimer = object : CountDownTimer(60000, 1000) {

                    override fun onTick(millisUntilFinished: Long) {
                        binding.apply {
                            countDownTimer.text =  (millisUntilFinished / 1000).toString()
                            progressIndicator.progress = (millisUntilFinished / 1000).toInt()
                        }
                    }
                    override fun onFinish() {
                        // if 60 secs are finished, then we stop the record
                        stopRecording()
                    }
                }

<androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top|center">

            <TextView
                android:id="@+id/count_down_timer"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:textSize="20sp"
                android:textStyle="bold"
                android:background="@color/black"
                android:textColor="@color/white"
                tools:text="60"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent" />

            <com.google.android.material.progressindicator.CircularProgressIndicator
                android:id="@+id/progress_indicator"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                app:indicatorColor="@color/navajowhite"
                app:trackCornerRadius="10dp"
                app:indicatorSize="15dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintTop_toBottomOf="@id/count_down_timer"
                android:layout_margin="10dp"/>

        </androidx.constraintlayout.widget.ConstraintLayout>

I let starting the counter from 60 secs to 0. But I think that the progress value of my circular progress indicator is wrong. Because its initial start looks like this ( I created a sketch to show you the initial state of circular progress indicator when the counter starts) :

As you can see, the circle is not complete. What you can not see is that the "track" of the circular progress indicator decrements from this until 0 is reached. So, somehow the decrementing of the circular progress indicator works. But the starting point is wrong.

What I want is an initial start that should look like this:

What I am doing wrong here ?

ANSWER

Answered 2020-Dec-19 at 10:27

Your progress isn't calculated correctly.

progressIndicator.progress = (millisUntilFinished / 1000).toInt()

If millisUntilFinished == 59000, you will end up with a progress of 59. You should be calculating a percentage here instead of this.

Source https://stackoverflow.com/questions/65368760

QUESTION

Floating Action Button Android Studio does not show me background color and image in preview

Asked 2020-Nov-13 at 04:59

I am new to android. I am trying to learn Floating action button. I was following this video on youtube .

But my preview does not show + icon and not the background color which I have applied in my code as you can see. When i run my project on an actual device it displays both image and background color. But not in my android preview.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/floatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="40dp"
        android:layout_marginBottom="36dp"
        android:backgroundTint="@color/design_default_color_primary"
        android:clickable="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:srcCompat="@drawable/ic_add_black_24dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

Preview

Screenshot of my preview in android Studio

Build.gradle (app)

apply plugin: 'com.android.application'

android {
    compileSdkVersion 29
    buildToolsVersion "29.0.3"

    defaultConfig {
        applicationId "com.example.myapplication"
        minSdkVersion 21
        targetSdkVersion 29
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }

}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])

    implementation 'androidx.appcompat:appcompat:1.2.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.2'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'

    implementation 'com.google.android.material:material:1.2.1'
}

My Configuration

Android Studio: 3.6.1

Android Studio 3.6.1

Build #AI-192.7142.36.36.6241897, built on February 27, 2020
Runtime version: 1.8.0_212-release-1586-b04 amd64
VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
Windows 10 10.0
GC: ParNew, ConcurrentMarkSweep
Memory: 1237M
Cores: 8
Registry: ide.new.welcome.screen.force=true
Non-Bundled Plugins:

I don't know for sure but could be related to this

ANSWER

Answered 2020-Nov-13 at 04:59

This is probably a bug in Android Studio version you are using.

You can try the latest updated version to resolve this error.

Update Android Studio

Android Studio > Menu bar > Help>check for updates.

Source https://stackoverflow.com/questions/64799640

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install material-components-android

For information on how to get started with Material Components for Android, take a look at our Getting Started guide.

Support

For usage questions: ask on Stack Overflow. Bugs or feature requests should be submitted at our GitHub Issues section.

DOWNLOAD this Library from

Reuse Trending Solutions

14 best Python Telegram Bot

21 best C# Game Development

Build AI Fake News Detector

Build Text Summarizer in Python

Getting Started with Web3

24 best Python Blockchain

26 best Python Face Recognition

Build Ludo Game in Python

Build Location Based AR App

Build AI Study Assistant Bot

Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 430 million Knowledge Items

Find more libraries

Reuse Solution Kits and Libraries Curated by Popular Use Cases

Save this library and start creating your kit

Explore Related Topics

User Interface

Share this Page

Reuse User Interface Kits

Getting Started with Web3

Workplace Well-Being Solutions

Experiment with NFT

Refugee Support Solutions

24 best JavaScript Smart contract

See all related Kits

Consider Popular User Interface Libraries

react-native

by facebook

ant-design

by ant-design

material-ui

by mui-org

materialize

by Dogfalo

vuetify

by vuetifyjs

See all User Interface Libraries

Try Top Libraries by material-components

material-components-web

by material-components TypeScript

material-web

by material-components TypeScript

material-components-web-components

by material-components TypeScript

material-components-android-examples

by material-components Kotlin

material-components-web-react

by material-components TypeScript

See all Libraries by this author

Compare User Interface Libraries with Highest Support

react-native

by facebook

ant-design

by ant-design

material-ui

by mui-org

material-components-android

by material-components

vuetify

by vuetifyjs

See all User Interface Libraries

Compare User Interface Libraries with Highest Quality

Tanaguru

by Tanaguru

auid

by IanGClifton

Ultimate_Theme_UI_Template

by designrifts

MUI.js

by vorburger

wicket-shieldui

by shieldui

See all User Interface Libraries

Compare User Interface Libraries with Highest Security

StaggeredGridView

by maurycyw

auid

by IanGClifton

SwingTutorials

by BranislavLazic

Tanaguru

by Tanaguru

HoloColorPicker

by LarsWerkman

See all User Interface Libraries

Compare User Interface Libraries with Permissive License

TH-ProgressButton

by torryharris

AndroidViewUtils

by Sage42

holoaccent

by negusoft

zookeeper-book-example

by fpj

HoloColorPicker

by LarsWerkman

See all User Interface Libraries

Compare User Interface Libraries with Highest Reuse

CameraButton

by hluhovskyi

font-v

by source-foundry

glaze

by font-bakers

font-unicode

by source-foundry

Android-MultiStateListView

by jenzz

See all User Interface Libraries

Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 430 million Knowledge Items

Find more libraries

Reuse Solution Kits and Libraries Curated by Popular Use Cases

Save this library and start creating your kit

material-components-android | Modular and customizable Material Design UI components for Android | User Interface library

kandi X-RAY | material-components-android Summary

material-components-android Key Features

material-components-android Examples and Code Snippets

Community Discussions

Trending Discussions on material-components-android

Vulnerabilities

Install material-components-android

Support

DOWNLOAD this Library from

Reuse Trending Solutions

Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 430 million Knowledge Items

Reuse Solution Kits and Libraries Curated by Popular Use Cases

Reuse User Interface Kits

Consider Popular User Interface Libraries

Try Top Libraries by material-components

Compare User Interface Libraries with Highest Support

Compare User Interface Libraries with Highest Quality

Compare User Interface Libraries with Highest Security

Compare User Interface Libraries with Permissive License

Compare User Interface Libraries with Highest Reuse

Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 430 million Knowledge Items

Reuse Solution Kits and Libraries Curated by Popular Use Cases

Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 430 million Knowledge Items

Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 430 million Knowledge Items