Recently I am implementing a material design to my existing application. For this I am using the following library : http://android-developers.blogspot.com/2015/05/android-design-support-library.html to achieve the following effect : https://plus.google.com/+AndroidDevelopers/posts/XUDGFS9eYxg.
My layout code is like below:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="350dp"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginBottom="32dp"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/event_image"
android:layout_width="fill_parent"
android:layout_height="350dp"
android:background="@color/white"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/anim_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
--------
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="30dp"
android:clickable="true"
android:src="@drawable/ic_action_share"
app:layout_anchor="@+id/appbar"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>
I achieve the desired effect but I have a problem with the image and the Text. The text is white color and when it happens that I have an image that in most part of it consist of white color, the text label cannot be read.
Any suggestion how to solve it, without destroying the effect?
You could use the Palette library.
With just a few lines it lets you analyze the image and extract the most appropriate text color, which will have a good contrast with the image behind.
Color can then be set on your CollapsingToolbarLayout.