Skip to main content

Floating Labels : Material Design Tips

Floating labels
From google material design documentation.
When the user engages with the text input field, the floating inline labels move to float above the field.

How to add?

I. In your build.gradle add latest appcompat and design libraries.
dependencies {  
    compile 'com.android.support:appcompat-v7:X.X.X' // where X.X.X version
    compile 'com.android.support:design:X.X.X' // where X.X.X version
}
II. Make your activity extend android.support.v7.app.AppCompatActivity.
public class MainActivity extends AppCompatActivity {  
    ...
}
III. Declare your EditText inside any layout.xml file and wrap it with TextInputLayout.
<android.support.design.widget.TextInputLayout  
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/Title" />

</android.support.design.widget.TextInputLayout>  
Both widgets TextInputLayout and EditText have android:hint attribute, you can use any of them.

How to style?

Floating labels
I. Declare custom styles in your styles.xml file.
<!--Floating label text style-->  
<style name="MyHintText" parent="TextAppearance.AppCompat.Small">  
    <item name="android:textColor">@color/pink</item>
</style>

<!--Input field style-->  
<style name="MyEditText" parent="Theme.AppCompat.Light">  
    <item name="colorControlNormal">@color/indigo</item>
    <item name="colorControlActivated">@color/pink</item>
</style>  
II. Apply this styles to your TextInputLayout via app:hintTextAppearance attribute and to EditText via android:theme attribute.
<android.support.design.widget.TextInputLayout  
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:hintTextAppearance="@style/MyHintText">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/Title"
        android:theme="@style/MyEditText" />

</android.support.design.widget.TextInputLayout>  

Comments

  1. nice post Vendorzapp Compnay provides Mobile apps for small business, Ecommerce android apps India, iOS ecommerce apps, Ecommerce website Pune, Ready ecommerce website and apps. Android ecommerce apps then visit now Ecommerce android apps India, iOS ecommerce apps, ecommerce website for small business call us +91-9850889625

    ReplyDelete

Post a Comment

Popular posts from this blog

Raised Button : Material Design Tips

From google material design documentation.
A typically rectangular material button that lifts and displays ink reactions on press. How to add? I. In your build.gradle add latest appcompat library. dependencies { compile 'com.android.support:appcompat-v7:X.X.X'// where X.X.X version} II. Make your activity extend android.support.v7.app.AppCompatActivity. publicclassMainActivityextendsAppCompatActivity{...} III. Declare your Button inside any layout.xml file <Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button"/> How to style?
I. Declare custom style in your styles.xml file.

Switch : Material Design Tips

From google material design documentation.
On/off switches toggle the state of a single settings option. The option that the switch controls, as well as the state it’s in, should be made clear from the corresponding inline label. Switches take on the same visual properties of the radio button.
The on/off slide toggle with the text “on” and “off” included within the asset is deprecated. Use the switch shown here instead. How to add? I. In your build.gradle add latest appcompat library. dependencies { compile 'com.android.support:appcompat-v7:X.X.X'// where X.X.X version} II. Make your activity extend android.support.v7.app.AppCompatActivity. publicclassMainActivityextendsAppCompatActivity{...} III. Declare your SwitchCompat inside any layout.xml file <android.support.v7.widget.SwitchCompatandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:checked="true"/> SwitchCompat is a backward compatible version of the Switc…