Including the widgets

EditText

To include a floating label EditText in your layout, simply use the following XML code snippet:

<!-- An edit text -->
<com.marvinlabs.widget.floatinglabel.edittext.FloatingLabelEditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:flw_labelText="Simple text input" />

<!-- An edit text with a custom input type and an icon on the left -->
<com.marvinlabs.widget.floatinglabel.edittext.FloatingLabelEditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:drawableLeft="@drawable/ic_lock"
    android:drawablePadding="10dp"
    android:inputType="textPassword"
    app:flw_labelText="Password input" />

AutoCompleteTextView

To include a floating label AutoCompleteTextView in your layout, simply use the following XML code snippet:

<com.marvinlabs.widget.floatinglabel.autocomplete.FloatingLabelAutoCompleteTextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:flw_labelText="Simple text input" />

Then you simply need to give it an adapter to fetch the filtered data (we use a helper base class for the adapter but any kind of adapter working with standard AutoCompleteTextView should do):

public void prepareView {
    myWidget.setInputWidgetAdapter(new CountriesAutoCompleteAdapter(this));
}

static class CountriesAutoCompleteAdapter extends AsyncAutoCompleteAdapter {

    public CountriesAutoCompleteAdapter(Context context) {
        super(context);
    }

    @Override
    protected ArrayList<String> asyncGetResults(CharSequence constraint) {
        ArrayList<String> countries = yourFavouriteApi.getCountriesMatchingString(constraint);
        return countries;
    }
}

ItemPicker

To include a floating label ItemPicker in your layout, simply use the following XML code snippet:

<!-- A widget that shows the result of item selection -->
<com.marvinlabs.widget.floatinglabel.itempicker.FloatingLabelItemPicker
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:flw_labelText="Item picker" />

We then need some code to bring up the item picker. The library ships with simple DialogFragment picker implementations. Of course, you are free to roll your own pickers. Here is how we setup the widget in the demo activity:

public class MainWidgetsActivity extends FragmentActivity implements ItemPickerListener<String> {
    FloatingLabelItemPicker<String> picker;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Activity layout
        setContentView(R.layout.activity_main_widgets);

        // Spinners
        picker = (FloatingLabelItemPicker<String>) findViewById(R.id.picker1);

        // These are the items we want to be able to pick
        picker.setAvailableItems(new ArrayList<String>(Arrays.asList("Item 1.1", "Item 1.2", "Item 1.3")));

        // We listen to our pickerWidget events to show the dialog
        picker.setWidgetListener(new FloatingLabelItemPicker.OnItemPickerWidgetEventListener<String>() {
            @Override
            public void onShowItemPickerDialog(FloatingLabelItemPicker<String> source) {
                // We use fragments because we'll be safe in edge cases like screen orientation
                // change. You could use a simple AlertDialog but really, no, you don't want to.
                StringPickerDialogFragment itemPicker = StringPickerDialogFragment.newInstance(
                        source.getId(),
                        "My dialog title",
                        "OK", "Cancel",
                        true,
                        source.getSelectedIndices(),
                        new ArrayList<String>((Collection<String>) source.getAvailableItems()));
                
                // Optionally, you can set a target fragment to get the notifications
                // pickerFragment.setTargetFragment(MyFragment.this, 0);
                
                itemPicker.show(getSupportFragmentManager(), "ItemPicker");
            }
        });
    }

    // Implementation of the ItemPickerListener interface: those two methods get called by the
    // ItemPicker automatically when something happens

    @Override
    public void onCancelled(int pickerId) {
    }

    @Override
    public void onItemsSelected(int pickerId, int[] selectedIndices) {
        picker.setSelectedIndices(selectedIndices);
    }
}

Instant pickers (DatePicker and TimePicker)

To include a floating label instant picker in your layout, simply use the following XML code snippet:

<!-- A widget that shows the result of item selection -->
<com.marvinlabs.widget.floatinglabel.instantpicker.FloatingLabelDatePicker
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:flw_labelText="Date picker" />
    
<!-- A widget that shows the result of item selection -->
<com.marvinlabs.widget.floatinglabel.instantpicker.FloatingLabelTimePicker
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:flw_labelText="Time picker" />

We then need some code to bring up the instant pickers. The library ships with simple system picker implementations. Of course, you are free to roll your own pickers and/or use another library (Better pickers is great). Here is how we setup the widget in the demo activity:

public class MainWidgetsActivity extends FragmentActivity implements InstantPickerListener<TimeInstant> {
    FloatingLabelTimePicker timePicker;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Activity layout
        setContentView(R.layout.activity_main_widgets);

        // Spinners
        timePicker = (FloatingLabelTimePicker) findViewById(R.id.time_picker);
                
        // We listen to our pickerWidget events to show the dialog
        timePicker.setWidgetListener(new FloatingLabelInstantPicker.OnWidgetEventListener<TimeInstant>() {
            @Override
            public void onShowInstantPickerDialog(FloatingLabelInstantPicker<TimeInstant> source) {
                TimePickerFragment pickerFragment = TimePickerFragment.newInstance(source.getId(), source.getSelectedInstant());
                
                // Optionally, you can set a target fragment to get the notifications
                // pickerFragment.setTargetFragment(MyFragment.this, 0);
                
                pickerFragment.show(getSupportFragmentManager(), "TimePicker");
            }
        });
    }

    // Implementation of the InstantPickerListener interface

    @Override
    public void onInstantSelected(int pickerId, TimeInstant instant) {
        timePicker.setSelectedInstant(instant);
    }
}

Item choosers

To include a floating label item chooser in your layout, simply use the following XML code snippet:

<!-- A widget that shows the result of item selection -->
<com.marvinlabs.widget.floatinglabel.itemchooser.FloatingLabelItemChooser
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:flw_labelText="Choose a product" />

This kind of widget lets you choose an item the way you want. The demo application shows how to implement item choosing by launching an activity and getting the result back.