Open Lecture Mobile Programming. Intro to Material Design

Transcription

1 Open Lecture Mobile Programming Intro to Material Design

2 Agenda Introduction to Material Design Applying a Material Theme Toolbar/Action Bar Navigation Drawer RecyclerView CardView Support Design Widgets/Tools

3 What is Material Design A comprehensive guide for visual, motion, and interaction design across platforms and devices

4 Using Material Design Follow the guidelines defined in the design specifications Use the new components and functionality made available in Android 5.0+ (API level 21+) The following elements are provided to build apps with material design New widgets for complex views New APIs for custom shadows and animations

5 Goals of Material Design Create a visual language that Synthesizes good design principles with innovation Allows unified experience across platforms and varying device sizes

6 Physical Properties in Material Design Views have varying x and y dimensions and uniform thickness (1dp) Views cast shadows Updated widgets allow you to specify: Color palette Default animations for touch feedback and activity transitions

7 Creating An App With Material Design Apply the material theme to the app Create layouts using material design guidelines Specify the elevation of the views to cast shadows Use system widgets for lists and cards Customize animations

8 Material Theme Jdnc/whatismaterial_3d_elevation3.png

9 Apply The Material Theme Specify a style that inherits from android:theme.material <!-- res/values/styles.xml --> <resources> <!-- Inherit from the material theme --> <style name= MaterialDemo parent= Theme.AppCompat.Light.NoActionBar > <item name= colorprimary >@color/colorprimary</item> <item name= colorprimarydark >@color/colorprimarydark</item> <item name= coloraccent >@color/coloraccent</item> </style> </resources>

10 Apply The Material Theme <resources> The MaterialDemo theme will applied to the application. <!-- Inherit from the material theme --> <style name= MaterialDemo parent= Theme.AppCompat.Light.NoActionBar > <item name= colorprimary <item name= colorprimarydark </item> <item name= coloraccent </style> </resources>

11 Material Design Colors There are five color attributes that control the material design theme colorprimarydark - the darkest primary color of the app applied mainly to the notification bar colorprimary - the primary color used as the toolbar background navigationbarcolor - the primary color of the footer navigation bar textcolorprimary - the primary color of text (Toolbar) windowbackground - background color of application windows

12 Setting View Elevation Views can cast shadows The size of the shadow is determined by the View s elevation To set elevation, specify a value for the android:elevation attribute <TextView android:layout_width= wrap_content android:layout_height= wrap_content android:elevation= 5dp />

13 Animate View Elevation Changes Temporary View elevation changes can be animated Achieved by setting the android:translationz attribute <TextView android:layout_width= wrap_content android:layout_height= wrap_content android:translationz= 5dp />

14 View Shadows X0dVeGM/whatismaterial_3d_elevation1.png

15 Custom Animations Android 5.0+ includes new APIs to create custom animations Activity Transitions Exit Transitions

16 Custom Animations public class MyActivity extends Activity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); // enable transitions getwindow().requestfeature(window.feature_content_transitions); setcontentview(r.layout.activity_my); public void onsomebuttonclicked(view view) { getwindow().setexittransition(new Explode()); Intent intent = new Intent(this, MyOtherActivity.class); startactivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

17 Custom Animations public class MyActivity extends Activity protected void oncreate(bundle savedinstancestate) { Sets a flag requesting content super.oncreate(savedinstancestate); changes be animated // enable transitions getwindow().requestfeature(window.feature_content_transitions); setcontentview(r.layout.activity_my); public void onsomebuttonclicked(view view) { getwindow().setexittransition(new Explode()); Intent intent = new Intent(this, MyOtherActivity.class); startactivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

18 Custom Animations public class MyActivity extends Activity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); // enable transitions getwindow().requestfeature(window.feature_content_transitions); setcontentview(r.layout.activity_my); Sets the transition to use to move Views out of the scene public void onsomebuttonclicked(view when starting a new Activity view) { getwindow().setexittransition(new Explode()); Intent intent = new Intent(this, MyOtherActivity.class); startactivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

19 Custom Animations public class MyActivity extends Activity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); // enable transitions getwindow().requestfeature(window.feature_content_transitions); setcontentview(r.layout.activity_my); public void onsomebuttonclicked(view view) { getwindow().setexittransition(new Explode()); Intent intent = new Intent(this, Start the new MyOtherActivity.class); startactivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

20 Custom Animations public class MyActivity extends Activity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); // enable transitions getwindow().requestfeature(window.feature_content_transitions); setcontentview(r.layout.activity_my); public void onsomebuttonclicked(view view) { Specify the intent representing getwindow().setexittransition(new Explode()); the Activity to be started Intent intent = new Intent(this, MyOtherActivity.class); startactivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

21 Custom Animations public class MyActivity extends Activity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); // enable transitions getwindow().requestfeature(window.feature_content_transitions); setcontentview(r.layout.activity_my); public void onsomebuttonclicked(view view) { getwindow().setexittransition(new Explode()); Intent intent = new Intent(this, Sets a flag MyOtherActivity.class); requesting content changes be animated startactivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

22 Custom Animations public class MyActivity extends Activity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); // enable transitions getwindow().requestfeature(window.feature_content_transitions); setcontentview(r.layout.activity_my); public void onsomebuttonclicked(view view) { getwindow().setexittransition(new Explode()); Intent intent = Helper new Intent(this, class for specifying MyOtherActivity.class); options for the new activity startactivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

23 Custom Animations public class MyActivity extends Activity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); // enable transitions getwindow().requestfeature(window.feature_content_transitions); setcontentview(r.layout.activity_my); public void onsomebuttonclicked(view view) { getwindow().setexittransition(new Explode()); Create an ActivityOptions to Intent intent = new Intent(this, transition between MyOtherActivity.class); activities startactivity(intent, and generate a bundle for it ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

24 Adding a Material Design Theme to an App Start by creating an Android app with a minimum required SDK or Android 5.1 or higher For now choose either to create a Blank Activity Or. Add the Activities after the project is created

25 Creating The Color Scheme Modify or create the colors.xml file in the res/values directory <!-- colors.xml --> <resources> <color name="colorprimary">#512da8</color> <color name="colorprimarydark">#311b92</color> <color name="coloraccent">#ff4081</color> <color name="navigationbarcolor">#673ab7</color> <color name="textcolorprimary">#ffffff</color> <color name="windowbackground">#ffffff</color> </resources>

26 Creating The Color Scheme An excellent resource when creating a color scheme for your app is the color palette provided as part of the Google design specifications

27 Applying The Theme to Your App Add a custom style to your styles.xml file You can also modify the AppTheme style which is the default theme applied to your app This file is used by devices running a version of Android less than v21 If you intend to use a Toolbar as an app bar, inherit from one of the NoActionBar themes

28 Applying The Theme to Your App <!-- styles.xml --> style name="materialdemo" parent="theme.appcompat.light.noactionbar"> <item <item </item> <item </style> You can also add any custom style attributes in this file e.g <item name="android:windownotitle">true</item>

29 Applying The Theme to Your App The AppTheme style can be modified to inherit from your custom style This is done because by default your app has the theme set to AppTheme Set the parent attribute of the style (AppTheme) <style name="apptheme" parent="materialdemo"> </style>

30 Applying The Theme to Your App For devices running Android v21+ Create a res/values-v21 directory Add a styles.xml file to this directory Implement your style This should have the same name as the original styles.xml - AppTheme) Ensure you also inherit from the material base style Add any v21+ specific attributes to this file

31 Applying The Theme to Your App <!-- res/values-v21/styles.xml --> <style name="apptheme" parent="materialdemo"> <item name="android:windowcontenttransitions">true</item> <item <item </style>

32 Applying The Theme to Your App You can specify the application theme in AndroidManifest.xml by setting the android:theme attribute of the <application> tag <application... </application>

33 Applying the Theme to Your App Activities added to your app will now automatically have the theme applied

34 Adding a Toolbar (Action Bar) Ensure your app has the v7 appcompat support library added Create an Activity that extends AppCompatActivity Create a layout resource file for the Toolbar This can also be embedded directly in the main layout The root entry for your layout file should be <android.support.v7.widget.toolbar> Configure the attributes as necessary

35 Adding a Toolbar (Action Bar) <android.support.v7.widget.toolbar xmlns:android=" xmlns:app=" android:id="@+id/action_bar" android:layout_width="match_parent" android:layout_height="?attr/actionbarsize" android:background="?attr/colorprimary" android:elevation="4dp" android:theme="@style/themeoverlay.appcompat.actionbar" app:popuptheme="@style/themeoverlay.appcompat.light" />

36 Adding a Toolbar In your Activity s layout XML resource file, include the Toolbar We include an existing layout by using the <include> tag <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignparenttop="true" android:orientation="vertical"> <include android:id="@+id/action_bar" layout="@layout/action_bar" /> </LinearLayout>...

37 Associating the Toolbar with your Activity Inside the Activity s oncreate() method Call the setsupportactionbar(toolbar) method passing in your Toolbar as the argument You can also take this opportunity to configure any other action bar parameters (using the utility methods) as necessary

38 Associating the Toolbar with your Activity public class MainActivity extends AppCompatActivity { private Toolbar public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main);... mtoolbar = (Toolbar) findviewbyid(r.id.action_bar); setsupportactionbar(mtoolbar); getsupportactionbar().setdisplayshowhomeenabled(true);...

39 Associating the Toolbar with your Activity public class MainActivity extends AppCompatActivity { private Toolbar public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); Obtain a reference to the Toolbar created in the layout... XML file mtoolbar = (Toolbar) findviewbyid(r.id.action_bar); setsupportactionbar(mtoolbar); getsupportactionbar().setdisplayshowhomeenabled(true);...

40 Associating the Toolbar with your Activity public class MainActivity extends AppCompatActivity { private Toolbar public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main);... mtoolbar = Set (Toolbar) this as the Toolbar findviewbyid(r.id.action_bar); for the current Activity setsupportactionbar(mtoolbar); getsupportactionbar().setdisplayshowhomeenabled(true);...

41 Associating the Toolbar with your Activity public class MainActivity extends AppCompatActivity { private Toolbar public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main);... mtoolbar = (Toolbar) findviewbyid(r.id.action_bar); The setdisplayshowhomeenabled(bool) utility method indicates whether or not the home action is displayed in the Toolbar setsupportactionbar(mtoolbar); getsupportactionbar().setdisplayshowhomeenabled(true);...

42 Associating the Toolbar with your Activity For a comprehensive list of options, you can view the Action Bar documentation

43 Adding Actions to the Toolbar Action buttons and other menu items are defined in an XML menu resource file Add an <item> entry for each desired item in the Toolbar The app:showasaction attribute determines if the item should be shown as a button on the app bar ifroom - show as an action if there is adequate space never - show the item only in the overflow menu

44 Adding Actions to the Toolbar <menu xmlns:android=" xmlns:app=" xmlns:tools=" tools:context=".mainactivity"> <item android:orderincategory="100" app:showasaction="ifroom" /> <item android:orderincategory="100" app:showasaction="never" /> </menu>

45 Adding Actions to the Toolbar You can find many useful icons on the Material Icons page

46 Adding Actions to The Toolbar The items are added to the Toolbar by overriding the oncreateoptionsmenu() method of the public boolean oncreateoptionsmenu(menu menu) { getmenuinflater().inflate(r.menu.menu, menu); return true;

47 Handling Toolbar Actions Essentially identical to dealing with menu items in older versions of Android Override the onoptionsitemselected() method of the Activity Determine which option was selected using the getitemid() method of the MenuItem Perform the appropriate action based on the selected item

48 Handling Toolbar public boolean onoptionsitemselected (MenuItem item) { int id = item.getitemid(); switch (id) { case R.id.action_search: return true; case R.id.action_exit: finish(); return true; default: return super.onoptionsitemselected (item);

49 Adding An Up Action If your app has a main Activity, you can add an Up button to the Toolbar The Up button makes it easy for users to navigate to the main Activity from child activities You will need to specify the parent Activity for each child Activity in the AndroidManifest.xml file

50 Adding An Up Action... <activity android:name=".mainactivity">... </activity> <activity android:name=".secondactivity" android:parentactivityname=".mainactivity"> <meta-data </activity>... android:name="android.support.parent_activity" android:value=".mainactivity" />

51 Adding An Up Action... <activity android:name=".mainactivity">... </activity> <activity android:name=".secondactivity" android:parentactivityname=".mainactivity"> <meta-data </activity>... Set the android:parentactivityname attribute of each child Activity android:name="android.support.parent_activity" android:value=".mainactivity" />

52 Adding An Up Action... <activity android:name=".mainactivity">... </activity> <activity android:name=".secondactivity" android:parentactivityname=".mainactivity"> <meta-data </activity>... Allow support for older versions of Android android:name="android.support.parent_activity" android:value=".mainactivity" />

53 Enable The Up Function In Child Activities To enable the functionality in the child Activity Setup the Toolbar in the oncreate() method Use the setdisplayhomeasupenabled() utility method to allow navigation to the parent public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.second_activity); Toolbar action_bar = (Toolbar) findviewbyid(r.id.action_bar); setsupportactionbar(action_bar); getsupportactionbar().setdisplayhomeasupenabled(true);

54 What is a Navigation Drawer A panel that displays the main navigation options Typically positioned at the starting edge of the activity The drawer is normally hidden but revealed when the user swipes right from the left edge of the screen Also triggered if the user touches the app icon in the Toolbar (from the top level activity)

55 Creating A Drawer Layout Create an XML layout file with a DrawerLayout as its root view Add two views to the DrawerLayout Your main content layout A View containing the contents of the navigation drawer

56 Creating A Drawer Layout <android.support.v4.widget.drawerlayout xmlns:android=" android:id="@+id/drawer" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout... android:layout_width="match_parent" android:layout_height="match_parent"> </LinearLayout> <ListView... android:layout_width="240dp" android:layout_height="match_parent"... /> </android.support.v4.widget.drawerlayout>

57 Creating A Drawer Layout The content View must be the first child of the DrawerLayout The content View should match the parent View s height and width The drawer View must specify a horizontal gravity using the android:layout_gravity attribute The drawer View s width should be specified in dp and should be no more than 320dp

58 Initialize The Navigation List You can initialize the drawer content by populating the list in the Activity s oncreate() public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout. third_activity);... mdrawerlist = (ListView) findviewbyid(r.id. left_drawer); // populate the listview using an adapter mdrawerlist.setadapter( new ArrayAdapter<String>( this, android.r.layout. simple_list_item_1, fragment_list));...

59 Handling Navigation Click Events To handle navigation click events Implement an appropriate onclick listener for the drawer list e.g. implement onitemclicklistener for a ListView

60 Handling Navigation Click Events // set the onitemclicklistener for the listview mdrawerlist.setonitemclicklistener(new AdapterView.OnItemClickListener() public void onitemclick(adapterview<?> parent, View view, int position, long id) { if (position == 0) { Fragment fragment = new FragmentOne(); FragmentManager fm = getsupportfragmentmanager(); fm.begintransaction().replace(r.id.content_layout, fragment).commit(); getactionbar().settitle("fragment One");... ); mdrawerlist.setitemchecked(position, true); mdrawerlayout.closedrawer(mdrawerlist);

61 Lists And Cards RecyclerView Supports different layout types Offers performance improvements over ListView CardView Allows showing information inside cards Consistent appearance across applications

62 RecyclerView Lists

63 RecyclerView More advanced and flexible version of ListView Efficient scrolling Maintains a limited number of Views Should be used for dynamic data collections Provides Layout managers to position items Default animations for common item operations (removal, addition, etc) We will not discuss RecyclerView in-depth

64 Using RecyclerView Create an adapter that extends the RecyclerView.Adapter class Use a layout manager Positions items inside the RecyclerView Decides when to reuse item views that are no longer visible Built in layout managers are available LinearLayoutManager, GridLayoutManager, StaggeredGridLayoutManager Custom layout manager can be created by extending RecyclerView.LayoutManager Ensure the correct gradle dependencies are included in the project compile 'com.android.support:recyclerview-v7:21.0.+'

65 Using RecyclerView To add a RecyclerView to your layout <android.support.v7.widget.recyclerview android:id="@+id/recycler_view" android:scrollbars="vertical" android:layout_width="match_parent" android:layout_height="match_parent" />

66 CardView

67 CardView Extension of FrameLayout class Displays content in cards with consistent appearance across the platform

68 Customizing CardView s appearance A CardView s appearance can be customized using the following attributes card_view:cardcornerradius Sets the corner radius in layouts card_view:cardbackgroundcolor Sets the background color of a card

69 Using CardView Add the CardView to your layout Add a single child View to the CardView containing content to be displayed Ensure the correct gradle dependencies are included in the project compile 'com.android.support:cardview-v7:21.0.+'

70 Using CardView <android.support.v7.widget.cardview xmlns:app=" android:layout_gravity="center" android:layout_width="240dp" android:layout_height="240dp" app:cardcornerradius="5dp" app:cardbackgroundcolor="#00ff00"> <TextView android:layout_width="match_parent" android:layout_height="match_parent" /> </android.support.v7.widget.cardview>

71 Floating Labels for EditText Introduced in the Android design support library Floating labels display a floating (duh) label over an EditText The label acts as a hint when the EditText is empty Moves to a floating position when the user begins entering text

72 Floating Labels for EditText The functionality is obtained using a TextInputLayout The EditText must be the child of the TextInputLayout Error messages can be set/displayed using either the seterrorenabled() or seterror() methods Requires the following line in your build.gradle file compile 'com.android.support:design:21.0.+'

73 Floating Labels for EditText Add the TextInputLayout and EditText to your activity s layout XML resource file... <android.support.design.widget.textinputlayout android:id="@+id/input_layout_fname" android:layout_width="match_parent" android:layout_height="wrap_content"> <EditText android:id="@+id/fname" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="first Name"/> </android.support.design.widget.textinputlayout>...

74 Floating Labels for EditText final TextInputLayout inputlayoutfname = (TextInputLayout) root.findviewbyid(r.id. input_layout_fname); final EditText fname = (EditText) root.findviewbyid(r.id. fname); Button submit = (Button) root.findviewbyid(r.id. btn_submit); submit.setonclicklistener( new View.OnClickListener() public void onclick(view v) { if (fname.gettext().tostring().isempty()) { inputlayoutfname.seterror("please enter your first name"); else { inputlayoutfname.seterrorenabled( false); );

75 Floating Labels for EditText final TextInputLayout inputlayoutfname = (TextInputLayout) root.findviewbyid(r.id. input_layout_fname); final EditText fname = (EditText) root.findviewbyid(r.id. fname); Button submit = (Button) root.findviewbyid(r.id. btn_submit); submit.setonclicklistener( new View.OnClickListener() Set the error to be displayed for public void onclick(view the EditText v) { if (fname.gettext().tostring().isempty()) { inputlayoutfname.seterror("please enter your first name"); else { inputlayoutfname.seterrorenabled( false); );

76 Floating Labels for EditText final TextInputLayout inputlayoutfname = (TextInputLayout) root.findviewbyid(r.id. input_layout_fname); final EditText fname = (EditText) root.findviewbyid(r.id. fname); Button submit = (Button) root.findviewbyid(r.id. btn_submit); submit.setonclicklistener( new View.OnClickListener() public void onclick(view v) { if (fname.gettext().tostring().isempty()) { inputlayoutfname.seterror("please Clear any existing errors enter your first name"); else { inputlayoutfname.seterrorenabled(false); );

77 Floating Action Button Floats on the UI in a circular shape The button has an attached action The android:layout_gravity attribute controls position of the button <android.support.design.widget.floatingactionbutton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="start bottom" android:layout_margin="10dp" android:src="@android:drawable/ic_delete" />

78 Floating Action Button The onclick action of a Floating Action Button is handled in the same way as a normal Button FloatingActionButton fab = (FloatingActionButton) findviewbyid(r.id.fab); fab.setonclicklistener(new View.OnClickListener() { Public void onclick(view v) { // Perform some action here );

79 Snackbar A Snackbar is similar to a Toast but facilitates user interaction Snackbars are displayed at the bottom of the screen (phones) or at the lower left (larger devices) Snackbars can only be displayed one at a time and disappears after a period of time Snackbars are also dismissed after the user interacts with them or another part of the screen

80 Creating a Snackbar To create an instance of a Snackbar we use the class s make() method make() accepts 3 parameters: A View Using a CoordinatorLayout is recommended as it allows features such as swiping to dismiss the Snackbar A display message A Duration LENGTH_SHORT LENGTH_LONG LENGTH_INDEFINITE To display the Snackbar, call the show() instance method

81 Creating a Snackbar <android.support.design.widget.coordinatorlayout xmlns:android=" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center"> <Button android:id="@+id/click_me" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="click Me!"/> </android.support.design.widget.coordinatorlayout>

82 Creating a Snackbar Ensure the calling activity has a CoordinatorLayout as the root View <android.support.design.widget.coordinatorlayout xmlns:android=" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center"> <Button android:id="@+id/click_me" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="click Me!"/> </android.support.design.widget.coordinatorlayout>

83 Creating a Snackbar Snackbar snackbar = Snackbar.make(coordinatorLayout, "Hello From the Dark Side", Snackbar.LENGTH_LONG); snackbar.show();

84 Creating a Snackbar make() creates an instance of Snackbar Snackbar snackbar = Snackbar.make(coordinatorLayout, "Hello From the Dark Side", Snackbar.LENGTH_LONG); snackbar.show();

85 Creating a Snackbar Snackbar snackbar = Snackbar.make(coordinatorLayout, The show() method displays the Snackbar "Hello From the Dark Side", Snackbar.LENGTH_LONG); snackbar.show();

86 Snackbar - Adding Action Callback An action callback can be added to a Snackbar using the setaction() method setaction() accepts two parameters A label for the action A View.OnClickListener() the describe the actions that should be performed when the user interacts with the Snackbar

87 Snackbar - Adding Action Callback Snackbar snackbar = Snackbar.make(coordinatorLayout, "Hello From the Dark Side", Snackbar.LENGTH_LONG); snackbar.setaction("say Hi!", new View.OnClickListener() public void onclick(view v) { Snackbar replysnackbar = Snackbar.make(coordinatorLayout, "(blow raspberry)", Snackbar.LENGTH_LONG); replysnackbar.show(); ); snackbar.show();

88 References Android Developer Site Mobile