(clase #4)Android Studio: RadioButton y propiedades principales

APRENDIENDO A UTILIZAR RADIOBUTTON.

En este apartado del blog vamos a aprender a utilizar el componente RadioButton y también a utilizar algunas propiedades mas de los texto escritos en pantalla (EditText).

Antes de empezar tendremos que colocar las siguientes herramientas en el layut y editar sus id para no tener problemas con el código fuente que dejaremos al final de la descripción del tema.

• ·         (EditText) – id: et_usuario – Text: admin
• ·         (EditText) -  id: et_contraseña: – Text:12345
• ·         (RadioButton) – id: rb_comousuario – Text: como usuario
• ·         (RadioButton) – id: rb_comoinvitado – Text: como inivtado
• ·         (Button) – id: btn_ingresar Text: INGRESAR
• ·         (TextView) – id: tv_mensaje  Text:

Recordemos que los nombres encerrados en paréntesis son las herramientas de Android Studio que hay que colocar en la interfaz principal o en l layout.

El proyecto consistirá, como ya lo habrá imaginado en crear una interfaz que simule un Login. Por ello tenemos los campos de texto que representa a Usuario, Contraseña . también tenemos los RadioButton que ayudaran a verificar como se desea acceder al sistema si: “como usuario”, o “como invitado”, y presionando el botón “INGRESAR” se mostrar un mensaje en la esquina de la pantalla mediante un textview que dirá si se accedió al sistema o no.

Ahora pasaremos a mostrar el código de la aplicación. Como siempre primero declaramos las variables y luego las inicializamos o vinculamos a las variables de interfaz o layoout.

Ahora que hemos declarado he inicializado las variables, pasamos a implementar un método que ayudara a verificar si los datos de las casillas son correctas o si se seleccionó la opción de ingresar al sistema como invitado esto con ayuda de los radiobutton.

Como vimos en esta imagen el método se llama VerificarIngreso(View view) colocamos los parámetro view para que el evento onclick del botón INGRESAR pueda reconocerlo.

·         Antes de verificar si el usuario o contraseña son correctos hay que verificar que opción de radiobutton esta marcada. Para ello sirve el método de clase isChecked() este nos devuelve un valor Booleano (verdadero)

·         Una ves hecho ello, pasamos a verificar si el usuario o contraseña son correctos. En este caso suponemos que el usuario correcto debería ser: admin y la contraseña correcta debería ser: 12345. Si los datos son otros no debería entrar al sistema.

·         Para verificar que los datos sean correctos, extraeremos los datos de cada casilla de texto en un valor string mediante el método de clase GetText().

·         Para comparar dos textos utilizaremos otro método de clase le cual es equals(“texto con el cual deseamos comparar”)

·         Comprobado todo esto simplemente cambiamos los textos de la variable m_tv_texto.

Ahora veremos otros métodos que nos ayudaran que solo se seleccione un radiobutton a la vez. es decir que no se puedan seleccionar  los dos RadioButton a la vez. Para ello utilizaremos el método de clase setChecked(false: para desmarcar y true: para marcar).

Recordemos por último que los métodos creados se vinculan a cada herramienta mediante su evento clic, que encontraremos en la tabla de propiedades como onClick

• Para el Botón Ingresar  vincularemos onClick: VerificarIngreso
• Para el Radiobutton como usuario: CheckButtonUsuario
• Para el Radiobutton como invitado: CheckButtonInvitado

Para tener mas claro algunas propiedades o métodos de clase recomiendo ver el video tutorial en nuestro canal de Android studo:

Resultado de la aplicación:

                      CODIGO FUENTE:

Como siempre primero el código 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:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="LOGIN"

        android:id="@+id/textView"

        android:layout_alignParentTop="true"

        android:textSize="30dp"

        android:layout_centerHorizontal="true" />

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Usuario:"

        android:id="@+id/textView2"

        android:layout_below="@+id/textView"

        android:textSize="20dp"

        android:layout_toLeftOf="@+id/textView"

        android:layout_toStartOf="@+id/textView"

        android:layout_marginTop="69dp" />

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Contraseña:"

        android:id="@+id/textView3"

        android:layout_below="@+id/textView2"

        android:textSize="20dp"

        android:layout_alignRight="@+id/textView2"

        android:layout_alignEnd="@+id/textView2"

        android:layout_marginTop="50dp" />

    <EditText

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:id="@+id/et_usuario"

        android:layout_above="@+id/textView3"

        android:layout_toRightOf="@+id/textView3"

        android:layout_toEndOf="@+id/textView3"

        android:text="admin" />

    <EditText

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:id="@+id/et_contraseña"

        android:layout_alignBottom="@+id/textView3"

        android:layout_toRightOf="@+id/textView3"

        android:layout_toEndOf="@+id/textView3"

        android:text="12345" />

    <RadioButton

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="como usuario"

        android:id="@+id/rb_comousuario"

        android:layout_centerVertical="true"

        android:layout_alignLeft="@+id/textView2"

        android:layout_alignStart="@+id/textView2"

        android:checked="false"

        android:onClick="CheckButtonUsuario" />

    <RadioButton

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="como invitado"

        android:id="@+id/rb_comoinvitado"

        android:layout_below="@+id/rb_comousuario"

        android:layout_alignLeft="@+id/rb_comousuario"

        android:layout_alignStart="@+id/rb_comousuario"

        android:layout_marginTop="46dp"

        android:checked="false"

        android:onClick="CheckButtonInvitado" />

    <Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Ingresar"

        android:id="@+id/btn_Ingresar"

        android:layout_below="@+id/rb_comoinvitado"

        android:layout_centerHorizontal="true"

        android:layout_marginTop="54dp"

        android:onClick="VerificarIngreso" />

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:id="@+id/tv_mensaje"

        android:layout_alignParentBottom="true"

        android:layout_alignLeft="@+id/textView3"

        android:layout_alignStart="@+id/textView3"

        android:textColor="#ffff4629" />

</RelativeLayout>

Ahora el código java:

package com.dgafz.clase4;

import android.support.v7.app.ActionBarActivity;

import android.os.Bundle;

import android.view.Menu;

import android.view.MenuItem;

import android.view.View;

import android.widget.Button;

import android.widget.EditText;

import android.widget.RadioButton;

import android.widget.TextView;

import android.widget.Toast;

public class MainActivity extends ActionBarActivity {

    //declaramos las variables

    private TextView m_tv_texto;

    private EditText m_et_usuario, m_et_contraseña;

    private RadioButton m_rb_usuario, m_rb_invitado;

    private Button m_btn_Ingresar;

    //fin de las variables

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        //inicializamos las variables

        m_tv_texto=(TextView) findViewById(R.id.tv_mensaje);

        m_et_usuario=(EditText) findViewById(R.id.et_usuario);

        m_et_contraseña=(EditText) findViewById(R.id.et_contraseña);

        m_rb_usuario=(RadioButton) findViewById(R.id.rb_comousuario);

        m_rb_invitado=(RadioButton) findViewById(R.id.rb_comoinvitado);

        m_btn_Ingresar=(Button) findViewById(R.id.btn_Ingresar);

        //fin de inicializar las variables

    }

    //**************************OTROS METODOS ******************************

    public void VerificarIngreso(View view)

    {

        //primero verificaremos que radiobutton se ha elegido

        //si la opcion de radiobutton como usuario esta activada o marcada

        //pasaremos a validar el nombre de usuario y la contraseña

        if (m_rb_usuario.isChecked())

        {

            //comprabamos si el usario y la contraseña son las que pide el sistema

            String usuario=m_et_usuario.getText().toString();

            String contraseña=m_et_contraseña.getText().toString();

            //en este caso sera Admin y 12345

            if ((usuario.equals("admin"))&&(contraseña.equals("12345")))

            {

                //cambiamos el texview mensaje

                m_tv_texto.setText("LOS DATOS SON CORRECTOS");

            }

            else

            {

                m_tv_texto.setText("LOS DATOS SON INCORRECTOS");

            }

        }

        else

        {

            m_tv_texto.setText("UD ESTA ACCEDIENDO AL SISTEMA COMO INVITADO");

            //MOSTRAREMOS UN MENSAJE MAS EN LA PANTALL UTILIZANDO LA CLASE TOAS

            Toast.makeText(getApplicationContext(),"A INGREADO AL SISTEMA",Toast.LENGTH_LONG).show();

        }

    }

    //creamos un metodo para validar llos chek de cada radio button

    public void CheckButtonInvitado(View view)

    {

        //desactivamos rb_usuario

        m_rb_usuario.setChecked(false);

    }

    public void CheckButtonUsuario(View view)

    {

        //desactivamos rb_invitado

        m_rb_invitado.setChecked(false);

    }

    //************************* FIN OTROS METODOS **************************

    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        // Inflate the menu; this adds items to the action bar if it is present.

        getMenuInflater().inflate(R.menu.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();

        //noinspection SimplifiableIfStatement

        if (id == R.id.action_settings) {

            return true;

        }

        return super.onOptionsItemSelected(item);

    }

}