Usar un selector de color en las preferencias Android (picker)| Tiempo de Tux

No hago tutoriales de Android .Últimamente ando de android developer ademas de iOS developer así que no se si haga mas tutoriales pero bueno:

Tutorial

Esto es usando eclipse.

Bien vamos a crear una aplicación normal:

Ahora en el Main vamos a hacer que cuando presionemos la opción de settings abra una activity de preferencias:

	public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
	// Inflate the menu; this adds items to the action bar if it is present.
	getMenuInflater().inflate(R.menu.activity_main, menu);
	return true;
	}
	// Añadimos esto
	public boolean onOptionsItemSelected(MenuItem item) {
	switch (item.getItemId()) {
	case R.id.menu_settings:
	startActivity(new Intent(MainActivity.this, Prefs.class)); // Para iniciar la actividad de preferencias
	return true;
	default:
	return super.onOptionsItemSelected(item);
	}
	}

	}

view raw gistfile1.java hosted with ❤ by GitHub

Vamos a crear una clase que cree la activity de preferencias:

	import android.os.Bundle;
	import android.preference.PreferenceActivity;

	public class Prefs extends PreferenceActivity {

	public void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);

	addPreferencesFromResource(R.xml.prefs);
	}
	}

view raw gistfile1.java hosted with ❤ by GitHub

Antes de crear el xml que sea el cuerpo de las preferencias tenemos que añadir el soporte del picker.

Nosotros vamos a usar ColorPickerPreference,hay mas o nosotros podemos crear el nuestro,pero si hay una librería hay que usarla:

Bajamos el proyecto:

https://github.com/attenzione/android-ColorPickerPreference

Descargamos el zip y lo descomprimimos.

Ahora en eclipse:

Le damos clic al sidebar de la izquierda y Import:

Existing Android Code...

Ahora le damos clic derecho al proyecto y propiedades:

Damos en Android y en Library le damos add y elegimos la librería (Test):

Ahora si creamos el xml de la librería:

En la carpeta res le damos new Folder y le ponemos de nombre xml.

Luego creamos un Android XML file en la carpeta xml.

En Resource Type elegimos Preference.

En file escribimos prefs:

Escribimos adentro del archivo:

	<?xml version="1.0" encoding="utf-8"?>
	<PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android" >

	<PreferenceCategory android:title="Ejemplo" >
	<net.margaritov.preference.colorpicker.ColorPickerPreference
	alphaSlider="true"
	android:key="colorTexto"
	android:summary="Color para usar en el texto"
	android:title="Color de Texto" />
	</PreferenceCategory>

	</PreferenceScreen>

view raw gistfile1.xml hosted with ❤ by GitHub

Eso es todo solo falta añadir la pantalla de preferencias al manifiest:

	<?xml version="1.0" encoding="utf-8"?>
	<manifest xmlns:android="http://schemas.android.com/apk/res/android"
	package="com.example.colorejemplo"
	android:versionCode="1"
	android:versionName="1.0" >

	<uses-sdk
	android:minSdkVersion="8"
	android:targetSdkVersion="17" />

	<application
	android:allowBackup="true"
	android:icon="@drawable/ic_launcher"
	android:label="@string/app_name"
	android:theme="@style/AppTheme" >
	<activity
	android:name="com.example.colorejemplo.MainActivity"
	android:label="@string/app_name" >
	<intent-filter>
	<action android:name="android.intent.action.MAIN" />

	<category android:name="android.intent.category.LAUNCHER" />
	</intent-filter>
	</activity>
	<activity android:name=".Prefs" >
	</activity>
	</application>

	</manifest>

view raw gistfile1.xml hosted with ❤ by GitHub

vamos a usar el picker para cambiar el color de la letra del hola mundo que se crea automáticamente,para que se vea un ejemplo mas funcional:

Primero en layout añadimos un id al textview,por ejemplo hello:

	<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:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_centerHorizontal="true"
	android:id="@+id/hello"
	android:layout_centerVertical="true"
	android:text="@string/hello_world" />

	</RelativeLayout>

view raw gistfile1.xml hosted with ❤ by GitHub

Despues en el codigo añadimos ciertas cosas:

1. Una referencia al textview para manejar el color:

2. Un PreferenceManager,para obtener el color seleccionado.

3. Un manejo de vida para manejar (onResume),para cuando cerremos la actividad de preferencias cambie el color:

Eso se ve asi:

	import android.app.Activity;
	import android.content.Intent;
	import android.content.SharedPreferences;
	import android.os.Bundle;
	import android.preference.PreferenceManager;
	import android.view.Menu;
	import android.view.MenuItem;
	import android.widget.TextView;

	public class MainActivity extends Activity {
	private TextView hello;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
	SharedPreferences pref = PreferenceManager
	.getDefaultSharedPreferences(MainActivity.this);
	int colorLetra = pref.getInt("colorTexto", 111111); // colorTexto es el key del preference
	hello = (TextView) findViewById(R.id.hello);
	hello.setTextColor(colorLetra); // Seteamos el color
	}

	@Override
	public void onResume() {
	super.onResume();
	SharedPreferences pref = PreferenceManager
	.getDefaultSharedPreferences(MainActivity.this);
	int colorLetra = pref.getInt("colorTexto", 111111);
	hello.setTextColor(colorLetra);
	}


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

	public boolean onOptionsItemSelected(MenuItem item) {
	switch (item.getItemId()) {
	case R.id.menu_settings:
	startActivity(new Intent(MainActivity.this, Prefs.class));
	return true;
	default:
	return super.onOptionsItemSelected(item);
	}
	}

	}