Google introduced Material Design at I/O 2014 and since then it has transformed the visual language of Android. By 2016 it’s no longer a differentiator — it’s an expectation. Users notice when apps don’t follow it. This post covers the practical components that make Material Design apps feel native and polished.
AppCompat: Backporting Material to Older APIs
Add the AppCompat support library to your build.gradle:
compile 'com.android.support:appcompat-v7:24.2.0'
compile 'com.android.support:design:24.2.0'Extend AppCompatActivity and apply a Theme.AppCompat variant. This gives you Material-style toolbar, buttons, and controls back to API 14.
CoordinatorLayout and AppBarLayout
The CoordinatorLayout is the foundation of scroll-driven animations in Material apps. Combined with AppBarLayout and CollapsingToolbarLayout, you get the beautiful collapsing header effect with zero custom code:
<android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.AppBarLayout
android:layout_height="200dp">
<android.support.design.widget.CollapsingToolbarLayout
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>RecyclerView: The Modern List
RecyclerView replaces ListView with a far more flexible architecture. The LayoutManager controls arrangement (linear, grid, staggered grid), and the ViewHolder pattern is now enforced, eliminating the performance antipatterns that plagued ListView apps.
Floating Action Button
The FAB is Material Design’s primary action button. One line in your layout file:
<android.support.design.widget.FloatingActionButton
android:src="@drawable/ic_add"
app:fabSize="normal"
app:layout_anchorGravity="bottom|right|end" />Material Color Palette
Define your palette in colors.xml. Always use a primary colour, a dark variant, and an accent colour from the Material colour system. Avoid pure black on white — Material uses #212121 for primary text and #757575 for secondary.
Ripple Touch Feedback
On API 21+ all Material components get ripple touch feedback automatically. For custom views, add android:background="?attr/selectableItemBackground" to get the ripple effect for free.
Material Design is a comprehensive system, not just a visual style. When you implement it correctly — with motion, elevation, and semantic colour — your app communicates intent clearly without a single word of on-screen instruction.
