Esta es la Parte 2 del tutorial «Crear una aplicación de redes sociales en Android Studio» , y cubriremos las siguientes funcionalidades en este artículo:
- Vamos a Crear Navegación Inferior con 5 Fragmentos (Inicio, Usuarios, AddBlog, ChatList, Perfil).
- En HomeFragment mostraremos todos los blogs agregados.
- En UsersFragment , mostraremos todos los usuarios registrados.
- En el AddBlogFragment estaremos agregando nuestros blogs.
- En ChatlistFragment mostraremos una lista de chat de todos los usuarios con los que tenemos chat.
- En el ProfileFragment estaremos mostrando el Perfil del usuario donde estaremos mostrando los datos de los usuarios y los blogs escritos por el usuario.
Implementación paso a paso
Paso 1: Primero crearemos un directorio de menú dentro de la carpeta res. Consulte este artículo Cómo crear una carpeta de menú y un archivo de menú en Android Studio . Y nombre el archivo de menús como menu_nav.xml para crear el diseño de la navegación inferior. A continuación se muestra el código para el archivo menu_nav.xml .
XML
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/nav_home" android:icon="@drawable/ic_home" android:title="Home" /> <item android:id="@+id/nav_users" android:icon="@drawable/ic_users" android:title="Users" /> <item android:id="@+id/nav_addblogs" android:icon="@drawable/ic_add" android:title="Add Blogs" /> <item android:id="@+id/nav_chat" android:icon="@drawable/ic_chat" android:title="ChatList" /> <item android:id="@+id/nav_profile" android:icon="@drawable/ic_account" android:title="Profile" /> </menu>
Paso 2: Agregar dependencia a build.gradle (Módulo: aplicación)
Navegue a Gradle Scripts > build. gradle (Módulo: aplicación) y agregue la dependencia a continuación en la sección de dependencias.
implementación ‘com.google.android.material:material:1.2.0’
Paso 3: trabajar con el archivo activity_dashboard.xml
Esta página será la primera actividad en nuestra aplicación después de que el usuario haya iniciado sesión. Vaya a la aplicación > res > diseño > activity_dashboard.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo activity_dashboard.xml .
XML
<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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:gravity="center" android:orientation="vertical" tools:context=".DashboardActivity"> <FrameLayout android:id="@+id/content" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"></FrameLayout> <com.google.android.material.bottomnavigation.BottomNavigationView android:id="@+id/navigation" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:background="?android:attr/windowBackground" app:labelVisibilityMode="labeled" app:menu="@menu/menu_nav"> </com.google.android.material.bottomnavigation.BottomNavigationView> </LinearLayout>
Paso 4: Crea 5 nuevos fragmentos en blanco
Vaya a la aplicación (clic con el botón derecho) > Nuevo > Fragmento > Fragmento (en blanco) y nombre el fragmento como HomeFragment, ProfileFragment, UsersFragment, ChatListFragment y AddBlogsFragment .
Paso 5: trabajar con el archivo DashboardActivity.java
En este archivo, solo mostramos el fragmento según el elemento de navegación seleccionado. Luego estaremos mostrando el respectivo fragmento.
HomeFragment fragment=new HomeFragment();
FragmentTransaction fragmentTransaction=getSupportFragmentManager().beginTransaction();
fragmentTransaction.replace(R.id.content,fragment,"");
fragmentTransaction.commit();
Vaya al archivo DashboardActivity.java y consulte el siguiente código. A continuación se muestra el código del archivo DashboardActivity.java .
Java
package com.example.socialmediaapp;
import android.os.Bundle;
import android.view.MenuItem;
import androidx.annotation.NonNull;
import androidx.appcompat.app.ActionBar;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.FragmentTransaction;
import com.google.android.material.bottomnavigation.BottomNavigationView;
import com.google.firebase.auth.FirebaseAuth;
import com.google.firebase.auth.FirebaseUser;
public class DashboardActivity extends AppCompatActivity {
private FirebaseAuth firebaseAuth;
FirebaseUser firebaseUser;
String myuid;
ActionBar actionBar;
BottomNavigationView navigationView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_dashboard);
actionBar = getSupportActionBar();
actionBar.setTitle("Profile Activity");
firebaseAuth = FirebaseAuth.getInstance();
navigationView = findViewById(R.id.navigation);
navigationView.setOnNavigationItemSelectedListener(selectedListener);
actionBar.setTitle("Home");
// When we open the application first
// time the fragment should be shown to the user
// in this case it is home fragment
HomeFragment fragment = new HomeFragment();
FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
fragmentTransaction.replace(R.id.content, fragment, "");
fragmentTransaction.commit();
}
private BottomNavigationView.OnNavigationItemSelectedListener selectedListener = new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
switch (menuItem.getItemId()) {
case R.id.nav_home:
actionBar.setTitle("Home");
HomeFragment fragment = new HomeFragment();
FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
fragmentTransaction.replace(R.id.content, fragment, "");
fragmentTransaction.commit();
return true;
case R.id.nav_profile:
actionBar.setTitle("Profile");
ProfileFragment fragment1 = new ProfileFragment();
FragmentTransaction fragmentTransaction1 = getSupportFragmentManager().beginTransaction();
fragmentTransaction1.replace(R.id.content, fragment1);
fragmentTransaction1.commit();
return true;
case R.id.nav_users:
actionBar.setTitle("Users");
UsersFragment fragment2 = new UsersFragment();
FragmentTransaction fragmentTransaction2 = getSupportFragmentManager().beginTransaction();
fragmentTransaction2.replace(R.id.content, fragment2, "");
fragmentTransaction2.commit();
return true;
case R.id.nav_chat:
actionBar.setTitle("Chats");
ChatListFragment listFragment = new ChatListFragment();
FragmentTransaction fragmentTransaction3 = getSupportFragmentManager().beginTransaction();
fragmentTransaction3.replace(R.id.content, listFragment, "");
fragmentTransaction3.commit();
return true;
case R.id.nav_addblogs:
actionBar.setTitle("Add Blogs");
AddBlogsFragment fragment4 = new AddBlogsFragment();
FragmentTransaction fragmentTransaction4 = getSupportFragmentManager().beginTransaction();
fragmentTransaction4.replace(R.id.content, fragment4, "");
fragmentTransaction4.commit();
return true;
}
return false;
}
};
}
Producción:
Para ver todos los archivos dibujables utilizados en este artículo, consulte este enlace: https://drive.google.com/drive/folders/1M_knOH_ugCuwSP5nkYzeD4dRp-Honzbe?usp=sharing
A continuación se muestra la estructura de archivos después de realizar estas operaciones:
