Category

Android

Category

BottomAppBar Material Component was introduced By Google in 2018. We can say this was the extension of Toolbar. BottomAppBar support FloatingActionButton. FAB anchored to BottomAppBar by using the app:layout_anchor. Both BottomAppBar and FAB we place in CoordinateLayout. Without CoordinateLayout, AppBottomBar show error.

Let’s create an example of BottomAppBar with FAB and RecyclerView.

Please make sure that you have included Google Maven repository something like this

allprojects {
    repositories {
        google()
        jcenter()
        
    }
}

Now we will include Android Material design Gradle in our build.gradle file

implementation 'com.google.android.material:material:1.0.0'

After making these changes in gradle, now sync your project.

Now the setup is ready. Now we will change app theme to material theme.

 <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

Now I will add Coordinate layout in my activity_main.xml file. Now we will Setup the constraints of the coordinate layout. Now we will add three components RecyclerView, BottomAppBar and Fab in coordinate layout.

Here is the full code of the activity_main.xml file

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/countryListing"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <com.google.android.material.bottomappbar.BottomAppBar
            android:id="@+id/appBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            app:backgroundTint="@color/colorPrimary"
            app:fabAlignmentMode="center"
            app:fabCradleMargin="10dp"
            app:hideOnScroll="false"
            app:fabCradleRoundedCornerRadius="10dp"
            app:menu="@menu/menu_bottom_bar"
            app:navigationIcon="@drawable/ic_menu" />

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/floatingBtn"
            android:layout_width="wrap_content"
            android:overScrollMode="ifContentScrolls"
            android:layout_height="wrap_content"
            android:backgroundTint="@color/colorPrimary"
            app:layout_anchor="@id/appBar" />

    </androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

We will discuss the basics of attributes which BottomAppBar is providing to us.

app:fabCardMargin tell to us that how much fab will get margin from BottomAppBar.

app:fabAlignMode tell us that the placement of Fab. We will have only two modes which are the center and end.

app:hideOnScroll tell to us that scrolling behavior of BottomAppBar. When RecyclerView items will scroll then BottomAppBar will hide if this attribute will be true.

Now you can see that we attached FAB to BottomAppBar by using the app:layout_anchor attribute.

Let’s create a layout of RecyclerView items.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp">

    <TextView
        android:id="@+id/txtCountryName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Pakistan"
        android:textColor="@color/colorPrimary"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/txtCountryDescription"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/txtCountryName"
        android:layout_marginStart="5dp"
        android:text="Repulic of Pakistan"
        android:textColor="@android:color/black"
        android:textSize="12sp" />
</RelativeLayout>

Create the Country Model Java class

package com.becody.bottombar;

/**
 * Created by becody.com on 13,07,2019
 */
public class Country {
    private String name;
    private String description;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getDescription() {
        return description;
    }

    public void setDescription(String description) {
        this.description = description;
    }
}

Create CountryAdapter.java class

package com.becody.bottombar;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import java.util.List;

/**
 * Created by becody.com on 13,07,2019
 */
public class CountryAdapter extends RecyclerView.Adapter {
    private List<Country> countryList;

    public CountryAdapter(List<Country> countryList) {
        this.countryList = countryList;
    }

    class CountryViewHolder extends RecyclerView.ViewHolder {
        TextView txtName;
        TextView txtDescription;

        public CountryViewHolder(@NonNull View itemView) {
            super(itemView);
            txtName = itemView.findViewById(R.id.txtCountryName);
            txtDescription = itemView.findViewById(R.id.txtCountryDescription);
        }
    }


    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.adapter_counteries, parent, false);
        return new CountryViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
        CountryViewHolder countryViewHolder = (CountryViewHolder) holder;
        Country country = countryList.get(position);
        countryViewHolder.txtName.setText(country.getName());
        countryViewHolder.txtDescription.setText(country.getDescription());
    }

    @Override
    public int getItemCount() {
        return countryList.size();
    }
}

I added some dummy data in strings.xml class something like that

<resources>
    <string name="app_name">BottomBar</string>
    <string-array name="arr_countries">
        <item>Afghanistan</item>
        <item>Albania</item>
        <item>Algeria</item>
        <item>Andorra</item>
        <item>Angola</item>
        <item>Antigua and Barbuda</item>
        <item>Argentina</item>
        <item>Armenia</item>
        <item>Australia</item>
        <item>Austria</item>
        <item>Azerbaijan</item>
        <item>Bahamas</item>
        <item>Bahrain</item>
        <item>Bangladesh</item>
        <item>Barbados</item>
        <item>Belarus</item>
    </string-array>
    <string-array name="arr_countries_description">
        <item>the Islamic Republic of Afghanistan</item>
        <item>the Republic of Albania</item>
        <item>the People\'s Democratic Republic of Algeria</item>
        <item>the Principality of Andorra</item>
        <item>the Republic of Angola</item>
        <item>Antigua and Barbuda</item>
        <item>the Argentine Republic</item>
        <item>the Republic of Armenia</item>
        <item>Australia</item>
        <item>the Republic of Austria</item>
        <item>the Republic of Azerbaijan</item>
        <item>the Commonwealth of the Bahamas</item>
        <item>the Kingdom of Bahrain</item>
        <item>the People\'s Republic of Bangladesh</item>
        <item>Barbados</item>
        <item>the Republic of Belarus</item>
    </string-array>
    <string name="title_activity_main2">Main2Activity</string>
</resources>

In MainActivity.java class, we will get these values and will add in the Country list.

package com.becody.bottombar;

import android.os.Bundle;
import android.view.View;

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        RecyclerView countryListing = findViewById(R.id.countryListing);
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        layoutManager.setOrientation(RecyclerView.VERTICAL);
        countryListing.setLayoutManager(layoutManager);
        CountryAdapter countryAdapter = new CountryAdapter(fetchCountryInfo());
        countryListing.setAdapter(countryAdapter);
    }

    private List<Country> fetchCountryInfo() {
        List<Country> countryList = new ArrayList<>();
        String[] arrName = getResources().getStringArray(R.array.arr_countries);
        String[] arrDescription = getResources().getStringArray(R.array.arr_countries_description);
        for (int i = 0; i < arrName.length; i++) {
            Country country = new Country();
            country.setName(arrName[i]);
            country.setDescription(arrDescription[i]);
            countryList.add(country);
        }
        return countryList;
    }
}

 

Download Source Code