Custom Spinner Tutorial With Examples In Android Studio | Android Solution | Custom Spinner Tutoriyal

Custom Spinner Tutorial With Examples In Android Studio

In Android, Whenever we have to display a spinner thing with picture, content and so on (i.e. making progressively custom rundown) at that point we need to execute a custom connector like base connector. For customization we have to make a custom connector class and afterward expands our default connector in that class. Here we make a custom rundown utilizing the overrided elements of connector and display custom spinner. For more clarification about how's a custom connector actualized right off the bat we have to comprehend spinner.

In Android, Spinners gives you a speedy method to choose one incentive from a lot of esteems. Android spinners are only the drop-downlist seen in other programming dialects. In a default express, a spinner demonstrates its presently chosen esteem. It gives a simple method to choose an incentive from a rundown of qualities.

Imperative Note: Spinner is associated with Adapter see so to fill the information in spinner we have to utilize one of the class.

XML code of Spinner in Android:

<Spinner

android:id="@+id/simpleSpinner "

android:layout_width="fill_parent"

android:layout_height="wrap_content" />

In above code piece we actualize a basic spinner in our xml document. Presently to fill the information in this spinner we have to utilize one of the connector class. Here we will utilize custom connectors in order to fill customize information with pictures in spinner.

Here is the manner by which's CustomAdapter class expands BaseAdapter:

public class CustomAdapter extends BaseAdapter {

@Override

public int getCount() {

return 0;

}

@Override

public Object getItem(int i) {

return null;

}

@Override

public long getItemId(int i) {

return 0;

}

@Override

public View getView(int i, View view, ViewGroup viewGroup) {

return null;

}

BaseAdapter class in Android is Abstract class. So while expanding it in CustomAdapter we supersede its techniques dependent on prerequisite. In above code bit the superseded elements of base connector are utilized to set the information in spinner, listview or a gridview. These capacities are as of now portrayed in BaseAdapter tutorial.

Test code of Custom Adapter class when we expands ArrayAdapter in that:

public class MyAdapter extends ArrayAdapter {

public MyAdapter(Context context, int resource, int textViewResourceId, List objects) {

super(context, resource, textViewResourceId, objects);

}

@Override

public int getCount() {

return super.getCount();

}

@Override

public View getView(int position, View convertView, ViewGroup parent) {

return super.getView(position, convertView, parent);

}

}

Custom Spinner Example in Android Studio

Precedent 1: Example of custom spinner utilizing BaseAdapter

The following is the precedent in which we displayed the nation names with pictures in a spinner and at whatever point you tap on a thing, nation name will be displayed as a message utilizing toast. The following is the last output and code:

Step 1: Create a new project in Android Studio and name it CustomSpinnerExample.

Select File -> New -> New Project. Fill the requirements and click "Finish" button.

Step 2: Open res -> layout -> xml (or) activity_main.xml and add following code. Here we are creating Spinner inside Relative Layout.

<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">

    <Spinner

        android:id="@+id/simpleSpinner"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true"

        android:layout_marginTop="50dp" />

</RelativeLayout>

Step 3: Create a new layout activity in res-> layout and name it custom_spinner_items.xml. Add following code. Here we are defining basic layout for custom items that will be displayed inside Spinner.

<?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="wrap_content"

    android:orientation="horizontal">

    <ImageView

        android:id="@+id/imageView"

        android:layout_width="50dp"

        android:layout_height="50dp"

        android:padding="5dp"

        android:src="@drawable/ic_launcher" /><!--Make sure image is present in Drawable folder-->

    <TextView

        android:id="@+id/textView"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:padding="@dimen/activity_horizontal_margin"

        android:text="Demo"

        android:textColor="#000" />

</LinearLayout>

Step 4: Open app -> java -> package -> MainActivity.java and add the following code. Explanation is included in the code itself.

package example.abhiandriod.customspinnerexample;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.view.View;

import android.widget.AdapterView;

import android.widget.Spinner;

import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements AdapterView.OnItemSelectedListener{

    String[] countryNames={"India","China","Australia","Portugle","America","New Zealand"};

    int flags[] = {R.drawable.india, R.drawable.china, R.drawable.australia, R.drawable.portugle, R.drawable.america, R.drawable.new_zealand};

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        //Getting the instance of Spinner and applying OnItemSelectedListener on it

        Spinner spin = (Spinner) findViewById(R.id.simpleSpinner);

        spin.setOnItemSelectedListener(this);

        CustomAdapter customAdapter=new CustomAdapter(getApplicationContext(),flags,countryNames);

        spin.setAdapter(customAdapter);

    }

    //Performing action onItemSelected and onNothing selected

    @Override

    public void onItemSelected(AdapterView<?> arg0, View arg1, int position,long id) {

        Toast.makeText(getApplicationContext(), countryNames[position], Toast.LENGTH_LONG).show();

    }

    @Override

    public void onNothingSelected(AdapterView<?> arg0) {

        // TODO Auto-generated method stub

    }

}

  

Step 5: Create a new Class app -> java-> package and new class name CustomAdapter.java and add the following code. Here we will override the methods of BaseAdapter to fill data in Spinner.

package example.abhiandriod.customspinnerexample;

import android.content.Context;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.BaseAdapter;

import android.widget.ImageView;

import android.widget.TextView;

public class CustomAdapter extends BaseAdapter {

    Context context;

    int flags[];

    String[] countryNames;

    LayoutInflater inflter;

    public CustomAdapter(Context applicationContext, int[] flags, String[] countryNames) {

        this.context = applicationContext;

        this.flags = flags;

        this.countryNames = countryNames;

        inflter = (LayoutInflater.from(applicationContext));

    }

    @Override

    public int getCount() {

        return flags.length;

    }

    @Override

    public Object getItem(int i) {

        return null;

    }

    @Override

    public long getItemId(int i) {

        return 0;

    }

    @Override

    public View getView(int i, View view, ViewGroup viewGroup) {

        view = inflter.inflate(R.layout.custom_spinner_items, null);

        ImageView icon = (ImageView) view.findViewById(R.id.imageView);

        TextView names = (TextView) view.findViewById(R.id.textView);

        icon.setImageResource(flags[i]);

        names.setText(countryNames[i]);

        return view;

    }

}

OutPut :-