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

Popular posts from this blog

Android Basic Tutorial : Get the Current Date and Time

Here’s a code snipped to get the current date and/or time. This snipped uses the Calendar object (java.util.Calendar) which is a useful class when working with dates.






//Get a calendar object for the current date and time Calendar CurrentDateTime = Calendar.getInstance();
//Example: Get current day of the month

Android Basic Tutorial : Circular Seek Bar

public class Welcome extends Activity {     CircularSeekBar circularSeekbar;
    @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         circularSeekbar = new CircularSeekBar(this);         circularSeekbar.setMaxProgress(100);         circularSeekbar.setProgress(100);         setContentView(circularSeekbar);         circularSeekbar.invalidate();
        circularSeekbar.setSeekBarChangeListener(new OnSeekChangeListener() {
            @Override             public void onProgressChange(CircularSeekBar view, int newProgress) {                 Log.d("Welcome", "Progress:" + view.getProgress() + "/" + view.getMaxProgress());             }         });
    } }