Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Material design for everyone

2,067 views

Published on

Material design for everyone
2015. 1. 27
GDG Korea joint meetup
Maru 180, Seoul

Published in: Software
  • Be the first to comment

Material design for everyone

  1. 1. 

  2. 2. android { compileSdkVersion 19 buildToolsVersion "21.1.2" defaultConfig { applicationId "com.androidhuman.example.materialdesign" minSdkVersion 7 targetSdkVersion 19 versionCode 1 versionName "1.0" } buildTypes { .. } } dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:appcompat-v7:19.+' compile 'com.android.support:support-v4:19.+' } build.gradle
  3. 3. android { compileSdkVersion 21 buildToolsVersion "21.1.2" defaultConfig { applicationId "com.androidhuman.example.materialdesign" minSdkVersion 7 targetSdkVersion 21 versionCode 1 versionName "1.0" } buildTypes { .. } } dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile ‘com.android.support:appcompat-v7:21.0.3' compile 'com.android.support:support-v4:19.+' } build.gradle
  4. 4. <resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light"> <!-- Customize your theme here. --> </style> </resources> styles.xml
  5. 5. <manifest ...> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme"> <activity ... /> </application> </manifest> AndroidManifest.xml
  6. 6. colorPrimaryDark colorPrimary android:navigationBarColor colorAccent colorControlNormal
  7. 7. colorAccent colorControlNormal API 21+ API < 21
  8. 8. colorControlNormal colorPrimary
  9. 9. colorPrimary
  10. 10. colorAccent
  11. 11. colorControlHightlight
  12. 12. <resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="colorPrimary">#795548</item> <item name="colorPrimaryDark">#5D4037</item> <item name="colorAccent">#69F0AE</item> </style> .. </resources> styles.xml
  13. 13. <resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> .. </style> <style name="AppTheme.OverlayActionBar" parent="Theme.AppCompat.Light.NoActionBar"> <item name="colorPrimary">#795548</item> <item name="colorPrimaryDark">#5D4037</item> <item name=“colorAccent">#69F0AE</item> <item name="windowActionBarOverlay">true</item> </style> <style name="ToolbarStyle" parent="Widget.AppCompat.Toolbar"> <item name="android:background">?attr/colorPrimary</item> <item name="theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item> <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item> </style> </resources> styles.xml
  14. 14. public class LowProfileActivity extends ActionBarActivity { Toolbar toolbar; ... @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_low_profile); ... toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); getSupportActionBar().setDisplayHomeAsUpEnabled(true); } ... } LowProfileActivity.java
  15. 15. public class LowProfileActivity extends ActionBarActivity { Animation animShow; Animation animHide; ... @Override protected void onCreate(Bundle savedInstanceState) { animShow = AnimationUtils.loadAnimation(this, R.anim.abc_slide_in_top); animHide = AnimationUtils.loadAnimation(this, R.anim.abc_slide_out_top); ... findViewById(R.id.toggle).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if (toolbar.getVisibility() == View.VISIBLE) { ... toolbar.startAnimation(animHide); toolbar.setVisibility(View.GONE); } else { ... toolbar.setVisibility(View.VISIBLE); toolbar.startAnimation(animShow); } } }); } } LowProfileActivity.java
  16. 16. public class LowProfileActivity extends ActionBarActivity { ObjectAnimator statusBarAnimator; ArgbEvaluator argbEvaluator; @Override protected void onCreate(Bundle savedInstanceState) { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { argbEvaluator = new ArgbEvaluator(); } findViewById(R.id.toggle).setOnClickListener(new View.OnClickListener() { @Override @TargetApi(Build.VERSION_CODES.ICE_CREAM_SANDWICH) public void onClick(View v) { View decorView = getWindow().getDecorView(); if (toolbar.getVisibility() == View.VISIBLE) { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { changeStatusBarBackground(false); } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH) { .. } ... } else { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { changeStatusBarBackground(true); } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH) { .. } ... } } LowProfileActivity.java
  17. 17. @TargetApi(Build.VERSION_CODES.HONEYCOMB) private void changeStatusBarBackground(boolean isToolbarShown) { if (statusBarAnimator != null) { statusBarAnimator.cancel(); } TypedValue resValue = new TypedValue(); getTheme().resolveAttribute(R.attr.colorPrimaryDark, resValue, true); if (isToolbarShown) { statusBarAnimator = ObjectAnimator.ofInt(getWindow(), "statusBarColor", Color.BLACK, resValue.data); } else { statusBarAnimator = ObjectAnimator.ofInt(getWindow(), "statusBarColor", resValue.data, Color.BLACK); } statusBarAnimator.setDuration(250); statusBarAnimator.setEvaluator(argbEvaluator); statusBarAnimator.start(); } LowProfileActivity.java
  18. 18. Q&A

×