Android 5.x--using material theme plus palette

Source: Internet
Author: User

Android5.0 has a big change compared to previous versions: supporting the theme style of material design in android5.x, which is a significant change in the visual sense. The new theme style gives the impression of a bright, original android can be so beautiful, I believe that through continuous improvement, Android will become more and more powerful. So today, let's introduce how to use the theme that is so bright in front of us.

Start using

Currently only the version above the Android5.0 can support the material theme style, so we first define the use material theme in the Res/values-v21/styles.xml file.

<resources>    <style name="AppTheme" parent="android:Theme.Material.Light">       </style></resources>

Note If you modify the Values/styles.xml file directly, the compiler will prompt that the topic does not exist in the lowest API version currently supported.

Customize your theme

The Android Developer website gives a picture that tells us the color attributes that the material theme supports and allows us to customize our theme:

This allows us to modify these values to customize our own theme:

<resources> <stylename="Apptheme"Parent="Android:Theme.Material.Light"> <Item name="Android:colorprimary">#00ffff </item><Item name="Android:colorprimarydark">#0000ff </item><Item name="Android:navigationbarcolor">#0000ff </item><Item name="Android:textcolorprimary">#fff </item></style></resources>

Run it on the Android5.0 simulator,

How, even the title bar and the bottom of the navigation bar can change the color, and even actionbar are not the same as before, is not very cool.

Android also allows you to use the Android:statusbarcolor property, or use the Window.setstatusbarcolor method to quickly set the color of the status bar.

Adaptation to a lower Android version

Everything is good, but my theme can only be used in the version above 5.0, too disappointing. Don't worry, Google will certainly provide support for the lower version, so let's see what we can do.

1. In Android Studio, first add the following Gradle dependent modules to the project:

dependencies {    ......    ‘com.android.support:appcompat-v7:22.0.0‘}

We then add our own theme to the Values/style.xml file, noting that we are no longer using Android: Theme.Material.XXX theme, instead of using the theme Theme.AppCompat.XXX in the dependent Library, Android:Theme.Material.XXX topics in Values-v21/style.xml are no longer needed.

name="AppTheme" parent="Theme.AppCompat.Light">        <!-- Customize your theme here. -->        <itemname="colorPrimary">#0ff</item>        <itemname="colorPrimaryDark">#00f</item>        <itemname="colorAccent">#fff</item></style>

The name of the Textcolorprimary attribute found in the test was changed to Coloraccent

2. In eclipse, we need to upgrade to the latest ADT and SDK, import the APPCOMPAT-V7 Library project in workspace, then the use of the same steps are identical, you can give it a try.

Use of Palette

At the same time, in Android 5.0 Google also released a new class palette help us extract color values in bitmap, let me more convenient to customize their own theme, come together to see it.

This class can extract the following prominent colors:

    • Vibrant (fresh)
    • Vibrant Dark (crisp dark color)
    • Vibrant light (crisp bright color)
    • Muted (soft)
    • Muted dark (soft dark color)
    • Muted lighr (soft bright color)
Using palette

Before we use it first, we need to refer to the dependent library to our project:

dependencies {      ...      ‘com.android.support:palette-v7:21.0.+‘  }  

By calling palette's static method generate or Generateasync can help us extract the color value, the process of extracting the color must be executed in the asynchronous thread.

Note that the Generate method does not allow calls in the main thread, and if you do not use an asynchronous thread, you can use the Generateasync method to help us Open an asynchronous thread and listen for callback events.

Palette.generateAsync(bitmap,        new Palette.PaletteAsyncListener() {    @Override    publicvoidonGenerated(Palette palette) {         Palette.Swatch vibrant =                 palette.getVibrantSwatch();          ifnull) {              // If we have a vibrant color             .......          }    }});
Get bitmap from view

The incoming object must be a bitmap object, so how to convert from a view to bitmap, which we can do with canvas drawing:

PrivateBitmapGetviewbitmap(View v)    {V.clearfocus (); V.setpressed (false);BooleanWillnotcache = V.willnotcachedrawing (); V.setwillnotcachedrawing (false);intcolor = V.getdrawingcachebackgroundcolor (); V.setdrawingcachebackgroundcolor (0);if(Color! =0) {V.destroydrawingcache ();    } v.builddrawingcache (); Bitmap Cachebitmap = V.getdrawingcache ();if(Cachebitmap = =NULL) {return NULL; } Bitmap Bitmap = Bitmap.createbitmap (Cachebitmap);//Restore the ViewV.destroydrawingcache ();    V.setwillnotcachedrawing (Willnotcache); V.setdrawingcachebackgroundcolor (color);returnBitmap;}

Now let's use it, by extracting the softer color from the entire layout of the activity and setting it to the status bar.

 PackageCom.example.acer.materialtest;ImportAndroid.graphics.Bitmap;ImportAndroid.graphics.Canvas;Importandroid.support.v7.app.ActionBarActivity;ImportAndroid.os.Bundle;ImportAndroid.support.v7.graphics.Palette;ImportAndroid.view.View;ImportAndroid.widget.LinearLayout; Public  class mainactivity extends actionbaractivity {    PrivateLinearLayout containlayout;@Override    protected void onCreate(Bundle savedinstancestate) {Super. OnCreate (Savedinstancestate);        Setcontentview (R.layout.activity_main);        Containlayout = (linearlayout) Findviewbyid (r.id.contain_layout); Bitmap Bitmap = Getviewbitmap (containlayout);if(Bitmap! =NULL) Palette.generateasync (Bitmap,NewPalette.paletteasynclistener () {@Override                         Public void ongenerated(Palette Palette) {Palette.swatch Swatch = Palette.getdarkmutedswatch ();if(Swatch! =NULL) {GetWindow (). Setstatusbarcolor (Swatch. getRGB ());    }                        }                    }); }PrivateBitmapGetviewbitmap(View v)        {V.clearfocus (); V.setpressed (false);BooleanWillnotcache = V.willnotcachedrawing (); V.setwillnotcachedrawing (false);//Reset the drawing cache background color to fully transparent        // for the duration of this operation        intcolor = V.getdrawingcachebackgroundcolor (); V.setdrawingcachebackgroundcolor (0);if(Color! =0) {V.destroydrawingcache ();        } v.builddrawingcache (); Bitmap Cachebitmap = V.getdrawingcache ();if(Cachebitmap = =NULL) {return NULL; } Bitmap Bitmap = Bitmap.createbitmap (Cachebitmap);//Restore the ViewV.destroydrawingcache ();        V.setwillnotcachedrawing (Willnotcache); V.setdrawingcachebackgroundcolor (color);returnBitmap }}

The effect is as follows:

Android 5.x--using material theme plus palette

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.