Google Developer Group Yarmouk Chapter in JOSA tech-talk for AMMxDROID

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 !