Nesse tutorial vou ensinar como fazer um Splash screen (tela de abertura) para seus aplicativos androide.
Você já deve ter visto alguma vez um aplicativo ao abrir exibir uma tela de entrada com o logo da empresa ou até mesmo com uma imagem criativa para diferenciar o seu aplicativo dos demais, neste tutorial vamos aprender a criar essa tela de entrada.
1. Mão na massa
Primeiro precisamos criar um novo projeto (File -> New -> New Project) e na janela Add an Activity to Mobile, selecione a opção Empty Activity.
Agora precisamos criar uma nova Activity (File -> New -> Activity -> Empty Activity)
Precisamos corrigir a chamada da Activity no arquivo de Manifesto do Android conforme o código abaixo.
1
2
3
4
5
6
7
8
9
10
11
12
|
<activity android:name=".MainActivity" />
<activity
android:name=".Splashscreen"
android:label="@string/title_activity_splashscreen"
android:theme="@style/FullScreen">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
|
Não se assuste se aparecer uma falha neste ponto, isso significa que você ainda não criou o estilo chamado FullScreen. Faremos isso agora editando os arquivos (../res/values/styles.xml e ../res/values-v21/styles.xml).
|
|
<!-- FullScreen theme. -->
<style name="FullScreen" parent="AppTheme">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>
</style>
|
|
|
<!-- FullScreen theme. -->
<style name="FullScreen" parent="AppTheme">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>
</style>
|
Faça o download desta imagem (
Clique aqui) e copie para a pasta
../res/drawable-nodpi
Pronto. Agora vamos alterar o layout da tela de SplashScreen.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#242729"
android:layout_gravity="center"
android:id="@+id/lin_lay"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/splash"
android:background="@drawable/splash" />
</LinearLayout>
|
Agora vamos criar as animações.
Crie uma pasta chamada anim dentro da pasta res do projeto e nela vamos criar dois arquivos de animação (File -> New -> Animation resource file) com nomes alpha.xml e translate.xml e vamos ao código deles.
|
|
<?xml version="1.0" encoding="utf-8"?>
<alpha
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:duration="3000" />
|
No alpha.xml o que fizemos foi criar uma animação com uma duração de 3 segundos partindo do alpha 0 até alpha 1, ou seja, o objeto animado será exibido gradativamente dentro do tempo estipulado.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android">
<translate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0%"
android:toXDelta="0%"
android:fromYDelta="200%"
android:toYDelta="0%"
android:duration="2000"
android:zAdjustment="top" />
</set>
|
No translate.xml o que fizemos foi criar uma animação com uma duração de 2 segundos onde o objeto inicie o movimento vertical de baixo para cima com uma porcentagem relativa de 200% do ponto central até chegar ao centro 0%.
Tudo pronto, agora vamos fazer a mágica acontecer via programação.
A mágica toda ocorre no método abaixo, que nada mais é do que chamar a animação e aguardar por um tempo estipulado para fazer a chamada da próxima Activity.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
private void StartAnimations() {
Animation anim = AnimationUtils.loadAnimation(this, R.anim.alpha);
anim.reset();
LinearLayout l = (LinearLayout) findViewById(R.id.main_layout);
if (l != null) {
l.clearAnimation();
l.startAnimation(anim);
}
anim = AnimationUtils.loadAnimation(this, R.anim.translate);
anim.reset();
ImageView iv = (ImageView) findViewById(R.id.splash);
if (iv != null) {
iv.clearAnimation();
iv.startAnimation(anim);
}
int SPLASH_DISPLAY_LENGTH = 3500;
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
/* Create an Intent that will start the Menu-Activity. */
Intent intent = new Intent(Splashscreen.this, MainActivity.class);
intent.setFlags(Intent.FLAG_ACTIVITY_NO_ANIMATION);
startActivity(intent);
Splashscreen.this.finish();
}
}, SPLASH_DISPLAY_LENGTH);
}
|
2. Código completo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.LinearLayout;
public class Splashscreen extends AppCompatActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_splashscreen);
StartAnimations();
}
private void StartAnimations() {
Animation anim = AnimationUtils.loadAnimation(this, R.anim.alpha);
anim.reset();
LinearLayout l = (LinearLayout) findViewById(R.id.main_layout);
if (l != null) {
l.clearAnimation();
l.startAnimation(anim);
}
anim = AnimationUtils.loadAnimation(this, R.anim.translate);
anim.reset();
ImageView iv = (ImageView) findViewById(R.id.splash);
if (iv != null) {
iv.clearAnimation();
iv.startAnimation(anim);
}
int SPLASH_DISPLAY_LENGTH = 3500;
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
/* Create an Intent that will start the Menu-Activity. */
Intent intent = new Intent(Splashscreen.this, MainActivity.class);
intent.setFlags(Intent.FLAG_ACTIVITY_NO_ANIMATION);
startActivity(intent);
Splashscreen.this.finish();
}
}, SPLASH_DISPLAY_LENGTH);
}
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#242729"
android:layout_gravity="center"
android:id="@+id/main_layout"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/splash"
android:background="@drawable/splash" />
</LinearLayout>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="br.com.tutorialandroid.splashscreen">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity" />
<activity
android:name=".Splashscreen"
android:label="@string/title_activity_splashscreen"
android:theme="@style/FullScreen">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
|
|
|
<?xml version="1.0" encoding="utf-8"?>
<alpha
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:duration="3000" />
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android">
<translate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0%"
android:toXDelta="0%"
android:fromYDelta="200%"
android:toYDelta="0%"
android:duration="2000"
android:zAdjustment="top" />
</set>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<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>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
<!-- FullScreen theme. -->
<style name="FullScreen" parent="AppTheme">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>
</style>
</resources>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<resources>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">@android:color/transparent</item>
</style>
<!-- FullScreen theme. -->
<style name="FullScreen" parent="AppTheme">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>
</style>
</resources>
|
Código Fonte
Clique
aqui para baixar o projeto completo.
