Пользовательская панель навигации Android - четверть высоты экрана и прозрачный фон

Question

Я хочу знать, как сделать этот тип пользовательского интерфейса. У меня есть нижняя панель навигации в моем приложении, и когда нажата кнопка добавления, я хочу показать меню дуги, как показано ниже, сохраняя ранее раздутый вид на оставшейся части высоты экрана.

Пример изображения:

Я использовал фрагменты для реализации способа навигации по дну по умолчанию, но как мне настроить его так, чтобы он выглядел следующим образом. Виджет BottomNavigationView не поддерживает частичную визуализацию видов. Есть ли библиотека, которая поддерживает это или пользовательский способ сделать это? Спасибо.

EDIT: Это моя текущая реализация, использующая транзакции фрагментов, фрагменты и виджет нижней навигации по умолчанию:

public class MainActivity extends AppCompatActivity implements BottomNavigationView.OnNavigationItemSelectedListener {

private static final String TAG = MainActivity.class.getSimpleName();

private Toolbar toolbar;
private BottomNavigationView bottomNav;

private Fragment fragment;
private FragmentTransaction transaction;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    init();

}

private void switchFragment(Fragment fragment) {
    transaction = getSupportFragmentManager().beginTransaction();
    transaction.replace(R.id.fragHolder, fragment);
    transaction.addToBackStack(null);
    transaction.commit();
}

private void init() {
    bottomNav = findViewById(R.id.bottomNav);
    toolbar = findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    fragment = new HomeFragment();
    switchFragment(fragment);

    bottomNav.setOnNavigationItemSelectedListener(this);

}

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    if (keyCode == KeyEvent.ACTION_DOWN) {
        super.onKeyDown(keyCode, event);
        return true;
    }
    return false;

}

@Override
public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
    switch (menuItem.getItemId()){
        case R.id.nav_home:
            fragment = new HomeFragment();
            switchFragment(fragment);
            return true;
        case R.id.nav_notifications:
            fragment = new AlertsFragment();
            switchFragment(fragment);
            return true;
        case R.id.nav_add:
            //fragment = new AddFragment();
            //switchFragment(fragment);
            //return true;
            This is where I want to load the curved menu/dialog and ideally the previous screen from Activity Stack or Fragment BackStack will be visible on top and this screen only takes up 20-25% of screen height
        case R.id.nav_messages:
            fragment = new MessagesFragment();
            switchFragment(fragment);
            return true;
        case R.id.nav_profile:
            fragment = new ProfileFragment();
            switchFragment(fragment);
            return true;
    }
    return false;
}
}

Answer 1

Это не полный пример, но, надеюсь, он даст вам представление о том, что вы могли бы сделать.

При этом используется пользовательский BottomSheetDialog, и преимущество с помощью диалогового окна заключается в том, что его легко отклонить с помощью кнопки назад или щелчка за пределами представления.

TestDialog.java

public class TestDialog extends BottomSheetDialog
{
    private Context _context;

    public TestDialog(Context context)
    {
        super(context);
        this._context = context;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);

        Window window = getWindow();
        if (window != null)
            window.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));

        setContentView(R.layout.test_layout);
    }
}

R.layout.test_layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/transparent">

    <View
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:background="@drawable/curve"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="14dp"
        android:background="@color/white"
        android:baselineAligned="false">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical">

            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                app:srcCompat="@drawable/ic_person_black_24dp"
                android:layout_gravity="center_horizontal"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:text="New Session"
                android:textColor="@color/black"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical">

            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                app:srcCompat="@drawable/ic_person_black_24dp"
                android:layout_gravity="center_horizontal"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:text="Enroll Player"
                android:textColor="@color/black"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical">

            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                app:srcCompat="@drawable/ic_person_black_24dp"
                android:layout_gravity="center_horizontal"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:text="New Batch"
                android:textColor="@color/black"/>

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

@ вытяжка / кривая

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle"/>
    </item>
    <item
        android:bottom="-80dp"
        android:left="-100dp"
        android:right="-100dp"
        android:top="0dp">
        <shape android:shape="oval">
            <solid android:color="@color/white" />
        </shape>
    </item>
</layer-list>

Отображение диалога

TestDialog dialog = new TestDialog(MainActivity.this);
tdialog.show();

//This is done in order to make dialog width match the screen width
Window window = dialog.getWindow();
window.setLayout(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);

Что теперь делать

Есть две вещи, которые вы должны реализовать сейчас, если решите пойти по этому пути. Во-первых, нужно убедиться, что само диалоговое окно не имеет фона, сейчас оно не полностью прозрачно, а во-вторых, убедиться, что оно не закрывает ваш BottomNavigationView

.

Пример, как показать диалоговое окно в вашем случае

@Override
public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
    switch (menuItem.getItemId()){
        case R.id.nav_home:
            fragment = new HomeFragment();
            switchFragment(fragment);
            return true;
        case R.id.nav_notifications:
            fragment = new AlertsFragment();
            switchFragment(fragment);
            return true;
        case R.id.nav_add:
            //Show the dialog
            TestDialog dialog = new TestDialog(MainActivity.this);
            tdialog.show();

            //This is done in order to make dialog width match the screen width
            Window window = dialog.getWindow();
            window.setLayout(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);
        case R.id.nav_messages:
            fragment = new MessagesFragment();
            switchFragment(fragment);
            return true;
        case R.id.nav_profile:
            fragment = new ProfileFragment();
            switchFragment(fragment);
            return true;
    }
    return false;
}