Android Number Picker Dialog

How to create a number picker dialog?

I have made a small demo of NumberPicker. This may not be perfect but you can use and modify the same.

public class MainActivity extends Activity implements NumberPicker.OnValueChangeListener
{
private static TextView tv;
static Dialog d ;
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tv = (TextView) findViewById(R.id.textView1);
Button b = (Button) findViewById(R.id.button11);
b.setOnClickListener(new OnClickListener()
{

@Override
public void onClick(View v) {
show();
}
});
}
@Override
public void onValueChange(NumberPicker picker, int oldVal, int newVal) {

Log.i("value is",""+newVal);

}

public void show()
{

final Dialog d = new Dialog(MainActivity.this);
d.setTitle("NumberPicker");
d.setContentView(R.layout.dialog);
Button b1 = (Button) d.findViewById(R.id.button1);
Button b2 = (Button) d.findViewById(R.id.button2);
final NumberPicker np = (NumberPicker) d.findViewById(R.id.numberPicker1);
np.setMaxValue(100);
np.setMinValue(0);
np.setWrapSelectorWheel(false);
np.setOnValueChangedListener(this);
b1.setOnClickListener(new OnClickListener()
{
@Override
public void onClick(View v) {
tv.setText(String.valueOf(np.getValue()));
d.dismiss();
}
});
b2.setOnClickListener(new OnClickListener()
{
@Override
public void onClick(View v) {
d.dismiss();
}
});
d.show();

}
}

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world" />

<Button
android:id="@+id/button11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="Open" />

</RelativeLayout>

dialog.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >

<NumberPicker
android:id="@+id/numberPicker1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="64dp" />

<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/numberPicker1"
android:layout_marginLeft="20dp"
android:layout_marginTop="98dp"
android:layout_toRightOf="@+id/numberPicker1"
android:text="Cancel" />

<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/button2"
android:layout_alignBottom="@+id/button2"
android:layout_marginRight="16dp"
android:layout_toLeftOf="@+id/numberPicker1"
android:text="Set" />

</RelativeLayout>

Edit:

under res/values/dimens.xml

<resources>

<!-- Default screen margins, per the Android Design guidelines. -->
<dimen name="activity_horizontal_margin">16dp</dimen>
<dimen name="activity_vertical_margin">16dp</dimen>

</resources>

Display a NumberPicker on an AlertDialog

You never set the view of the Dialog.

builder.setView(numberPicker);

how to use number picker with dialog

I have made a small demo of NumberPicker. This may not be perfect but you can use and modify the same.

Use a custom dialog and set the number picker.

More info @

http://developer.android.com/reference/android/widget/NumberPicker.html

public class MainActivity extends Activity implements NumberPicker.OnValueChangeListener
{
private TextView tv;
static Dialog d ;
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tv = (TextView) findViewById(R.id.textView1);
Button b = (Button) findViewById(R.id.button11);// on click of button display the dialog
b.setOnClickListener(new OnClickListener()
{

@Override
public void onClick(View v) {
show();
}
});
}
@Override
public void onValueChange(NumberPicker picker, int oldVal, int newVal) {

Log.i("value is",""+newVal);

}

public void show()
{

final Dialog d = new Dialog(MainActivity.this);
d.setTitle("NumberPicker");
d.setContentView(R.layout.dialog);
Button b1 = (Button) d.findViewById(R.id.button1);
Button b2 = (Button) d.findViewById(R.id.button2);
final NumberPicker np = (NumberPicker) d.findViewById(R.id.numberPicker1);
np.setMaxValue(100); // max value 100
np.setMinValue(0); // min value 0
np.setWrapSelectorWheel(false);
np.setOnValueChangedListener(this);
b1.setOnClickListener(new OnClickListener()
{
@Override
public void onClick(View v) {
tv.setText(String.valueOf(np.getValue())); //set the value to textview
d.dismiss();
}
});
b2.setOnClickListener(new OnClickListener()
{
@Override
public void onClick(View v) {
d.dismiss(); // dismiss the dialog
}
});
d.show();

}
}

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world" />

<Button
android:id="@+id/button11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="Open" />

</RelativeLayout>

dialog.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >

<NumberPicker
android:id="@+id/numberPicker1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="64dp" />

<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/numberPicker1"
android:layout_marginLeft="20dp"
android:layout_marginTop="98dp"
android:layout_toRightOf="@+id/numberPicker1"
android:text="Cancel" />

<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/button2"
android:layout_alignBottom="@+id/button2"
android:layout_marginRight="16dp"
android:layout_toLeftOf="@+id/numberPicker1"
android:text="Set" />

</RelativeLayout>

Snap shot

Sample Image

NumberPicker not working inside DialogFragment

You have to provide the picker with array of what you are trying to select.

    String[] myStringArray = new String[]{"a","b","c"};
mMinutePicker.setMinValue(0);
mMinutePicker.setMaxValue(myStringArray.length - 1);
mMinutePicker.setDisplayedValues(myStringArray);

And Change

    Dialog alertDialog = new AlertDialog.Builder(getActivity()) .setTitle(title) .setView(inflater.inflate(R.layout.activity_time_picker, null)) 

to

    Dialog alertDialog = new AlertDialog.Builder(getActivity()).setTitle(title).setView(view)

You are inflating the view again.

Number Picker as present in Dialog (Android)

I think that depends on theme used

See NumberPicker at developer.android.com

Class Overview topic:

A widget that enables the user to select a number form a predefined range. There are two flavors of this widget and which one is presented to the user depends on the current theme.

If the current theme is derived from Theme the widget presents the current value as an editable input field with an increment button above and a decrement button below. Long pressing the buttons allows for a quick change of the current value. Tapping on the input field allows to type in a desired value.

If the current theme is derived from Theme_Holo or Theme_Holo_Light the widget presents the current value as an editable input field with a lesser value above and a greater value below. Tapping on the lesser or greater value selects it by animating the number axis up or down to make the chosen value current. Flinging up or down allows for multiple increments or decrements of the current value. Long pressing on the lesser and greater values also allows for a quick change of the current value. Tapping on the current value allows to type in a desired value.

Android NumberPicker with strings

Change the line

Article.add(String.valueOf(artikkler.getValue()));

By

Article.add(responseList.get(artikkler.getValue());


Related Topics



Leave a reply



Submit