Android awesome app bar with tabs in a Coordinator Layout Tutorial – Similar to Samajbook

By | January 10, 2018

In this tutorial, we will create a tabbed android activity which uses Coordinator layout with an Image in an appbar and a blurred image in the background.

Example Apps that use such screen:
image with

We will look at the very basic implementation of such layout.

Lets Begin
Create a new Android project with side navigation or any other activity. We will create a new activity later for our implementation an simply call it from MainActivity of your project.

Add following dependencies in build.gradle of your project:

    compile 'com.jakewharton:butterknife:8.8.1'
    annotationProcessor 'com.jakewharton:butterknife-compiler:8.8.1'
    compile 'de.hdodenhof:circleimageview:2.1.0'
    compile 'com.squareup.picasso:picasso:2.5.2' 

Sync the project now.
These libraries are used for creating circular Image, loading image on imageView etc..

Now create a new Java class named BlurTransformation.java with following content:

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.os.Build.VERSION;
import android.renderscript.Allocation;
import android.renderscript.Allocation.MipmapControl;
import android.renderscript.Element;
import android.renderscript.RenderScript;
import android.renderscript.ScriptIntrinsicBlur;
import com.squareup.picasso.Transformation;

public class BlurTransformation implements Transformation {
    RenderScript rs;

    public BlurTransformation(Context context) {
        this.rs = RenderScript.create(context);
    }

    public Bitmap transform(Bitmap bitmap) {
        try {
            if (VERSION.SDK_INT < 17) {
                return bitmap;
            }
            Bitmap blurredBitmap = bitmap.copy(Config.ARGB_8888, true);
            Allocation input = Allocation.createFromBitmap(this.rs, blurredBitmap, MipmapControl.MIPMAP_FULL, 128);
            Allocation output = Allocation.createTyped(this.rs, input.getType());
            ScriptIntrinsicBlur script = ScriptIntrinsicBlur.create(this.rs, Element.U8_4(this.rs));
            script.setInput(input);
            script.setRadius(20.0f);
            script.forEach(output);
            output.copyTo(blurredBitmap);
            bitmap.recycle();
            return blurredBitmap;
        } catch (Exception e) {
            e.printStackTrace();
            return bitmap;
        }
    }

    public String key() {
        return "blur";
    }
}

The above class is used for creating blurred bitmap of an Image. We will use this class later.
Now create a new Android activity named PageActivity with following content.

package com.marothiatechs.tutorialsface;

import android.os.Bundle;
import android.support.design.widget.AppBarLayout;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.widget.ImageView;

import com.squareup.picasso.Picasso;

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

import butterknife.BindView;
import butterknife.ButterKnife;
import de.hdodenhof.circleimageview.CircleImageView;

public class PageActivity extends AppCompatActivity {

    private ViewPager mViewPager;
    private TabLayout tabLayout;
    CircleImageView image;

    @BindView(R.id.appbar)
    AppBarLayout appBar;

    @BindView(R.id.imgBlurBackground)
    ImageView imgBlurBackground;

    @BindView(R.id.collapsing_toolbar)
    CollapsingToolbarLayout collapsing_toolbar;

    @BindView(R.id.toolbar)
    Toolbar toolbar;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tournament_view);
        ButterKnife.bind(this);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        collapsing_toolbar.setTitle(" ");

        image = (CircleImageView) findViewById(R.id.image);

        Bundle extras = getIntent().getExtras();
        setTitleCollapse();
            Picasso.with(this).load((int) R.drawable.no_image).resize(600, 200)
                    .transform(new BlurTransformation(this)).into(this.imgBlurBackground);

        mViewPager = (ViewPager) findViewById(R.id.container);
        setupViewPager(mViewPager);
        tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(mViewPager);


    }

    private void setTitleCollapse() {
        this.appBar.addOnOffsetChangedListener(new MyOnOffsetChangedListener());
    }

    class MyOnOffsetChangedListener implements AppBarLayout.OnOffsetChangedListener {
        boolean isShow = false;
        int scrollRange = -1;

        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
            if (this.scrollRange == -1) {
                this.scrollRange = appBarLayout.getTotalScrollRange();
            }
            if (this.scrollRange + verticalOffset == 0) {
                collapsing_toolbar.setTitle("Tutorials Face");
                this.isShow = true;
            } else if (this.isShow) {
                collapsing_toolbar.setTitle(" ");
                this.isShow = false;
            }
        }
    }


    DetailFragment fragment;

    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());

        fragment = new DetailFragment();
        fragment.setText("MATCHES");
        adapter.addFragment(fragment, "MATCHES");


        fragment = new DetailFragment();
        fragment.setText("TEAMS");
        adapter.addFragment(fragment, "TEAMS");

        fragment = new DetailFragment();
        fragment.setText("STATS");
        adapter.addFragment(fragment, "STATS");

        fragment = new DetailFragment();
        fragment.setText("STANDS");
        adapter.addFragment(fragment, "STANDS");



        viewPager.setAdapter(adapter);
    }

    class ViewPagerAdapter extends FragmentPagerAdapter {
        private final List<Fragment> mFragmentList = new ArrayList<>();
        private final List<String> mFragmentTitleList = new ArrayList<>();

        public ViewPagerAdapter(FragmentManager manager) {
            super(manager);
        }

        @Override
        public Fragment getItem(int position) {
            return mFragmentList.get(position);
        }

        @Override
        public int getCount() {
            return mFragmentList.size();
        }

        public void addFragment(Fragment fragment, String title) {
            mFragmentList.add(fragment);
            mFragmentTitleList.add(title);
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return mFragmentTitleList.get(position);
        }
    }
}

The above file is the activity which will show the tabbed fragments with appbar at the top. The layouts, fragment etc are still missing. Lets work on them now.

Create a new layout file called activity_tournament_view.xml in res/layouts folder of your project with content:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        card_view:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        ​

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="fill_parent"
            android:layout_height="230.0dip"
            card_view:contentScrim="?colorPrimary"
            card_view:layout_scrollFlags="exitUntilCollapsed|scroll">

            <RelativeLayout
                android:id="@+id/layoutcollapse"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:background="@android:color/white"
                android:gravity="center"
                android:orientation="vertical"
                card_view:layout_collapseMode="parallax">

                <ImageView
                    android:id="@+id/imgBlurBackground"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:scaleType="centerCrop" />

                <ImageView
                    android:id="@+id/img_shadow"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:src="#80000000" />

                <LinearLayout
                    android:id="@+id/layCenter"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:gravity="center"
                    android:orientation="vertical">


                    <de.hdodenhof.circleimageview.CircleImageView
                        android:id="@+id/image"
                        android:layout_width="120dp"
                        android:layout_height="120dp"
                        android:layout_gravity="center"
                        android:fitsSystemWindows="true"
                        android:padding="10dp"
                        android:scaleType="centerCrop"
                        android:src="@drawable/no_image"
                        app:layout_collapseMode="parallax" />
                    ​

                    <TextView
                        android:id="@+id/name"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Mali Premier League"
                        android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Title" />
                    ​

                    <TextView
                        android:id="@+id/location"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginBottom="4dp"
                        android:layout_marginTop="4dp"
                        android:text="RMG SCHOOL GROUND"
                        android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Subtitle"
                        android:textColor="@android:color/white" />
                    ​
                </LinearLayout>
            </RelativeLayout>
            ​

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="fill_parent"
                android:layout_height="?actionBarSize"
                app:title=" "
                card_view:layout_collapseMode="pin"
                card_view:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
        </android.support.design.widget.CollapsingToolbarLayout>
        ​


        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="35dp"
            android:background="@color/colorPrimaryDark"
            app:tabIndicatorColor="@android:color/white"
            app:tabIndicatorHeight="2dp"
            app:tabMode="scrollable"
            app:tabSelectedTextColor="@android:color/white"
            app:tabTextColor="@android:color/white" />
    </android.support.design.widget.AppBarLayout>


    <android.support.v4.view.ViewPager
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />


</android.support.design.widget.CoordinatorLayout>

You can use your own images wherever needed in the above file.
Now create another layout file for a sample fragment with the name fragment_layout.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textTv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        tools:layout_editor_absoluteX="163dp"
        tools:layout_editor_absoluteY="245dp" />

</android.support.constraint.ConstraintLayout>

Now create a new java class for the sample fragments to be created in tabs named DetailFragment:

package com.marothiatechs.tutorialsface;

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;

public class DetailFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_layout,
                container, false);

        return view;
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        TextView tv = (TextView) view.findViewById(R.id.textTv);
        tv.setText(text);

    }

    String text="";
    public void setText(String text) {
        this.text=text;
    }
}

Now add the following in Manifest file of your project:

 <activity
            android:name=".PageActivity"
            android:label="@string/app_name"
            android:theme="@style/AppTheme.NoActionBar" />

I am assuming that you already know where to put the above code in manifest.
Now simply call the newly created activity from anywhere in your project to check our implementation using code as shown below:

 Intent i = new Intent(MainActivity.this, PageActivity.class);
            startActivity(i);

The final output of our implementation will be similar to the screenshot shown below:
blured bg appbar

Thank You.

1,220 total views, 3 views today

(Visited 627 times, 1 visits today)