Friday, January 30, 2015

Spinner in Toolbar Example in Android

Step: 1
======
SpinToolbarActivity.java

package com.pratap.cardviews1;
import java.util.ArrayList;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.Spinner;
import android.widget.Toast;

public class SpinToolbarActivity extends AppCompatActivity {

private Toolbar toolbar;

private Spinner spinner_nav;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.spintoolbaractivity);
toolbar = (Toolbar) findViewById(R.id.toolbar);
spinner_nav = (Spinner) findViewById(R.id.spinner_nav);

if (toolbar != null) {
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);

}
addItemsToSpinner();

}

// add items into spinner dynamically
public void addItemsToSpinner() {

ArrayList<String> list = new ArrayList<String>();
list.add("Top News");
list.add("Politics");
list.add("Business");
list.add("Sports");
list.add("Movies");

// Custom ArrayAdapter with spinner item layout to set popup background

CustomSpinnerAdapter spinAdapter = new CustomSpinnerAdapter(
getApplicationContext(), list);



// Default ArrayAdapter with default spinner item layout, getting some
// view rendering problem in lollypop device, need to test in other
// devices

/*
* ArrayAdapter<String> spinAdapter = new ArrayAdapter<String>(this,
* android.R.layout.simple_spinner_item, list);
* spinAdapter.setDropDownViewResource
* (android.R.layout.simple_spinner_dropdown_item);
*/

spinner_nav.setAdapter(spinAdapter);

spinner_nav.setOnItemSelectedListener(new OnItemSelectedListener() {

@Override
public void onItemSelected(AdapterView<?> adapter, View v,
int position, long id) {
// On selecting a spinner item
String item = adapter.getItemAtPosition(position).toString();

// Showing selected spinner item
Toast.makeText(getApplicationContext(), "Selected : " + item,
Toast.LENGTH_LONG).show();
}

@Override
public void onNothingSelected(AdapterView<?> arg0) {
// TODO Auto-generated method stub

}
});

}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
Toast.makeText(getApplicationContext(), "Settings Clicked",
Toast.LENGTH_SHORT).show();
return true;
} else if (id == R.id.action_search) {
Toast.makeText(getApplicationContext(), "Search Clicked",
Toast.LENGTH_SHORT).show();
return true;
} else if (id == R.id.action_add) {
Toast.makeText(getApplicationContext(), "Add Clicked",
Toast.LENGTH_SHORT).show();
return true;
} else if (id == R.id.action_delete) {
Toast.makeText(getApplicationContext(), "Delete Clicked",
Toast.LENGTH_SHORT).show();
return true;
}
return super.onOptionsItemSelected(item);
}
}


toolbar.xml


<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimaryDark"
android:minHeight="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
>

<Spinner
android:id="@+id/spinner_nav"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

</android.support.v7.widget.Toolbar>

spintoolbaractivity.xml


<?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="match_parent"
android:background="#c9c9c9"
android:orientation="vertical" >

<include
android:id="@+id/toolbar"
layout="@layout/spintoolbar" />


</LinearLayout>


Step: 2
======
CustomSpinnerAdapter.java


package com.pratap.cardviews1;

import java.util.ArrayList;
import android.content.Context;
import android.content.res.Resources;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.TextView;

// Custom Adapter for Spinner
public class CustomSpinnerAdapter extends ArrayAdapter<String> {

private Context context1;
private ArrayList<String> data;
public Resources res;
LayoutInflater inflater;

public CustomSpinnerAdapter(Context context, ArrayList<String> objects) {
super(context, R.layout.spinner_row, objects);

context1 = context;
data = objects;

inflater = (LayoutInflater) context1
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

}

@Override
public View getDropDownView(int position, View convertView, ViewGroup parent) {
return getCustomView(position, convertView, parent);
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
return getCustomView(position, convertView, parent);
}

// This funtion called for each row ( Called data.size() times )
public View getCustomView(int position, View convertView, ViewGroup parent) {

View row = inflater.inflate(R.layout.spinner_row, parent, false);

TextView tvCategory = (TextView) row.findViewById(R.id.tvCategory);

tvCategory.setText(data.get(position).toString());

return row;
}
}



spinner_row.xml


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="@drawable/spinner_selector"
android:orientation="vertical" >

<TextView
android:id="@+id/tvCategory"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:textSize="18sp"
/>

</RelativeLayout>

values/styles.xml

<resources xmlns:android="http://schemas.android.com/apk/res/android">

<style name="AppTheme" parent="AppTheme.Base" />

<style name="AppTheme.Base" parent="Theme.AppCompat.NoActionBar">
<!-- your app branding color for the app bar -->
<item name="colorPrimary">@color/md_teal_500_primary</item>

<!-- darker variant for the status bar and contextual app bars -->
<item name="colorPrimaryDark">@color/md_teal_700</item>

<!-- theme UI controls like checkboxes and text fields -->
<item name="colorAccent">@color/md_teal_900</item>


</style>

</resources>



Screenshot:
======





















Update:
======

Since the spinner dropdown is not like the new LollyPop Design like Spinner:

We need to add small code for the spinner control

 android:dropDownVerticalOffset="-52dp" for Kitkat and below

 android:dropDownVerticalOffset="0dp" for LollyPop



 <Spinner
        android:id="@+id/spinner_nav"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:dropDownVerticalOffset="@dimen/dropDownVerticalOffset" />


No comments:

Post a Comment