I am currently using Material Design TextInputLayout OutlinedBox as shown below:
<android.support.design.widget.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TextInputEditText
android:id="#+id/myEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Title"
android:inputType="text"/>
</android.support.design.widget.TextInputLayout>
I am trying to add a dropdown box Spinner under my TextInputEditText, and would like to keep the same styling: OutlinedBox.
I see that dropdowns seem to be supported in Material Design, Material Design Text Fields. As shown on here for the Area:
I am currently using a Spinner to generate the Dropdown.
<Spinner
style="#style/Widget.AppCompat.Spinner.DropDown"
android:id="#+id/option"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:dropDownWidth="match_parent" />
It doesn't seem possible to add a dropdown following the OutlinedBox design. Is there a library out there that would allow me to make this happen, or is there a better way to implement this within Material Design?
I am assuming you want to have an Exposed drop-down menu inside the TextInputLayout I had the same problem, what you can do is use AutoCompleteTextView inside your TextInputLayout as in the following in the XML. here's an example of how I approached the issue.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingRight="30dp"
android:paddingEnd="30dp"
tools:ignore="RtlSymmetry"
android:layout_margin="5dp">
<ImageView
android:layout_width="30dp"
android:layout_margin="10dp"
android:layout_height="match_parent"
app:srcCompat="#drawable/ic_location_city_black_24dp"
android:layout_gravity="center"
/>
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Type"
android:orientation="horizontal"
>
<AutoCompleteTextView
android:id="#+id/filled_exposed_dropdown"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="none"/>
</com.google.android.material.textfield.TextInputLayout>
</LinearLayout>
</LinearLayout>
You will also need an item layout resource to populate the dropdown popup. The example below provides a layout that follows the Material Design guidelines.
res/layout/dropdown_menu_popup_item.xml
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:ellipsize="end"
android:maxLines="1"
android:textAppearance="?attr/textAppearanceSubtitle1"/>
In your class add the following code depending on what you want.
String[] type = new String[] {"Bed-sitter", "Single", "1- Bedroom", "2- Bedroom","3- Bedroom"};
ArrayAdapter<String> adapter =
new ArrayAdapter<>(
this,
R.layout.dropdown_menu_popup_item,
type);
AutoCompleteTextView editTextFilledExposedDropdown =
findViewById(R.id.filled_exposed_dropdown);
editTextFilledExposedDropdown.setAdapter(adapter);
incase this doesn't help kindly check Exposed Dropdown Menus in material design page.
[https://material.io/develop/android/components/menu/][1]
This is my first answer on stack overflow I hope it helps.
Just use the TextInputLayout included in the Material Components Library with the style Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu.
Something like:
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
android:hint="Hint text"
...>
<AutoCompleteTextView
android:id="#+id/outlined_exposed_dropdown_editable"
.../>
</com.google.android.material.textfield.TextInputLayout>
I believe that this document isn't showing a Spinner at all. I think it's showing a TextInputLayout with a dropdown icon.
In the Anatomy section, at the Icons subsection, it says
5. Dropdown icon
A dropdown arrow indicates that a text field has a nested selection component.
Now, how you provide the "nested selection component" I'm not sure...
From the other answers, "AutoCompleteTextView" is the answer but it does not do the same as a spinner does.
Here is my solution. Just put normal edittext inside TextInputLayout and make this editText disabled for inputs. And put a 0dp,0dp spinner for normal spinner working.
Don't make spinner visibility=gone, because if it's gone, spinner listener does not work
layout.xml
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/_10dp"
android:theme="#style/ThemeOverlay.App.TextInputLayout">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableEnd="#drawable/arrow_down_pacific_blue"
android:focusable="false"
android:hint="şehir"
android:inputType="none" />
</com.google.android.material.textfield.TextInputLayout>
<Spinner
android:id="#+id/spinner"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="10dp"
android:background="#android:color/transparent"
android:spinnerMode="dialog"
tools:listitem="#layout/general_spinner_item" />
java code
set click listener to edittext for trigger spinner click
findViewById(R.id.editText).setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
spinner.performClick();
}
});
in spinner listener, set edittext text from selected item,
spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
#Override
public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
selectedCity= (City) parent.getAdapter().getItem(position);
editText.setText(selectedCity.getScreenText());
RDALogger.debug("selectedObject " + selectedCity);
}
#Override
public void onNothingSelected(AdapterView<?> parent) {
}
});
and the result view
I am using the below material libs to get spinner
implementation 'androidx.appcompat:appcompat:1.2.0'
implementation 'com.google.android.material:material:1.2.1'
Here is my layout look like
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
android:layout_width="500dp"
android:layout_height="wrap_content"
android:hint="#string/select_wifi"
app:hintTextAppearance="#style/hintStyle"
app:startIconDrawable="#drawable/wifi">
<com.google.android.material.textfield.MaterialAutoCompleteTextView
style="#style/textInputEdittext"
android:inputType="none" />
</com.google.android.material.textfield.TextInputLayout>
Check out this image for the spinner
It seems like they actually use a TextInputLayout wrapping up an AutoCompleteTextView. Note that they are already the material Components theme [https://github.com/material-components/material-components-android/blob/master/docs/getting-started.md].
See:
https://material.io/design/components/menus.html#exposed-dropdown-menu
https://material.io/develop/android/components/menu/
I solved my problem using this:
in XML:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/layout"
style="#style/AppTheme.ExposedDropdownMenu"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<AutoCompleteTextView
android:id="#+id/my_spinner_dropdown"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>
in code:
layout.keyListener=null
ArrayAdapter(it, android.R.layout.simple_list_item_1, list).also {
adapter ->
layout.setAdapter(adapter)
}
Credits:How to make EditText not editable through XML in Android?
You can check my Medium article where I introduce a custom MaterialSpinner which supports two-way data binding and selection tracking. The resulting layout can look as simple as this:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/input_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="#string/selection_hint"
app:startIconDrawable="#drawable/selection_icon"
app:boxBackgroundMode="outline"
app:endIconMode="#{viewModel.items == null || viewModel.items.size() != 0 ? TextInputLayout.END_ICON_DROPDOWN_MENU : TextInputLayout.END_ICON_NONE}">
<com.example.MaterialSpinner
android:id="#+id/items"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:items="#{viewModel.items}"
app:selectedPosition="#={viewModel.selectedItemPosition}"
app:emptyText="#string/selection_no_item_text" />
</com.google.android.material.textfield.TextInputLayout>
I know its too late to answer this question, but somebody like me stuck in issue like this or similar may find this very useful. Visit this repo its perfect solution as requested. This library support all material TextInputLayout styles. Thanks to "Mamoon Al-hawamdeh" for this amazing library.
All this answers are helpful but the one important note that is if you set app:endIconMode attribute, your Drop down menu not work.
Just change inputType from "text" to "none"
<android.support.design.widget.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TextInputEditText
android:id="#+id/myEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Title"
android:inputType="none"/>
</android.support.design.widget.TextInputLayout>
Steps to reproduce:
AndroidManifest.xml
<activity
android:name=".MainActivity"
android:theme="#style/Theme.AppCompat.Light.NoActionBar"/>
MainActivity.java
public class MainActivity extends AppCompatActivity{
#Override
protected void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="?android:textColorPrimary"
android:text="Hello World!"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="?android:textColorSecondary"
android:text="Hello World!"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="?android:textColorTertiary"
android:text="Hello World!"/>
</LinearLayout>
Start the MainActivity and we get:
Use the layout inspector we read the current text color of the lower two TextViews to be the same value -1979711488, which corresponds to color hex #8a000000. I looked up the source code of Android and found that textColorSecondary is controlled by an alpha value defined in colors_material.xml as:
<item name="secondary_content_alpha_material_light" format="float" type="dimen">0.54</item>
which translates to #8a0000000. And textColorTertiary is defined explicitly to be #8a0000000. However, in my Android Studio 3.0.1, design panel, they show as three different colors:
Is it true that both colors are defined the same? or what am I missing to properly use them?
I have custom actionbar but it gives some margin from left and right. I don't want any margin from left or right. I have tried some solutions but there is no progress. How can i remove them ? Thanks in advance
custom_actionbar.xml:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/yazi"
android:orientation="horizontal">
<TableRow>
<ImageButton
android:id="#+id/imgSideBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center_vertical"
android:scaleType="centerCrop"
android:background="#mipmap/menu_open" />
<TextView
android:id="#+id/txtBaslik"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical"
android:padding="10dp"
android:text="Some text"
android:textAlignment="center"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/white"
android:textSize="18sp" />
<TextView
android:id="#+id/txtAsamaSayisi"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:padding="10dp"
android:text="1/24"
android:textAlignment="viewEnd"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="#dimen/_9sdp"
android:textStyle="bold"
android:visibility="invisible" />
<ImageButton
android:id="#+id/imgArrows"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center_vertical"
android:background="#android:color/transparent"
android:src="#mipmap/left_right_arrows"
android:visibility="invisible" />
</TableRow>
</TableLayout>
And my java class:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main_menu);
//Setting custom actionbar
getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
getSupportActionBar().setDisplayShowCustomEnabled(true);
getSupportActionBar().setCustomView(R.layout.custom_actionbar);
//Some codes...
}
And screenshot of my result. As you can see there are some margins from left and right.
Edit: my main xml codes:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
tools:context="com.cybersoft.intvrg.BeyannameDoldur">
<FrameLayout
android:id="#+id/main_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true">
</FrameLayout>
</RelativeLayout>
My styles.xml code:
<style name="CustomTheme" parent="Theme.AppCompat.Light">
<!--<item name="contentInsetStart">0dp</item>-->
<!--<item name="contentInsetEnd">0dp</item>-->
<item name="android:windowContentOverlay">#null</item>
<item name="android:homeAsUpIndicator">#null</item>
</style>
Call View class .
You should add LayoutParams.MATCH_PARENT
Special value for the height or width requested by a View.
MATCH_PARENT means that the view wants to be as big as its parent,
minus the parent's padding, if any
getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
getSupportActionBar().setDisplayShowCustomEnabled(true);
View viewOBJ = getLayoutInflater().inflate(R.layout.custom_actionbar,null);
LayoutParams layoutParams = new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT);
getSupportActionBar().setCustomView(viewOBJ, layoutParams);
It looks like you are defining a margin somewhere in your java code, I can't see any other way it should display like that. Maybe you can find it yourself or you can show us the Java Code where you are defining the actionbar.
Additionally, the documentation says that TableRow enforces its children to always use MATCH_PARENT and WRAP_CONTENT for layout_width and layout_height respectively. This could lead to some issue, if not specified correctly.
Best regards.
This happens because ActionBar keep some space for "Home" button and some others.
To remove them, you have to add this properties in your root action bar Layout:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbarFromActivityB"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetRight="0dp"
app:contentInsetEnd="0dp">
<TableLayout
...
>
/>
As you can see you have tu put your layout from your action bar inside a android.support.v7.widget.Toolbar. Later you will have to inflate it with setSupportActionBar(toolbar) being toolbar the view from XML before (toolbarFromActivityB).
As you have your toolbar in other file, you will have to include it in your activity xml (<include layout="#layout/custom_actionbar" />)
Don't get the existing "actionbar" and inflate a customview. Instead of that set a new toolbar for your new Activity.
In my android app, I have a hint text in my EditText view. Once the user starts typing, I want the hint to be displayed on top of the edittext field. The original hint text disappears when user starts typing which is fine. How do I place a text on top of the edittext field ? Is there a way to make the EditText field multiline and use the first line for hint? But the user input should always start from the second line.
Thanks in advance for your help!
Just found that they are called floating inline labels in android.
http://www.google.com/design/spec/components/text-fields.html#text-fields-floating-labels
But looks like API 21 doesnt support this yet.
There new widget provide by android called TextInputLayout it is the standard way. Below is an example of it:
<android.support.design.widget.TextInputLayout
android:id="#+id/first_text_input_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/first_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="hello"/>
</android.support.design.widget.TextInputLayout>
You can use FloatLabelLayout. It's a custom component that works as described in the google documentation.
Once you create the custom component you can use it in this way:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<your.package.FloatLabelLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:floatLabelTextAppearance="#style/TextAppearance.YourApp.FloatLabel">
<EditText
android:id="#+id/edit_username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/account_username_hint"
android:singleLine="true"
android:inputType="textNoSuggestions"
android:imeOptions="actionNext"
android:nextFocusDown="#+id/edit_password" />
</your.package.FloatLabelLayout>
<your.package.FloatLabelLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:floatLabelTextAppearance="#style/TextAppearance.YourApp.FloatLabel">
<EditText
android:id="#+id/edit_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/account_password_hint"
android:singleLine="true"
android:inputType="textNoSuggestions"
android:imeOptions="actionDone" />
</your.package.FloatLabelLayout>
</LinearLayout>
I'm trying to figure out how to embed things, other than Drawables, inside an EditText widget. Specifically the example I'm thinking of is from the Google Buzz widget:
screenshot
(no inline image, sorry, I'm a newb)
It appears to the casual observer that there's an entire layout object pinned to the bottom of the EditText, containing an ImageView, a TextView, and a Button.
Anyone have any idea how to pull this off? Or do we think this is a custom subclass of EditText?
The EditText + Button + ... it's a FrameLayout with the EditText with fill_parent and the Buttons with layout_gravitiy:"bottom". Something like this:
<?xml version="1.0" encoding="utf-8"?> <!-- Main Layout (may be relative or whatever --> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<!-- Layout for edittext and button -->
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:lines="5"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="5dip"
android:text="Overflow"/>
</FrameLayout>
<!-- More layouts ..... --> </RelativeLayout>
you can use frame layout for embed Button in EditText,here i give sample code for embed TextView in EditText,just change the TextView as Button
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="40px"
android:layout_y="35px"
>
<EditText android:id="#+id/twt_post_content" android:layout_gravity="center_vertical"
android:layout_width="320dp" android:layout_height="140dp"
android:paddingTop="5dp" android:imeOptions="actionDone"
android:gravity="left" android:focusableInTouchMode="true"
android:maxLength="140" android:ellipsize="end" />
<TextView
android:text="123"
android:paddingLeft="270dp"
android:paddingTop="100dp"
android:layout_alignParentRight="true"
android:id="#+id/twt_content_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/red"
android:layout_gravity="center"
android:background="#color/transparent"/>
</FrameLayout>
I think that what they have done here is create a background for their layout that looks like an EditText. Then they added an EditText with the background turned off and come Buttons.