Bottom Navigation Bar - Tabs

By -
Bottom Navigation Tabs is Bottom Tier/Layer of tabs, to perform some function when user click this tabs. It consists of three to five tabs. Normally we load fragment on tap of this tab. Tabs is designed with icon and its name in text.





build.gradle (module:app)
apply plugin: 'com.android.application'

android {
  compileSdkVersion 28
  defaultConfig {
      applicationId "com.thecodeexpo.bottomn_navigation"
      minSdkVersion 15
      targetSdkVersion 28
      versionCode 1
      versionName "1.0"
      testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
  }
  buildTypes {
      release {
          minifyEnabled false
          proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
      }
  }
}

dependencies {
  implementation fileTree(dir: 'libs', include: ['*.jar'])
  implementation 'com.android.support:appcompat-v7:28.0.0'
  implementation 'com.android.support:design:28.0.0'
  implementation 'com.android.support.constraint:constraint-layout:1.1.3'
  implementation 'com.android.support:support-vector-drawable:28.0.0'
  implementation 'com.android.support:design:28.0.0'
}
Menu (navigation.xml)
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

  <item
      android:id="@+id/navigation_search"
      android:icon="@drawable/ic_home_black_24dp"
      android:title="Search" />

  <item
      android:id="@+id/navigation_register"
      android:icon="@drawable/ic_dashboard_black_24dp"
      android:title="Register" />

  <item
      android:id="@+id/navigation_donate"
      android:icon="@drawable/ic_dashboard_black_24dp"
      android:title="Donate" />
  <item
      android:id="@+id/navigation_inactive"
      android:icon="@drawable/ic_dashboard_black_24dp"
      android:title="Inactive" />

</menu>
Activity Layout (activity_main.xml)
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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/container"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".MainActivity">

  <FrameLayout
      android:id="@+id/frame"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_margin="10dp" />

  <android.support.design.widget.BottomNavigationView
      android:id="@+id/navigation"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_marginStart="0dp"
      android:layout_marginEnd="0dp"
      android:background="?android:attr/windowBackground"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent"
      app:menu="@menu/navigation" />

</android.support.constraint.ConstraintLayout>
Activity Class (MainActivity.java)
public class MainActivity extends AppCompatActivity {

  FragmentTransaction fragmentTransaction;
  Fragment fragment;

  private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
          = new BottomNavigationView.OnNavigationItemSelectedListener() {

      @Override
      public boolean onNavigationItemSelected(@NonNull MenuItem item) {
          switch (item.getItemId()) {
              case R.id.navigation_search:
                  fragmentTransaction = getFragmentManager().beginTransaction();
                  fragment = new SearchFragment();
                  fragmentTransaction.replace(R.id.frame, fragment);
                  fragmentTransaction.commit();
                  return true;
              case R.id.navigation_register:
                  fragmentTransaction = getFragmentManager().beginTransaction();
                  fragment = new RegisterFragment();
                  fragmentTransaction.replace(R.id.frame, fragment);
                  fragmentTransaction.commit();
                  return true;
              case R.id.navigation_donate:
                  fragmentTransaction = getFragmentManager().beginTransaction();
                  fragment = new DonateFragment();
                  fragmentTransaction.replace(R.id.frame, fragment);
                  fragmentTransaction.commit();
                  return true;
              case R.id.navigation_inactive:
                  fragmentTransaction = getFragmentManager().beginTransaction();
                  fragment = new InactiveFragment();
                  fragmentTransaction.replace(R.id.frame, fragment);
                  fragmentTransaction.commit();
                  return true;
          }
          return false;
      }
  };

  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation);
      navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
  }

}
Fragment Layout (search_fragment.xml)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  android:padding="10dp">

  <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_margin="5dp"
      android:orientation="horizontal">

      <Spinner
          android:id="@+id/select_group"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_margin="5dp"
          android:layout_weight="1"
          android:entries="@array/blood_groups"
          android:padding="10dp" />
      <Spinner
          android:id="@+id/select_location"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_margin="5dp"
          android:layout_weight="1"
          android:entries="@array/cities"
          android:padding="10dp" />
  </LinearLayout>

  <Button
      android:id="@+id/submit_search"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_margin="5dp"
      android:background="@color/red"
      android:textAppearance="@android:style/TextAppearance.DeviceDefault.Large"
      android:text="Search Donors"
      android:textColor="@color/white" />
  <ListView
      android:id="@+id/list"
      android:scrollbars="none"
      android:layout_margin="5dp"
      android:layout_width="match_parent"
      android:layout_height="wrap_content">
  </ListView>


</LinearLayout>
Fragment Class (SearchFragment.java)
public class SearchFragment extends Fragment {
  View view;
  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
      view = inflater.inflate(R.layout.search_fragment, container, false);
      ((AppCompatActivity) getActivity()).getSupportActionBar().setTitle("Search");



      return view;
  }
}

Comments

Post a Comment