Wednesday, March 13, 2013

Custom Picker in Android | Number Picker in Android | Custom Spinner in Android


Hello friends,
Today I am going to share very useful code for custom number piker in Android. Some time we needed custom spinner or piker to choose values but Android not provide us own view so we should desgine custom view using canvas or xml.
In this code I am using 2 button for up and down and 3 text-view to display values like age, number, year etc. Hope it will help you. Copy paste below code and enjoy…

1) Print Screen:

2) MainActivity.java
package com.example.activitylifecycle;

import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.TextView;
import android.app.Activity;

public class MainActivity extends Activity implements OnClickListener {
 Button btnUp, btnDown;
 TextView textViewUp, textViewMid, textViewBottom;

 int nStart = 5;
 int nEnd = 250;

 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  btnUp = (Button) findViewById(R.id.button1);
  btnDown = (Button) findViewById(R.id.button2);

  textViewUp = (TextView) findViewById(R.id.textView1);
  textViewMid = (TextView) findViewById(R.id.textView2);
  textViewBottom = (TextView) findViewById(R.id.textView3);

  textViewUp.setText("5");
  textViewMid.setText("6");
  textViewBottom.setText("7");

  btnUp.setOnClickListener(this);
  btnDown.setOnClickListener(this);

 }

 @Override
 public void onClick(View v) {
  String getString = String.valueOf(textViewMid.getText());
  int curent = Integer.parseInt(getString);
  if (v == btnUp) {
   if (curent < nEnd) {
    curent++;
    textViewUp.setText(String.valueOf(curent - 1));
    textViewMid.setText(String.valueOf(curent));
    textViewBottom.setText(String.valueOf(curent + 1));
   }

  }
  if (v == btnDown) {
   if (curent > nStart) {
    curent--;
    textViewUp.setText(String.valueOf(curent - 1));
    textViewMid.setText(String.valueOf(curent));
    textViewBottom.setText(String.valueOf(curent + 1));
   }
  }
 }
}

3)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:background="#bfbfbf" >

    <View
        android:id="@+id/view2"
        android:layout_width="30dp"
        android:layout_height="1dp"
        android:layout_below="@+id/textView2"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:background="#000000" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView1"
        android:layout_centerVertical="true"
        android:text="TextView"
        android:textColor="#000000"
        android:textSize="20sp" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView3"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:background="@drawable/down_btn" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/textView2"
        android:layout_alignLeft="@+id/button2"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="10dp"
        android:text="TextView"
        android:textColor="#ccffff"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView2"
        android:layout_below="@+id/textView2"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="14dp"
        android:text="TextView"
        android:textColor="#ccffff"
        android:textSize="20sp" />

    <View
        android:id="@+id/view1"
        android:layout_width="30dp"
        android:layout_height="1dp"
        android:layout_alignBottom="@+id/textView1"
        android:layout_alignLeft="@+id/view2"
        android:layout_centerHorizontal="true"
        android:background="#000000" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/textView1"
        android:layout_alignLeft="@+id/textView1"
        android:layout_marginBottom="18dp"
        android:background="@drawable/up_btn" />

</RelativeLayout>
For any help or suggestion comment on my blog.
Thanks,

17 comments:

  1. can u plz tell me how to get current number from picker

    ReplyDelete
    Replies
    1. Hi Rajesh!
      Just get any time...
      String selectedValue=textViewMid.getText.toString();

      Thanks!

      Delete
  2. how can i add unlimited option in number picker.....

    ReplyDelete
    Replies
    1. Hi you can add any number, just increase nEnd number how much you want-
      int nStart = 5;
      int nEnd = 500000000000000000;

      Thanks!

      Delete
  3. Hello Manish,
    i am new to this, how i can achieve the triangular shaped buttons.
    thanks

    ReplyDelete
    Replies
    1. You should use Photoshop or other image editing tools. You can search it on Google also...

      Delete
    2. Please find buttons here-
      https://www.dropbox.com/s/edylu1b35hipgf9/res.zip

      Delete
  4. Hello Manish
    Send full program please
    thanks

    ReplyDelete
    Replies
    1. Just copy paste it from above everything is clear..
      And for buttons you can download it from below link-
      https://www.dropbox.com/s/edylu1b35hipgf9/res.zip

      Delete
  5. Manish,

    I am new to developement and probably making a basic error but when I use your code - the numbers all apear as TextView and not the numbers - are there additions needed to manifest or somewhere else?

    ReplyDelete
    Replies
    1. Nothing in manifest .. may be some issue in xml layout or java code... and please download the button....

      Delete
    2. This comment has been removed by the author.

      Delete
    3. @db... the TextView text is only seen in the layout view... once you run the program, the numbers should show up in your emulator.

      Delete
  6. Is there anyway you can change the numbers to drawables

    ReplyDelete
    Replies
    1. That mean you want use images instead of number right? So just put images in array from dradable and play with dynamic number...

      Delete
    2. when you input drawables the array cannot get the String of getString form textViewMid

      Delete
    3. Hello Arrington, have you ever work with smiley in android?
      Do something like that-
      1)Create a Hashmap(key,value pair) and assign an image for each key.
      2)Display value of hashmap inside your picker and play with key.
      like-
      1=R.drawable.home.png
      2=R.drawable.test.png etc...

      Display images but play with numbers...
      I am not sure but it should work..
      It is same like we use smiley in our application...

      Delete