APUNTES ANDROID
  • Introducción
  • Apuntes Linux
  • Apuntes Red Team
  • Apuntes Blue Team
  • Apuntes Python
  • Ricardev github
  • Escribiendo tu primera App
    • Instalar Android Studio
    • Proyecto
    • Ejecutar una App
    • Anatomía del Proyecto
      • Gradle scripts
      • AndroidManifest.xml
      • Java
      • Res
    • Componentes de una App
      • Activities
      • Fragments
      • Views y ViewGroups
      • Services
      • Broadcast Receivers
      • Intents
      • Content Provider
      • Widgets
    • Paradigmas de diseño
      • Views
        • Pallete Texts
          • TextView
          • EditText
          • AutoCompleteTextView
        • Pallete Buttons
          • Button
          • ImageButton
          • Chip y ChipGroup
          • RadioButton y RadioGroup
          • CheckBox
          • ToggleButton
          • Switch
          • FloatingActionButton
        • Pallete Widgets
          • ImageView
          • ShapeableImageView
          • WebView
          • VideoView
          • CalendarView
          • ProgressBar
          • SeekBar
          • RatingBar
          • SearchView
          • Divider
        • Custom Views
        • View Binding
      • Jetpack Compose
    • Layouts
      • FrameLayout
      • Linear Layout
      • Relative Layout
      • Constraint Layout
      • Table Layout
      • Grid Layout
    • Containers
      • Spinner
      • RecyclerView
      • CardView
      • ScrollView y HorizontalScrollView
      • ViewPager2
      • AppBarLayout y BottomAppBar
      • NavigationView y BottomNavigationView
      • Toolbar y MaterialToolbar
      • TabLayout y TabItem
      • ViewStub
      • etiquetas <include> y <merge>
Powered by GitBook
On this page
  • DEFINICIÓN
  • Toolbar
  • MaterialToolbar
  • EJEMPLO
  1. Escribiendo tu primera App
  2. Containers

Toolbar y MaterialToolbar

Explicación del concepto de Toolbar y MaterialToolbar

PreviousNavigationView y BottomNavigationViewNextTabLayout y TabItem

Last updated 2 years ago

DEFINICIÓN

Toolbar

Hereda de ViewGroup.

Una Toolbar estandar para su uso como parte del contenido de la App.

Una Toolbar es una generalización de una Action Bar que puede ser utilizada dentro del Layout de la App.

ACTION BAR VS TOOLBAR

Mientras que las ActionBar son tradicionalmente parte de la ventana decorativa de una Activity y son controladas por el Framework, una Toolbar puede ponerse en cualquier nivel de anidamiento dentro de la jerarquía de Views.

Una aplicación puede decidir utilizar una Toolbar como ActionBar utilizando el método setSupportActionBar().

Una Toolbar además está orientada a soportar un set de elementos muy concretos que, de inicio a fin (izquierda a derecha en paises latinos) son:

  • Un botón de Navegación -> Puede ser una flecha arriba, un botón de menú, cerrar, colapsar, hecho o cualquier otro icono de la elección de la App. Este botón debe ser utilizado siempre para acceder a otros destinos de navegación dentro de la App.

  • Un logo de marca -> Puede ser de alto como la barra y todo lo ancho que se quiera.

  • Un título y un subtítulo -> El título debe indicar en que parte de la App nos encontramos. El subtítulo dará más información al respecto.

  • Una o más Custom Views -> Se pueden añadir algunas Views propias de la App como iconos.

  • Un Action Menu -> Se colocará siempre al final de la Toolbar ofreciendo algunas de las acciones más típicas en la App con un overflow menu.

RECOMENDACIÓN

Desde API 21 se recomienda no utilizar el logo de la App sino decantarse hacia un esquema de colores visualmente sugerente.

MaterialToolbar

Hereda de Toolbar.

Es una Toolbar que implementa algunas de las características de Material, tales como títulos centrados u Overlays para los temas oscuros.

EJEMPLO

En los ejemplos anteriores ya se ha visto el uso de estas Toolbars como parte del AppBarLayout.

Básicamente, la Toolbar es el contenedor físico de los elementos que hemos hablado antes pero el AppBarLayout es el que le da funcionalidad a esos elementos.

Si no existe un AppBarLayout, se debe dar funcionalidad a todos los elementos de la Toolbar por separado.

El ejemplo más claro es el que hemos visto en la entrada anterior, de NavigationView.

NavigationView y BottomNavigationView
Toolbar  |  Android DevelopersAndroid Developers
Fuente: developer.android
MaterialToolbar  |  Android DevelopersAndroid Developers
Fuente: developer.android
Logo
Logo