Scrolling Activity

Autor: Paulo David Córdoba Moreno

El Scrolling Activity consiste en una interfaz donde se expone un titulo llamativo con una imagen y seguido a este un contenido desplazable pare este ejemplo el contenido es la Hisoria de la Universidad de Nariño.

Referencias: http://saulmm.github.io/mastering-coordinator http://www.materialpalette.com/green/yellow

Pasos:

  1. Creacion del Proyecto Nuevo en Android Studio `````` En este primer paso establecemos su nombre del proyecto (Udenar) y su dirección de creacion. Presionamos siguiente.

  2. Seleccionamos la version android de la siguiente manera y presionamos siguiente:

  3. Seleccionamos Scrolling Activity y Presionamos Siguiente o next:

  4. Dejamos los nombres por defecto de la Activity y Finalizamos

  1. Ahora incorporamos una imagen de nuestra preferencia, se debe tener encuenta su nombre y la importaremos copiando y pegando en la carpeta drawble.

Imagen que importaremos con el nombre toolbar y su extension .jpg: autor: http://facihu.udenar.edu.co/wp-content/uploads/2012/06/bloquesintexto.jpg

Click derecho sobre la imagen descargada copiar no dirigimos al proyecto click derecho sobre la carpeta drawble y click en pegar nos mostrara esta ventana y aceptamos.

  1. Como podemos observar en la carpeta drawble ya tenmos la imagen toolbar.jpg

  2. En el archivo strings creamos el string con la historia de la universidad de nariño llamado history_udenar

  3. Ahora nos dirigimos al directorio Layout y dentro de el al archivo xml activity_scrolling.xml

  1. Dentro del cual tenemos este codigo:

================================================================================================================================================================================================================ <?xml version="1.0" encoding="utf-8"?> 

<android.support.design.widget.AppBarLayout
    android:id="@+id/main.appbar"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:fitsSystemWindows="true"
    >

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/main.collapsing"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginStart="48dp"
        app:expandedTitleMarginEnd="64dp"
        >

        <ImageView
            android:id="@+id/main.backdrop"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:fitsSystemWindows="true"
            android:src="@drawable/udenar"
            app:layout_collapseMode="parallax"
            />

        <android.support.v7.widget.Toolbar
            android:id="@+id/main.toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_collapseMode="pin"
            />
    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    >
    <!-- android:text="@string/history_udenar  texto referenciado de strings llamado history_udenar-->
    <!-- android:textSize="20sp" texto referenciado de strings llamado history_udenar-->
    <!-- android:lineSpacingExtra="8dp" tamaño entre lineas de texto -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:lineSpacingExtra="8dp"
        android:text="@string/history_udenar"
        />
</android.support.v4.widget.NestedScrollView>

<!-- android:src="@android:drawable/ic_menu_edit" icono del boton flotante amarillo lapiz-->
<!-- app:layout_anchorGravity" bottom|left|end  ubicacion del boton flotante a la izquireda-->
<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    app:layout_anchor="@id/main.appbar"
    app:layout_anchorGravity="bottom|right|end"
    android:src="@android:drawable/ic_menu_edit"

    />

</android.support.design.widget.CoordinatorLayout>

================================================================================================================================================================================================================

    app:contentScrim= "#109B30" Es el color de la parte superior en el ejemplo es verde
    android:text= seguido a estra instruccion es el contenido de tipo texto

    <ImageView
            android:id="@+id/main.backdrop"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:fitsSystemWindows="true"
            android:src="@drawable/toolbar"
            app:layout_collapseMode="parallax"
            />

Aqui insertamos la imagen es importante android:src="@drawable/toolbar" donde toolbar es el nombre de la imagen.

  1. Para finalizar cambiamos un id. en ScrollingActivity.java por main_toolbar

La intefaz resultante sera:

results matching ""

    No results matching ""