Aquí, vamos a hacer una aplicación para el sitio web «GeeksForGeeks». Al hacer esta aplicación, podremos aprender cómo podemos convertir un sitio web en una aplicación de Android siguiendo simples pasos. También puede utilizar este concepto para su sitio web personal y aprender algo nuevo.
¿Qué vamos a construir en este artículo?
En esta aplicación, aprenderemos cómo podemos usar diferentes portales de un sitio web y mostrarlos como fragmentos en nuestra aplicación de Android. En esta aplicación, se utilizarán tres portales del sitio web de Geeksforgeeks: Home, Practice y Contribute como fragmentos en nuestra aplicación. Entonces, puede ver un ejemplo en vivo para convertir un sitio web en una aplicación. El concepto de WebView se utiliza para realizar este trabajo deseado. A continuación se muestra un video de muestra para tener una idea de lo que vamos a hacer en este artículo. Tenga en cuenta que vamos a implementar este proyecto utilizando el lenguaje Java .
Pasos simples para convertir su sitio web en una aplicación de Android:
- Para agregar el logotipo de su aplicación.
- Para agregar una pantalla de bienvenida a su aplicación.
- Para usar el cajón de navegación en nuestra aplicación para que diferentes portales de nuestro sitio web puedan usarse como fragmentos en el cajón de navegación.
- Usar un WebView para que se pueda acceder fácilmente al contenido web.
- Usar la clase WebViewController para que el contenido del sitio web se pueda mostrar directamente en la aplicación en lugar de abrirlo en el navegador.
- Para agregar una actividad de línea de ayuda.
Y siguiendo estos pasos podrás convertir tu sitio web en una aplicación de la forma más sencilla. Entonces, veamos la implementación paso a paso para convertir el sitio web GeeksForGeeks en una aplicación.
Implementación paso a paso
Paso 1: Creación de un nuevo proyecto
- Abra un nuevo proyecto.
- Estaremos trabajando en la actividad del cajón de navegación con lenguaje como Java. Deje todas las demás opciones sin cambios.
- Puede cambiar el nombre del proyecto a su conveniencia.
- Habrá muchos archivos predeterminados.
Si no sabe cómo crear un nuevo proyecto en Android Studio, puede consultar ¿Cómo crear/iniciar un nuevo proyecto en Android Studio?
Paso 2: Para agregar un logo a nuestra aplicación
- Pegue el logo de su aplicación en res > dibujable .
- Siga » Cómo cambiar el icono predeterminado de la aplicación de Android » para conocer más pasos.
Paso 3: Para agregar Splash Screen a nuestra aplicación
Siga-“ Creación de una pantalla de presentación” para aprender cómo agregar una pantalla de presentación a nuestra aplicación. Ejemplo de diseño de pantalla de presentación de nuestra aplicación.
Paso 4: trabajar con archivos xml
Abra el archivo layout > nav_header_main.xml para diseñar el encabezado de nuestro cajón de navegación. Para eso, use el siguiente código en él.
XML
<?xml version="1.0" encoding="utf-8"?> <!--Constraint Layout to display all the details of header file--> <androidx.constraintlayout.widget.ConstraintLayout 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="@dimen/nav_header_height" android:background="#6C6B74" android:gravity="bottom" android:orientation="vertical" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingBottom="@dimen/activity_vertical_margin" android:theme="@style/ThemeOverlay.AppCompat.Dark"> <!--Image View to display logo of application in header--> <ImageView android:id="@+id/imageView" android:layout_width="107dp" android:layout_height="87dp" android:layout_gravity="center" android:contentDescription="@string/nav_header_desc" android:foregroundGravity="center" android:paddingTop="@dimen/nav_header_vertical_spacing" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.247" app:srcCompat="@drawable/gfg_round" /> <!--TextView for name of application --> <TextView android:layout_width="wrap_content" android:layout_height="51dp" android:layout_gravity="center" android:gravity="center" android:paddingTop="@dimen/nav_header_vertical_spacing" android:text="GeeksForGeeks" android:textAppearance="@style/TextAppearance.AppCompat.Body1" android:textColor="#01A109" android:textSize="24sp" android:textStyle="bold" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="@+id/imageView" app:layout_constraintVertical_bias="1.0" /> </androidx.constraintlayout.widget.ConstraintLayout>
Después de implementar el código anterior, el encabezado del cajón de navegación se ve así:
Cambie el color de la barra de acción a «# 6C6B74 » para que coincida con el código de color del logotipo de nuestra aplicación y nuestra interfaz de usuario se vuelva más atractiva. Si no sabe cómo cambiar el color de la ActionBar, puede hacer clic aquí para aprenderlo. Abra el archivo menu> activity_main_drawer.xml y use el siguiente código para que podamos agregar diferentes elementos (portales de nuestro sitio web) a nuestro cajón de navegación y usar sus fragmentos.
XML
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <!--Group is used to group all these items together--> <group android:checkableBehavior="single"> <!--Three items are added as name of three portals--> <!-- Portal number 1- Home--> <!-- menucategory is used as secondary so that backstack(going back by pressing back button) can be used --> <item android:id="@+id/nav_home" android:icon="@drawable/home" android:menuCategory="secondary" android:title="@string/menu_home" /> <!-- Portal number 2- Practice--> <item android:id="@+id/nav_gallery" android:icon="@drawable/practice_gfg" android:menuCategory="secondary" android:title="Practice" /> <!-- Portal number 3- Contribute--> <item android:id="@+id/nav_slideshow" android:icon="@drawable/contribute_gfg" android:menuCategory="secondary" android:title="Contribute" /> </group> </menu>
Después de implementar el código anterior, nuestro diseño del archivo activity_main_drawer.xml se ve así.
Vaya al diseño> actividad_principal.xml y use el siguiente código en él.
XML
<?xml version="1.0" encoding="utf-8"?> <!-- DrawerLayout acts as top level container for window content that allows for interactive “drawer” views to be pulled out from one or both vertical edges of the window--> <androidx.drawerlayout.widget.DrawerLayout 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:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:openDrawer="start"> <!-- To reuse layouts include tag is used--> <include layout="@layout/app_bar_main" android:layout_width="match_parent" android:layout_height="match_parent" /> <!-- Navigation view to make navigation drawer --> <com.google.android.material.navigation.NavigationView android:id="@+id/nav_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" android:background="#2E303E" android:fitsSystemWindows="true" app:headerLayout="@layout/nav_header_main" app:itemIconTint="#fff" app:itemTextColor="#fff" app:menu="@menu/activity_main_drawer" /> </androidx.drawerlayout.widget.DrawerLayout>
Después de implementar el diseño de código anterior del archivo activity_main.xml parece.
Vaya al archivo de navegación > mobile_navigation.xml y use el siguiente código para que podamos especificar el título y la etiqueta de los portales de nuestro sitio web y usarlos fácilmente en archivos java.
XML
<?xml version="1.0" encoding="utf-8"?> <navigation 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:id="@+id/mobile_navigation" app:startDestination="@+id/nav_home"> <!--These fragments are made to work on all the items listed in navigation drawer so that there java files can be managed separately --> <!-- Fragment for Home portal--> <fragment android:id="@+id/nav_home" android:name="com.example.geeksforgeeks.ui.home.HomeFragment" android:label="@string/menu_home" tools:layout="@layout/fragment_home" /> <!-- Fragment for Practice portal--> <fragment android:id="@+id/nav_gallery" android:name="com.example.geeksforgeeks.ui.gallery.GalleryFragment" android:label="Practice" tools:layout="@layout/fragment_gallery" /> <!-- Fragment for Contribute--> <fragment android:id="@+id/nav_slideshow" android:name="com.example.geeksforgeeks.ui.slideshow.SlideshowFragment" android:label="Contribute" tools:layout="@layout/fragment_slideshow" /> </navigation>
Ahora es el momento de insertar WebView en todos los fragmentos: abra los archivos XML fragment_home, fragment_gallery, fragment_slideshow y use el código respectivamente.
XML
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout 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" tools:context=".ui.home.HomeFragment"> <!--WebView is added on full screen so that application interface can be interactive and user can the web content is visible on full screen --> <WebView android:id="@+id/web_view_home" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>
XML
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout 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" tools:context=".ui.gallery.GalleryFragment"> <WebView android:id="@+id/web_view_practice" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.0" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.0" /> </androidx.constraintlayout.widget.ConstraintLayout>
XML
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout 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" tools:context=".ui.slideshow.SlideshowFragment"> <WebView android:id="@+id/web_view_contribute" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>
Ahora tenemos que crear una nueva actividad llamada » ayuda «. Para que el usuario de la aplicación pueda obtener información para recibir ayuda del proveedor de servicios. Vaya a diseño > clic derecho > nuevo > actividad > Actividad vacía.
Ponga el nombre de la actividad según su elección (nombre utilizado en esta aplicación-“ayuda”). Abra layout > activity_help.xml y use el siguiente código en él.
XML
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout 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="#6C6B74" tools:context=".help"> <!-- Image to display help sign--> <ImageView android:id="@+id/imageView3" android:layout_width="255dp" android:layout_height="173dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.222" app:srcCompat="@drawable/help" /> <!-- Indicating user that we are here to help by using a textview--> <TextView android:id="@+id/textView2" android:layout_width="371dp" android:layout_height="95dp" android:background="#2E303E" android:text="For any kind of queries or help you can contact us at-" android:textColor="#FFFCFC" android:textSize="30sp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/imageView3" app:layout_constraintVertical_bias="0.296" /> <!-- Contact details for help--> <TextView android:id="@+id/textView3" android:layout_width="393dp" android:layout_height="59dp" android:background="#2E303E" android:text="careers@geeksforgeeks.org" android:textColor="#FFFFFF" android:textSize="30sp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.666" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/textView2" app:layout_constraintVertical_bias="0.159" /> </androidx.constraintlayout.widget.ConstraintLayout>
Después de implementar el código anterior, el diseño del archivo activity_help.xml se ve así.
Ahora hemos agregado un fragmento de código para obtener permiso de acceso a Internet para que nuestro WebView pueda funcionar fácilmente. Vaya a manifiestos > archivo AndroidManifest.xml y agréguele el siguiente código.
<usos-permiso android:name=”android.permission.INTERNET” />
Paso 5: Trabajar con archivos java
Cree una nueva clase Java como se muestra a continuación y asígnele el nombre » WebViewController »
Use el siguiente código en el archivo WebViewController.java para que se pueda ejecutar el código para usar la URL de un sitio web.
Java
package com.example.geeksforgeeks;
import android.webkit.WebView;
import android.webkit.WebViewClient;
// class is extended to WebViewClient to access the WebView
public class WebViewController extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
// loadurl function will load the
// url we will provide to our webview
view.loadUrl(url);
return true;
}
}
Abra los archivos java HomeFragment, GalleryFragment, SlideshowFragment y use el código respectivamente.
Java
package com.example.geeksforgeeks.ui.home;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.webkit.WebView;
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.lifecycle.ViewModelProvider;
import com.example.geeksforgeeks.R;
import com.example.geeksforgeeks.WebViewController;
public class HomeFragment extends Fragment {
private HomeViewModel homeViewModel;
public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
homeViewModel = new ViewModelProvider(this).get(HomeViewModel.class);
View root = inflater.inflate(R.layout.fragment_home, container, false);
// Created a WebView and used the loadurl method to give url to WebViewController class
WebView webView = root.findViewById(R.id.web_view_home);
webView.loadUrl("https://www.geeksforgeeks.org/"); // Url of portal is passed
webView.setWebViewClient(new WebViewController()); // WebViewController is used
return root;
}
}
Java
package com.example.geeksforgeeks.ui.gallery;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.webkit.WebView;
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.lifecycle.ViewModelProvider;
import com.example.geeksforgeeks.R;
import com.example.geeksforgeeks.WebViewController;
public class GalleryFragment extends Fragment {
private GalleryViewModel galleryViewModel;
public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
galleryViewModel = new ViewModelProvider(this).get(GalleryViewModel.class);
View root = inflater.inflate(R.layout.fragment_gallery, container, false);
WebView webView = root.findViewById(R.id.web_view_practice);
webView.loadUrl("https://practice.geeksforgeeks.org/");
webView.setWebViewClient(new WebViewController());
return root;
}
}
Java
package com.example.geeksforgeeks.ui.slideshow;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.webkit.WebView;
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.lifecycle.ViewModelProvider;
import com.example.geeksforgeeks.R;
import com.example.geeksforgeeks.WebViewController;
public class SlideshowFragment extends Fragment {
private SlideshowViewModel slideshowViewModel;
public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
slideshowViewModel = new ViewModelProvider(this).get(SlideshowViewModel.class);
View root = inflater.inflate(R.layout.fragment_slideshow, container, false);
WebView webView = root.findViewById(R.id.web_view_contribute);
webView.loadUrl("https://www.geeksforgeeks.org/contribute/");
webView.setWebViewClient(new WebViewController());
return root;
}
}
Ahora todo nuestro trabajo está hecho y el último trabajo es conectar la actividad de ayuda al botón flotante en nuestra aplicación con la ayuda de la intención en el archivo MainActivity.java . Use el siguiente código para hacerlo.
Java
package com.example.geeksforgeeks;
import android.content.Intent;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.drawerlayout.widget.DrawerLayout;
import androidx.navigation.NavController;
import androidx.navigation.Navigation;
import androidx.navigation.ui.AppBarConfiguration;
import androidx.navigation.ui.NavigationUI;
import com.google.android.material.floatingactionbutton.FloatingActionButton;
import com.google.android.material.navigation.NavigationView;
public class MainActivity extends AppCompatActivity {
private AppBarConfiguration mAppBarConfiguration;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
// Code for floating button
FloatingActionButton fab = findViewById(R.id.fab);
// On click listener is used on floating button
// to redirect to help activity
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// Intent is used to connect help activity to floating button
Intent activity2Intent = new Intent(getApplicationContext(), help.class);
startActivity(activity2Intent);
}
});
// default code for drawer layout and navigation view
DrawerLayout drawer = findViewById(R.id.drawer_layout);
NavigationView navigationView = findViewById(R.id.nav_view);
// Passing each menu ID as a set of Ids because each
// menu should be considered as top level destinations.
mAppBarConfiguration = new AppBarConfiguration.Builder(
R.id.nav_home, R.id.nav_gallery, R.id.nav_slideshow)
.setDrawerLayout(drawer)
.build();
// default code to control the navigation view
NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
NavigationUI.setupActionBarWithNavController(this, navController, mAppBarConfiguration);
NavigationUI.setupWithNavController(navigationView, navController);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items
// to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public boolean onSupportNavigateUp() {
NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
return NavigationUI.navigateUp(navController, mAppBarConfiguration)
|| super.onSupportNavigateUp();
}
}
Nota : en MainActivity.java, el código completo es predeterminado o preexistente. Acabamos de agregar el código de intención para conectar la actividad de ayuda con el botón flotante.
Producción:
Si desea obtener ayuda o importar el proyecto, puede visitar el enlace de GitHub: https://github.com/Karan-Jangir/GeeksForGeeks/tree/master
Publicación traducida automáticamente
Artículo escrito por jangirkaran17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA