Loading...

Sử dụng Splash Screen Trong Android

Splash Sreen là gì ?

Khi bạn mở một ứng dụng android, có một hình ảnh nào đó chạy trước khi chúng ta thực sự vào app để sử dụng, nó gọi là Splash.

Vậy mục đích của Splash Sreen là gì ?

  • Nếu ứng dụng của bạn cần một ít thời gian để làm một việc gì đó trước khi người dùng sử dụng ứng dụng thì bạn nên sử dụng splash sreen. Ví dụ như bạn muốn load danh sách các bộ phim từ server về. Bạn không muốn người dùng ngồi chờ khi đã vào app. Thì bạn thực hiện điều đó bằng Splash Sreen để câu giờ bằng một hình ảnh đẹp mắt nào đó. Trong ứng dụng đọc báo tin công nghệ. Splash đã được sử dụng để lấy tin tức từ api trả về : https://play.google.com/store/apps/details?id=docbao.tintuc.tincongnghe
  • Hoặc khi bạn muốn show quảng cáo khi vào app chẳng hạn, bạn cần thời gian để ứng dụng load quảng cáo từ server về. Và show khi vừa chạy xong splash sreen. Startapp Ads có hỗ trợ cái bạn shows màn hình Splash trước khi bạn show quảng cáo khi mở app
  • Hoặc đơn giản là một ai đó muốn có một hình ảnh ấn tượng giới thiệu về team của họ chẳng hạn trước khi người dùng sử dụng app

Vậy bạn có nên sử dụng Splash hay không ?

Trong một vài trường hợp như đã nêu ở trên, sử dụng splash sreen là một giải pháp hợp lý, nhất là trường hợp load một data nào đó từ server về. Vì người dùng thực sự sẻ khó chụi khi vào app mà chưa sử dụng được.

Splash không ảnh hưởng gì tới ứng dụng của chúng ta cho lắm, nên show nó hay không thì tùy theo sở thích và mục địch của bạn

 

Hôm nay tôi sẻ hướng dẩn các bạn cách làm một ứng dụng cực kỳ đơn giản có sử dụng splash sreen:

cấu trúc project gồm 2 class , một class để viết splash sreen và một class là main class của ứng dụng :

SplashActivity Class : 


<code><strong>public class </strong>SplashActivity <strong>extends </strong>AppCompatActivity {
 
     @Override
     <strong>protected void </strong>onCreate(Bundle savedInstanceState) {
         <strong>super</strong>.onCreate(savedInstanceState);
         setContentView(R.layout.<strong><em>activity_splash</em></strong>);
         <em>// tao mot threed với thời gian chờ là 3s
         </em>Thread background = <strong>new </strong>Thread() {
             <strong>public void </strong>run() {
 
                 <strong>try </strong>{
                     <em>// Thread will sleep for 3 seconds
                     </em><em>sleep</em>(3*1000);
 
                     <em>// Sau thoi gian cho thi gọi activi moi
                     </em>Intent i=<strong>new </strong>Intent(getBaseContext(),MainActivity.<strong>class</strong>);
                     <em>// gọi hàm startActiviy (i) để start acitivi i lên
                     </em>startActivity(i);
 
                     <em>//Sau đó thì remove acitvi cũ đi,
 
                     </em>finish();
 
                 } <strong>catch </strong>(Exception e) {
 
                 }
             }
         };
         <em>// start thread
         </em>background.start();
 
     }
     @Override
     <strong>protected void </strong>onDestroy() {
         <strong>super</strong>.onDestroy();
     }
 }
</code></span></pre>
<pre style="background: white;"><span style="font-size: 14.0pt; font-family: 'Times New Roman','serif'; color: black;">


Class thứ 2 : MainActivity để thực hiện chức năng More app và rate app :


</span></pre>
<code><strong>public class </strong>MainActivity <strong>extends </strong>AppCompatActivity {
<strong>private </strong>Button <strong>mButtonMore </strong>= <strong>null</strong>;
<strong>private </strong>Button <strong>mButtonRate </strong>= <strong>null </strong>;
@Override
<strong>protected void </strong>onCreate(Bundle savedInstanceState) {
<strong>super</strong>.onCreate(savedInstanceState);
setContentView(R.layout.<strong><em>activity_main</em></strong>);
<strong>mButtonMore </strong>= (Button) findViewById(R.id.<strong><em>btMore</em></strong>);
<strong>mButtonRate </strong>= (Button) findViewById(R.id.<strong><em>btRate</em></strong>);</code>

<strong>mButtonMore</strong>.setOnClickListener(<strong>new </strong>View.OnClickListener() {
@Override
<strong>public void </strong>onClick(View v) {
<em>// </em><strong><em>TODO Auto-generated method stub
</em></strong>startActivity(<strong>new </strong>Intent(Intent.<strong><em>ACTION_VIEW</em></strong>, Uri.<em>parse</em>(<strong>"https://play.google.com/store/apps/developer?id=ABA+Studio"</strong>)));
}
});

<strong>mButtonRate</strong>.setOnClickListener(<strong>new </strong>View.OnClickListener() {
@Override
<strong>public void </strong>onClick(View v) {
<em>// </em><strong><em>TODO Auto-generated method stub
</em></strong>startActivity(<strong>new </strong>Intent(Intent.<strong><em>ACTION_VIEW</em></strong>, Uri.<em>parse</em>(<strong>"https://play.google.com/store/apps/details?id=docbao.tintuc.tincongnghe"</strong>)));
}
});
}
@Override
<strong>protected void </strong>onDestroy() {

<strong>super</strong>.onDestroy();
}
}
<pre style="background: white;"><span style="font-size: 14.0pt; font-family: 'Times New Roman','serif'; color: black;">


Chỉnh lại trong AndroidManifest.xml để cài đặt SplashActivity làm Activity khởi chạy của ứng dụng :


</span></pre>
<em><?</em><strong>xml version=</strong><strong>"1.0" </strong><strong>encoding=</strong><strong>"utf-8"</strong><em>?>
</em><<strong>manifest </strong><strong>xmlns:</strong><strong>android</strong><strong>=</strong><strong>"http://schemas.android.com/apk/res/android"
</strong><strong>package=</strong><strong>"com.toptincongnghe.toptincongnghesplash"</strong>>

<<strong>application
</strong><strong>android</strong><strong>:allowBackup=</strong><strong>"true"
</strong><strong>android</strong><strong>:icon=</strong><strong>"@mipmap/ic_launcher"
</strong><strong>android</strong><strong>:label=</strong><strong>"@string/app_name"
</strong><strong>android</strong><strong>:supportsRtl=</strong><strong>"true"
</strong><strong>android</strong><strong>:theme=</strong><strong>"@style/AppTheme"</strong>>
<<strong>activity </strong><strong>android</strong><strong>:name=</strong><strong>".MainActivity"</strong>>

</<strong>activity</strong>>
<<strong>activity </strong><strong>android</strong><strong>:name=</strong><strong>".SplashActivity"</strong>>
<<strong>intent-filter</strong>>
<<strong>action </strong><strong>android</strong><strong>:name=</strong><strong>"android.intent.action.MAIN" </strong>/>

<<strong>category </strong><strong>android</strong><strong>:name=</strong><strong>"android.intent.category.LAUNCHER" </strong>/>
</<strong>intent-filter</strong>>
</<strong>activity</strong>>
</<strong>application</strong>>

</<strong>manifest</strong>>

Tùy chỉnh lại trong file activity_splash.xml


<code><em><?</em><strong>xml version=</strong><strong>"1.0" </strong><strong>encoding=</strong><strong>"utf-8"</strong><em>?>
</em><<strong>android.support.constraint.ConstraintLayout </strong><strong>xmlns:</strong><strong>android</strong><strong>=</strong><strong>"http://schemas.android.com/apk/res/android"
</strong><strong>xmlns:</strong><strong>app</strong><strong>=</strong><strong>"http://schemas.android.com/apk/res-auto"
</strong><strong>xmlns:</strong><strong>tools</strong><strong>=</strong><strong>"http://schemas.android.com/tools"
</strong><strong>android</strong><strong>:layout_width=</strong><strong>"match_parent"
</strong><strong>android</strong><strong>:layout_height=</strong><strong>"match_parent"
</strong><strong>tools</strong><strong>:context=</strong><strong>"com.toptincongnghe.toptincongnghesplash.SplashActivity"</strong>></code>

<<strong>ImageView
</strong><strong>android</strong><strong>:id=</strong><strong>"@+id/imgLogo"
</strong><strong>android</strong><strong>:layout_width=</strong><strong>"wrap_content"
</strong><strong>android</strong><strong>:layout_height=</strong><strong>"wrap_content"
</strong><strong>android</strong><strong>:layout_centerInParent=</strong><strong>"true"
</strong><strong>android</strong><strong>:src=</strong><strong>"@drawable/logo" </strong>/>

<<strong>TextView</strong><strong>
</strong><strong>android</strong><strong>:layout_width=</strong><strong>"fill_parent"
</strong><strong>android</strong><strong>:layout_height=</strong><strong>"wrap_content"
</strong><strong>android</strong><strong>:layout_marginBottom=</strong><strong>"10dp"
</strong><strong>android</strong><strong>:textSize=</strong><strong>"12dp"
</strong><strong>android</strong><strong>:textColor=</strong><strong>"#454545"
</strong><strong>android</strong><strong>:gravity=</strong><strong>"center_horizontal"
</strong><strong>android</strong><strong>:layout_alignParentBottom=</strong><strong>"true"
</strong><strong>android</strong><strong>:text=</strong><strong>"www.toptincongnghe.com" </strong>/>

</<strong>android.support.constraint.ConstraintLayout</strong>>
<pre style="background: white;"><span style="font-size: 14.0pt; font-family: 'Times New Roman','serif'; color: black;">Thiết kế file xml Main Activity trong file activity_main.xml : 
<code><em><?</em><strong>xml version=</strong><strong>"1.0" </strong><strong>encoding=</strong><strong>"utf-8"</strong><em>?>
 </em><<strong>RelativeLayout </strong><strong>xmlns:</strong><strong>android</strong><strong>=</strong><strong>"http://schemas.android.com/apk/res/android"
     </strong><strong>xmlns:</strong><strong>tools</strong><strong>=</strong><strong>"http://schemas.android.com/tools"
     </strong><strong>android</strong><strong>:id=</strong><strong>"@+id/activity_main"
     </strong><strong>android</strong><strong>:layout_width=</strong><strong>"match_parent"
     </strong><strong>android</strong><strong>:layout_height=</strong><strong>"match_parent"
     </strong><strong>android</strong><strong>:paddingBottom=</strong><strong>"@dimen/activity_vertical_margin"
     </strong><strong>android</strong><strong>:paddingLeft=</strong><strong>"@dimen/activity_horizontal_margin"
     </strong><strong>android</strong><strong>:paddingRight=</strong><strong>"@dimen/activity_horizontal_margin"
     </strong><strong>android</strong><strong>:paddingTop=</strong><strong>"@dimen/activity_vertical_margin"
     </strong><strong>tools</strong><strong>:context=</strong><strong>"com.toptincongnghe.toptincongnghesplash.MainActivity"</strong>>
 
     <<strong>TextView
         </strong><strong>android</strong><strong>:layout_width=</strong><strong>"wrap_content"
         </strong><strong>android</strong><strong>:layout_height=</strong><strong>"wrap_content"
         </strong><strong>android</strong><strong>:text=</strong><strong>"toptincongnghe.com xin chào!"
         </strong><strong>android</strong><strong>:id=</strong><strong>"@+id/textView" </strong>/>
     <<strong>Button
         </strong><strong>android</strong><strong>:id=</strong><strong>"@+id/btRate"
         </strong><strong>android</strong><strong>:layout_width=</strong><strong>"wrap_content"
         </strong><strong>android</strong><strong>:layout_height=</strong><strong>"wrap_content"
         </strong><strong>android</strong><strong>:layout_marginTop=</strong><strong>"73dp"
         </strong><strong>android</strong><strong>:text=</strong><strong>"Rate App "
         </strong><strong>android</strong><strong>:layout_below=</strong><strong>"@+id/textView"
         </strong><strong>android</strong><strong>:layout_centerHorizontal=</strong><strong>"true" </strong>/>
     <<strong>Button
         </strong><strong>android</strong><strong>:id=</strong><strong>"@+id/btMore"
         </strong><strong>android</strong><strong>:layout_width=</strong><strong>"wrap_content"
         </strong><strong>android</strong><strong>:layout_height=</strong><strong>"wrap_content"
         </strong><strong>android</strong><strong>:layout_marginTop=</strong><strong>"33dp"
         </strong><strong>android</strong><strong>:text=</strong><strong>"More App"
         </strong><strong>android</strong><strong>:layout_below=</strong><strong>"@+id/mButtonRate"
         </strong><strong>android</strong><strong>:layout_alignRight=</strong><strong>"@+id/mButtonRate"
         </strong><strong>android</strong><strong>:layout_alignEnd=</strong><strong>"@+id/mButtonRate"
         </strong><strong>android</strong><strong>:layout_marginRight=</strong><strong>"32dp"
         </strong><strong>android</strong><strong>:layout_marginEnd=</strong><strong>"32dp" </strong>/>
 </<strong>RelativeLayout</strong>>

Cám ơn bạn đã đọc bài viết. chúc bạn một ngày vui vẻ. Bạn có thể download source đính kèm :
http://www.mediafire.com/file/gj8xcdxqxpj6bb9/com.toptincongnghe.splash.rar

Và dưới đây là kết quả : 







Comments

comments

Loading...