Bienvenidos al blog el Inform谩tico Ibero en esta oportunidad desarrollaremos un proyecto acerca de dise帽ar la interfaz grafica de un login e implementarla con base de datos local SQLite con lo atributos del theme modificado es decir que me aparezca toda la pantalla (LOGIN SCREEN).
Primero dar de conocimiento que el presente proyecto se desarrollara en el IDE android studio version Bumblebee 2021.1.1, el presente a帽o 2022, algunas cositas estuve revisando acerca de programar con esta version, el post se trata de como dise帽ar un LOGIN SCREEN con la nueva version de Android.
Una vez creado el proyecto por defecto, creamos tres paquetes para tener un poco de orden al momento de programar. creamos el paquete Database para la clase DBHelper, paquete Principal para clase principal y un paquete RegistroData para la clase registro de usuarios.
Luego copiamos dos imagenes a la carpeta de drawable, en mi caso utilizare estas dos imagenes que los dejo a continuaci贸n:
Estas dos imagenes los utlizare como fondo de los layout.
Comenzamos a modificar el Theme de la actividad.
Cambiamos de :
<style name="Theme.login" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
Cambiamos a : Solo modificamos lo ultimo.
<style name="Theme.Login" parent="Theme.MaterialComponents.DayNight.NoActionBar">
Una vez realizado la primera modificaci贸n del proyecto dise帽amos el layout del login.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/backgroundv2"
tools:context=".Login"
android:padding="10dp">
<!--textview -->
<TextView
android:id="@+id/tvtitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="20dp"
android:gravity="center"
android:text="Iniciar Sesi贸n"
android:textColor="@color/white"
android:textSize="35sp"
android:textStyle="bold" />
<!--edittext 1 -->
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/eduser"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/tvtitle"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="20dp"
android:textColorHint="@color/white"
app:startIconDrawable="@drawable/ic_username">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/edusername"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Usuario"
android:inputType="text"
android:textColor="@color/white" />
</com.google.android.material.textfield.TextInputLayout>
<!--edittext 2 -->
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/edpassword"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/eduser"
android:layout_marginStart="15dp"
android:layout_marginTop="15dp"
android:layout_marginEnd="15dp"
android:layout_marginBottom="15dp"
android:textColorHint="@color/white"
app:endIconMode="password_toggle"
app:startIconDrawable="@drawable/ic_lock">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/edcontra"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="@drawable/ic_username"
android:hint="Contrase帽a"
android:inputType="textPassword"
android:textColor="@color/white" />
</com.google.android.material.textfield.TextInputLayout>
<!--Button entrar-->
<com.google.android.material.button.MaterialButton
android:id="@+id/btnentrar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/edpassword"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="20dp"
android:backgroundTint="@color/design_default_color_secondary_variant"
android:onClick="entrar"
android:text="ENTRAR"
android:textColor="@color/white" />
<!--edittext 2 -->
<TextView
android:id="@+id/tvoption"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="crear cuenta 贸 restablecer"
android:textColor="@color/white"
android:layout_below="@+id/btnentrar"/>
<!--layout para los dos botones -->
<LinearLayout
android:layout_width="401dp"
android:layout_height="256dp"
android:layout_below="@+id/tvoption"
android:layout_alignParentBottom="true"
android:layout_marginTop="77dp"
android:layout_centerHorizontal="true"
android:gravity="center">
<!--boton registrar cuenta -->
<com.google.android.material.button.MaterialButton
android:layout_width="160dp"
android:layout_height="50dp"
android:layout_margin="5dp"
android:backgroundTint="@color/design_default_color_secondary_variant"
android:onClick="RegistroData"
android:text="Crear"
android:textColor="@color/white" />
<!--boton restablecer cuenta -->
<com.google.android.material.button.MaterialButton
android:layout_width="160dp"
android:layout_height="50dp"
android:layout_margin="5dp"
android:backgroundTint="@color/design_default_color_secondary_variant"
android:text="Restablecer"
android:textColor="@color/white" />
</LinearLayout>
</RelativeLayout>
Al terminar tendremos el siguiente dise帽o:
public class DBHelper extends SQLiteOpenHelper {
public DBHelper(@Nullable Context context, @Nullable String name,
@Nullable SQLiteDatabase.CursorFactory factory, int version) {
super(context, name, factory, version);
}
@Override
public void onCreate(SQLiteDatabase db) {
/*Creacion de la tabla con 3 campos un integer que es auto incrementable
* un texto que no puede ser nulo que es el nombre del usuario
* la contrase帽a que tambien es un texto y no nulo*/
db.execSQL("create table userstable(id_user integer PRIMARY KEY " +
"AUTOINCREMENT NOT NULL," +
"username text NOT NULL,clave_user text NOT NULL)");
/*Hacemos un insert para tener un valkor insertado como predeterminado*/
db.execSQL("insert into userstable(username,clave_user) values('admin','admin')");
}
@Override
public void onUpgrade(SQLiteDatabase db, int i, int i1) {
db.execSQL("drop table if exists userstable");
}
}
En el paquete principal creamos una actividad vacia, y dise帽amos el xml con las siguientes controles.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/backgroundv3"
tools:context=".Principal.Index"
android:padding="10dp">
<!--TEXTVIEW QUE INDIQUE BIENVENIDA-->
<TextView
android:id="@+id/tvbienvenida"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="20dp"
android:gravity="center"
android:text="Bienvenido"
android:textSize="35dp"
android:textStyle="bold"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="30dp" />
<!--IMAGEN DONDE SE CARGARA EL LOGO QUE DESEO QUE APAREZCA-->
<ImageView
android:id="@+id/imageView"
android:layout_width="220dp"
android:layout_height="173dp"
android:layout_below="@id/tvbienvenida"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
app:srcCompat="@drawable/index" />
</RelativeLayout>
La vista quedar como la el siguiente dise帽o.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="@drawable/backgroundv2"
android:padding="10dp"
tools:context=".RegistroData.NewUser">
<TextView
android:id="@+id/tvtitleuser"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="20dp"
android:gravity="center"
android:text="Crear Cuenta Local"
android:textColor="@color/white"
android:textSize="35sp"
android:textStyle="bold" />
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/eduserparent"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/tvtitleuser"
android:textColorHint="@color/white"
app:startIconDrawable="@drawable/ic_username">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/eduserparented"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Usuario"
android:inputType="text"
android:textColor="@color/white" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/edpasswordnew"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/eduserparent"
android:layout_marginTop="20dp"
android:textColorHint="@color/white"
app:endIconMode="password_toggle"
app:startIconDrawable="@drawable/ic_lock">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/edcontranewed"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="@drawable/ic_username"
android:hint="Contrase帽a"
android:inputType="textPassword"
android:textColor="@color/white" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/edpasswordnewver"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/edpasswordnew"
android:layout_marginTop="20dp"
android:textColorHint="@color/white"
app:endIconMode="password_toggle"
app:startIconDrawable="@drawable/ic_lock">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/edcontranewedoption"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="@drawable/ic_username"
android:hint="Contrase帽a"
android:inputType="textPassword"
android:textColor="@color/white" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.button.MaterialButton
android:id="@+id/btnregistrar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/edpasswordnewver"
android:layout_marginTop="20dp"
android:backgroundTint="@color/design_default_color_secondary_variant"
android:onClick="RegistrarDataUser"
android:text="registrar"
android:textColor="@color/white" />
</RelativeLayout>
El dise帽o me mostrar谩 de la siguiente manera:
public class Login extends AppCompatActivity {
//creamos la variables locales que utlizaremos
//Editext
EditText et1, et2;
//Cursor
private Cursor fila;
String usua;
String pass;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//emperejamos las variable con el xml editText usuario y password
et1 = (EditText) findViewById(R.id.edusername);
et2 = (EditText) findViewById(R.id.edcontra);
}
/**metodo para el boton entrar*/
public void entrar(View v) {
DBHelper admin = new DBHelper(this, "dbibero.db", null, 1);
/*Abrimos la base de datos como escritura*/
SQLiteDatabase db = admin.getWritableDatabase();
String usuario = et1.getText().toString();
String contrasena = et2.getText().toString();
fila = db.rawQuery("select id_user,username,clave_user from userstable where username='" +
usuario + "' and clave_user='" + contrasena + "'", null);
try {
/*Condicional if preguntamos si cursor tiene algun dato*/
if (fila.moveToFirst()) {
//capturamos los valores del cursos y lo almacenamos en variable
usua = fila.getString(1);
pass = fila.getString(2);
Log.d("QUERY", "Usuario" + usua + " password " + pass);
//preguntamos si los datos ingresados son iguales
if (usuario.equals(usua) && contrasena.equals(pass)) {
//si son iguales entonces vamos a otra ventana
//Menu es una nueva actividad empty
Intent ven = new Intent(this, Index.class);
//lanzamos la actividad
startActivity(ven);
}
}//si la primera condicion no cumple entonces que envie un mensaje toast
else {
Toast toast = Toast.makeText(this, "Datos incorrectos", Toast.LENGTH_LONG);
//mostramos el toast
toast.show();
}
} catch (Exception e) {//capturamos los errores que ubieran
Toast toast = Toast.makeText(this, "Error" + e.getMessage(), Toast.LENGTH_LONG);
//mostramos el mensaje
toast.show();
}
}
/**metodo para el boton entrar*/
public void RegistroData(View v) {
//creamos una variables e instanciamos al intent para que me muestra la clase
Intent rdata = new Intent(this, NewUser.class);
//lanzamos la actividad
startActivity(rdata);
}
}
Luego implemnatamos el codigo de la clase registrar usuario:
public class NewUser extends AppCompatActivity {
EditText Etusurname, EtPass, renewpass;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_new_user);
Etusurname = (EditText) findViewById(R.id.eduserparented);
EtPass = (EditText) findViewById(R.id.edcontranewed);
renewpass = (EditText) findViewById(R.id.edcontranewedoption);
}
/*Metodo Para registrar los datos del usuario*/
public void RegistrarDataUser(View v) {
/*creamos un objeto de la clase DBHelper
* inicializamos el constructor
* nombramos la base de datos
* version de la base de datos*/
DBHelper admin = new DBHelper(this, "dbibero.db", null, 1);
/*Abrimos la base de datos para escritura*/
SQLiteDatabase db = admin.getWritableDatabase();
/*creamos dos variables string
* inicializamos y convertimos*/
String UserName = Etusurname.getText().toString();
String PassUser = EtPass.getText().toString();
String renewspasw = renewpass.getText().toString();
Log.v("Error", "pass1" + PassUser + " pass 2" + renewspasw);
if (!EtPass.getText().toString().equals(renewspasw)) {
EtPass.setError("Valores tienen que conincidir");
renewpass.setError("Valores tienen que conincidir");
} else if (EtPass.getText().toString().equals(renewspasw)) {
/*Creamos un objeto contentvalues y instanciamos*/
ContentValues values = new ContentValues();
/*capturamos valores*/
values.put("username", UserName);
values.put("clave_user", PassUser);
/*llamamos al insert damos el nombre de la base de datos
* y los valores*/
db.insert("userstable", null, values);
/*cerramos la base de datos*/
db.close();
/*Lanzamos una notificacion toast*/
Toast ToastMens = Toast.makeText(this, "Usuario registrado", Toast.LENGTH_SHORT);
/*mostramos el toast*/
ToastMens.show();
/*lanzamos la actividad*/
Intent intent = new Intent(this, Login.class);
/*iniciamos la actividad*/
startActivity(intent);
finish();
}
}
}
Terminado ahora si quieremos que la actividad index muestre el action bar agregamos en el xml del theme la siguientes etiquetas:
<style name="Theme.index" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#00838F</item>
</style>
Y tambien ponemos un nombre en el texto en el acti贸n bar. nos dirigimos al manifest y nos situamos en la actividad del index y agregamos lo siguiente:
android:theme="@style/Theme.index"
android:label="@string/app_actionbar"
ahora en el archivo string agregamos una etiqueta:
<string name="app_actionbar">IberoDev Tutoriales</string>Entonces al ejecutar el proyecto tendremos lo siguiente:
No hay comentarios.:
Publicar un comentario