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

Android - Google MAP V2 PART 2

Download Full Code  of  PART-1 , 2 , 3 , 4 Before do this check part 1 Note : I have to run this in API 8 to API 17 that why i have used  ActionBarSherlock  support library. if you don't want that then replace it.  In main Activity i have added following code. package com.djandroid.mapsv2; import android.os.Bundle; import android.support.v4.app.FragmentManager; import com.actionbarsherlock.app.SherlockFragmentActivity; import com.google.android.gms.maps.GoogleMap; import com.google.android.gms.maps.GoogleMap.OnMapClickListener; import com.google.android.gms.maps.SupportMapFragment; import com.google.android.gms.maps.model.LatLng; import com.google.android.gms.maps.model.MarkerOptions; public class MainActivity extends SherlockFragmentActivity { private GoogleMap MAP; @Override protected void onCreate(Bundle arg0) { // TODO Auto-generated method stub setTheme(R.style....
9 comments
Read more

ANDROID - update status Linked-IN

jars: 1. linkedin-j-android.jar 2. scribe-1.3.1.jar MainActivity: package com.testshare; import java.util.EnumSet; import org.scribe.oauth.OAuthService; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.util.Log; import com.google.code.linkedinapi.client.LinkedInApiClient; import com.google.code.linkedinapi.client.LinkedInApiClientFactory; import com.google.code.linkedinapi.client.enumeration.NetworkUpdateType; import com.google.code.linkedinapi.schema.Network; public class TestshareActivity extends Activity { private int LINKEDIN_OAUTH_RESULT_CODE = 4000; private OAuthService service; private static final String PROTECTED_RESOURCE_URL = "http://api.linkedin.com/v1/people/~"; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(...
9 comments
Read more

ANDROID - Adding ActionBar Navigation Tabs

Note: if you are develop App < 3.0 Android OS then use  ActionBarSherlock   support library. ActionBarSherlock is an extension of the  support library  designed to facilitate the use of the action bar design pattern across all versions of Android with a single API. Create new Android Project : in Main Activity package com.AlarmManager; import android.os.Bundle; import android.view.View; import com.actionbarsherlock.app.ActionBar; import com.actionbarsherlock.app.ActionBar.Tab; import com.actionbarsherlock.app.SherlockFragmentActivity; public class AlarmManagerActivity extends SherlockFragmentActivity { public static String ACTIVE_TAB = "activeTab"; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { setTheme(R.style.Theme_Sherlock_Light_DarkActionBar); super.onCreate(savedInstanceState); // s...
4 comments
Read more