Android announced Material Design as a new feature to Android 5.0 Lollipop version. Material Design guides creation of user experiences that work well on different devices, with different input methods and on different platforms. Google is gradually implementing Material Design in their apps and products.
One interesting new design pattern is the promoted action, implemented as a floating action button. This pattern describes the underlying principles of Material Design and is a good place to start adapting existing applications to the new version of Android. In this example we will see how to implement a floating action button.
You will need android studio or Android L preview setup installed on your system to check this example running.
Example Steps
1.) Create a new project and name it FloatingActionButton.
2.) Write following into main.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/sample_main_layout"> <ViewAnimator android:id="@+id/sample_output" android:layout_width="match_parent" android:layout_height="0px" android:layout_weight="1"> <ScrollView style="@style/Widget.SampleMessageTile" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView style="@style/Widget.SampleMessage" android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingLeft="@dimen/horizontal_page_margin" android:paddingRight="@dimen/horizontal_page_margin" android:paddingTop="@dimen/vertical_page_margin" android:paddingBottom="@dimen/vertical_page_margin" android:text="@string/intro_message" /> </ScrollView> <fragment android:name="com.example.android.common.logger.LogFragment" android:id="@+id/log_fragment" android:layout_width="match_parent" android:layout_height="match_parent" /> </ViewAnimator> <View android:layout_width="match_parent" android:layout_height="1dp" android:background="@android:color/darker_gray" /> <FrameLayout android:id="@+id/sample_content_fragment" android:layout_weight="2" android:layout_width="match_parent" android:layout_height="0px" /> </LinearLayout>
3.) Create and write following into fab_layout.xml:
<FrameLayout android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <com.example.android.floatingactionbuttonbasic.FloatingActionButton android:id="@+id/fab_1" android:layout_width="@dimen/fab_size" android:layout_height="@dimen/fab_size" android:layout_marginTop="16dp" android:elevation="@dimen/fab_elevation" android:background="@drawable/fab_background" android:stateListAnimator="@animator/fab_anim" android:layout_gravity="center_horizontal"> <ImageView android:layout_width="@dimen/fab_icon_size" android:layout_height="@dimen/fab_icon_size" android:src="@drawable/fab_icons" android:layout_gravity="center" android:duplicateParentState="true"/> </com.example.android.floatingactionbuttonbasic.FloatingActionButton> <com.example.android.floatingactionbuttonbasic.FloatingActionButton android:id="@+id/fab_2" android:layout_width="@dimen/fab_size_small" android:layout_height="@dimen/fab_size_small" android:layout_marginTop="128dp" android:elevation="@dimen/fab_elevation" android:background="@drawable/fab_background" android:stateListAnimator="@animator/fab_anim" android:layout_gravity="center_horizontal"> <ImageView android:layout_width="@dimen/fab_icon_size" android:layout_height="@dimen/fab_icon_size" android:src="@drawable/fab_icons" android:layout_gravity="center" android:duplicateParentState="true"/> </com.example.android.floatingactionbuttonbasic.FloatingActionButton> </FrameLayout>
4.) Write following into mainActivity:
package com.example.android.floatingactionbuttonbasic; import android.os.Bundle; import android.support.v4.app.FragmentTransaction; import android.view.Menu; import android.view.MenuItem; import android.widget.ViewAnimator; import com.example.android.common.activities.SampleActivityBase; import com.example.android.common.logger.Log; import com.example.android.common.logger.LogFragment; import com.example.android.common.logger.LogWrapper; import com.example.android.common.logger.MessageOnlyLogFilter; /** * A simple launcher activity containing a summary sample description, sample log and a custom * {@link android.support.v4.app.Fragment} which can display a view. * <p> * For devices with displays with a width of 720dp or greater, the sample log is always visible, * on other devices it's visibility is controlled by an item on the Action Bar. */ public class MainActivity extends SampleActivityBase { public static final String TAG = "MainActivity"; // Whether the Log Fragment is currently shown private boolean mLogShown; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); if (savedInstanceState == null) { FragmentTransaction transaction = getSupportFragmentManager().beginTransaction(); FloatingActionButtonBasicFragment fragment = new FloatingActionButtonBasicFragment(); transaction.replace(R.id.sample_content_fragment, fragment); transaction.commit(); } } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.main, menu); return true; } @Override public boolean onPrepareOptionsMenu(Menu menu) { MenuItem logToggle = menu.findItem(R.id.menu_toggle_log); logToggle.setVisible(findViewById(R.id.sample_output) instanceof ViewAnimator); logToggle.setTitle(mLogShown ? R.string.sample_hide_log : R.string.sample_show_log); return super.onPrepareOptionsMenu(menu); } @Override public boolean onOptionsItemSelected(MenuItem item) { switch(item.getItemId()) { case R.id.menu_toggle_log: mLogShown = !mLogShown; ViewAnimator output = (ViewAnimator) findViewById(R.id.sample_output); if (mLogShown) { output.setDisplayedChild(1); } else { output.setDisplayedChild(0); } supportInvalidateOptionsMenu(); return true; } return super.onOptionsItemSelected(item); } /** Create a chain of targets that will receive log data */ @Override public void initializeLogging() { // Wraps Android's native log framework. LogWrapper logWrapper = new LogWrapper(); // Using Log, front-end to the logging chain, emulates android.util.log method signatures. Log.setLogNode(logWrapper); // Filter strips out everything except the message text. MessageOnlyLogFilter msgFilter = new MessageOnlyLogFilter(); logWrapper.setNext(msgFilter); // On screen logging via a fragment with a TextView. LogFragment logFragment = (LogFragment) getSupportFragmentManager() .findFragmentById(R.id.log_fragment); msgFilter.setNext(logFragment.getLogView()); Log.i(TAG, "Ready"); } }
OutPut
Extracting Colors In Android 5.0 – “The Palette API”
Lock Screen Notifications In Android 5.0
Reveal Animation Example Introduced In Android 5.0
Ripple Animation In Android 5.0
Elevation Effects Introduced In Android5.0
First Android 5.0 Project
ViewStub Example And Use In Android
Include-Merge Example in Android