Как поставить Android BottomAppBar с закругленными углами

Я использую BottomAppBar из google следующим образом:

 <com.google.android.material.bottomappbar.BottomAppBar
            android:id = "@+id/vNavigationBar"
            android:layout_width = "match_parent"
            android:layout_height = "wrap_content">

Пользовательская нижняя панель плоская, и мне нужно добавить закругленные углы на нижней панели (пример изображения ниже)

Как поставить Android BottomAppBar с закругленными углами

Что я должен сделать, чтобы это работало таким образом?

Я настоятельно рекомендую не делать то, что вы задумали, так как это противоречит Руководству по дизайну материалов: material.io/design/components/app-bars-bottom.html#

S. Czop 28.01.2019 18:53
10
1
5 982
3

Ответы 3

вы можете попробовать добавить XML-файл с возможностью рисования формы и добавить в него следующий код

<corners
    android:topLeftRadius = "16dp"
    android:topRightRadius = "16dp" />

А затем установите фон BottomAppBar на рисуемый

в соответствии с это вы можете создать свой класс customView, расширенный из BottomAppBar, и реализовать этот код:

`@Override protected void onLayout(boolean changed, int left, int top, int 
 right, int bottom) {
 super.onLayout(changed, left, top, right, bottom);
 }
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    mNavigationBarWidth = getWidth();
    mNavigationBarHeight = getHeight();
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    mPath.reset();
    mPath = RoundedRect(0, 0, mNavigationBarWidth, mNavigationBarHeight, 50, 50, true);
    canvas.drawPath(mPath, mPaint);
}

`

помните только в каждом конструкторе вашего пользовательского класса, сделайте это:

mPath = new Path();
    mPaint = new Paint();
    mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    mPaint.setColor(Color.WHITE);
    setBackgroundColor(Color.TRANSPARENT);

BottomAppBar работает с MaterialShapeDrawable и вы можете применить к нему скругленные углы (используя RoundedCornerTreatment).

В вашем макете:

  <com.google.android.material.bottomappbar.BottomAppBar
      android:id = "@+id/bottom_app_bar"
      android:layout_width = "match_parent"
      android:layout_height = "wrap_content"
      android:backgroundTint = "@color/..."
      ../>

Затем в коде определите:

//Corner radius
float radius = getResources().getDimension(R.dimen.default_corner_radius);
BottomAppBar bottomAppBar = findViewById(R.id.bottom_app_bar);

MaterialShapeDrawable bottomBarBackground = (MaterialShapeDrawable) bottomAppBar.getBackground();
bottomBarBackground.setShapeAppearanceModel(
       bottomBarBackground.getShapeAppearanceModel()
                .toBuilder()
                .setTopRightCorner(CornerFamily.ROUNDED,radius)
                .setTopLeftCorner(CornerFamily.ROUNDED,radius)
                .build());

Работает также с fabCradle:

<com.google.android.material.bottomappbar.BottomAppBar
    android:id = "@+id/bottomAppBar"
    app:fabAlignmentMode = "center"
    app:fabCradleVerticalOffset = "8dp"
    app:fabCradleMargin = "8dp"
    .../>

Требуется версия 1.1.0.

не работает val shapeAppearanceModel = ShapeAppearanceModel() .toBuilder() .setTopRightCorner(CornerFamily.ROUNDED, 16f) .setTopLeftCorner(CornerFamily.ROUNDED, 16f) .build() ViewCompat.setBackground(bottom_appbar, MaterialShapeDrawable(shapeAppearanceModel))

Akshay Raj. 12.07.2020 04:55

@АкшайРадж. Ваш код работает, только что попробовал. Но 16f != 16dp.

Gabriele Mariotti 12.07.2020 14:34

@АкшайРадж. Я обновил ответ. BottomAppBar обеспечивает MaterialShapeDrawable. Достаточно применить к нему скругленные углы, поменяв ShapeAppearanceModel.

Gabriele Mariotti 14.07.2020 08:25

Это правильный ответ, если вы нацелены на Android L.

Arshad Ali 16.11.2020 08:29

Другие вопросы по теме