Comencemos:<\/p>\n
Crea un nuevo proyecto.<\/p>\n
Agregar las dependencias<\/h2>\n
Abre el archivo build.gradle (Module:app)<\/p>\n
A\u00f1ada a la secci\u00f3n de dependencies las siguientes dos:<\/p>\n
\u00a0<\/span>implementation ‘com.android.support:support-v4:27.1.1’<\/strong><\/p>\n \u00a0<\/span>implementation \u2018com.android.support:design:27.1.1′<\/strong><\/p>\n Donde la versi\u00f3n coincida con su versi\u00f3n de compileSdkVersion que aparece en ese mismo archivo.<\/p>\n Clic en Sync Now<\/strong><\/em> para descargar las dependencias.<\/p>\n Abra su archivo styles.xml (res->layout->values->styles.xml)<\/p>\n Verifique que la linea siguiente efectivamente apunte a NoActionBar<\/p>\n <style name=\u00bbAppTheme\u00bb parent=\u00bbTheme.AppCompat.Light.NoActionBar\u00bb><\/strong><\/p>\n Con esto indicamos que quite el actionbar, y lo hacemosporque\u00a0 <\/span>vamos a implementar nuestro propio toolbar.<\/p>\n En la carpeta de res->Layout Agregue un nuevo Layout Resource File con el nombre toolbar.<\/strong><\/em><\/p>\n El c\u00f3digo de \u00e9ste archivo lo puedes ver a continuaci\u00f3n:<\/p>\n En el activity_main.xml<\/strong><\/em> haga referencia a ese archivo<\/p>\n <include<\/strong><\/p>\n \u00a0 \u00a0 \u00a0 \u00a0 <\/span>android:id=\u00bb@+id\/toolbar\u00bb<\/strong><\/p>\n \u00a0 \u00a0 \u00a0 \u00a0 <\/span>layout=\u00bb@layout\/toolbar\u00bb<\/strong><\/p>\n \u00a0 \u00a0 \u00a0 \u00a0 <\/span>\/><\/strong><\/p>\n Eso ir\u00eda dentro del constraint layout, antes del textview que en este momento dice Hello World<\/p>\n Vamos a MainActivity e implementamos el toolbar.<\/p>\n Podemos crear una funci\u00f3n que nos haga esa labor:<\/p>\n Y desde onCreate la mandamos a llamar:<\/p>\n setToolBar();<\/strong><\/p>\n Nuestra app se ver\u00eda as\u00ed:<\/p>\n Cree un nuevo Package<\/strong><\/em> con el nombre Fragments (este paso es opcional)<\/p>\n Cree tres fragments: de clic secundario sobre el package Fragments y New->Fragment->Fragment Blank como se ve en la siguiente imagen.<\/p>\n Los nombre de los fragments que usaremos ser\u00e1n: EstadosFragment, ChatsFragment, y LlamadasFragment.<\/p>\n Vaya a EstadosFragment.java y notar\u00e1 la siguiente l\u00ednea:<\/p>\n return inflater.inflate(R.layout.fragment_estados, container, false);<\/strong><\/p>\n Modif\u00edquela para que quede de la siguiente forma:<\/p>\n \u00a0<\/span>View view = inflater.inflate(R.layout.fragment_estados, container, false);<\/strong><\/p>\n \u00a0 \u00a0 \u00a0 \u00a0 <\/span>return view;<\/strong><\/p>\n Y haga lo mismo para los tres fragments<\/p>\n Vaya a fragment_estados.xml<\/strong><\/em> y vamos a modificar el texto por default que contiene:<\/p>\n <\/p>\n Haga algo similar para los siguientes dos fragments,<\/p>\n En el activity_main.xml agregariamos el c\u00f3digo del tablayout. Tambi\u00e9n agregaremos un ViewPager para hacer el efecto de desplazamiento entre los tabs. \u00c9ste c\u00f3digo lo puedes insertar debajo del toolbar.<\/p>\n En \u00e9ste momento nuestra app se ver\u00eda as\u00ed:<\/p>\nToolbars en Android<\/h2>\n
Crear un toolbar<\/h2>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<android.support.v7.widget.Toolbar\r\n xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n\r\n\r\n android:id=\"@+id\/toolbar\"\r\n android:layout_width=\"match_parent\"\r\n android:layout_height=\"?attr\/actionBarSize\"\r\n android:background=\"?attr\/colorPrimary\"\r\n android:elevation=\"4dp\"\r\n android:theme=\"@style\/ThemeOverlay.AppCompat.Dark.ActionBar\"\r\n app:popupTheme=\"@style\/ThemeOverlay.AppCompat.Light\"\r\n\r\n \/><\/pre>\n
private void setToolBar(){\r\n Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);\r\n setSupportActionBar(toolbar);\r\n \/\/getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_home);\r\n getSupportActionBar().setDisplayHomeAsUpEnabled(true);\r\n }<\/pre>\n![\"Tabs](\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2020\/03\/gif-tabs-y-toolbars-en-android.gif\")
<\/a><\/p>\nCreaci\u00f3n de \u00a0los fragments que mostrar\u00e1n el contenido de cada Tab<\/h2>\n
<\/a><\/p>\n<TextView\r\n android:layout_width=\"match_parent\"\r\n android:layout_height=\"match_parent\"\r\n android:textSize=\"90dp\"\r\n android:text=\"estados\" \/><\/pre>\n
Creaci\u00f3n de los tabs<\/h2>\n
<android.support.design.widget.TabLayout\r\n android:id=\"@+id\/tabLayout\"\r\n android:layout_width=\"match_parent\"\r\n android:layout_height=\"wrap_content\"\r\n android:layout_marginEnd=\"0dp\"\r\n android:layout_marginStart=\"0dp\"\r\n android:layout_marginTop=\"0dp\"\r\n android:background=\"?attr\/colorPrimary\"\r\n android:elevation=\"4dp\"\r\n android:minHeight=\"?attr\/actionBarSize\"\r\n android:theme=\"@style\/ThemeOverlay.AppCompat.Dark.ActionBar\"\r\n app:layout_constraintEnd_toEndOf=\"parent\"\r\n app:layout_constraintStart_toStartOf=\"parent\"\r\n app:layout_constraintTop_toBottomOf=\"@+id\/toolbar\" \/>\r\n\r\n\r\n\r\n<android.support.v4.view.ViewPager\r\n android:id=\"@+id\/viewPager\"\r\n android:layout_width=\"match_parent\"\r\n android:layout_height=\"459dp\"\r\n app:layout_constraintTop_toBottomOf=\"@id\/tabLayout\"\r\n\r\n \/>\r\n<\/pre>\n
Implementar el TabLayout<\/h2>\n
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabLayout);\r\n tabLayout.addTab(tabLayout.newTab().setText(\"Estados\"));\r\n tabLayout.addTab(tabLayout.newTab().setText(\"Chats\"));\r\n tabLayout.addTab(tabLayout.newTab().setText(\"Llamadas\"));\r\n tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);\r\n<\/pre>\n