37
ActionBar, Toolbar, Menu Deslizante, CoordinatorLayout, Estilos y Temas

Presentacion ActionBar, Toolbar, Menu Deslizante, CoordinatorLayout, Temas y Estilos

Embed Size (px)

Citation preview

ActionBar, Toolbar, Menu Deslizante, CoordinatorLayout, Estilos y Temas

ActionBar

La ActionBar es un menú auxiliar de las aplicaciones Android, que se ubica en al parte superior de cada actividad.

Anatomía de la Action Bar

Action Bar Comprobar que el tema utilizado sea un de los proporcionado por la librería appcompat-v7

Fichero /res/values/styles.xml

ActionBarLas actividades deben extender de la clase AppCompatActivity.

Archivo de Diseño de la ActionBar

menu_main.xml desde la carpeta menu.

Elementos item:- id- title- icon- showAsAction

- ifRoom

- withText

- never

- always- orderInCategory

ActionBarAsociar nuestra actionbar con la actividad mediante el método onCreateOptionsMenu()

ToolbarActionBar mas flexible y personalizable.Proporcionado por la librería appcompat.Se incluye de forma explicita en los layouts XML.

Antes de añadir la ToolbarFichero /res/values/styles.xml- Theme.AppCompat.NoActionBar- windowActionBar

Caso 1:

Caso 2:

Toolbar

En el fichero /res/layout/toolbar.xml

Toolbar: Propiedades

Fichero /res/layout/toolbar.xmlminHeightbackgroundelevation themepopupTheme

ToolbarAsociar nuestra toolbar con la actividad mediante el método onCreate() y setSupportActionBar()

Toolbar: Filtros y Tabs

Filtros Tabs

Toolbar: FiltrosControl SpinnerFichero: /res/layout/toolbar.xml

Toolbar FiltrosModificar fichero: /res/layout/appbar_filter_title.xml

Toolbar: FiltrosMainActivity.java

Toolbar: TabsFichero: /res/layout/activity_main.xml

Toolbar: TabsMiFragmentPagerAdapter.java

Toolbar: TabsMainActivity.java

TabLayout.MODE_FIXED (Pestañas estáticas)

Interfaz de Usuario: Menú Deslizante

Android 5.0 Android 4.0

Interfaz de Usuario: Menú Deslizante

Fichero: /res/layout/activity_main.xml

Interfaz de Usuario: Menú Deslizante

Propiedades:

fitsSystemWindowslayout_gravitymenu

Interfaz de Usuario: Menú Deslizante

Fichero: /res/layout/header_navview.xml

Interfaz de Usuario: Menú Deslizante

Fichero: /res/menu/menu_navview.xml

Interfaz de Usuario: Menú Deslizante

Fichero: /res/layout/content_layout.xml

Interfaz de Usuario: Menú Deslizante

Fichero: /res/layout/fragment_fragment1.xml

Interfaz de Usuario: Menú Deslizante

Fichero: Fragment1.java

Interfaz de Usuario: Menú Deslizante

MainActivity.java

Animaciones: CoordinatorLayout

CoordiantorLayout: Es un tipo de layout que permite las animaciones y además hace posible controlar cuando estas pueden funcionar o como afectan a los elementos de la interfaz.

Animaciones: CoordinatorLayoutactivity_main.xml

Animaciones: CoordinatorLayout

Animaciones: CoordinatorLayoutElementos de animaciones usados:

@string/appbar_scrolling_view_behavior = Avisa al CoordinatorLayout de que debe estar atento y reaccionar al scroll del control RecyclerView(Lista).

scroll|enterAlways: Al hacer scroll hacia arriba la action bar se contrae hasta su tamaño mínimo, luego desaparece de la pantalla y comienza el scroll de la lista. Caso contrario aparece y se expande hasta su tamaño máximo, l

scroll|exitUntilCollapsed: Hace que la action bar no desaparezca cuando se le hace scroll sino que solo se contrae hasta su tamaño mínimo.

Animaciones: CoordinatorLayoutOtras animaciones:

scroll|enterAlwaysCollapsed: Similar comportamiento que en enterAlways, pero en este caso la actionbar comienza a expandirse cuando se alcanza el primer elemento de la lista.

scroll|enterAlways|enterAlwaysCollapsed: Similar al anterior, pero cuando se hace scroll hacia abajo la actionbar aparece inmediatamente en su tamaño mínimo y luego al llegar al primer elemento se expande.

Estilos y TemasEstilo: es una colección de propiedades que dan formato a las vistas. Entre estas propiedades se pueden nombrar por ejemplo: tamaño, color, márgenes, fuentes de texto.Ejemplo:Dentro del styles.xml.

Luego se añade a cualquier TextView.

Estilos y TemasResultado: Antes Después

Estilos y TemasTema: Es un estilo que se aplica a toda una actividad o aplicación, en lugar de solo ser usado para una vista individualmente. Aunque los elementos del tema solo serán aplicados a los elementos donde sea posible.

Formas de añadir un tema:Aplicación:<application android:theme="@style/temaEjemplo">Actividad:<activity android:theme="@style/temaEjemplo">

ActionBar, Toolbar, Menu Deslizante, CoordinatorLayout, Estilos y Temas