Skip to main content

Android Material Design (with Design support Library) - 4




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:

  • 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'

 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

 
 <?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

Comments

Post a Comment

Popular posts from this blog

Don't Ship AI Agent Skills Without Evals

At the AI Engineer World's Fair on July 1, 2026, Philipp Schmid, a Staff Engineer on the Gemini API and agents team at Google DeepMind, asked a room full of engineers a simple question: who uses skills with their coding agents? Every hand went up. Who has evals for those skills? Almost none. That gap is the entire talk, which Schmid also wrote up on his own blog, philschmid.de/testing-skills . His team indexed the skills ecosystem through SkillsBench and found the same pattern everywhere: people ship a SKILL.md file after two manual test runs and move on. It looks fine in a demo. It quietly corrupts outputs in production, because bad skills don't crash. They just make the agent confidently wrong. If you've already read our breakdown of Matt Pocock's Claude Code skills library , think of this as the other half of that story: what happens once you've installed a skill and it's actually running against real prompts. Key Takeaways SkillsBench indexed 47,000+ un...
Post a Comment
Read more

Add flutter to existing app — Challenges

I am using flutter last 2 year & successfully released 2 flutter apps on production before 2–3 month, decide to add flutter in existing android & iOS app(while it was in beta-experimental stage). Flutter team have provide better way to add same in flutter v1.2 —  Good document than beta. Article is not about integrate flutter in existing app but, It’s about challenges which i have faced after adding flutter in existing app. I have integrate flutter module with my existing iOS & Android App (Same Application for both platform), developed 2 new features in flutter module & released successfully. In last week I have to add new feature in flutter module which user is able to pick file from phone & upload it on server. I have decided to use  file_picker: ^1.4.3+2 . Now, what I have is Native Application + Flutter Module < = > Image_picker Plugin in one App. In which I faced below challenges. Same time flutter v1.12 released A...
Post a Comment
Read more

Stop Babysitting your AI Coding Agent Every Single Session

  Watched a video by DSquaredLabs on " No more re-explaining: Give your AI agent a memory graph " — here's what stuck with me and why I think this three-tool system is worth your attention If you work on a large codebase with AI coding tools, you already know the ritual. Open a new chat, paste your file structure, explain your stack, describe how the modules connect — and repeat the whole thing tomorrow. It is not a minor inconvenience. It is a compounding productivity tax that gets worse as your project grows. This article breaks down a three-tool system designed to fix exactly that. If you want the full walkthrough with a live demo on a real monorepo, the video at the bottom covers everything in depth — but the core concepts are worth understanding before you dive in. The Problem With How Most Developers Use AI Today Most AI-assisted coding workflows are missing three things that every good engineering team actually has: A map of the codebase A process for how w...
Post a Comment
Read more