7

¿Como se puede realizar un barra de botones desplegable? tal como google map

gif representando la acción del menú desplegable https://cdn.techjuice.pk/wp-content/uploads/2017/02/g-map.gif

introducir la descripción de la imagen aquí

Si tienen alguna idea seria de gran ayuda dejo los codigo xml y java de la barra de botones inferiores no desplegable

introducir la descripción de la imagen aquí

Lo principal de la barra de botones

java

mBottomNav.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            // handle desired action here
            // One possibility of action is to replace the contents above the nav bar
            // return true if you want the item to be displayed as the selected item
            return true;
        }
    });

XML

<android.support.design.widget.BottomNavigationView
   android:id="@+id/navigation"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_gravity="start"
   design:menu="@menu/bottom_nav_items" />

xml botones

<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:id="@+id/menu_home"
    android:title="@string/menu_home"
    android:icon="@drawable/ic_home_black"
    />
<item
    android:id="@+id/menu_search"
    android:title="@string/menu_search"
    android:icon="@drawable/ic_search_black"
    />

<item
    android:id="@+id/menu_notifications"
    android:title="@string/menu_notifications"
    android:icon="@drawable/ic_notifications_black" /> </menu>

EL codigo completo java Menu

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;


/**
 * Fragment class for each nav menu item
 */
public class MenuFragment extends Fragment {
    private static final String ARG_TEXT = "arg_text";
    private static final String ARG_COLOR = "arg_color";

    private String mText;
    private int mColor;

    private View mContent;
    private TextView mTextView;

    public static Fragment newInstance(String text, int color) {
        Fragment frag = new MenuFragment();
        Bundle args = new Bundle();
        args.putString(ARG_TEXT, text);
        args.putInt(ARG_COLOR, color);
        frag.setArguments(args);
        return frag;
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_menu, container, false);
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        // retrieve text and color from bundle or savedInstanceState
        if (savedInstanceState == null) {
            Bundle args = getArguments();
            mText = args.getString(ARG_TEXT);
            mColor = args.getInt(ARG_COLOR);
        } else {
            mText = savedInstanceState.getString(ARG_TEXT);
            mColor = savedInstanceState.getInt(ARG_COLOR);
        }

        // initialize views
        mContent = view.findViewById(R.id.fragment_content);
        mTextView = (TextView) view.findViewById(R.id.text);

        // set text and background color
        mTextView.setText(mText);
        mContent.setBackgroundColor(mColor);
    }

    @Override
    public void onSaveInstanceState(Bundle outState) {
        outState.putString(ARG_TEXT, mText);
        outState.putInt(ARG_COLOR, mColor);
        super.onSaveInstanceState(outState);
    }
}

java MainActivity

import android.os.Bundle;
import android.support.annotation.ColorRes;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {
    private static final String SELECTED_ITEM = "arg_selected_item";

    private BottomNavigationView mBottomNav;
    private int mSelectedItem;

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

        mBottomNav = (BottomNavigationView) findViewById(R.id.navigation);
        mBottomNav.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                selectFragment(item);
                return true;
            }
        });

        MenuItem selectedItem;
        if (savedInstanceState != null) {
            mSelectedItem = savedInstanceState.getInt(SELECTED_ITEM, 0);
            selectedItem = mBottomNav.getMenu().findItem(mSelectedItem);
        } else {
            selectedItem = mBottomNav.getMenu().getItem(0);
        }
        selectFragment(selectedItem);
    }

    @Override
    protected void onSaveInstanceState(Bundle outState) {
        outState.putInt(SELECTED_ITEM, mSelectedItem);
        super.onSaveInstanceState(outState);
    }

    @Override
    public void onBackPressed() {
        MenuItem homeItem = mBottomNav.getMenu().getItem(0);
        if (mSelectedItem != homeItem.getItemId()) {
            // select home item
            selectFragment(homeItem);
        } else {
            super.onBackPressed();
        }
    }

    private void selectFragment(MenuItem item) {
        Fragment frag = null;
        // init corresponding fragment
        switch (item.getItemId()) {
            case R.id.menu_home:
                frag = MenuFragment.newInstance(getString(R.string.text_home),
                        getColorFromRes(R.color.color_home));
                break;
            case R.id.menu_notifications:
                frag = MenuFragment.newInstance(getString(R.string.text_notifications),
                        getColorFromRes(R.color.color_notifications));
                break;
            case R.id.menu_search:
                frag = MenuFragment.newInstance(getString(R.string.text_search),
                        getColorFromRes(R.color.color_search));
                break;
        }

        // update selected item
        mSelectedItem = item.getItemId();

        // uncheck the other items.
        for (int i = 0; i< mBottomNav.getMenu().size(); i++) {
            MenuItem menuItem = mBottomNav.getMenu().getItem(i);
            menuItem.setChecked(menuItem.getItemId() == item.getItemId());
        }

        updateToolbarText(item.getTitle());

        if (frag != null) {
            FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
            ft.add(R.id.container, frag, frag.getTag());
            ft.commit();
        }
    }

    private void updateToolbarText(CharSequence text) {
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.setTitle(text);
        }
    }

    private int getColorFromRes(@ColorRes int resId) {
        return ContextCompat.getColor(this, resId);
    }
}

XML ACTIVITY

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:design="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.segunfamisa.sample.bottomnav.MainActivity">

    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#f1f1f1">

    </FrameLayout>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="start"
        design:menu="@menu/bottom_nav_items" />
</LinearLayout>

XML MENU

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/fragment_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.segunfamisa.sample.bottomnav.MenuFragment">

    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textColor="@android:color/white"
        android:gravity="center"
        />

</RelativeLayout>
1

2 respuestas 2

1

Implementación

El Bottom navigation drawe inferior es un Modal Bottom Sheet y sigue las mismas reglas de implementación.

Los detalles de implementación para este comportamiento son los siguientes. Se debe crear un archivo de menú xml para el Navigation View que se incluirá en el drawer should en res/menu.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <group android:checkableBehavior="none">
        <item
            android:id="@+id/nav1"
            android:icon="@drawable/baseline_mail_white_24"
            android:title="@string/nav_item1" />
        <item
            android:id="@+id/nav2"
            android:icon="@drawable/baseline_bookmark_white_24"
            android:title="@string/nav_item2" />
        <item
            android:id="@+id/nav3"
            android:icon="@drawable/baseline_message_white_24"
            android:title="@string/nav_item3" />
        <item
            android:id="@+id/nav4"
            android:icon="@drawable/baseline_note_white_24"
            android:title="@string/nav_item4" />
        <item
            android:id="@+id/nav5"
            android:icon="@drawable/baseline_location_on_white_24"
            android:title="@string/nav_item5" />
        <item
            android:id="@+id/nav6"
            android:icon="@drawable/baseline_sync_white_24"
            android:title="@string/nav_item6" />
        <item
            android:id="@+id/nav7"
            android:icon="@drawable/baseline_cloud_upload_white_24"
            android:title="@string/nav_item7" />
        <item
            android:id="@+id/nav8"
            android:icon="@drawable/baseline_favorite_white_24"
            android:title="@string/nav_item8" />
        <item
            android:id="@+id/nav9"
            android:icon="@drawable/baseline_chrome_reader_mode_white_24"
            android:title="@string/nav_item9" />
        <item
            android:id="@+id/nav10"
            android:icon="@drawable/baseline_select_all_white_24"
            android:title="@string/nav_item10" />
        <item
            android:id="@+id/nav11"
            android:icon="@drawable/baseline_sort_white_24"
            android:title="@string/nav_item11" />
        <item
            android:id="@+id/nav12"
            android:icon="@drawable/baseline_access_time_white_24"
            android:title="@string/nav_item12" />
        <item
            android:id="@+id/nav13"
            android:icon="@drawable/baseline_data_usage_white_24"
            android:title="@string/nav_item13" />

    </group>
</menu>

Se debe crear un archivo de para el diseño para el fragmento del bottom navigation drawer.

<?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:id="@+id/navigation_view_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:behavior_hideable="true"
    app:layout_behavior="@string/bottom_sheet_behavior">

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_marginTop="4dp"
        android:paddingBottom="40dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view2"
        app:menu="@menu/bottom_nav_drawer_menu"
        app:theme="@style/NavigationDrawerStyle" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="12dp"
        android:layout_marginTop="16dp"
        android:fontFamily="@font/rubik_medium"
        android:text="@string/bottom_sheet_name"
        android:textColor="@color/colorAccent"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintStart_toEndOf="@+id/imageView"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="2dp"
        android:text="@string/bottom_sheet_email"
        android:textColor="@color/colorAccent"
        app:layout_constraintStart_toStartOf="@+id/textView"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginStart="24dp"
        android:background="@drawable/baseline_account_circle_black_48"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/textView" />

    <View
        android:id="@+id/view2"
        android:layout_width="match_parent"
        android:layout_height="2dip"
        android:layout_marginTop="15dp"
        android:background="#447e7e7e"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />

    <ImageView
        android:id="@+id/close_imageview"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="8dp"
        android:background="@drawable/baseline_close_black_24"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="@+id/textView2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/textView" />

</androidx.constraintlayout.widget.ConstraintLayout>

Necesitas una clase que extienda de BottomSheetDialogFragment

class BottomNavigationDrawerFragment: BottomSheetDialogFragment() {

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return inflater.inflate(R.layout.fragment_bottom_navigation_drawer, container, false)
    }

    override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)

        navigation_view.setNavigationItemSelectedListener { menuItem ->

            when (menuItem.itemId) {

            }

            true
        }
    }
}

Cuando se hace clic en el icono del navigation drawer, se creará una instancia de este fragmento y se mostrará.

override fun onOptionsItemSelected(item: MenuItem?): Boolean {
        when (item!!.itemId) {
            android.R.id.home -> {
                val bottomNavDrawerFragment = BottomNavigationDrawerFragment()
                bottomNavDrawerFragment.show(supportFragmentManager, bottomNavDrawerFragment.tag)
            }
        }
        return true
}
0

Puedes agregar la propiedad app:layout_behavior="android.support.design.widget.BottomSheetBehavior" en el contenedor principar de tu xml, la propiedad app:behavior_peekHeight="0dp", hace que la vista permanezca oculta, programáticamente puedes cambiar el estado de ésta. Dentro del contenedor principal agregas el BottomNavigationView.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.