Cómo utilizar setItemIconTintList con un elemento específico? [BottomNavigationView]

05 Aug, 2023 Programación 0

Estoy tratando de mostrar la foto del usuario en BottomNavigationView pero no sé cómo hacerlo correctamente.

Esta solución funciona bien pero los otros elementos perderán sus colores.

Drawable drawable = activityMainBinding.activityMainBottomNavigationViewBottomNavigation.getMenu().findItem(R.id.menu_bottom_navigation_user).getIcon();
activityMainBinding.activityMainBottomNavigationViewBottomNavigation.setItemIconTintList(null);

Resultado del código

He intentado resolver el problema aplicando el método setItemIconTintList solo en el ítem de usuario.

Drawable drawable = activityMainBinding.activityMainBottomNavigationViewBottomNavigation.getMenu().findItem(R.id.menu_bottom_navigation_user).getIcon();
drawable.setState(null);
drawable.setTintList(null);
drawable.clearColorFilter();
activityMainBinding.activityMainBottomNavigationViewBottomNavigation.getMenu().findItem(R.id.menu_bottom_navigation_user).setIcon(drawable);

Resultado del código

¿Cómo puedo resolver el problema?

Espero que alguien muestre las imágenes adjuntas directamente porque no puedo hacerlo.

davy.ai

August 5, 2023 at 11:51 pm

Una posible solución es crear una clase personalizada BottomNavigationView y sobrescribir el método onDraw() para dibujar manualmente la foto del usuario encima del icono del elemento seleccionado. De esta manera, puedes mantener los colores originales de los demás elementos y solo modificar el elemento del usuario.

Aquí tienes un ejemplo de implementación:

public class CustomBottomNavigationView extends BottomNavigationView {
    private Bitmap mUserPhoto;
    private Paint mPaint;

    public CustomBottomNavigationView(Context context) {
        super(context);
        init();
    }

    public CustomBottomNavigationView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.WHITE);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(4);
    }

    public void setUserPhoto(Bitmap userPhoto) {
        mUserPhoto = userPhoto;
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        // Obtén los límites del icono del elemento seleccionado
        BottomNavigationItemView selectedItemView = (BottomNavigationItemView) getChildAt(getSelectedItemId());
        if (selectedItemView != null) {
            Rect iconBounds = new Rect(selectedItemView.getLeft(), selectedItemView.getTop(), selectedItemView.getRight(), selectedItemView.getBottom());

            // Dibuja la foto del usuario encima del icono del elemento seleccionado
            if (mUserPhoto != null) {
                int radius = Math.min(iconBounds.width(), iconBounds.height()) / 2 - 4;
                Rect photoBounds = new Rect(0, 0, mUserPhoto.getWidth(), mUserPhoto.getHeight());
                RectF photoRectF = new RectF(iconBounds.centerX() - radius, iconBounds.centerY() - radius, iconBounds.centerX() + radius, iconBounds.centerY() + radius);
                canvas.drawBitmap(mUserPhoto, photoBounds, photoRectF, null);
                canvas.drawCircle(iconBounds.centerX(), iconBounds.centerY(), radius, mPaint);
            }
        }
    }
}

Para utilizar esta clase personalizada en tu MainActivity, debes reemplazar el BottomNavigationView en tu diseño con CustomBottomNavigationView y establecer la foto del usuario utilizando el método setUserPhoto():

<com.example.myapp.custombottomnavigationview android:id="@+id/bottom_navigation" android:layout_width="match_parent" android:layout_height="wrap_content" app:menu="@menu/bottom_navigation_menu"></com.example.myapp.custombottomnavigationview>

Bitmap userPhoto = BitmapFactory.decodeResource(getResources(), R.drawable.user_photo);
CustomBottomNavigationView bottomNavigationView = findViewById(R.id.bottom_navigation);
bottomNavigationView.setUserPhoto(userPhoto);

Ten en cuenta que debes ajustar el tamaño y la posición de la foto y el borde del círculo según tus requisitos de diseño.

es.davy.ai

¿Tienes una pregunta?

Cómo utilizar setItemIconTintList con un elemento específico? [BottomNavigationView]

Answer

davy.ai