Related
In my Android application, I am using spinner, and I have loaded data from the SQLite database into the spinner, and it's working properly. Here is the code for that.
Spinner spinner = (Spinner) this.findViewById(R.id.spinner1);
List<String> list = new ArrayList<String>();
ArrayAdapter<String> dataAdapter = new ArrayAdapter<String> (this,android.R.layout.simple_spinner_item, list);
cursor.moveToFirst();
list.add("All Lists");
if (cursor.getCount() > 0) {
for (int i = 0; i < cursor.getCount(); i++) {
keyList[i] = cursor.getString(cursor.getColumnIndex(AndroidOpenDbHelper.KEYWORD));
list.add(keyList[i]);
cursor.moveToNext();
}
}
Database.close();
cursor.close();
dataAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
spinner.setAdapter(dataAdapter);
Now I want to change the text color and text size of spinner data. I have used following XML lines to my spinner tag on my XML file, but it is not working.
android:textColor="#android:color/white"
android:textSize="11dp"
How can I change the text color and text size of my spinner?
Make a custom XML file for your spinner item.
spinner_item.xml:
Give your customized color and size to text in this file.
<?xml version="1.0" encoding="utf-8"?>
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:gravity="left"
android:textColor="#FF0000"
android:padding="5dip"
/>
Now use this file to show your spinner items like:
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, R.layout.spinner_item,list);
You don't need to set the drop down resource. It will take spinner_item.xml only to show your items in spinner.
Simple and crisp...:
private OnItemSelectedListener OnCatSpinnerCL = new AdapterView.OnItemSelectedListener() {
public void onItemSelected(AdapterView<?> parent, View view, int pos, long id) {
((TextView) parent.getChildAt(0)).setTextColor(Color.BLUE);
((TextView) parent.getChildAt(0)).setTextSize(5);
}
public void onNothingSelected(AdapterView<?> parent) {
}
};
If all the spinners may have the same text color for their TextView items, another approach is to use a custom style for spinner dropdown items:
In res/values/styles.xml:
<resources>
<style name="AppBaseTheme" parent="android:Theme.Light">
</style>
<style name="AppTheme" parent="AppBaseTheme">
<item name="android:spinnerDropDownItemStyle">#style/mySpinnerItemStyle</item>
</style>
<style name="mySpinnerItemStyle" parent="#android:style/Widget.Holo.DropDownItem.Spinner">
<item name="android:textColor">#color/my_spinner_text_color</item>
</style>
</resources>
And define your custom color in res/values/colors.xml:
<color name="my_spinner_text_color">#808080</color>
Here is a link that can help you to change the color of the Spinner:
Click here
<Spinner
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/spinner"
android:textSize="20sp"
android:entries="#array/planets"/>
You need to create your own layout file with a custom definition for the spinner item spinner_item.xml:
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:textColor="#ff0000" />
If you want to customize the dropdown list items, you will need to create a new layout file. spinner_dropdown_item.xml:
<?xml version="1.0" encoding="utf-8"?>
<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/text1"
style="?android:attr/spinnerDropDownItemStyle"
android:maxLines="1"
android:layout_width="match_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:ellipsize="marquee"
android:textColor="#aa66cc"/>
And finally another change in the declaration of the spinner:
ArrayAdapter adapter = ArrayAdapter.createFromResource(this,
R.array.planets_array, R.layout.spinner_item);
adapter.setDropDownViewResource(R.layout.spinner_dropdown_item);
spinner.setAdapter(adapter);
That's it.
If you work with android.support.v7.widget.AppCompatSpinner here is the simplest tested solution using styles:
<android.support.v7.widget.AppCompatSpinner
android:id="#+id/spefcialFx"
style="#style/Widget.AppCompat.Spinner.Underlined"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:theme="#style/Spinner"
android:entries="#array/special_fx_arrays"
android:textSize="#dimen/text_size_normal"></android.support.v7.widget.AppCompatSpinner>
And the style:
<style name="Spinner" parent="Widget.AppCompat.Light.DropDownItem.Spinner">
<item name="android:paddingStart">0dp</item>
<item name="android:paddingEnd">0dp</item>
<item name="android:textColor">#color/white</item>
<item name="android:backgroundTint">#color/red</item>
<item name="android:textSize">14sp</item>
</style>
The only downside is the android:backgroundTint sets color for both the dropdown arrow and the dropdown background.
To prevent lagging, you need to not only set the text properties in the onItemSelected listener, but also in the Activity's onCreate method (but it's a little tricky).
Specifically, you need to put this in onCreate after setting the adapter:
spinner.setSelection(0, true);
View v = spinner.getSelectedView();
((TextView)v).setTextColor(backgroundColor);
And then put this in onItemSelected:
((TextView) view).setTextColor(backgroundColor);
Here is a full example:
#Override
protected void onCreate(Bundle savedInstanceState)
{
Spinner spinner = (Spinner) findViewById(R.id.spinner);
//Set the choices on the spinner by setting the adapter.
spinner.setAdapter(new SpinnerAdapter(toolbar.getContext(), new String[]{"Overview", "Story", "Specifications", "Poll", "Video"}, accentColor, backgroundColor));
//Set the text color of the Spinner's selected view (not a drop down list view)
spinner.setSelection(0, true);
View v = spinner.getSelectedView();
((TextView)v).setTextColor(backgroundColor);
//Set the listener for when each option is clicked.
spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener()
{
#Override
public void onItemSelected(AdapterView<?> parent, View view, int position, long id)
{
//Change the selected item's text color
((TextView) view).setTextColor(backgroundColor);
}
#Override
public void onNothingSelected(AdapterView<?> parent)
{
}
});
}
For more details, see my question.
If you want the text color to change in the selected item only, then this can be a possible workaround. It worked for me and should work for you as well.
spinner.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
((TextView) spinner.getSelectedView()).setTextColor(Color.WHITE);
}
});
For someone who needs only Style way for AppCompat.
Result
styles.xml
<resources>
...
<style name="Spinner" parent="Widget.AppCompat.Light.DropDownItem.Spinner">
<item name="android:paddingStart">0dp</item>
<item name="android:paddingEnd">0dp</item>
<item name="android:textColor">#color/material_grey_700</item>
<item name="android:textSize">12sp</item>
</style>
</resources>
your_spinner_layout.xml
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" />
...
<android.support.v7.widget.AppCompatSpinner
android:id="#+id/content_spinner"
style="#style/Widget.AppCompat.Spinner.Underlined"
android:layout_width="140dp"
android:layout_height="wrap_content"
android:entries="#array/shipping_tracking_carrier_names"
android:spinnerMode="dropdown"
android:theme="#style/Spinner" />
<EditText
android:id="#+id/content_input"
android:layout_width="140dp"
android:layout_height="wrap_content"
android:inputType="text"
android:maxLines="1"
android:paddingEnd="8dp"
android:paddingStart="8dp"
android:textColor="#color/material_grey_700"
android:textSize="12sp" />
...
</LinearLayout>
Plus
And if you want to set android:entries programmatically with defined style.
Try this.
AppCompatSpinner spinner = findViewById(R.id.content_spinner);
CharSequence[] entries = getResources().getTextArray(R.array.shipping_tracking_carrier_names);
ArrayAdapter<CharSequence> adapter = new ArrayAdapter<>(spinner.getContext(), android.R.layout.simple_spinner_item, entries);
adapter.setDropDownViewResource(android.support.v7.appcompat.R.layout.support_simple_spinner_dropdown_item);
spinner.setAdapter(adapter);
As in the code, using same Context with the Spinner is most important thing.
spinner.getContext()
we can change style of spinner textview set theme for spinner like this:
styles.xml:
<style name="mySpinnerItemStyle" parent="#android:style/Widget.Holo.DropDownItem.Spinner">
<item name="android:textSize">#dimen/_11ssp</item>
<item name="android:textColor">#color/blue</item>
<item name=...</item>
</style>
then
<Spinner
android:theme="#style/mySpinnerItemStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
if you want to change spinner textview attribute programtically:
Programatically:
val textView = (view.getChildAt(0) as TextView)
textView.setTextColor(resources.getColor(R.color.dark_mode))
For those who want to change DrowDownIcon color
you can use like this
spinner.getBackground().setColorFilter(Color.parseColor("#ffffff"), PorterDuff.Mode.SRC_ATOP);
To change the color of spinner text :
public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
((TextView) parent.getChildAt(0)).setTextColor(Color.WHITE);}
If you want a simple method, in order to add items to a dropdown, you usually add them to the strings.xml. Here is an example on how to add colour by using the strings.xml file:
SELECT AGE RANGE
<string-array name="age_array">
<item> 0-6 </item> //No custom colour
<item><font fgcolor='#FF4CD964'> 12+ </font></item> //With custom colour
</string-array>
Can change the text colour by overriding the getView method as follows:
new ArrayAdapter<String>(getContext(), android.R.layout.simple_spinner_dropdown_item, list()){
#Override
public View getView(int position, View convertView, #NonNull ViewGroup parent) {
View view = super.getView(position, convertView, parent);
//change the color to which ever you want
((CheckedTextView) view).setTextColor(Color.RED);
//change the size to which ever you want
((CheckedTextView) view).setTextSize(5);
//for using sp values use setTextSize(TypedValue.COMPLEX_UNIT_SP, 16);
return view;
}
}
Rather than making a custom layout to get a small size and if you want to use Android's internal small size LAYOUT for the spinner, you should use:
"android.R.layout.simple_gallery_item" instead of "android.R.layout.simple_spinner_item".
ArrayAdapter<CharSequence> madaptor = ArrayAdapter
.createFromResource(rootView.getContext(),
R.array.String_visitor,
android.R.layout.simple_gallery_item);
It can reduce the size of spinner's layout. It's just a simple trick.
If you want to reduce the size of a drop down list use this:
madaptor.setDropDownViewResource(android.R.layout.simple_gallery_item);
The easiest way to re-use/change the android.R.layout resources is just go the definition. In Android Studio, do Ctrl + B on android.R.layout.simple_spinner_item.xml.
It will take you to the resource file. Just copy the resource file and add a new layout in your Package.R.layout folder and change the textColor of textview as you like and then just call it in adapter like this:
ArrayAdapter<String> adapter = new ArrayAdapter<String(Context,R.layout.spinner_item, spinnerlist);
Just wanted to make a small change on the correct answer at the top.
Make a custom XML file for your spinner item inside the layout directory.
spinner_style.xml:
Give your customized color and size to text in this file.
<?xml version="1.0" encoding="utf-8"?>
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="?android:attr/spinnerItemStyle"
android:singleLine="true"
android:ellipsize="marquee"
android:textAlignment="inherit"
android:textSize="15sp"
android:textColor="#FF0000"
android:padding="5dp"
/>
Now use this file to show your spinner items inside your java file:
ArrayAdapter<String> adapter = new ArrayAdapter<>(this,R.layout.spinner_style,list);
adapter.setDropDownViewResource(R.layout.spinner_style);
Simplest: Works for me
TextView spinnerText = (TextView) spinner.getChildAt(0);
spinnerText.setTextColor(Color.RED);
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/text1"
style="?android:attr/spinnerItemStyle"
android:singleLine="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#fff"
android:ellipsize="marquee"
android:textAlignment="inherit"/>
just use this:
ArrayAdapter<String> adapter_category = new ArrayAdapter<String>(this,
R.layout.spinner_list_item, categories);
adapter_category
.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
Another variation of Ashraf's solution would be to make sure you're taking into account screen sizes. You'll need to get the spinner in onCreate and set the listener after you set the adapter:
//set your adapter with default or custom spinner cell, then://
serverSpinner.setOnItemSelectedListener(spinnerSelector);
serverSpinner.setSelection(defaultServer);
Then you can start changing the text size of the view that's showing before the spinner is clicked:
private AdapterView.OnItemSelectedListener spinnerSelector = new AdapterView.OnItemSelectedListener() {
public void onItemSelected(AdapterView<?> parent, View view, int pos, long id) {
boolean tabletSize = getResources().getBoolean(R.bool.isTablet);
boolean largeTablet = getResources().getBoolean(R.bool.isLargeTablet);
if (tabletSize) { ((TextView)parent.getChildAt(0)).setTextSize(16); }
else if (largeTablet) { ((TextView)parent.getChildAt(0)).setTextSize(18); }
else { ((TextView)parent.getChildAt(0)).setTextSize(12); }
}
public void onNothingSelected(AdapterView<?> parent) {
}
};
All you need to do is create layout specific folders like this:
values-sw360dp
values-sw600dp
values-sw800dp
an then add an xml file named "bool.xml" into each of those folders:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<bool name="isTablet">false</bool>
<bool name="isLargeTablet">false</bool>
</resources>
First we have to create the simple xml resource file for the textview like as below:
<?xml version="1.0" encoding="utf-8"?>
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:gravity="left"
android:textColor="#FF0000"
android:padding="5dip"
/>
and save it. after set on your adapterlist.
you can have this type of adapter for spinner, totally customized:
ArrayAdapter<String> genderAdapter = new ArrayAdapter<String>(getActivity(), R.layout.spinner_text, genderList) {
public View getView(int position, View convertView, ViewGroup parent) {
View v = super.getView(position, convertView, parent);
((TextView) v).setTextSize(TypedValue.COMPLEX_UNIT_DIP, 16);
((TextView) v).setTextColor(Color.parseColor("#676767"));
((TextView) v).setTypeface(vrFont);
return v;
}
public View getDropDownView(int position, View convertView, ViewGroup parent) {
View v = super.getDropDownView(position, convertView, parent);
((TextView) v).setTextSize(TypedValue.COMPLEX_UNIT_DIP, 16);
((TextView) v).setTypeface(vrFont);
((TextView) v).setTextColor(Color.parseColor("#676767"));
if (position == 0) {
((TextView) v).setTextColor(Color.parseColor("#979797"));
}
return v;
}
while R.layout.spinner_text is:
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/text1"
style="?android:attr/spinnerItemStyle"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:gravity="center_vertical|left"
android:ellipsize="marquee"
android:maxLines="1"
android:textColor="#color/whiteThree" />
Try this method. It is working for me.
#Override
public void onItemSelected(AdapterView<?> adapterView, View view, int i, long l) {
TextView textView = (TextView) view;
((TextView) adapterView.getChildAt(0)).setTextColor(Color.RED);
((TextView) adapterView.getChildAt(0)).setTextSize(20);
Toast.makeText(this, textView.getText()+" Selected", Toast.LENGTH_SHORT).show();
}
String typeroutes[] = {"Select","Direct","Non Stop"};
Spinner typeroute;
typeroute = view.findViewById(R.id.typeroute);
final ArrayAdapter<String> arrayAdapter5 = new ArrayAdapter<String>(
getActivity(), android.R.layout.simple_spinner_item, typeroutes) {
#Override
public boolean isEnabled(int position) {
if (position == 0) {
// Disable the first item from Spinner
// First item will be use for hint
return false;
} else {
return true;
}
}
public View getView(int position, View convertView, ViewGroup parent) {
View v = super.getView(position, convertView, parent);
((TextView) v).setTextSize(TypedValue.COMPLEX_UNIT_DIP, 16);
((TextView) v).setTextColor(Color.parseColor("#ffffff"));
return v;
} ---->in this line very important so add this
#Override
public View getDropDownView(int position, View convertView,
ViewGroup parent) {
View view = super.getDropDownView(position, convertView, parent);
TextView tv = (TextView) view;
if (position == 0) {
// Set the hint text color gray
tv.setTextColor(Color.GRAY);
} else {
tv.setTextColor(Color.BLACK);
}
return view;
}
};
arrayAdapter5.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
typeroute.setAdapter(arrayAdapter5);
that's all enjoy your coding...
I have done this as following.I have use getDropDownView() and getView() methods.
Use getDropDownView() for opened Spinner.
#Override
public View getDropDownView(int position, View convertView, ViewGroup parent) {
View view = convertView;
if (view == null) {
LayoutInflater vi = (LayoutInflater) activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
view = vi.inflate(R.layout.context_row_icon, null);
}
TextView mTitle = (TextView) view.findViewById(R.id.context_label);
ImageView flag = (ImageView) view.findViewById(R.id.context_icon);
mTitle.setText(values[position].getLabel(activity));
if (!((LabelItem) getItem(position)).isEnabled()) {
mTitle.setTextColor(activity.getResources().getColor(R.color.context_item_disabled));
} else {
mTitle.setTextColor(activity.getResources().getColor(R.color.context_item));
}
return view;
}
And Use getView() for closed Spinner.
#Override
public View getView(int position, View convertView, ViewGroup parent) {
View view = convertView;
if (view == null) {
LayoutInflater vi = (LayoutInflater) activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
view = vi.inflate(R.layout.context_row_icon, null);
}
TextView mTitle = (TextView) view.findViewById(R.id.context_label);
ImageView flag = (ImageView) view.findViewById(R.id.context_icon);
mTitle.setText(values[position].getLabel(activity));
mTitle.setTextColor(activity.getResources().getColor(R.color.context_item_disabled));
return view;
}
just add new style like this:
<style name="mySpinnerItemStyle" parent="ThemeOverlay.AppCompat.Dark">
<item name="android:textColor">#000</item>
<item name="android:color">#000</item>
</style>
and use it:
<Spinner
android:id="#+id/spinnerCategories"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/mySpinnerItemStyle"
android:layout_margin="5dp" />
According to Android documentation, Material Design style is supported for Spinner widget.
So I decided to use it in my app placing it on top of the Toolbar.
layout/activity_base.xml
<android.support.v7.widget.Toolbar
android:id="#+id/my_awesome_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="5dp"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<Spinner
android:id="#+id/spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</android.support.v7.widget.Toolbar>
Activity theme
<style name="BaseAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/omni_primary_color</item>
<item name="colorPrimaryDark">#color/omni_primary_color_dark</item>
<item name="colorAccent">#color/omni_accent_color</item>
</style>
BaseActivity.java
public class BaseActivity extends ActionBarActivity {
#InjectView(R.id.my_awesome_toolbar)
Toolbar mToolbar;
#InjectView(R.id.spinner)
Spinner spinner;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_base);
ButterKnife.inject(this);
//setup toolbar
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);
mToolbar.setNavigationIcon(R.drawable.ic_action_navigation_menu);
ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(mToolbar.getContext(),
R.array.planets_array, R.layout.support_simple_spinner_dropdown_item);
adapter.setDropDownViewResource(R.layout.support_simple_spinner_dropdown_item);
spinner.setAdapter(adapter);
}
}
On Lollipop spinner and dropdown looks fine, although dropdown background color is black comparing to menu dropdown which is white. I guess that app:popupTheme="#style/ThemeOverlay.AppCompat.Light" is not propagated to the spinner.
Android 5.0
Now the big problem is with Android 4.x where dropdown background color is white(popupTheme propagated?) and icon next to the spinner is black.
Android 4.4
How can I set it properly in the XML or implement in the code to make it work on both Android 5 and 4? Ideally, I would like to have both looks like on Android 5 but with white spinner dropdown(like Setting menu dropdown).
Update
I have noticed that setting property colorControlNormal affects spinner's filter icon. If someone finds out how to make use of that for Spinner(without changing other content controls), then I would have my solution combining that finding with #Sven answer.
Update
The following change fixes the problem for spinner text and popup color. So the only problem to the final solution is the filter icon.
ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(getSupportActionBar().getThemedContext(),
R.array.planets_array, R.layout.support_simple_spinner_dropdown_item);
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
Update
I found that filter icon is actually a part of android:background specified for the spinner and it's transparent. Providing own background would fix it e.g.
<item name="android:background">?android:selectableItemBackground</item>
Mystery solved!
The last piece of the puzzle is the popup on Android 5 that has black background and white text but I guess it can be solved with custom layout. If no one provides full answer I will do it myself and mark as accepted.
I know this is late but I came accross this question when I encountered this problem myself and I found a solution in the BrowseSessionsActivity of the Google I/O 2014 app and adapted it.
Layouts
toolbar_spinner.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<Spinner
android:id="#+id/toolbar_spinner"
style="#style/Widget.MyApp.HeaderBar.Spinner"
android:layout_width="wrap_content"
android:layout_height="match_parent"/>
</LinearLayout>
toolbar_spinner_item_actionbar.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#android:id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawablePadding="8dp"
android:drawableRight="#drawable/spinner_triangle"
android:fontFamily="sans-serif"
android:paddingLeft="16dp"
android:paddingRight="4dp"
android:textColor="#ffffffff"
android:textSize="18dp"
android:textStyle="bold"/>
</LinearLayout>
The spinner_triangle drawable can be found here.
toolbar_spinner_item_dropdown.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#android:id/text1"
android:layout_width="match_parent"
android:layout_height="48dp"
android:drawablePadding="8dp"
android:gravity="center_vertical|start"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:textColor="#ff333333"
android:textSize="16sp"/>
</LinearLayout>
Styles
toolbar_spinner.xml uses the following style.
<style name="Widget.MyApp.HeaderBar.Spinner" parent="Widget.AppCompat.Light.Spinner.DropDown.ActionBar">
<item name="android:background">?android:selectableItemBackground</item>
<item name="android:dropDownSelector">?android:selectableItemBackground</item>
<item name="android:divider">#null</item>
<item name="android:overlapAnchor">true</item>
</style>
Adapter
This adapter will need to be changed to match your own needs. getTitle() returns the text for each item shown in the spinner.
private class YourObjectSpinnerAdapter extends BaseAdapter {
private List<YourObject> mItems = new ArrayList<>();
public void clear() {
mItems.clear();
}
public void addItem(YourObject yourObject) {
mItems.add(yourObject);
}
public void addItems(List<YourObject> yourObjectList) {
mItems.addAll(yourObjectList);
}
#Override
public int getCount() {
return mItems.size();
}
#Override
public Object getItem(int position) {
return mItems.get(position);
}
#Override
public long getItemId(int position) {
return position;
}
#Override
public View getDropDownView(int position, View view, ViewGroup parent) {
if (view == null || !view.getTag().toString().equals("DROPDOWN")) {
view = getLayoutInflater().inflate(R.layout.toolbar_spinner_item_dropdown, parent, false);
view.setTag("DROPDOWN");
}
TextView textView = (TextView) view.findViewById(android.R.id.text1);
textView.setText(getTitle(position));
return view;
}
#Override
public View getView(int position, View view, ViewGroup parent) {
if (view == null || !view.getTag().toString().equals("NON_DROPDOWN")) {
view = getLayoutInflater().inflate(R.layout.
toolbar_spinner_item_actionbar, parent, false);
view.setTag("NON_DROPDOWN");
}
TextView textView = (TextView) view.findViewById(android.R.id.text1);
textView.setText(getTitle(position));
return view;
}
private String getTitle(int position) {
return position >= 0 && position < mItems.size() ? mItems.get(position).title : "";
}
}
Adding the Spinner to Your Toolbar
Toolbar toolbar = getActionBarToolbar();
View spinnerContainer = LayoutInflater.from(this).inflate(R.layout.toolbar_spinner,
toolbar, false);
ActionBar.LayoutParams lp = new ActionBar.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
toolbar.addView(spinnerContainer, lp);
YourObjectSpinnerAdapter spinnerAdapter = new YourObjectSpinnerAdapter();
spinnerAdapter.addItems(getMyObjectSpinnerData());
Spinner spinner = (Spinner) spinnerContainer.findViewById(R.id.toolbar_spinner);
spinner.setAdapter(spinnerAdapter);
Result
Don't implement Spinner in Xml
final ArrayAdapter spinnerAdapter = ArrayAdapter.createFromResource(getSupportActionBar().getThemedContext(),
R.array.main_navigation_list, R.layout.spinner_text);
spinnerAdapter.setDropDownViewResource(R.layout.spinner_dropdown_item);
mNavigationTags = getResources().getStringArray(R.array.main_navigation_list);
mNavigationSpinner = new Spinner(getSupportActionBar().getThemedContext());
mNavigationSpinner.setAdapter(spinnerAdapter);
mNavigationSpinner.setOnItemSelectedListener(this);
mToolbar.addView(mNavigationSpinner);
This way the icon next to spinner will be white
Sorry for my poor English. :)
I think it is better to directly create the spinner in Toolbar.
Here is a example in my fragment.
public class Testfragment1 extends Fragment {
Toolbar mToolbar;
Spinner mSpinner;
.....
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
.......
mToolbar = (Toolbar) getActivity().findViewById(R.id.toolbar);
//you can also set the style with the constructor
mSpinner = new Spinner(getActivity());
String[] frags = new String[]{
"category1",
"category2",
"category3",
};
ArrayAdapter<String> arrayAdapter = new ArrayAdapter<String>(getActivity(),android.R.layout.simple_list_item_1,frags);
mSpinner.setAdapter(arrayAdapter);
mToolbar.addView(mSpinner);
return inflater.inflate(R.layout.fragment_testfragment1, container, false);
}
.........
#Override
public void onDestroyView() {
super.onDestroyView();
if (mToolbar != null && mSpinner != null) {
mToolbar.removeView(mSpinner);
}
}
}
It looks fine on my android-4.1-device:
android-4.1-spinner
I am struggling with the exact same problem.
Try to change the dropdown view resource. At least, this fixed the text color issue for me - however the arrow icon color is still dark. So this is just a partial workaround.
setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
A simple way that isn't perfect, but uniform enough for both 4.x and 5.0
I removed the <Spinner> from the layout files and added it programmatically - that allowed for the white triangle to show up properly.
I also created a dropdown item layout using the appcompat required color.
layout/spinner_dropdown_item.xml, note the android:background="#color/primaryColor"
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceListItemSmall"
android:gravity="center_vertical"
android:paddingLeft="12dp"
android:paddingRight="12dp"
android:background="#color/primaryColor"
android:minHeight="?android:attr/listPreferredItemHeightSmall" />
And in the activity:
SpinnerAdapter spinnerAdapter = ArrayAdapter.createFromResource(getApplicationContext(), R.array.your_array, R.layout.spinner_dropdown_item);
Spinner navigationSpinner = new Spinner(getSupportActionBar().getThemedContext());
navigationSpinner.setAdapter(spinnerAdapter);
toolbar.addView(navigationSpinner, 0);
It's not perfect and the items don't highlight when you click on them, but it's good enough while we wait for the future appcompat libraries to fix these problems (here's hoping anyway).
I spent two days on this problem, but now after reading many answers, I can post my solution. I've implemented two custom layouts for the spinner item and popup. Setting this attribute for spinner: android:background="?android:selectableItemBackground" the default spinner black arrow is hidden and we can use what we prefer. I used the method setDropDownVerticalOffset(int) to manage the popup position on pre Lollipop Android versions.
My app global theme is
<style name="AppTheme" parent="AppTheme.Base">
</style>
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/accent</item>
<item name="android:windowBackground">#color/window_background</item>
</style>
Now, the activity layout that contains the toolbar and the spinner:
activity_main.xml
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true" >
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:elevation="4dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" >
<Spinner
android:id="#+id/spinner_rss"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Light"
android:background="?android:selectableItemBackground" />
</android.support.v7.widget.Toolbar>
</RelativeLayout>
custom_spinner_toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/spinner_item_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:singleLine="true"
android:textColor="#android:color/white"
android:textAppearance="#style/TextAppearance.AppCompat.Title"
/>
<ImageView
android:contentDescription="#string/content_description_arrow_dropdown"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/spinner_item_text"
android:layout_toEndOf="#+id/spinner_item_text"
android:paddingTop="6dp"
android:src="#drawable/ic_arrow_drop_down_white_24dp" />
</RelativeLayout>
custom_spinner_dropdown_item.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<CheckedTextView
android:id="#+id/spinner_item_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="16dp"
android:singleLine="true"
android:textColor="#android:color/black"
android:textSize="16sp" />
</LinearLayout>
SpinnerAdapter.java
public class SpinnerAdapter extends BaseAdapter
{
private Context mContext;
private List<String> mValuesList;
public SpinnerAdapter(Context mContext, List<String> mValuesList)
{
this.mContext = mContext;
this.mValuesList = mValuesList;
}
#Override
public int getCount()
{
return mValuesList.size();
}
#Override
public Object getItem(int position)
{
return mValuesList.get(position);
}
#Override
public long getItemId(int position) {
// TODO Auto-generated method stub
return 0;
}
#Override
public View getDropDownView(int position, View view, ViewGroup parent)
{
if (view == null || !view.getTag().toString().equals("DROPDOWN"))
{
LayoutInflater inflater = LayoutInflater.from(mContext);
view = inflater.inflate(R.layout.custom_spinner_dropdown_item, parent, false);
view.setTag("DROPDOWN");
}
TextView textView = (TextView) view.findViewById(R.id.spinner_item_text);
textView.setText(getTitle(position));
return view;
}
#Override
public View getView(int position, View view, ViewGroup parent)
{
if (view == null || !view.getTag().toString().equals("NON_DROPDOWN"))
{
LayoutInflater inflater = LayoutInflater.from(mContext);
view = inflater.inflate(R.layout.custom_spinner_toolbar, parent, false);
view.setTag("NON_DROPDOWN");
}
TextView textView = (TextView) view.findViewById(R.id.spinner_item_text);
textView.setText(getTitle(position));
return view;
}
private String getTitle(int position)
{
return position >= 0 && position < mValuesList.size() ? mValuesList.get(position) : "";
}
}
Finally, the relevant part of activity source code:
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
final ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayShowTitleEnabled(false);
actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
actionBar.setDisplayHomeAsUpEnabled(true);
mSpinner = (Spinner) findViewById(R.id.spinner_rss);
String[] items = getResources().getStringArray(R.array.spinner_rss_items);
List<String> spinnerItems = new ArrayList<String>();
for(int i = 0; i < items.length; i++)
{
spinnerItems.add(items[i]);
}
SpinnerAdapter adapter = new SpinnerAdapter(actionBar.getThemedContext(), spinnerItems);
mSpinner.setAdapter(adapter);
if(Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP)
{
mSpinner.setDropDownVerticalOffset(-116);
}
}
These are the results on Lollipop and Kitkat:
Hope it helps! :)
Use android:dropDownVerticalOffset property inside spinner to give spacing from top.
<Spinner
android:id="#+id/spnrLanguage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:background="#drawable/ic_dropdown"
android:padding="5dp"
android:spinnerMode="dropdown"
android:dropDownVerticalOffset="50dp"
/>
Don't forgot to set android:spinnerMode="dropdown" though it won't work in spinnerMode= dialog
Can you not do this?
Custom xml file for spinner item: your_spinner.xml:
<?xml version="1.0" encoding="utf-8"?>
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#000"
android:background="#FFF"
/>
Use this to show spinner items:
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, R.layout.your_spinner,list);
Then remove drop down resource.
Had the exact same issue with the spinner's
What i did was to add a custom theme to spinner
<Spinner
android:id="#+id/spinner1"
android:layout_width="match_parent"
android:layout_height="30sp"
android:entries="#array/guest_type"
android:prompt="#string/guesttype"
android:theme="#style/AppTheme1" />
styles.xml
<style name="AppTheme1" parent="Theme.AppCompat.Light">
<item name="android:spinnerDropDownItemStyle">#style/mySpinnerItemStyle</item>
</style>
<style name="mySpinnerItemStyle" parent="#android:style/Widget.Holo.DropDownItem.Spinner">
<item name="android:textColor">#000000</item>
</style>
For correct Spinner icon tinting you can also just inflate the spinner from code:
spinner_toolbar.xml:
<?xml version="1.0" encoding="utf-8"?>
<Spinner xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/spinner_toolbar"
android:layout_width="wrap_content"
android:layout_height="match_parent"/>
Then you have to attach the Spinner to the Toolbar in your Activity:
ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(getSupportActionBar().getThemedContext(),
R.array.planets_array, R.layout.support_simple_spinner_dropdown_item);
adapter.setDropDownViewResource(R.layout.support_simple_spinner_dropdown_item);
spinner.setAdapter(adapter);
// we inflate the spinner with the themed Toolbar context -> correct icon tinting
LayoutInflater.from(getSupportActionBar().getThemedContext()).inflate(R.layout.spinner_toolbar, tb, true);
Spinner spinner = (Spinner) toolbar.findViewById(R.id.spinner_toolbar);
spinner.setAdapter(adapter);
However, this uses the app:theme instead of the app:popupTheme for the whole Spinner, including the dropdown menu.
Hence, the Spinner icon and text will be colored correctly, but the dropdown menu also has the style of the toolbar and not of the popupTheme.
So if you want to have a dark Toolbar and a light dropdown menu, you would need to fix the dropdown style somehow, for example by creating a custom style for the spinner that specifies a white background and a custom dropdown view with a dark text color.
Maybe somebody else has a better solution on how the app:popupTheme can be propagated to the Spinner dropdown menu.
You can fix dropdown position (will show on the top of toolbar, like menu) for Android 4 using this code:
<Spinner
android:id="#+id/spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:dropDownVerticalOffset="-56dp"/>
To pick up on this, I was having similar problems. My main problem was the text in my toolbar was smaller than the usual title dimensions and the wrong colour. Screenshot here http://s27.postimg.org/v24x1aw43/Screen_Shot_2015_01_11_at_13_36_04.png
The dropdown menu was ok, but I will go through the customisation of that as well.
Let me also make clear this fix is mostly based on #Daniel B's fix, however does not require the custom adapter, as far as I can tell nothing is broken, but I give no guarantees!
Add a normal spinner item into the XML layout file (within the toolbar).
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="5dp"
android:minHeight="?attr/actionBarSize"
android:background="#color/colorPrimary"
app:theme="#style/GalaxyZooThemeToolbarDarkOverflow"
app:popupTheme="#style/Theme.AppCompat"
>
<Spinner
android:id="#+id/spinner_nav"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</android.support.v7.widget.Toolbar>
Create new layout file toolbar_spinner_item_actionbar.xml (This will be the stuff showing for the spinner in the toolbar)
<?xml version="1.0" encoding="utf-8"?>
<TextView
android:id="#android:id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawablePadding="20dp"
android:fontFamily="sans-serif"
android:paddingLeft="#dimen/abc_action_bar_default_padding_material"
android:paddingRight="4dp"
android:textColor="#color/colorDark"
android:textSize="#dimen/abc_text_size_title_material_toolbar"
xmlns:android="http://schemas.android.com/apk/res/android"/>
<!-- android:drawableRight="#drawable/spinner_triangle" -->
The adapter for your spinner remains pretty much the same, however switch the layout from the standard android.R.layout.simple_spinner_dropdown_item to R.layout.toolbar_spinner_item_actionbar. This will apply your custom look for the toolbar text.
In this example I have set the adapter.setDropDownViewResource to android.R.layout.simple_spinner_dropdown_item, this applies the standard theme defaults for the drop down list, which I am happy with.
ArrayAdapter<String> set1Adapter = new ArrayAdapter<String>(RoutineDetailsActivity.this, R.layout.toolbar_spinner_item_actionbar, set1Actual);
set1Adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
mWeekSpinner.setAdapter(set1Adapter);
That's basically it, result here [can't attach image or add another link as my rep is too low! Will add in comment]
. You could stop here, however you may want to change the colour of the dropdown arrow.
Technically it is the correct tinting for my app, however, as my primary colour is already the colour for the toolbar, it would make sense to customise the arrow.
Setup custom arrow drawable
Add this line drawable line 'android:drawableRight="#drawable/spinner_triangle' into the toolbar_spinner_item_actionbar.xml made earlier. Now this could be any image, for now you could use Daniel B's white arrow resource here https://raw.githubusercontent.com/google/iosched/master/android/src/main/res/drawable-xxhdpi/spinner_triangle.png.
Running this will result in two arrows, the white arrow and the theme default. To solve this add the style below. Again this is pulled from Daniel B's code and could probably be abridged, but for now it works....
<style name="Widget.MyApp.HeaderBar.Spinner" parent="Widget.AppCompat.Light.Spinner.DropDown.ActionBar">
<item name="android:background">?android:selectableItemBackground</item>
<item name="android:dropDownSelector">?android:selectableItemBackground</item>
<item name="android:divider">#null</item>
<item name="android:overlapAnchor">true</item>
</style>
Apply the created style to the spinner...
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="5dp"
android:minHeight="?attr/actionBarSize"
android:background="#color/colorPrimary"
app:theme="#style/GalaxyZooThemeToolbarDarkOverflow"
app:popupTheme="#style/Theme.AppCompat"
>
<Spinner
android:id="#+id/spinner_nav"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/Widget.MyApp.HeaderBar.Spinner"/>
</android.support.v7.widget.Toolbar>
The result will be something like this [again can't attach or link, will add to comment]. The padding can be set from the file setup earlier, in my case I would need to change the arrow to match the icons.
Hope that makes some sort of sense.
When i used spinner it crashed (Android 2.3.3 - 2.3.7).
So i try to use TintSpinner now it's not crashing, Try your self as a Optional solution
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.internal.widget.TintSpinner
android:id="#+id/toolbar_spinner"
style="#style/HeaderBar.Spinner"
android:layout_width="wrap_content"
android:layout_height="match_parent"/>
</LinearLayout>
And use below code to cast your toolbar
View spinnerContainer = LayoutInflater.from(this).inflate(R.layout.toolbar_spinner, toolbarTop, false);
ActionBar.LayoutParams lp = new ActionBar.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT);
toolbarTop.addView(spinnerContainer, lp);
ToolBarSpinnerAdapter spinnerAdapter = new ToolBarSpinnerAdapter(getLayoutInflater());
String[] items = getResources().getStringArray(R.array.action_dropdown);
spinnerAdapter.addItems(items);
TintSpinner mNavigationSpinner = (TintSpinner) spinnerContainer.findViewById(R.id.toolbar_spinner);
mNavigationSpinner.setAdapter(spinnerAdapter);
I've wasted hours on this issue. As far as I can tell, the above solutions all require copy/pasting large chunks of appcompat style code to reimplement basic details like touch states.
A relatively easy way to get native-like behaviour is to inflate the view programmatically to ensure it gets the correct theme, e.g.:
// Activity has context with 'Theme.AppCompat.Light.NoActionBar'
spinner = new AppCompatSpinner(getActivity());
toolbar.addView(spinner);
To get the triangle to be white rather than colorControlNormal, I've applied a ColorStateList tint to the background:
ViewCompat.setBackgroundTintList(spinner, resources.getColorStateList(R.drawable.bg_toolbar_spinner)
bg_toolbar_spinner.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/accent" android:state_pressed="true"/>
<item android:color="#android:color/white"/>
</selector>
I solved it by creating new values for version 21 and 23 and adding new attribute in the spinner style android:dropDownVerticalOffset and delete it from the default style file. (my case is not related to toolbar) it's for normal spinner.
Add this style in folders 23 and 21
<style name="spinner_style">
<item name="android:background">#drawable/background_spinner</item>
<item name="android:dropDownVerticalOffset">30dip</item>
</style>
It's working perfectly on all versions. Hope this works with you!
I need to create a custom ListPreference dialog so that I can add some header text (a TextView) above the List (ListView).
I've created MyListPreference class that extends ListPreference and overrides onCreateDialogView():
#Override
protected View onCreateDialogView() {
LayoutInflater inflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View v = (View) inflater.inflate(R.layout.dialog_preference_list, null);
return v;
}
My XML layout dialog_preference_list.xml contains:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<ListView
android:id="#android:id/list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawSelectorOnTop="false"
android:scrollbarAlwaysDrawVerticalTrack="true" />
</LinearLayout>
Problem: The TextView is displayed below the ListView instead of above. I need the TextView to be above. I've tried both with LinearLayout and RelativeLayout (using "below" or "above" attributes) with no success: I can't find a way to put the TextView above the ListView... The layout is pretty simple and I cannot see why the list stays above...
Also, note that the problem occurs on both a real device (Nexus 4, Android 4.2.2) and the emulator. However, when looking at the layout rendered in Eclipse's graphical layout, the layout is correct! See both attached pictures.
Any idea on how to solve this?
Layout rendered on the device (incorrect):
Layout rendered on Eclipse (correct):
Edit with solution 10.07.2013
As suggested by the accepted answer, the problem comes from the use of builder.setSingleChoiceItems() in ListPreference's onPrepareDialogBuilder().
I've fixed it by extending ListPreference and overriding onCreateDialogView() to build the Dialog without the builder so that I can create a custom View showing the header text above the list items.
GPListPreference.java:
public class GPListPreference extends ListPreference {
...
#Override
protected void onPrepareDialogBuilder(AlertDialog.Builder builder) {
builder.setNegativeButton(null, null);
builder.setPositiveButton(null, null);
}
private int getValueIndex() {
return findIndexOfValue(getValue());
}
#Override
protected View onCreateDialogView() {
LayoutInflater inflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
ListView lv = (ListView) inflater.inflate(R.layout.dialog_preference_list, null);
TextView header = (TextView) inflater.inflate(R.layout.dialog_preference_list_header, null);
header.setText(getDialogMessage()); // you should set the header text as android:dialogMessage in the preference XML
lv.addHeaderView(header);
ArrayAdapter<CharSequence> adapter = new ArrayAdapter<CharSequence>(getContext(), R.layout.dialog_preference_list_singlechoice, getEntries());
lv.setAdapter(adapter);
lv.setClickable(true);
lv.setEnabled(true);
lv.setChoiceMode(ListView.CHOICE_MODE_SINGLE);
lv.setItemChecked(getValueIndex() + 1, true);
lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
setValueIndex(position - 1);
getDialog().dismiss();
}
});
return lv;
}
}
dialog_preference_list.xml:
<?xml version="1.0" encoding="utf-8"?>
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawSelectorOnTop="false"
android:scrollbarAlwaysDrawVerticalTrack="true" />
dialog_preference_list_singlechoice.xml
<?xml version="1.0" encoding="utf-8"?>
<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:checkMark="?android:attr/listChoiceIndicatorSingle"
android:ellipsize="marquee"
android:gravity="center_vertical"
android:minHeight="?android:attr/listPreferredItemHeight"
android:paddingBottom="2dip"
android:paddingLeft="10dip"
android:paddingRight="10dip"
android:paddingTop="2dip"
android:textAppearance="?android:attr/textAppearanceMedium" />
dialog_preference_list_header.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dip"
android:textAppearance="?android:attr/textAppearanceSmall">
</TextView>
I think the problem is with the way ListPreference works. ListPreference uses Builder.setSingleChoiceItems() to create the rows with the RadioButtons, and it has preference over the custom layout you are trying to add (in your case a TextView and a ListView inside a LinearLayout. The solution is extending DialogPreference instead. Here is a link to a GitHub where I created a custom DialogPreference that does what you need. I haven't coded the RadioButton logic.
I guess it's a theming issue. Try changing the theme of your dialog inside the constructor make it something like setStyle(STYLE_NO_TITLE, R.style.AppTheme). Your base app theme with no_title style.
If this is not the issue than it might be related with the ListPreference class itself. It might be overriding your layout for consistency in theming the preference views. However, I have not used ListPreference before, so its just a guess.
Can you reproduce the same result by playing with the themes in XML graphical layout preview?
Another option you can try is to add the TextView as a header to the ListView like this:
TextView textView = new TextView(getActivity());
ListView listView = new ListView(getActivity());
listView.addHeaderView(textView);
The addHeaderView takes a View so you theoretically have anything you want to be the header, but I have only used a TextView.
The link above is broken. On this solution the idea is overriding the ListPreference, and inflating your own listview, with the data defined on the ListPreference.
#Override
protected View onCreateDialogView() {
LayoutInflater inflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
ListView lv = new ListView(getContext());
// Inflate the view into the header only if a message was set
if (getDialogMessage() != null && ! getDialogMessage().equals("") ) {
TextView header = (TextView) inflater.inflate(R.layout.dialog_preference_list_header, null);
header.setText(getDialogMessage());
lv.addHeaderView(header, null, false);
}
// Create a new adapter and a list view and feed it with the ListPreference entries
ArrayAdapter<CharSequence> adapter = new ArrayAdapter<CharSequence>(getContext(),
R.layout.custom_dialog_single_choice_list_adapter, getEntries());
lv.setAdapter(adapter);
lv.setClickable(true);
lv.setEnabled(true);
lv.setChoiceMode(ListView.CHOICE_MODE_SINGLE);
lv.setItemChecked(getValueIndex() + 1, true);
lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
setValueIndex(position - 1);
getDialog().dismiss();
}
});
return lv;
}
Another important thing is to call onPrepareDialogBuilder and not calling super in it. This will avoid that the listview appears twice.
#Override
protected void onPrepareDialogBuilder(AlertDialog.Builder builder) {
// Not calling super, to avoid having 2 listviews
// Set the positive button as null
builder.setPositiveButton(null, null);
}
private int getValueIndex() {
return findIndexOfValue(getValue());
}
Where dialog_preference_list_header is in my case only a TestView, but it could be a more complex view, and custom_dialog_single_choice_list_adapter could be something like this:
<?xml version="1.0" encoding="utf-8"?>
<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:checkMark="?android:attr/listChoiceIndicatorSingle"
android:ellipsize="marquee"
android:gravity="center_vertical"
android:minHeight="?android:attr/listPreferredItemHeight"
android:paddingBottom="2dip"
android:paddingLeft="10dip"
android:paddingRight="10dip"
android:paddingTop="2dip"
android:textAppearance="?android:attr/textAppearanceMedium" />
I'm working on an Android app and I have an AlertDialog subclass. I would like to put 2 ImageButtons on the right side of the title area of the dialog (similar to an the ActionBar in an Activity). I'm using setCustomTitle() to do this, which replaces the title area with a custom view of my own creation. This works fine, but the styling of my custom title area is not the same as the standard title styling (height, color, separator, etc).
My question is: with the understanding that styling varies by OS version and manufacturer, how can I style my custom title in the dialog so that it will match the standard title styling for other AlertDialogs?
Here is an image of anAlertDialog with standard styling (this is from ICS, but I want to be able to match any variant -- not this particular style)
And here is an image of an AlertDialog with custom title and buttons (note how the title height and color don't match the standard dialog)
EDIT: I can't just add the ImageButtons to the standard title view, because I don't have access to it. If you know of a (reliable, non-hack) method for me to add buttons to the standard title area, I would accept that as well.
Given that there is new interest in this question, let me elaborate about how I "solved" this.
First, I use ActionBarSherlock in my app. This is not necessary, I suppose, though it helps a lot because the styles and themes defined in the ABS project allow me to mimic the Holo theme on pre-ICS devices, which provides a consistent experience in the app.
Second, my "dialog" is no longer a dialog -- it's an activity themed as a dialog. This makes manipulation of the view hierarchy simpler, because I have complete control. So adding buttons to the title area is now trivial.
Here are the screenshots (2.2 device and 4.1 emulator). Note that the only significant styling difference is the EditText, which I have chosen not to address.
Here is my onCreate in my dialog activity:
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_tag);
setTitle(R.string.tag_dialog_title);
View sherlockTitle = findViewById(android.R.id.title);
if (sherlockTitle != null) {
sherlockTitle.setVisibility(View.GONE);
}
View sherlockDivider = findViewById(R.id.abs__titleDivider);
if (sherlockDivider != null) {
sherlockDivider.setVisibility(View.GONE);
}
// setup custom title area
final View titleArea = findViewById(R.id.dialog_custom_title_area);
if (titleArea != null) {
titleArea.setVisibility(View.VISIBLE);
TextView titleView = (TextView) titleArea.findViewById(R.id.custom_title);
if (titleView != null) {
titleView.setText(R.string.tag_dialog_title);
}
ImageButton cancelBtn = (ImageButton) titleArea.findViewById(R.id.cancel_btn);
cancelBtn.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
finish();
}
});
cancelBtn.setVisibility(View.VISIBLE);
ImageButton okBtn = (ImageButton) titleArea.findViewById(R.id.ok_btn);
okBtn.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
// do stuff here
finish();
}
});
okBtn.setVisibility(View.VISIBLE);
}
}
And here is the relevant layout for the activity:
<LinearLayout
android:orientation="vertical"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<LinearLayout
android:id="#+id/dialog_custom_title_area"
android:orientation="vertical"
android:fitsSystemWindows="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingRight="10dp">
<TextView
android:id="#+id/custom_title" style="?android:attr/windowTitleStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:minHeight="#dimen/abs__alert_dialog_title_height"
android:paddingLeft="16dip"
android:paddingRight="16dip"
android:textColor="#ffffff"
android:gravity="center_vertical|left" />
<ImageButton
android:id="#+id/ok_btn"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:minWidth="#dimen/abs__action_button_min_width"
android:minHeight="#dimen/abs__alert_dialog_title_height"
android:scaleType="center"
android:src="#drawable/ic_action_accept"
android:background="#drawable/abs__item_background_holo_dark"
android:visibility="visible"
android:layout_gravity="center_vertical"
android:contentDescription="#string/acc_done"/>
<ImageButton
android:id="#+id/cancel_btn"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:minWidth="#dimen/abs__action_button_min_width"
android:minHeight="#dimen/abs__alert_dialog_title_height"
android:scaleType="center"
android:src="#drawable/ic_action_cancel"
android:background="#drawable/abs__item_background_holo_dark"
android:visibility="visible"
android:layout_gravity="center_vertical"
android:contentDescription="#string/acc_cancel"
/>
</LinearLayout>
<View
android:id="#+id/dialog_title_divider"
android:layout_width="fill_parent"
android:layout_height="2dip"
android:background="#color/abs__holo_blue_light" />
</LinearLayout>
<RelativeLayout
android:id="#+id/list_suggestions_layout"
android:layout_height="wrap_content"
android:layout_width="fill_parent">
<!-- this is where the main dialog area is laid out -->
</RelativeLayout>
</LinearLayout>
And finally, in my AndroidManifext.xml, here is how I define my TagActivity:
<activity
android:icon="#drawable/ic_home"
android:name=".activity.TagActivity"
android:theme="#style/Theme.Sherlock.Dialog"/>
OK, maybe it is not the super perfect solution and maybe it is a bad solution, but I tried this on android 2.3.7 and android 4.1.2:
2.3.7 (real device)
4.1.2 (emulator)
We start by creating a dialog Title style to make sure we have some space for our icons:
res/values/dialogstyles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="Dialog" parent="#android:style/Theme.Dialog">
<item name="android:windowTitleStyle">#style/MyOwnDialogTitle</item>
</style>
<style name="MyOwnDialogTitle">
<!-- we need to make sure our images fit -->
<item name="android:layout_marginRight">100dp</item>
</style>
</resources>
res/values-v11/dialogstyles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="Dialog" parent="#android:style/Theme.Holo.Dialog">
<item name="android:windowTitleStyle">#style/MyOwnDialogTitle</item>
</style>
</resources>
Then we create our DialogFragment with two tricks:
set the style in the onCreate:
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setStyle(DialogFragment.STYLE_NORMAL, R.style.Dialog);
}
override onCreateView and add our layout (of buttons) to the Dialog (see comments)
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
//we need the view to remove the tree observer (that's why it is final)
final View view = inflater.inflate(R.layout.dialog_custom, container);
getDialog().setTitle("Shush Dialog");
//register a layout listener to add our buttons
view.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
#SuppressWarnings("deprecation")
#SuppressLint("NewApi")
#Override
public void onGlobalLayout() {
//inflate our buttons
View menu = LayoutInflater.from(getActivity()).inflate(R.layout.layout_mymenu, null);
//get the root view of the Dialog (I am pretty sure this is the weakest link)
FrameLayout fl = ((FrameLayout) getDialog().getWindow().getDecorView());
//get the height of the root view (to estimate the height of the title)
int height = fl.getHeight() - fl.getPaddingTop() - fl.getPaddingBottom();
//to estimate the height of the title, we subtract our view's height
//we are sure we have the heights btw because layout is done
height = height - view.getHeight();
//prepare the layout params for our view (this includes setting its width)
//setting the height is not necessary if we ensure it is small
//we could even add some padding but anyway!
FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.WRAP_CONTENT, height);
params.gravity = Gravity.RIGHT | Gravity.TOP;
//add the view and we are done
fl.addView(menu, params);
if(android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.JELLY_BEAN)
view.getViewTreeObserver().removeOnGlobalLayoutListener(this);
else
view.getViewTreeObserver().removeGlobalOnLayoutListener(this);
}
});
return view;
}
Alright if it just images, then you just have ensure that everything that you create in xml is scaled by density pixels or DP for short. Most simple coding that sets paint are usually set by pixels as well and may need a manual coding version to density pixels.
I am a beginner programming android. I am searching for info how to create transparent sub view on current window layout.
I have created simple layout this is source:
<?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:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Simple text" />
</LinearLayout>
Now i want to create a View when navigation button is pressed. That View i want to add on top of this layout with transparent about 40%. It should look something like this:
Also it should be easy to add Buttons, Drop box or else and i could easy remove this View.
Maybe someone did this and could me share ideas, how do do this ?
Thanks.
check out this and do programatically
view.getBackground().setAlpha(100); // to make background transparent
you can use PopupWindow to show on top of parent view as following
View mainview ;
PopupWindow popupwindow;
public void onCreate(Bundle savedInstanceState){
LayoutInflater inflater = (LayoutInflater) this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
mainview = inflater.inflate(R.layout.main, null, false);
setContentView(mainview);
// load sub menu from xml layout in popupwindow
View submenu_popup = inflater.inflate(R.layout.submenu_popup, null, false);
// make backgraound transparent of popup submenu
submenu_popup.getBackground().setAlpha(100);
popupwindow = new PopupWindow(submenu_popup ,300,300,false);
popupwindow.setOutsideTouchable(true);
popupwindow.setTouchable(true);
}
// call it on click of button or menu to show submenu
public void onClickButton(){
int x=0,y=0;
// show popupwindow on x, y position in main view (parent view) by using this
popupwindow.showAtLocation(mainview , Gravity.NO_GRAVITY, x, y);
}
May be you should learn how to use "android:theme" property