Android AppBarLayout Example

By Arvind Rai, September 02, 2023
On this page we will learn to use AppBarLayout in our Android application.
1. AppBarLayout is derived from the LinearLayout which implements material features namely scrolling gestures. Find the fully qualified class name.
com.google.android.material.appbar.AppBarLayout 
2. The children of AppBarLayout can be Toolbar or MaterialToolbar. The children can show scrolling behaviour through
XML
app:layout_scrollFlags 
Programatically.
AppBarLayout.LayoutParams.setScrollFlags(int) 
3. AppBarLayout is used as a direct child of CoordinatorLayout.
4. AppBarLayout also requires a separate scrolling sibling in order to know when to scroll. To bind it, use AppBarLayout.ScrollingViewBehavior.

Now on this page we will create a demo application for AppBarLayout with Toolbar.
Android AppBarLayout Example

Step-1: Create layout for AppBarLayout

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/blue"
            android:theme="@style/ToolBarStyle" />
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/communication"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="?attr/actionBarSize" />

</androidx.coordinatorlayout.widget.CoordinatorLayout> 
res/values/themes.xml
<style name="ToolBarStyle" parent="Theme.AppCompat">
    <item name="android:textColorPrimary">@android:color/white</item>
    <item name="android:textColorSecondary">@android:color/white</item>
    <item name="actionMenuTextColor">@android:color/white</item>
</style> 

Step-2: Create Menu

<menu 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"
    tools:context="com.cp.app.MainActivity">
    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="@string/action_settings"
        app:showAsAction="never" />
    <item
        android:id="@+id/action_account"
        android:title="@string/action_account"
        app:showAsAction="always" />
    <item
        android:id="@+id/action_chat"
        android:title="@string/action_chat"
        app:showAsAction="never" />
</menu> 

Step-3: Create layout to display text

res/layout/row_item.xml
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <TextView
        android:id="@+id/cmTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="35dp"
        android:textSize="30sp" />
</LinearLayout> 

Step-4: Display List

MyRecyclerViewAdapter.java
package com.cp.app;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.recyclerview.widget.RecyclerView;
import java.util.List;

public class MyRecyclerViewAdapter extends RecyclerView.Adapter<MyViewHolder> {
    private List<String> myList;
    private LayoutInflater layoutInflater;
    public MyRecyclerViewAdapter(Context context, List<String> data) {
        this.layoutInflater = LayoutInflater.from(context);
        this.myList = data;
    }
    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = layoutInflater.inflate(R.layout.row_item, parent, false);
        return new MyViewHolder(view);
    }
    @Override
    public void onBindViewHolder(MyViewHolder holder, int position) {
        String itemName = myList.get(position);
        holder.myTextView.setText(itemName);
    }
    @Override
    public int getItemCount() {
        return myList.size();
    }
} 
MyViewHolder.java
package com.cp.app;
import android.view.View;
import android.widget.TextView;
import androidx.recyclerview.widget.RecyclerView;
import com.google.android.material.snackbar.Snackbar;

public class MyViewHolder extends RecyclerView.ViewHolder {
    TextView myTextView;
    public MyViewHolder(View itemView) {
        super(itemView);
        myTextView = itemView.findViewById(R.id.cmTextView);
        itemView.setOnClickListener(view ->
                Snackbar.make(itemView.getRootView(), "Clicked on " + myTextView.getText(), Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show());
    }
} 

Step-5: Main Activity

MainActivity.java
package com.cp.app;
import android.os.Bundle;
import android.view.Menu;
import androidx.appcompat.app.AppCompatActivity;
import androidx.navigation.ui.AppBarConfiguration;
import androidx.recyclerview.widget.DividerItemDecoration;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import com.cp.app.databinding.ActivityMainBinding;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    private AppBarConfiguration mAppBarConfiguration;
    private ActivityMainBinding binding;
    MyRecyclerViewAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding = ActivityMainBinding.inflate(getLayoutInflater());
        setContentView(binding.getRoot());
        setSupportActionBar(binding.toolbar);

        List<String> communications = new ArrayList<>();
        communications.add("Call");
        communications.add("Chat");
        communications.add("Comment");
        communications.add("Duo");
        communications.add("Email");
        communications.add("Notification");
        communications.add("Voicemail");

        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        RecyclerView recyclerView = findViewById(R.id.communication);
        recyclerView.setLayoutManager(layoutManager);

        DividerItemDecoration dividerItemDecoration = new DividerItemDecoration(recyclerView.getContext(),
                layoutManager.getOrientation());
        recyclerView.addItemDecoration(dividerItemDecoration);

        adapter = new MyRecyclerViewAdapter(this, communications);
        recyclerView.setAdapter(adapter);
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }
} 

Reference

Download Source Code

POSTED BY
ARVIND RAI
ARVIND RAI







©2024 concretepage.com | Privacy Policy | Contact Us