Is there any way to make smaller DatePicker and TimePicker (but to be visible all parts ) in Android ? I tried to set layout_width="130dp" but then DatePicker isn't visible, just left upper corner.
Use properties follow:
Example smaller 80% original
android:scaleY="0.8"
android:scaleX="0.8"
(This actually works and others don't) After much searching this worked:
<DatePicker
android:id="#+id/dp_datepicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleX="0.7"
android:scaleY="0.7"
android:layout_marginLeft="-30dp"
android:layout_marginRight="-30dp"
android:datePickerMode="spinner"
/>
<TimePicker
android:id="#+id/tp_timepicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleX="0.7"
android:scaleY="0.7"
android:layout_marginLeft="-30dp"
android:layout_marginRight="-30dp"
android:timePickerMode="spinner"
/>
The android:scaleX="0.7" is what shrinked the visible picker (it works for DatePicker and TimePicker) and the android:layout_marginLeft="-30dp" allowed for the space to be reduced.
Note:
All attempts at using android:padding="-30dp" did not work and using android:layout_margin="-30dp" (without a side specified) also did not work. Hopefully this helps those who were as lost as me
P.S. Google get your freaking DatePicker API fixed!
Instead of using "dp" for the layout width , use percentages in weight to make it smaller.
For android:layout_weight to be effective, put android:layout_width to 0 dip.
android:layout_height="wrap_content"
android:layout_weight=".33"
android:layout_width="0dip"
android:textSize="12sp"
This worked for me to fit a date and time picker in a dialogue with a custom layout in landscape mode on a small screen. Set the weightsum of a container (LinarLayout) to 100 and then fill it with widgets adding up to 100 in layout_weight property.
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:weightSum="100"
android:layout_gravity="center_horizontal">
<DatePicker
android:id="#+id/dlgDateTimePickerDate"
android:layout_width="wrap_content"
android:layout_weight="50"
android:layout_height="wrap_content" />
<TimePicker
android:id="#+id/dlgDateTimePickerTime"
android:layout_weight="50"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
You can simple scale like this:
android:scaleY="0.5"
android:scaleX="0.5"
to get the half of the size.
And to get a smaller padding, android:padding="-20dp"
Looking from the framework the picker may overlap other views, but in the app, it will not.
The padding is going to work perfectly and the buttons also.
Another solution:
Put it in a LinearLayout and set the height of the LinearLayout manually
Related
Here is a small gif of my current situation. I guess many images are better than many words.
As you notice, when I switch for the smaller image, the seekbar size changes. I know this is because of the seekbar's width being set to match_parentand the image's width to wrap_content.
What I don't know is how to overcome this problem, as I can't really hardcode width value otherwise it'll probably get messed up on various screensizes.
So my question is :
Is there a way to prevent this behaviour that is clean? I could simply get the width at runtime and set it as minimal width and it would probably work (heck, I could try it now to make sure), but that is just a horrible thing to do code-wise.
Ideally, I'm guessing there is a way to prevent this in the .xml file, but I couldn't figure it out, playing with the different paddings, margins, scaling and layout sizes.
Here is what you're looking at :
<RelativeLayout
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp">
<ImageButton
android:background="#android:color/transparent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="center"
android:id="#+id/playButton"
android:layout_alignParentLeft="true"
android:layout_marginLeft="30dp"
android:layout_centerVertical="true"
android:src="#drawable/play"
android:onClick="PlayButtonClicked" />
<SeekBar
android:max="100"
android:id="#+id/volumeSeekBar"
android:layout_centerVertical="true"
android:layout_margin="15dp"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_toRightOf="#+id/playButton"
android:layout_toLeftOf="#+id/muteButton" />
<ImageButton
android:background="#android:color/transparent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="center"
android:id="#+id/muteButton"
android:layout_alignParentRight="true"
android:layout_marginRight="30dp"
android:layout_centerVertical="true"
android:onClick="MuteButtonClicked"
android:src="#drawable/sound" />
</RelativeLayout>
Ideally it would be nice for the volume icons to be of the same size.
If that is not an option, try replacing android:layout_toLeftOf="#+id/muteButton" with android:layout_marginRight="15dp+30dp+largest_icon_width_in_dp"
where 15dp is your seekbar right margin, 30dp is the mute button right margin.
The third option would be to set a fixed width for the mute button equal to the width of the largest image.
Ok, I've looked around and around and cannot figure out what to do with this.
TimePicker has some hidden spacing around it. When I put two TimePickers one under another as:
<LinearLayout
android:orientation="vertical"
android:background="#440044"
android:layout_margin="-30dp"
android:padding="-30dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TimePicker
android:id="#+id/timePickerA"
android:scaleY="0.50"
android:scaleX="0.50"
android:layout_margin="-30dp"
android:padding="-30dp"
android:background="#989898"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TimePicker
android:id="#+id/timePickerB"
android:scaleY="0.50"
android:scaleX="0.50"
android:layout_margin="-30dp"
android:padding="-30dp"
android:background="#989898"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
the TimePickers still have a huge amount of space around each of them. Notice I even tried using both negative margins and padding in both the TimePickers and the parent LinearLayout. These have no impact at all on the spacing around the TimePickers.
The scaleX and Y are obviously to reduce the size of these ridiculously huge TimePickers!
I'm trying to avoid making a custom if possible.
The problem is that when you use android:scaleY="0.50" and android:scaleX="0.50" you don't decrease the View at his half, you just re-scale it. That means your TimePicker still have the same width and height but the drawing area will be reduced to half (half X and half Y).
See the image below, the blue rectangle represent the real width and height of your View (the TimePicker).
As a solution:
I think it's better if you make a custom one.
Otherwise as workaround you can use a RelativeLayout and play with margins, something like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="#440044"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TimePicker
android:id="#+id/timePickerA"
android:scaleY="0.50"
android:scaleX="0.50"
android:background="#989898"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TimePicker
android:id="#+id/timePickerB"
android:scaleY="0.50"
android:scaleX="0.50"
android:background="#989898"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/timePickerA"
android:focusableInTouchMode="false"
android:touchscreenBlocksFocus="false"
android:layout_marginTop="-80dp" />
</RelativeLayout>
PS: I don't guarantee that you'll have the same result in different screen density/size.
I'm trying to scale a horizontal LinearLayout that contains DatePicker and TimePicker adding
android:scaleX="0.6"
android:scaleY="0.6"
The problem is that this scales the content but increases the margin at the same time, so I cannot use the space properly. In the picture the marked white area is the space gained by scaling, but I cannot use this space (in fact, the clock on the right is cropped)
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:scaleX="0.6"
android:scaleY="0.6">
<DatePicker
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/datePicker"
android:layout_gravity="center_horizontal"
android:calendarViewShown="false"
android:spinnersShown="false"
android:layoutMode="opticalBounds"
android:measureAllChildren="true" />
<TimePicker
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/timePicker"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="5dp" />
</LinearLayout>
Any solution to scale the view without this blank space problem?
I would suggest you not to use xscale & yscale.
Instead what you can do is provide weight for date picker & time picker.
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal">
<DatePicker
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="50"
android:id="#+id/datePicker"
android:layout_gravity="center_horizontal"
android:calendarViewShown="false"
android:spinnersShown="false"
android:layoutMode="opticalBounds"
android:measureAllChildren="true" />
<TimePicker
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="50"
android:id="#+id/timePicker"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="5dp" />
</LinearLayout>
you can add padding at sides or modify the weights as an how you want.
Are you able to use the date and time picker in a dialog instead? I think that may be your only option. I'm not aware of a way to shrink the size of the DatePicker and TimePicker the way you're trying to. See http://developer.android.com/guide/topics/ui/controls/pickers.html#DatePickerFragment.
Scalling will not change your controls size it means your data picker will take same space in your layout regardless if it is scalled up or down. only thier apperance changes
I have two RadioButtons within a View that is set within an AlertDialog. Although the text for the first one appears horizontal, the text for the second button comes out vertical. Initially, I thought this was due to the View not filling the width of the dialog itself, but that doesn't appear to be the problem (I've tried making the text smaller and the I get the same result). I'm sure I've come across this in the past, but I can't remember how I resolved it. I'm using RadioButtons elsewhere in my app within AlertDialog's with no issue, so I'm pretty stumped. This is what it looks like. At no point do I hard-code the width of any layout or item in dp; I only ever use match_parent or wrap_content:
So, any help in trying to resolve this would be greatly appreciated!
My layout (LayoutInflator is called on it and then values/listeners are applied):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/template"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="0dp"
android:orientation="horizontal">
<CheckBox
android:id="#+id/check_box"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.45"
android:textSize="16sp"
android:textColor="#color/Black" />
<RadioGroup
android:id="#+id/radio_group"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.55"
android:orientation="horizontal"
android:enabled="False">
<RadioButton
android:id="#+id/radio_button_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:textDirection="ltr"
android:enabled="False"
android:textColor="#color/Black"/>
<RadioButton
android:id="#+id/radio_button_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:enabled="False"
android:textColor="#color/Black"
android:checked="true"/>
</RadioGroup>
</LinearLayout>
Inflating the layout like this works fine and gives the desired output:
LinearLayout inflatedLayout = (LinearLayout) this.getLayoutInflater().inflate(R.layout.template, null);
currDialog = CreateDialog.getDialog(this, "Title", inflatedLayout );
currDialog.show();
However, when I add this to a TableRow object, which is then added to a TableLayout object, it gives the unexpected result. I'm going to try with a RelativeLayout first.
You're using layout weights, and you are forcing your RadioGroup take up only 55% of the space. Since the space is not enough, the text goes to vertical. To be 100% sure that your radiogroup will fit, you will need to set it's width to wrap_content.
<RadioGroup
android:id="#+id/radio_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:enabled="False">
You might also want to consider changing the orientation to vertical, in which case it will probably fit with only 55% of the space, but I still highly recommend wrap_content
android:id="#+id/radio_button_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
There isn't enough available space for the second RadioButton to fit it's text, so it stretches the height to be able to fit the text.
I want to set a maximum width of an edit box. So I created this small layout:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:maxWidth="150dp" >
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:ems="10" />
</LinearLayout>
But it doesn't work, the box could be more than 150 dp anyway. android:maxWidth="150dp" in the EditText will give the same result. I have read ( maxWidth doesn't work with fill_parent ) that setting both max- and min width to the same size should solve it:
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:maxWidth="50dp"
android:minWidth="50dp" />
But it doesn't.
I have found a solution to my problem here here:
Setting a maximum width on a ViewGroup
And this works great. But I guess the maxWidth attribute is here for I reason. How should it be used? Or is there any documentation on this? I have spend hours on this problem, and still doesn't understand how to use this simple attribute.
I want to set a maximum width of an edit box.
In your example:
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:ems="10" />
The layout_width and ems attributes are trying to set the same value. Android seems to choose the larger fill_parent value and ignores the other. And when you use this:
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:maxWidth="50dp"
android:minWidth="50dp" />
Here ems and maxWidth are trying to set the same value, again the greater value is used. So depending on what you actually want you can use:
<EditText
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10" />
or replace android:ems="10" with android:maxWidth="50dp" if you prefer to work with dp.
Lastly your LinearLayout only has one child, the EditText. Typically when this happens you can remove the LinearLayout tags and use the EditText by itself.
To those who are seeing this question in recent years, we have app:layout_constraintWidth_max="225dp" now. Put your layout inside contsraint layout and use this on the view you want to have max width.