Material Design is not about design only, it has technical implications too ! in this session Mohammad Aljobairi, senior Android developer, will go through the technical specs and libraries derived for Material Design, he will also talk about some tools of trade that will help you in creating your first Material App. This presentation is part of Amman Android Developers Group (AMMxDROID) and aimed at (independent) mobile developers/designers and enthusiasts.

1. Developers

2. AMMxDROID
Material Design & Implementation
@MhmdAljobairi

3. Mohammad Aljobairi
Works at PcNetSoft
Android01.ME
Senior Android Developer
Google Developer Group Leader
Amman Droid Lab Founder
@MhmdAljobairi

4. @MhmdAljobairi

5. @MhmdAljobairi

6. RecyclerView
The RecyclerView widget is a more advanced and flexible
version of ListView. This widget is a container for displaying
large data sets that can be scrolled very efficiently by
maintaining a limited number of views. Use the Recycler
View widget when you have data collections whose elements
change at runtime based on user action or network events.
@MhmdAljobairi

7. <!-- A RecyclerView with some commonly used
attributes -->
<android.support.v7.widget.RecyclerView
android:id="@+id/my_recycler_view"
android:scrollbars="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.my_activity);
RecyclerView mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);
// use this setting to improve performance if you know that changes
// in content do not change the layout size of the RecyclerView
mRecyclerView.setHasFixedSize(true);
// use a linear layout manager
RecyclerView.LayoutManager mLayoutManager = new LinearLayoutManager(this);
mRecyclerView.setLayoutManager(mLayoutManager);
// specify an adapter (see also next example)
RecyclerView.Adapter mAdapter = new MyAdapter(myDataset);
mRecyclerView.setAdapter(mAdapter);
}
@MhmdAljobairi

8. Cards
Usage
● Cards are a convenient means of displaying content
composed of different types of objects
● A card collection is a coplanar layout of cards.
● Each of these cards contains a unique data set
● a checklist with an action, a note with an action, a
note with a photo.
@MhmdAljobairi

9. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
... >
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view"
android:layout_gravity="center"
android:layout_width="200dp"
android:layout_height="200dp"
card_view:cardCornerRadius="4dp">
<TextView
android:id="@+id/info_text"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v7.widget.CardView>
</LinearLayout>

10. Z value
The Z value for a view has two components, elevation and translation. The elevation is the static component, and the translation is
used for animations:
Z = elevation + translationZ
To set the elevation of a view:
● In a layout definition, use the android:elevation attribute.
● In the code of an activity, use the View.setElevation method.
@MhmdAljobairi

11. Consider this view, defined with a background drawable:
<TextView
android:id="@+id/myview"
...
android:elevation="2dp"
android:background="@drawable/myrect" />
The background drawable is defined as a rectangle with rounded corners:
<!-- res/drawable/myrect.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#42000000" />
<corners android:radius="5dp" />
</shape>
@MhmdAljobairi

12. Theme.Material
API v21 and above
@MhmdAljobairi

14. Theme.Material
API v21 and above
<resources>
<!-- inherit from the material theme -->
<style name="AppTheme" parent="android:Theme.Material.Light.DarkActionBar">
<item name="android:colorPrimary">@color/primary</item>
<item name="android:colorPrimaryDark">@color/primary_dark</item>
<item name="android:colorAccent">@color/accent</item>
</style>
</resources>
@MhmdAljobairi

15. dependencies {
compile "com.android.support:appcompat-v7:21.0.+"
}

16. Theme.AppCompat
API v7 and above
<resources>
<!-- inherit from the material theme -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">@color/primary</item>
<item name="colorPrimaryDark">@color/primary_dark</item>
<item name="colorAccent">@color/accent</item>
</style>
</resources>
@MhmdAljobairi

18. <style name="AppTheme" parent="android:Theme.Material.Light.DarkActionBar">
<item name="android:windowContentTranstions">true</item>
</style>
For your activity
requestWindowFeature(Window.FEATURE_CONTENT_TRANSITIONS);
@MhmdAljobairi

19. <ImageView
...
android:transitionName="@string/transiton_album_cover"/>
@MhmdAljobairi

20. @MhmdAljobairi

22. Setup
dependencies {
...
compile "com.android.support:appcompat-v7:21.0.+"
}

23. <android.support.v7.widget.Toolbar
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
app:theme="@style/ThemeOverlay.AppCompat.ActionBar" />

24. @Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.my_layout);
Toolbar toolbar = (Toolbar) findViewById(R.id.
my_awesome_toolbar);
setSupportActionBar(toolbar);
}

26. simple
<ripple
android:color="?android/ColorControlHighlight">
<ripple/>
@MhmdAljobairi

28. Bound to another drawable
<ripple android:color="?android/ColorControlHighlight">
<item
<shape android:shape="rectangle">
<solid android:color=""?android:colorAccent" />
<shape/>
<item/>
<ripple/>
@MhmdAljobairi

29. Bound to invisible mask
<ripple android:color="#ffff0000">
<item android:id="@android:id/mask"
<shape android:shape="rectangle">
<solid android:color="@android:color/white" />
<shape/>
<item/>
<ripple/>
@MhmdAljobairi

31. View myView = findViewById(R.id.my_view);
// get the center for the clipping circle
int cx = (myView.getLeft() + myView.getRight()) / 2;
int cy = (myView.getTop() + myView.getBottom()) / 2;
// get the final radius for the clipping circle
int finalRadius = Math.max(myView.getWidth(), myView.getHeight());
// create the animator for this view (the start radius is zero)
Animator anim =
ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);
myView.setVisibility(View.VISIBLE);
anim.start();

37. ●
●
●
●
●
●
●
●
●
●
@MhmdAljobairi

38. Mohammad Aljobairi
Android01.ME
@MhmdAljobairi
Thanks You !