Home Original page

GitHub - saulmm/Android-L-Preview-Concepts: This project is focused on the sample using the API's new preview version of Android-L, use of transitions, shadows etc...

Android L preview example

Description

This project is focused on the sample using the API's new preview version of Android-L, use of transitions, shadows etc...,

Alt text

UI

This app is aimed to use the new Material Design released at the Google I/0 14, to use the Material theme on your app, you only have to set the parent of your app style to @android:style/Theme.Material or @android:style/Theme.Material.Light and @android:style/Theme.Material.DarkActionBar.

Customize the Color Palette of your app

In the theme.xml of the MainActivity:

    <!-- App colors -->
    <color name="lollipop_theme_default_primary">#3F51B5</color>
    <color name="lollipop_theme_default_primary_dark">#303F9F</color>
    <color name="lollipop_theme_default_accent">#C5CAE9</color>
    <color name="fab_color">#FF4081</color>


    <!-- Main theme colors -->
    <style name="MainLollipopTheme" parent="android:Theme.Material.Light">
        <item name="android:colorPrimary">@color/lollipop_theme_default_primary</item>
        <item name="android:colorPrimaryDark">@color/lollipop_theme_default_primary</item>
        <item name="android:statusBarColor">@color/lollipop_theme_default_primary_dark</item>
        <item name="android:colorAccent">@color/lollipop_theme_default_accent</item>
        <item name="android:colorControlHighlight">@color/lollipop_theme_default_accent</item>
        <item name="android:navigationBarColor">@color/lollipop_theme_default_primary</item>

        <!-- Main theme action bar-->
        <item name="android:actionBarStyle">@style/MainActionBar</item>
        <item name="android:actionBarTheme">@style/MainActionBarThemeOverlay</item>


        <!-- lag indicating whether this window requests that content changes be performed
             as scene changes with transitions -->
        <item name="android:windowContentTransitions">true</item>

        <!-- Flag indicating whether this Window's transition should overlap with
             the exiting transition of the calling Activity. -->
        <item name="android:windowAllowEnterTransitionOverlap">true</item>

        <!--Flag indicating whether this Window's transition should overlap with
             the exiting transition of the called Activity when the called Activity
             finishes. -->
        <item name="android:windowAllowExitTransitionOverlap">true</item>

        <!-- Flag indicating whether this window's Action Bar should overlay -->
        <item name="android:windowActionBarOverlay">false</item>

        <!-- Flag indicating whether this window's Action Bar content should overlay -->
        <item name="android:windowContentOverlay">@null</item>
    </style>

Customizing the material theme <- This easy picture on Android Developers explains where are the attributes that of the previous code.

The FAB Button

Android-L introduces a new way to manage view with elevation and shadows, "Outlines represent the outer shape of a graphics object and define the ripple area for touch feedback." Android Developers, the fab button is defined as a ImageButton in the xml:

...
    <!-- fab button -->
    <ImageButton
        android:id="@+id/fab"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:layout_width="@dimen/fab_size"
        android:layout_height="@dimen/fab_size"
        android:layout_gravity="bottom|right"
        android:layout_marginRight="16dp"
        android:layout_marginBottom="16dp"
        android:background="@drawable/fab_ripple"
        android:elevation="@dimen/button_elevation"
        android:onClick="onFabClicked"
        android:src="@drawable/ic_action_add"/>
...
        // Configure the FAB button
        int size = getResources().getDimensionPixelSize(R.dimen.fab_size);
        Outline outline = new Outline();
        outline.setOval(0, 0, size, size);
        findViewById(R.id.fab).setOutline(outline);

Activity transitions

Now, with Android-L you can specify custom animations for enter and exit transitions, and for transition of shared elements between activities, to do that, first, you have to enable the window content transitions, in my case, at themes.xml you can set this values from java code as well.

    <style name="MainLollipopTheme" parent="android:Theme.Material.Light">
        ...
        <!-- lag indicating whether this window requests that content changes be performed
       as scene changes with transitions -->
        <item name="android:windowContentTransitions">true</item>

        <!-- Flag indicating whether this Window's transition should overlap with
             the exiting transition of the calling Activity. -->
        <item name="android:windowAllowEnterTransitionOverlap">true</item>

        <!--Flag indicating whether this Window's transition should overlap with
             the exiting transition of the called Activity when the called Activity
             finishes. -->
        <item name="android:windowAllowExitTransitionOverlap">true</item>

        <!-- Flag indicating whether this window's Action Bar should overlay -->
        <item name="android:windowActionBarOverlay">false</item>

        <!-- Flag indicating whether this window's Action Bar content should overlay -->
        <item name="android:windowContentOverlay">@null</item>
        ...
    </style>
    
        // Setup the transition to the detail activity
        ActivityOptions options =  ActivityOptions.makeSceneTransitionAnimation(MainActivity.this, view, "photo" + i);
        startActivity(detailIntent, options.toBundle());

Tools & References: