Develop Reference

How to style android spinner boxes?

Apologies if this has already been answered, but I've been looking through answers/trying things for a couple of hours and I can't find anything.
I find the android spinner boxes too big:
For my taste, there is far too much grey space around the '80' and the '90' above. I'd like to make them less high and less wide.
However, I don't just want to set a pixel height/width, because of the lack of assurance that they'll look right on all devices.
They are set to wrap_content now. Is there any way to get it to wrap the content, but more tightly? There seems to be a fair amount of padding in there...
Many thanks!
EDIT:
I've made a little progress, I've figured out how to attach a style to a view, so now I am trying:
<Spinner
style="#style/spinner_style"
etc
and
<style name="spinner_style">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:paddingLeft">0dp</item>
<item name="android:paddingRight">0dp</item>
<item name="android:paddingTop">0dp</item>
<item name="android:paddingBottom">0dp</item>
<item name="android:layout_marginLeft">0dp</item>
<item name="android:layout_marginRight">0dp</item>
<item name="android:layout_marginTop">0dp</item>
<item name="android:layout_marginBottom">0dp</item>
</style>
However, this seems to have hardly any effect:
vs
before. How can I get the boxes really close to the text?
EDIT:
Bit more progress. This image seems to be the entire grey box plus drop down:
android:background="#android:drawable/btn_dropdown"
If I can find some way to make that smaller? Again, I have the challenge that I want it to wrap the text properly, so that I can be sure it will display well on all devices.
EDIT:
I think I'm going to use my own layout for the spinner, but in a way that wraps the text reliably - probably using a linear layout and setting the background color on that. I'll post back when I have the full code.

As you didn't share the a bit of your spinner, I will suggest some options that may help you:
if you are using android.R.layout.simple_spinner_dropdown_item as your spinner item layout (when it's closed)
ArrayAdapter<Integer> adapter = new ArrayAdapter<>(this,
android.R.layout.simple_spinner_dropdown_item, myList);
Then change it to android.R.layout.simple_spinner_item, the later one has little padding than the first.
If that still adds some padding, you can add android:theme="#android:style/Theme.Holo.Light.NoActionBar" attribute to your spinner xml, although this will change the spinner arrow
Another option is to create a custom spinner item, similarly replace the system layout with your item when creating the adapter.
here's the item layout (just a new a layout with a TextView with wrap_content width/height)
<?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">
</TextView>

OK this is what I have arrived at and it gives me this effect:
compared to what I get with the default Spinner which is:
I much prefer my version, but of course these things are subjective.
What I've done is to set my own layout and textview within the adapter (seems you can set both), so that my adapter-setting code looks like this:
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
R.layout.my_spinner_layout, R.id.dropdowntext, list);
adapter.setDropDownViewResource(R.layout.my_spinner_dropdown_layout);
spinner.setAdapter(adapter);
I was also obliged to create my own custom layout for the dropdown - R.layout.my_spinner_dropdown_layout above - because the spinner reuses the textview used for the unopened box when it draws the dropdown list, so the same textview needs to be available in both layouts.
I created two new xml layout files called my_spinner_layout.xml and my_spinner_dropdown_layout.xml
They look like this respectively:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linearLayoutDisplayName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:background="#DDDDDD"
android:gravity="center"
android:orientation="horizontal">
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/dropdowntext"
style="#style/spinner_style"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true" />
<ImageView
android:id="#+id/dropdownicon"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:contentDescription="TODO"
android:src="#drawable/dropdown" />
</LinearLayout>
and
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/dropdowntext"
style="#style/spinner_style"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true" />
Basically, I have replaced the default, which is TextView and a huge grey background image including a dropdown arrow, with a horizontal linear layout containing a TextView and a dropdown IMAGE, with a grey background.
Now the grey wraps to the content very nicely (I've added padding of 5dp).
Hope this helps someone, or if there's something wrong with it, perhaps someone will correct me.

I have really worked hard to find you the best solution for your problem but it seems to be no way to do so. The only way is to create a custom spinner as described in https://stackoverflow.com/a/37859442/11896005
Also, sorry if I was annoying just wanted to help you!

Android: Horizontal Alignment of Switchcompat from both sides

I am trying to align android switchcompat on both side whether its checked or unchecked but without success.
<android.support.v7.widget.SwitchCompat
android:id="#+id/switch1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:checked="true"
android:clickable="true"
android:layout_gravity="center_vertical"/>
and here is the result
Any ideas how to get it done?

The Switches (the view bounds of switches to be specific) in your image are aligned as expected. However, it appears as though they are not aligned because the thumb actually goes a little out of the switch track (still within the view bounds). If you want the thumb and track to be aligned on both sides, you can create a custom Switch.
An example would be:
Create background.xml as follows:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true"
android:drawable="#drawable/drawable1" />
<item android:state_checked="false" android:drawable="#drawable/drawable2"/>
</selector>
Set this as background for Switch:
<android.support.v7.widget.SwitchCompat
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/background"/>
You will get something like:
I know this aint perfect in terms of design, but you get the idea!
This shows that the view bounds are actually aligned in both checked and unchecked states.
You can customize it further by setting the track, thumb and so on...
On tweaking the background a little and setting the track you can get something like:
Cheers!

Can't customize the appearance of EditText select handle / anchor on landscape

I am having a hard time customizing the EditText select handle. I am following this thread:
How to change color / appearance of EditText select handle / anchor?
It looks like pretty straight forward. Yet, I can't get it to work on landscape. Can anyone spot what I am doing wrong? I pretty much pasted the same code on a test activity but the anchor handles' are always the same. I tried using styles as suggested and programmatically. Still I always get the same default blue anchors :(
I am on Nougat not sure if makes any difference.
Test activity:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setTheme(R.style.MyCustomTheme);
setContentView(R.layout.activity_main);
final EditText editText = (EditText) findViewById(R.id.edit1);
// tried programatically too and no success
try {
final Field fEditor = TextView.class.getDeclaredField("mEditor");
fEditor.setAccessible(true);
final Object editor = fEditor.get(editText);
final Field fSelectHandleLeft = editor.getClass().getDeclaredField("mSelectHandleLeft");
final Field fSelectHandleRight =
editor.getClass().getDeclaredField("mSelectHandleRight");
final Field fSelectHandleCenter =
editor.getClass().getDeclaredField("mSelectHandleCenter");
fSelectHandleLeft.setAccessible(true);
fSelectHandleRight.setAccessible(true);
fSelectHandleCenter.setAccessible(true);
fSelectHandleLeft.set(editor, ContextCompat.getDrawable(this, R.drawable.small_rect));
fSelectHandleRight.set(editor, ContextCompat.getDrawable(this, R.drawable.small_rect));
fSelectHandleCenter.set(editor, ContextCompat.getDrawable(this, R.drawable.small_rect));
} catch (final Exception e) {
Log.d("CUSTOM_ANCHORS", e.toString());
}
}
Layout:
<?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">
<EditText
android:id="#+id/edit1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="Hello World"
android:textSize="20sp" />
</LinearLayout>
My styles:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="MyCustomTheme" parent="#style/AppTheme">
<item name="android:textSelectHandle">#drawable/small_rect</item>
<item name="android:textSelectHandleLeft">#drawable/small_rect</item>
<item name="android:textSelectHandleRight">#drawable/small_rect</item>
</style>
the drawable (small_rect.xml)
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size
android:width="20dp"
android:height="20dp" />
<gradient
android:angle="90"
android:centerColor="#D6D6D6"
android:endColor="#4B6CD6"
android:startColor="#6586F0" />
<corners android:radius="0dp" />
</shape>
the result:

<EditText
android:imeOptions="flagNoFullscreen"
/>
You can use android:imeOptions to tell the system not to display editing UI in fullscreen.

The below code works perfectly on Nougat
<EditText
android:layout_width="match_parent"
style="#style/MyCustomTheme"
android:text="#string/app_name"
android:layout_height="wrap_content" />
<style name="MyCustomTheme" parent="#style/AppTheme">
<item name="android:textSelectHandle">#android:drawable/arrow_down_float</item>
<item name="android:textSelectHandleLeft">#android:drawable/arrow_down_float</item>
<item name="android:textSelectHandleRight">#android:drawable/arrow_down_float</item>
</style>

You guys code work only in Portrait (so does mine). My application is landscape only and I looked around and it looks like this an OS bug. I notified google about it. Yet, if there is workaround still using the EditText the 50 points is still up for grabs.

I think that your custom EditText handle can be implemented with just xml.
Define the handle's style in your styles.xml:
<style name="CustomSelectHandle">
<item name="android:textSelectHandle">#drawable/small_rect</item>
<item name="android:textSelectHandleLeft">#drawable/small_rect</item>
<item name="android:textSelectHandleRight">#drawable/small_rect</item>
</style>
Add the style attribute to your EditText:
<EditText
android:id="#+id/edit1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="Hello World"
style="#style/CustomSelectHandle"
android:textSize="20sp" />
I just ran a quick test of this on a KitKat device, and the custom handles were there.
Update: I duplicated the problem with landscape mode on the KitKat phone. However, the bug doesn't affect all devices. In particular, when I ran the code in landscape mode on a tablet, the custom handles worked fine.
Additional Observation: The EditText that I tested this on also had a background drawable. This drawable appears as expected in both portrait and landscape mode, on both phones and tablets. However, if I actually edit the field in landscape mode on a phone, the custom background disappears, and the field has a plain white background until I leave edit mode.
Conjecture: It looks like Android runs through a different code path (that ignores custom formatting) when editing fields in landscape mode on small devices. When a soft keyboard is displayed in landscape mode, that doesn't leave much room to display the field being edited on a phone. So maybe the developers made a compromise at some point (that it's better to display a very plain text field for the user to edit, than to risk having the entire field obscured). Without delving into the source code, that's my best guess for what's going on here...

add a XML attribute to your EditText
android:textColorHighlight="#color/accent_translucent"

Try adding
<item name="colorControlActivated">#drawable/small_rect</item>
to your styles

Custom Radio Button with State List Drawable not Changing

I have a set of Radio Buttons in a RadioGroup. I have created a StateList Drawable to indicate the state of each button. The buttons operate properly in that selecting any one will kick off the listeners, etc. However, the StateList Drawable isn't working. Here's the relevant stuff:
Layout XML with button:
<RadioButton
android:id="#+id/score4"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginBottom="5dp"
android:button="#drawable/score_button_selector" />
score_button_selector xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true"
android:drawable="#drawable/score_bg_2c_on" />
<item android:state_checked="false"
android:drawable="#drawable/score_bg_2c_off"/>
</selector>
score_bg_2c_off is a blue button:
and score_bg_2c_on is a green button:
The blue button appears properly, but when selected (pressed/clicked), the green one should appear instead. As I said, the operation of the button is fine, I get it's value properly, etc. - just not the drawable change. I tried state_selected instead of state_checked with no better results.
Any ideas why this isn't working as I'd like?
Thanks.
Here's some more data... I took out the android:button= and put the drawable on the android:background=.
<RadioButton
android:id="#+id/score4"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginBottom="5dp"
android:background="#drawable/score_button_selector" />
This way the default radio button shows up. This button shows when it is selected (blue inside the button), but the background never changes. I know it's seeing the score_button_selector drawable because it's showing the button with the blue background that is only defined in the drawable.

Try this
<RadioButton
android:id="#+id/score4"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginBottom="5dp"
android:button="#android:color/transparent"
android:background="#drawable/score_button_selector" />

Nothing a good project clean can't fix! I think that perhaps a majority of the time doing a clean as a last resort b-4 posting a question is a good protocol. It cleared this problem up after chasing ghosts for 3 days.

Creating a custom dialog in Android

I am trying to create a custom dialog in Android. But whatever I tried to do, I am not able to change the width of the dialog. It just remains the same. The following is the view that I am setting as the content for the dialog.
<RelativeLayout
android:id="#+id/current_stats"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible">
<ImageView android:id="#+id/player_image"
android:src="#drawable/person"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"/>
<TextView
android:id="#+id/player_name"
android:layout_below="#id/player_image"
android:layout_centerHorizontal="true"
android:text="Raja Ram"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<ImageButton android:id="#+id/dialog_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:background="#00000000"
android:src="#drawable/close_button_selector"/>
<ImageButton android:id="#+id/dialog_flip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:background="#00000000"
android:src="#drawable/rotate"/>
</RelativeLayout>
As you can see, everywhere I am using wrap_content in this code sample. Also I tried the following options
1) Setting a custom style while creating the Dialog like this.
dialog = new Dialog(this,R.style.Theme_Dialog);
And the style as follows
<resources>
<style name="Theme" parent="android:Theme">
</style>
<style name="Theme.Dialog">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:windowIsFloating">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowAnimationStyle">#android:style/Animation.Dialog</item>
<item name="android:windowSoftInputMode">stateUnspecified|adjustPan</item>
</style>
</resources>
2) Setting the parameters for the view in the onCreateDialog() like this
LayoutInflater inflater = (LayoutInflater)this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
v = inflater.inflate(R.layout.player_info, null, false);
ViewGroup.LayoutParams p = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT,ViewGroup.LayoutParams.WRAP_CONTENT);
dialog.setContentView(v,p);
3) I also tried to set the Window parameters like this in the onCreateDialog() method
WindowManager.LayoutParams params = dialog.getWindow().getAttributes();
params.width=WindowManager.LayoutParams.WRAP_CONTENT;
dialog.getWindow().setAttributes(params);
But again no luck. Can someone help me out with this issue. Am I doing something wrong?? Also can you please suggest me how to set the x and y postions for the Dialog window?
Thanks

dialog = new Dialog(this,android.R.style.Theme_Translucent_NoTitleBar);
dialog.setContentView(R.layout.custom_dialog);
LayoutParams lp=dialog.getWindow().getAttributes();
lp.x=100;lp.y=100;lp.width=100;lp.height=200;lp.gravity=Gravity.TOP | Gravity.LEFT;
lp.dimAmount=0;
lp.flags=LayoutParams.FLAG_LAYOUT_NO_LIMITS | LayoutParams.FLAG_NOT_TOUCH_MODAL;
// dialog.getWindow().setAttributes(lp);
dialog.show();
This worked well for me....

Is your problem that it takes the full width of the screen, or that you can't control how much of the screen is it taking up?
To make your activity act as a dialog, and not take up the full with you should set your activity to have the dialog theme in the manifest:
<activity android:theme="#android:style/Theme.Dialog">
The dialog will be as large as is required by your layout. If you want it to be wider, you need to make your layout wider. (Adjust size of images, add padding, etc).
I'm not aware of a way to position the dialog window.. I think it is always centered, I could be wrong though.

I figured out the problem after a long time. The problem was with the way I used Relative layout. I guess I have not specified the relative position properly. When I changed that to linear layout it worked fine. It was not using up the whole screen but only whatever is required.

I could change the width,height and the position of the Dialog using getWindow().setAttributes(params)

in the onCreate() method of yout custom dialog class do the next
#Override
protected void onCreate(Bundle savedInstanceState) {
getWindow().setLayout(x, y);
}