Android Number Picker Default Design Changes In Jelly Bean And Ice-cream Sandwitch

i've created an android application which displays a number picker, it all works fine...but the problem is with the design....when i run the application in gingerbread the number p

Solution 1:

Quoting from docs

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.

You need to set your theme that is derieved from Theme like fro example Theme.NoTitleBar.Fullscreen

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

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:theme = "@style/cust_dialog"android:layout_height="fill_parent" ><NumberPickerandroid: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" /><Buttonandroid: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" /><Buttonandroid: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>

Then to display custom dialog

publicclassMainActivityextendsActivityimplementsNumberPicker.OnValueChangeListener
{
    private  TextView tv;
    static Dialog d ;
    @OverridepublicvoidonCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tv = (TextView) findViewById(R.id.textView1);
        tv.setOnTouchListener(newOnTouchListener() {

            @OverridepublicbooleanonTouch(View v, MotionEvent event) {
                if (event.getAction() == MotionEvent.ACTION_DOWN) {
                       tv.setTextColor(Color.RED);
                }
                elseif (event.getAction() == MotionEvent.ACTION_UP) {
                        // set to normal color
                     tv.setTextColor(0);  
                }

                returntrue;
            }


            });
        Buttonb= (Button) findViewById(R.id.button11);
         b.setOnClickListener(newOnClickListener()
         {

            @OverridepublicvoidonClick(View v) {
                 show();
            }
            });
           }
     @OverridepublicvoidonValueChange(NumberPicker picker, int oldVal, int newVal) {

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

     }

    publicvoidshow()
    {


         final Dialog d=newDialog(this,R.style.cust_dialog);
         d.setTitle("NumberPicker");
         d.setContentView(R.layout.dialog);
         Buttonb1= (Button) d.findViewById(R.id.button1);
         Buttonb2= (Button) d.findViewById(R.id.button2);
         finalNumberPickernp= (NumberPicker) d.findViewById(R.id.numberPicker1);
         np.setMaxValue(100);
         np.setMinValue(0);
         np.setWrapSelectorWheel(false);
         np.setOnValueChangedListener(this);
         b1.setOnClickListener(newOnClickListener()
         {
          @OverridepublicvoidonClick(View v) {
              tv.setText(String.valueOf(np.getValue()));
              d.dismiss();
           }    
          });
         b2.setOnClickListener(newOnClickListener()
         {
          @OverridepublicvoidonClick(View v) {
              d.dismiss();
           }    
          });
       d.show();


    }
}

Styles.xml

</style><stylename="cust_dialog"parent="@android:style/Theme.NoTitleBar.Fullscreen"></style>

Snap Shot

Solution 2:

You can just add this attribute into your NumberPicker

android:theme="@android:style/Theme.Dialog"

E.g.

<NumberPickerandroid:theme="@android:style/Theme.Dialog"android:layout_width="wrap_content"android:layout_height="wrap_content" />

This will limit the impact to just the number picker widget, not the entire activity page.