Introducing Design Support Library , to use Material design component in older version API - android 2.1 and above. You’ll find a navigation drawer view, floating labels for editing text, a floating action button, snackbar, tabs, and a motion and scroll framework to tie them together.
I have used my previous example, so its easy for demonstrate.
Note:
Note:
- Update your Android SDK support repositories, support library if not updated
- i used compileSdkVersion 'android-MNC' for Android M but you can change it to build in older API
add dependencies in build.gradle file
compile 'com.android.support:appcompat-v7:22.2.0'
compile 'com.android.support:design:22.2.0'
compile 'com.android.support:support-v4:22.2.0'
compile 'com.android.support:design:22.2.0'
compile 'com.android.support:support-v4:22.2.0'
start with navigation drawer, its very easy to use
lets, design for drawer
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<!-- your content layout -->
<!--<FrameLayout
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" />-->
<include layout="@layout/about_fragment"></include>
<android.support.design.widget.NavigationView
android:id="@+id/nav_draw"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/drawer_header"
app:menu="@menu/drawer" />
</android.support.v4.widget.DrawerLayout>
drawer menus will be a collection of checkable menu items
use navigation item Listener
check full code on github
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/navigation_item_1"
android:checked="true"
android:icon="@drawable/ic_drawer_map"
android:title="@string/title_section1">
</item>
<item
android:id="@+id/navigation_item_2"
android:icon="@drawable/ic_drawer_people_met"
android:title="@string/title_section2" />
<item
android:id="@+id/navigation_item_3"
android:icon="@drawable/ic_drawer_experts"
android:title="@string/title_section3" />
<item
android:id="@+id/navigation_item_4"
android:icon="@drawable/ic_drawer_explore"
android:title="@string/title_section4" />
<item
android:id="@+id/navigation_item_5"
android:icon="@drawable/ic_drawer_social"
android:title="@string/title_section5" />
<item
android:id="@+id/navigation_item_6"
android:icon="@drawable/ic_drawer_social"
android:title="@string/title_section6" />
<item
android:id="@+id/navigation_subheader"
android:title="@string/navigation_subheader">
<menu>
<item
android:id="@+id/navigation_sub_item_1"
android:title="@string/navigation_sub_item_1" />
<item
android:id="@+id/navigation_sub_item_2"
android:title="@string/navigation_sub_item_2" />
</menu>
</item>
</group>
</menu>
use navigation item Listener
public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener
add override method
@Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
return false;
}
in onCreate,
NavigationView nav_draw = (NavigationView) findViewById(R.id.nav_draw);
nav_draw.setNavigationItemSelectedListener(this);
Add Action, on Navigation Item select change onNavigationItemSelected method,
@Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
if (menuItem.getItemId() == R.id.navigation_item_1) {
Snackbar
.make(fab, "First item Selected", Snackbar.LENGTH_LONG)
//.setAction(R.string.snackbar_action, myOnClickListener)
.show();
} else if (menuItem.getItemId() == R.id.navigation_item_2) {
//startActivity(new Intent(MainActivity.this, DetailActivity.class));
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
getWindow().setExitTransition(new Explode());
Intent intent = new Intent(this, DetailActivity.class);
startActivity(intent,
ActivityOptionsCompat
.makeSceneTransitionAnimation(this).toBundle());
} else {
startActivity(new Intent(MainActivity.this, DetailActivity.class));
}
} else if (menuItem.getItemId() == R.id.navigation_item_3) {
String url = "http://www.dj-android.blogspot.com";
Intent i = new Intent(Intent.ACTION_VIEW);
i.setData(Uri.parse(url));
startActivity(i);
} else if (menuItem.getItemId() == R.id.navigation_item_4) {
/*Snackbar
.make(root, "", Snackbar.LENGTH_LONG)
//.setAction(R.string.snackbar_action, myOnClickListener)
.setActionTextColor(getResources().getColor(R.color.colorRed))
.show();*/
}
menuItem.setChecked(true);
drawer_layout.closeDrawers();
return false;
}
all this about navigation drawer view, no need to add extra fragment for drawer,
Floating Action Button
The Design library’s
FloatingActionButton gives you a single consistent implementation, by default colored using the colorAccent from your theme. <android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:id="@+id/fab_action"
android:src="@drawable/ic_discuss"
app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom|right|end" />
Collapsing Toolbars
Adding a
Toolbar directly to an AppBarLayout gives you access to the enterAlwaysCollapsed and exitUntilCollapsed scroll flags, but not the detailed control on how different elements react to collapsing. For that, you can use CollapsingToolbarLayout.
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
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="match_parent"
android:layout_height="200dip"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="@drawable/my_pic"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dip"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView
android:id="@+id/textView"
android:padding="10dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="5dp"
android:textColor="@color/textColorPrimary"
android:background="@drawable/myrect"
android:text="@string/intro"
android:textAppearance="?android:attr/textAppearanceMedium" />
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:id="@+id/fab_action"
android:src="@drawable/ic_discuss"
app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>
check full code on github
Great code Dhaval. It's definitely helping me achieve what I am trying to do with my app. I have been trying to integrate the tabs/viewpager into the collapsible toolbar though and so far am not having a lot of luck. I'm not too far off though, wondered if you might give me inspiration?
ReplyDeleteMy ActivityMain.xml is much like yours:
DrawerLayout
Include FragmentLayout
NavigationView
And my FragmentLayout looks like this:
CoordinatorLayout
AppBarLayout
CollapsingToolbarLayout
ImageView (backdrop)
Toolbar
TabLayout
ViewPager
NestedScrollView
TextView
FloatingActionButton
My problem is really only that the Tabs are overlayed over the Toolbar. They cover the up button, when I want them to appear under the backdrop image, scrolling with it, and pinning to the top of the screen.
Also, the viewpagers will swipe from side to side, but will not scroll the page upwards. The extra textview shows up as a little box because of the background rect, and I can scroll the toolbar up and down by clicking on it.
If you have any ideas or code to share, or you would like me to post you some more detailed code, I would love to hear from you. Thanks again for sharing your work!
Morgan Parkinson