Skip to content

Instantly share code, notes, and snippets.

@chris95x8
Created October 28, 2014 14:00
Show Gist options
  • Star 67 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • Save chris95x8/53214de145571d410e13 to your computer and use it in GitHub Desktop.
Save chris95x8/53214de145571d410e13 to your computer and use it in GitHub Desktop.
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
Copy link

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