Android Material Design (with Design support Library)

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

Jev: The Decision Layer Cutting AI Agent Costs

The expensive part of an AI agent usually isn't the final answer: it's the string of small decisions behind it. Every tool pick and "are we done yet" check is its own LLM reasoning call, and agent loops make dozens per task. Jev is a typed decision layer built to replace exactly those calls. Here's what that looks like inside a personal finance agent answering a spending question, and what it's worth evaluating for your own MCP stack. Key Takeaways Jev never executes anything: it only routes, labels, or checks; your existing LLM and code still do the real work. In a finance agent, it turns a spending question into a routed, labeled, fact-checked answer without extra reasoning calls. Adoption is shadow-mode first: test it against your current routing before it touches production traffic What Is Jev, and Why Are AI Teams Adopting It Now? Jev is a fast, typed decision model: send it a state and bounded questions, and it answers each in one of three fixed shapes: ...

DJ-Android

Search This Blog