domingo, 2 de abril de 2017

Como hacer un splash screen en android studio

Hola a todos hoy veremos un tutorial de como hacer un SPLASH SCREEN en android personalmente a mi me gusta este tipo de artículos, porque de alguna forma te enseñan a mejorar la estética de tu producto final, hay un dicho entre programadores,  "los que programan diseñan mal" y eso no es cierto si bien es verdad que en países avanzados existe un sujeto para cada trabajo, en Latinoamerica una sola persona es analista,diseñadora,programador, marketero etc de cosas y si bien es cierto esto genera muchas veces que las cosas se hagan a medias un programador que desarrolle mas de una actitud siempre hará bien su trabajo, con esto te digo que no debes hacer 20 cosas tu mismo porque nunca seras bueno en todo pero al menos puedes programar y hacer interfaces amigables para tus usuario.




Que es un Splash Screen?

No vamos hacer técnicos en la definición, Te has dado cuenta que cuando descargas alguna aplicación  y le das en ejecutar y carga hermosas entradas antes de ejecutarse "eso es un Splash Screen" te dejo algunos ejemplos en las siguientes imágenes:




Bien sin mas rodeos empezamos, hay muchas formas de hacerla pero en este tuto amantes delas frutas y los fragment, lo haremos con fragment :)
utilizaremos 3 layouts y 3 clases y para hacer los efectos del Splash Screen 2 layout en la carpeta animator.

activity_main.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/contenedor"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

</FrameLayout>

MainActivity.java

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

}


fragment_main.xml

<RelativeLayout 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=".MainActivity" >

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Bienvenidos!!"
        android:textSize="60sp" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/logo1"
        android:layout_marginTop="110dp"
        android:id="@+id/imageView3"
        android:layout_below="@+id/textView"
        android:layout_centerHorizontal="true" />

</RelativeLayout>


MainFragment.java

public class MainFragment extends Fragment {

 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {
  return inflater.inflate(R.layout.fragment_main, container, false);
 }

}


fragment_splash_screen

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".SplashScreenFragment" >

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="@string/app_name"
        android:scaleType="fitXY"
        android:src="@drawable/cereza1" />

</RelativeLayout>


SplashScreenFragment.java

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".SplashScreenFragment" >

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="@string/app_name"
        android:scaleType="fitXY"
        android:src="@drawable/cereza1" />

</RelativeLayout>

Bien ahora debemos crear la carpeta animator dentro de la carpeta res no puede ser otro nombre o no lo reconocerá android studio.
Dentro de nuestra carpeta animator crearemos dos layout y serán los siguientes:


salir_a_la_izquierda_xml

<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- Rotate. -->
    <objectAnimator
        android:duration="10"
        android:interpolator="@android:interpolator/accelerate_decelerate"
        android:propertyName="rotationY"
        android:valueFrom="0"
        android:valueTo="180" />

    <!-- Half-way through the rotation (see startOffset), set the alpha to 0. -->
    <objectAnimator
        android:duration="1"
        android:propertyName="alpha"
        android:startOffset="10"
        android:valueFrom="1.0"
        android:valueTo="0.0" />

</set>


voltear_a_la_izquierda.xml

<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- Before rotating, immediately set the alpha to 0. -->
    <objectAnimator
        android:duration="0"
        android:propertyName="alpha"
        android:valueFrom="1.0"
        android:valueTo="0.0" />

    <!-- Rotate. -->
    <objectAnimator
        android:duration="100"
        android:propertyName="rotationY"
        android:valueFrom="-180"
        android:valueTo="0" />

    <!-- Half-way through the rotation (see startOffset), set the alpha to 1. -->
    <objectAnimator
        android:duration="1"
        android:propertyName="alpha"
        android:startOffset="10"
        android:valueFrom="0.0"
        android:valueTo="1.0" />

</set>


en la carpeta drawable debe ir la imagen de nuestro Splash Screen, les dejo la del ejemplo




Dentro de la carpeta values debemos agregar un archivo llamado color.xml y tendrá lo siguiente:

color.xml 

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
</resources>

También modificaremos nuestro archivo styles y debe quedar de la siguiente forma:

style.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>


Y con eso hemos terminado este tutorial, espero les sirva y no se olviden de comentar cualquier duda.


Igual si piensas que hablo escribo en chino te dejo el ejercicio:

  Link de la descarga
Programador alfa, lomo plateado, barba de clavos, mentón de roca, no descarga la aplicación sigue el tutorial. Clic para DESCARGAR

     
ENLACES DE INTERÉS:

Android Facil Oficial

Programo algunas cosas por diversion, me gusta aprender cosas nuevas y estoy pendiente de todo lo que tenga que ver con tecnologia. Este blog lo cree para todas las personas que tengan dificultades en la programacion, para ser sincero nunca fui bueno y reprobe algunos cursos de programacion, pero mis ganas de aprender pudieron más. SI YO PUEDO TU PUEDES ANIMO!

Necesito tu Ayuda, dale en compartir para crecer como comunidad.

compartir en facebook compartir en google+ compartir en twitter compartir en pinterest compartir en likedin

0 comentarios:

Publicar un comentario

 

Copyright @ 2015 Android-facil.

Designed by Draganus | AndroidFacil