Andrey Cattalin

Android TextInputLayout - Comprobando un formulario de login

2016-01-13T00:00:00+00:00

Cuando creamos un formulario en android, el usuario puede cometer errores o dejarlo en blanco, para eso tenemos que indicarle que necesitamos esos datos obligatorios y que no ha completado.

Para mostrar un ejemplo, haremos un login, funcional a nivel de vista.

Primero creamos un layout “activity_login.xml”:

<LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="?attr/actionBarSize"
        android:orientation="vertical"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:paddingTop="60dp">

        <android.support.design.widget.TextInputLayout
            android:id="@+id/input_layout_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="20dp">

            <EditText
                android:id="@+id/in_nombre"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Nombre"
                android:singleLine="true" />
        </android.support.design.widget.TextInputLayout>

        <android.support.design.widget.TextInputLayout
            android:id="@+id/input_layout_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <EditText
                android:id="@+id/in_password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Password"
                android:inputType="textPassword" />
        </android.support.design.widget.TextInputLayout>

        <CheckBox
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Recordarme"
            android:id="@+id/check_recordarme"
            android:layout_marginTop="15dp"
            android:checked="false" />

        <Button
            android:id="@+id/btn_entrar"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/btn0"
            android:layout_marginTop="40dp"
            android:text="Entrar"
            android:textColor="@android:color/white" />
  </LinearLayout>

A continuación se hace lo siguiente para realizar la comprobación, el codigo es simple y está comentado.

public class LoginActivity extends AppCompatActivity {

    private String PREFS_NAME = "AppOnFire";
    private static final String Name = "nameKey";
    private static final String Email = "passKey";

    private Button btn_entrar;
    private TextView in_nombre, in_password;
    private TextInputLayout inputLayoutName, inputLayoutPassword;
    private CheckBox check_recordarme;

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

        init_Login();
    }

    /***
     * Iinicializa las vistas y comprueba el login
     */
    public void init_Login() {
        inputLayoutName = (TextInputLayout) findViewById(R.id.input_layout_name);
        inputLayoutPassword = (TextInputLayout) findViewById(R.id.input_layout_password);

        in_nombre = (TextView) findViewById(R.id.in_nombre);
        in_password = (TextView) findViewById(R.id.in_password);

        in_nombre.addTextChangedListener(new checkLogin(in_nombre));
        in_password.addTextChangedListener(new checkLogin(in_password));

        check_recordarme = (CheckBox) findViewById(R.id.check_recordarme);

        btn_entrar = (Button) findViewById(R.id.btn_entrar);
        btn_entrar.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                doLogin(); // metodo para hacer el login

            }
        });
    }

    /**
     * Validar Loginm comprueba datos y actua según el checkbox
     */
    private void doLogin() {
        if (!validateName()) {
            return;
        } else if (!validatePassword()) {
            return;
        } else {
            if (check_recordarme.isChecked()) {
                Toast.makeText(getApplicationContext(), "Has entrado en modo recuerdame.", Toast.LENGTH_SHORT).show();

                final SharedPreferences settings = getSharedPreferences(PREFS_NAME, 0);
                SharedPreferences.Editor editor = settings.edit();

                String name = in_nombre.getText().toString();
                String pass = in_password.getText().toString();

                editor.putString(Name, name);
                editor.putString(Email, pass);
                editor.commit();
            } else {
                Log.v("Login", "Entrado");
                Toast.makeText(getApplicationContext(), "Has entrado en modo olvidame.", Toast.LENGTH_SHORT).show();
            }
        }
    }

    /**
     * Solicita el foco en la vista
     *
     * @param view
     */
    private void requestFocus(View view) {
        if (view.requestFocus()) {
            getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_VISIBLE);
        }
    }

    /**
     * Valida el nombre
     *
     * @return si es valido o no
     */
    private boolean validateName() {
        if (in_nombre.getText().toString().trim().isEmpty()) {
            inputLayoutName.setError(getString(R.string.err_msg_name));
            requestFocus(in_nombre);
            return false;
        } else if(in_nombre.getText().toString().length() < 3){
            inputLayoutName.setError(getString(R.string.err_msg_name2));
            requestFocus(in_nombre);
            return false;
        } else {
            inputLayoutName.setErrorEnabled(false);
        }

        return true;
    }

    /**
     * Valida el password
     * @return si es valido o no
     */
    private boolean validatePassword() {
        if (in_password.getText().toString().trim().isEmpty()) {
            inputLayoutPassword.setError(getString(R.string.err_msg_password));
            requestFocus(in_password);
            return false;
        } else {
            inputLayoutPassword.setErrorEnabled(false);
        }

        return true;
    }

    private class checkLogin implements TextWatcher {
        private View view;

        private checkLogin(View view) {
            this.view = view;
        }

        public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
        }

        public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
        }

        public void afterTextChanged(Editable editable) {
            switch (view.getId()) {
                case R.id.in_nombre:
                    validateName();
                    break;
                case R.id.in_password:
                    validatePassword();
                    break;
            }
        }
    }
}

Y así nos quedaría:

Android Tabs – Con Fragments y ViewPager

2016-01-09T00:00:00+00:00

Este código es para crear Tabs en Android, utilizando Fragments y ViewPager. Antes de empezar hay que configurar el build.gradle de Android Studio como se indica en la página de CodePath.

Primero de todo, creamos en el xml principal “activity_main.xml” el TabLayout que serán las pestañas y el ViewPager que nos servirá para mostrar otros layouts según cambiemos de pestaña.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorPrimaryDark"
        android:layout_weight="1"
        android:orientation="vertical"
        android:gravity="center">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Instant"
            android:id="@+id/textView"
            android:textColor="#FFF"
            android:textSize="90sp"
            android:layout_gravity="center" />
    </LinearLayout>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="250dp">

        <android.support.design.widget.TabLayout
            android:id="@+id/sliding_tabs"
            style="@style/StartTabLayout"
            app:tabTextColor="@color/whiteTransparent"
            app:tabSelectedTextColor="#FFF"
            android:background="@color/colorPrimaryDark"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabIndicatorColor="@color/colorSand"
            app:tabGravity="fill"
            app:tabMode="fixed" />

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="0px"
            android:layout_weight="1"
            android:background="@color/colorWhite" />

    </LinearLayout>

</LinearLayout>

Después en la clase principal “MainActivity.java” referenciamos el TabLayout y el ViewPager.

public class MainActivity extends AppCompatActivity {

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

        // Obtiene el ViewPager y establece su PagerAdapter para que pueda mostrar los elementos

        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
        viewPager.setAdapter(new Tabs_Bar(this.getSupportFragmentManager()));

        // Pasa el TabLayout al ViewPager

        TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
        tabLayout.setupWithViewPager(viewPager);

    }
}

Ahora creamos el contenido de cada layout a mostrar con el ViewPager. Voy a poner uno de ejemplo, pero como haremos 2 pestañas este paso habrá que duplicarlo. Mi ejemplo será “tab_empezar.xml” y el código dentro de un LinearLayout es el siguiente:

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:orientation="vertical"
        android:paddingLeft="30dp"
        android:paddingRight="30dp">

        <Button
            android:id="@+id/btn_sesion"
            android:layout_width="fill_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:layout_marginBottom="10dp"
            android:background="@drawable/start_btn_main"
            android:paddingBottom="19dp"
            android:paddingTop="19dp"
            android:text="@string/iniciar_sesion"
            android:textAllCaps="false"
            android:textSize="20sp" />

        <Button
            android:id="@+id/btn_resetPassword"
            style="?android:attr/borderlessButtonStyle"
            android:layout_width="fill_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:background="@drawable/start_btn_grey"
            android:paddingBottom="15dp"
            android:paddingTop="15dp"
            android:text="@string/recuperar_contrasena"
            android:textAllCaps="false"
            android:textColor="@android:color/white"
            android:textSize="14sp" />
</LinearLayout>

Y luego creamos “TabEmpezar.java”, heredando de fragment e implementando el evento OnClickListener. Como he dicho antes, esto también se haría dos veces, una vez por cada pestaña que creamos.

public class TabEmpezar extends Fragment implements View.OnClickListener {
    private Button btn_sesion, btn_resetPassword;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.tab_empezar, container, false);

        btn_sesion = (Button) view.findViewById(R.id.btn_sesion);
        btn_resetPassword = (Button) view.findViewById(R.id.btn_resetPassword);

        btn_sesion.setOnClickListener(this);
        btn_resetPassword.setOnClickListener(this);

        return view;
    }

    @Override
    public void onClick(View v) {
        if (v.getId() == R.id.btn_sesion) {
            Intent intent = new Intent(getActivity(), InvitacionSolicitar.class);
            startActivity(intent);
        } else if (v.getId() == R.id.btn_resetPassword) {
            // Abrir otro Activity

        }
    }
}

Nos queda el último paso, darle nombre a las pestañas y según la pestaña nos muestre un layout u otro. Herendando de FragmentPagerAdapter creamos “Tabs_Bar.java” completamos el paso que hicimos al principio en el MainActivity.java y escribimos esto:

public class Tabs_Bar extends FragmentPagerAdapter {

    private String tabTitles[] = {"Invitación", "Empezar"};

    public Tabs_Bar(FragmentManager fm) {
        super(fm);
    }

    @Override
    public int getCount() {
        return tabTitles.length;
    }

    @Override
    public Fragment getItem(int position) {
        switch (position) {
            case 0:
                TabInvitacion tab1 = new TabInvitacion();
                return tab1;
            case 1:
                TabEmpezar tab2 = new TabEmpezar();
                return tab2;
            default:
                return new Fragment();
        }
    }

    @Override
    public CharSequence getPageTitle(int position) {
        // Genera el titulo basado en la posicion

        return tabTitles[position];
    }
}

Ya está. Con esto terminaríamos, y quedaría de esta manera: