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:
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:
Thank You.
3,064 total views, 10 views today
