Cada vez que nos piden desarrollar una app en android algo muy común es personalizar varias cosas en nuestra app, como los botones, el fondo, los campos de textos … etc.

pero nos vamos a centrar en 2 componentes nativos de como personalizar EditText y Button en android

Personalizar EditText y Button

Lo primero que vamos a hacer es crear nuestro proyecto nuevo, recuerden actualizar su android studio ya que hay cambios importantes en la estructura de los proyectos.

Nuestro proyecto

Vamos a crear nuestro proyecto con android 5.0 para no tener problema de compatibilidad y no estar cargando librerías necesarias, recuerden que para esto debemos tener nuestro celular en modo depurador, si no saben como se hace esto dejare acá un mini post.

La estructura sera muy básica, tendré una pantalla inicial que nos va a dirigir a una actividad de botones y otro de EditText.

Me ha pasado últimamente que actualice mi android studios es que no se puede visualizar  layout en android studio 3.1.3 para esto lo único que tenemos que hacer es entrar a build.gradle(module: app) y bajar la versión de compilación.

apply plugin: 'com.android.application'

android {
    compileSdkVersion 27
    defaultConfig {
        applicationId "com.unprogramador.shingrey.cambiosandroid"
        minSdkVersion 21
        targetSdkVersion 27
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:27.+'
    implementation 'com.android.support.constraint:constraint-layout:1.1.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

para esto debemos poner en nuestra dependencia donde dice appcompat-v7 hay que cambiar 28…. a 27.+, compilamos y listo ya podemos ver nuestro Diseños en android.

Personalizar Button en android

Vamos a crear nuestra pantalla y vamos a poner unos botones para que personalicemos varios, lo primero que vamos a ver es la personalización básica de los botones.

Cualquier componente que pongamos vamos a tener una opción lateral donde podemos cambiar algunos estilos que el equipo de google ya han implementado

Si esto no nos basta podemos personalizar de varias maneras

Cambiar de color un botón en android

Cambio de color visual

Podemos cambiar color de un botón en los atributos visuales, buscamos background y ahí escribimos un color que queramos

Cambio de color por xml

o también podemos cambiar el color por código xml escribimos la propiedad

android:background="#color"

<Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginTop="8dp"
        android:background="#FF0000"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

Cambio de color de boton por código java

Otra manera de cambiar el color por código Java, aquí llamamos a nuestro botón y le pasamos el color deseado usando la librería Color de graphic

Button rcode = findViewById(R.id.button3);
rcode.setBackgroundColor(Color.parseColor("#FF0000"));

y podemos hacer un pequeño ejemplo de esto, osea cuando toquemos el botón cambiara de color ese botón

cambia = findViewById(R.id.button4);
        cambia.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                switch (color){
                    case 0:
                        cambia.setBackgroundColor(Color.parseColor("#4286f4"));
                        mensaje("#4286f4");
                        color++;
                        break;
                    case 1:
                        cambia.setBackgroundColor(Color.parseColor("#0f9e3c"));
                        mensaje("#0f9e3c");
                        color++;
                        break;

                    case 2:
                        cambia.setBackgroundColor(Color.parseColor("#e88e2e"));
                        mensaje("#e88e2e");
                        color++;
                        break;
                    case 3:
                        cambia.setBackgroundColor(Color.parseColor("#e82ea0"));
                        mensaje("#e82ea0");
                        color=0;
                        break;
                }
            }
        });

Cambiar de color un button por styles

otra manera de hacerlo y para mi de las mejores es crear un estilo (como en css) y luego podemos reutilizarlo en cualquier parte del proyecto, para esto nos vamos a la carpeta res>values>styles

y ponemos lo siguiente

<style name="Botonnuevo" parent="Widget.AppCompat.Button.Borderless">
       <item name="android:background">#39008e</item>
       <item name="android:textSize">18sp</item>
       <item name="android:textColor">#FFF</item>
       <item name="android:textAllCaps">true</item>
       <item name="android:paddingLeft">15dp</item>
       <item name="android:paddingRight">15dp</item>
   </style>

hay que darnos cuenta que lo principal es el nombre del estilo, este no debe repetirse y parent es opcional, si lo usas puedes hacer referencia a algun estilo de android y luego modificar.

Para modificar necesitas los atributos de cada elemento estos se insertan usando la etiqueta item + nombre de atributo este se vera como en la siguiente imagen (morado)

Cambiar de color y estados

Por ultimo, otra forma de cambiar el aspecto de nuestro botón y no solo hablando del color, si no de la forma es haciendo un xml que modifique este aspecto

para crear esto tenemos que tener encenta que a parte de color y forma, podemos modificar estados.

Al igual que en style estos selectores se manejan con item que llaman a un estado por ejemplo

<item android:state_pressed="false">

<item android:state_enabled="false">

Estos dos selectores vamos a usarlos pero hay mas como focused, hovered, selected, checkable cheked etc.

dentro de estos item podemos usar algunas propiedades especiales, para este ejemplo usaremos shape, que pinta el fondo del elemento y su propiedad solid que rellena el elemento

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false">
<shape>
<solid android:color="@android:color/background_light"></solid>
<corners android:radius="100dp"></corners>
</shape>
</item>
<item android:state_pressed="true">
<shape>
<solid android:color="@color/colorAccent"></solid>
<corners android:radius="5dp"></corners>
</shape>

</item>
<item android:state_pressed="false">
<shape>
<gradient
android:angle="90"
android:centerColor="@color/colorPrimary"
android:endColor="@color/colorPrimaryDark"
android:startColor="@color/colorAccent"
android:type="linear" />
<corners android:radius="45dp"></corners>
</shape>
</item>



</selector>

hay que recordar que el orden es el siguiente en prioridades

un consejo es que den auto completar en cada etiqueta dentro y fuera del cierra ya que despliega mas información que pueden jugar con ella

Como personalizar EditText

Podemos decir que la parte mas complicada ya ha pasado, edittext tiene menos maneras de editarlas pero no por eso son menos interesantes.

aquí a diferencia de poner nuestro estilo en la propiedad style, vamos a usar la propiedad theme para modificar un poco nuestro EditText.

<EditText
        android:id="@+id/editText"
        style="@style/CampoTexto1"
        android:theme="@style/CampoTexto1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:ems="10"
        android:hint="Prueba"
        android:inputType="textEmailAddress"
        android:singleLine="true"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

style

<style name="CampoTexto1" parent="Theme.AppCompat.Light">
        <item name="colorControlNormal">#FF0000</item>
        <item name="colorControlActivated">#39008e</item>
        <item name="android:textColorHighlight">#E1BEE7</item>
        <item name="android:gravity">center</item>
    </style>

principalmente necesitamos entender que las propiedades de color son los siguientes

• colorControlNormal
• colorControlActivated
• textColorHighlight

con estos 3 controlamos aspecto visual, aspecto en el uso, selector de texto.

si queremos activar la funcion de material design tenemos que agregar en nuestra build la siguiente linea

implementation 'com.android.support:design:27.+'

y usaremos la siguiente sintaxis para crear un componente mas moderno

<android.support.design.widget.TextInputLayout
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       android:layout_marginEnd="8dp"
       android:layout_marginStart="8dp"
       android:layout_marginTop="16dp"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toBottomOf="@+id/editText3">

       <android.support.design.widget.TextInputEditText
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:hint="Nombres"
           android:singleLine="true" />
   </android.support.design.widget.TextInputLayout>

que nos da el siguiente resultado de que el texto sube para seguir dando referencia de que campo estamos modificando 

También podemos modificar por código los colores

et3 = findViewById(R.id.editText3);
        et3.setError(getString(R.string.app_name), getDrawable(R.drawable.ic_launcher_foreground));
        et3.setBackgroundTintList(ColorStateList.valueOf(Color.GREEN));

con setError, podemos mandar un mensaje de error y una imagen.

en setBackgroundTintList podemos hacer cambio de colores

y con esto ya sabes lo básico de Como personalizar EditText y button en android

Actualización octubre 2018

Editar Styles en TextInputLayout

para cambiar los estilos de este estilos, que son los inputs con material (esos que al tocar se sube el texto) no se puede editar los colores como en el tutorial, para esto hay que hacer una clase especial.

<style name="text_label_blue" parent="TextAppearance.AppCompat">
        <item name="android:textColorHint">@color/colorCeleste</item>
        <item name="colorControlNormal">@color/colorCeleste</item>
        <item name="colorControlActivated">@color/colorOrange</item>
        <item name="android:textColorPrimary">@android:color/black</item>
        <item name="errorTextAppearance">@color/colorNotS</item>
    </style>

• textColorHint: Color en label flotante
• colorControlNormal: color de la linea de editext
• colorControlActive: color del label flotante y la linea cuando esta activo
• textColorPrimaty: el color del texto que se introduce

y este se agrega colocando @android:Theme en el componente

<android.support.design.widget.TextInputLayout
        android:id="@+id/textInputLayout2"
        android:theme="@style/text_label_blue"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="24dp"
        android:hint="@string/name"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/login_name">

        <android.support.design.widget.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="text"
            android:selectAllOnFocus="true"
            android:singleLine="true" />
    </android.support.design.widget.TextInputLayout>

si quieres darle un vistazo dejo el repositorio del proyecto