Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Extended toolbar with two floating-label edit texts. The layout was made according to this image from the Material Design guidelines: http://i.imgur.com/x8QsuxU.png The layout below looks like this: http://i.imgur.com/8sOTv7h.png
dependencies {
compile 'com.android.support:appcompat-v7:21.+'
compile 'com.wrapp.floatlabelededittext:library:0.0.5'
}
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="232dp"
android:background="@color/primary"
android:elevation="4dp"
android:minHeight="56dp">
<include layout="@layout/toolbar_content" />
</android.support.v7.widget.Toolbar>
<style name="EditTextHeadline" parent="Base.Widget.AppCompat.EditText">
<item name="android:textColor">#fff</item>
<item name="android:textColorHint">#33ffffff</item>
<item name="android:textAppearance">@style/TextAppearance.AppCompat.Headline</item>
<item name="android:inputType">textCapSentences</item>
</style>
<style name="EditTextSubhead" parent="Base.Widget.AppCompat.EditText">
<item name="android:textColor">#fff</item>
<item name="android:textColorHint">#33ffffff</item>
<item name="android:textAppearance">@style/TextAppearance.AppCompat.Subhead</item>
<item name="android:inputType">textCapSentences</item>
</style>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="16dp"
android:orientation="vertical">
<!-- Toolbar space -->
<Space
android:layout_width="match_parent"
android:layout_height="56dp" />
<com.wrapp.floatlabelededittext.FloatLabeledEditText
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
style="@style/EditTextHeadline"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="16dp"
android:paddingTop="16dp"
android:hint="Title" />
</com.wrapp.floatlabelededittext.FloatLabeledEditText>
<!-- First divider space -->
<Space
android:layout_width="match_parent"
android:layout_height="8dp" />
<com.wrapp.floatlabelededittext.FloatLabeledEditText
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
style="@style/EditTextSubhead"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="12dp"
android:paddingTop="12dp"
android:hint="Description"/>
</com.wrapp.floatlabelededittext.FloatLabeledEditText>
<!-- Second divider space -->
<Space
android:layout_width="match_parent"
android:layout_height="16dp" />
</LinearLayout>
@oxcened

This comment has been minimized.

Copy link

@oxcened oxcened commented Mar 11, 2017

Thanks a lot! tried to do the same but the result wasn't as perfect as yours. However i've changed the inputs to TextInputLayout which animations are far fancier.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment