Aplikasi android terdiri dari beberapa activity. Beberapa activity bisa kita bagi menjadi 3 bagian besar diantaranya Intro – Otentikasi User – Inti Activity – Outro. Dalam bagian Intro kita sering menemukan beberapa activity seperti Splash Screen dan Landing Page. Sedangkan Otentikasi user berisi login dan register. Inti activity adalah activity yang mana menjadi tujuan aplikasi ini dibuat misal aplikasi Shopee yang memiliki activity sebagai tempat belajan online. Sedangkan Outro sendiri merupakan aplikasi penutup ketika user akan logout dan user akan menguninstal aplikasi. Dalam artikel kali ini kita akan mencoba membuat Intro untuk aplikasi android yang menarik.
- Splash Screen berisi logo aplikasi atau identitas aplikasi yang ditunjukkan secara sederhana dan singkat dalam satu tampilan. Biasanya tampilan akan muncul tidak lebih dari 5 detik. Berikut adalah langkah – langkah membuat splash screen.
a. Buat activity baru dengan nama SplashScreen
b. Masukan gambar logo aplikasi kamu ke folder drawable.
c. Tambahkan program pada activity_splash_screen.xml.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
android:background="@color/white"
tools:context=".SplashScreen">
<ImageView
android:id="@+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="280dp"
android:src="@drawable/excv"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/supp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/englebert"
android:text="find your exclusive design with us"
android:textColor="#000000"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/logo" />
</androidx.constraintlayout.widget.ConstraintLayout>
d. Kemudian masuk ke SplashScreen.java dan tambahkan kode untuk memanggil tampilan activity_splash_screen.xml namun hanya 3 detik saja. Kemudian tambahkan activity tujuan setelah splash screen.
public class SplashScreen extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//untuk bisa menampilkan activity full di layar smartphone
getWindow().setFlags(WindowManager.LayoutParams.
FLAG_FULLSCREEN,WindowManager.LayoutParams.
FLAG_FULLSCREEN);
setContentView(R.layout.activity_splash_screen);
//program untuk menangani tampilan splash selama 3 detik / 3000ms
new Handler().postDelayed(() -> {
//activity tujuan setelah splashscreen berjalan 3 detik
Intent i = new Intent(SplashScreen.this, LandingPage.class);
startActivity(i);
finish();
}, 3000); //delay splashscreen 3 detik
}
}
e. Jangan lupa atur di AndroidManifest.xml agar activity SplashScreen menjadi launcher activity. Hasil tampilan akan seperti ini :
2. Landing Page berisi informasi singkat terkait aplikasi dan penggunaannya. Biasanya terdapat tidak lebih dari 5 tampilan. Landing page juga akan ditampilkan sekali untuk user yang baru saja menginstal aplikasi. Langkah – langkah membuat landing page adalah sebagai berikut :
a. Siapkan layout yang berisi informasi singkat mengenai aplikasi/penggunaan aplikasi. Didalam artikel ini kita memakai 3 layout. Dalam artikel ini dibuat 3 layout dengan nama slide1.xml, slide2.xml, slide3.xml
b. Isikan 3 layout sesuai dengan informasi apa saja yang ingin anda jabarkan.
c. Kemudian tambahkan program ini di activity_landing_page.xml berikut :
<?xml version="1.0" encoding="utf-8"?>
<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:showIn="@layout/activity_landing_page">
<androidx.viewpager.widget.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<LinearLayout
android:id="@+id/layoutDots"
android:layout_width="match_parent"
android:layout_height="@dimen/dots_height"
android:layout_alignParentBottom="true"
android:layout_marginBottom="@dimen/dots_margin_bottom"
android:gravity="center"
android:orientation="horizontal"/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:alpha=".5"
android:layout_above="@id/layoutDots"
android:background="@android:color/white" />
<Button
android:id="@+id/btn_next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:background="@null"
android:text="NEXT"
android:textColor="@android:color/white" />
<Button
android:id="@+id/btn_skip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="@null"
android:text="SKIP"
android:textColor="@android:color/white" />
</RelativeLayout>
d. Kemudian beralih ke LandingPage.java
public class LandingPage extends AppCompatActivity {
private ViewPager viewPager;
private MyViewPagerAdapter myViewPagerAdapter;
private LinearLayout dotsLayout;
private TextView[] dots;
private int[] layouts;
private Button btnSkip, btnNext;
private tim.excv.Preferences prefManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
// mengecek lauch activity - sebelum memanggil setContentView()
prefManager = new Preferences(this);
if (!prefManager.isFirstTimeLaunch()) {
launchHomeScreen();
finish();
}
// membuat transparan notifikasi
if (Build.VERSION.SDK_INT >= 21) {
getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
}
setContentView(R.layout.activity_landing_page);
viewPager = findViewById(R.id.view_pager);
dotsLayout = findViewById(R.id.layoutDots);
btnSkip = findViewById(R.id.btn_skip);
btnNext = findViewById(R.id.btn_next);
// layout xml slide 1 sampai 4
// add few more layouts if you want
layouts = new int[]{
R.layout.slide1,
R.layout.slide2,
R.layout.slide3};
// tombol dots (lingkaran kecil perpindahan slide)
addBottomDots(0);
// membuat transparan notifikasi
changeStatusBarColor();
myViewPagerAdapter = new MyViewPagerAdapter();
viewPager.setAdapter(myViewPagerAdapter);
viewPager.addOnPageChangeListener(viewPagerPageChangeListener);
btnSkip.setOnClickListener(v -> launchHomeScreen());// membuat transparan notifikasi
changeStatusBarColor();
myViewPagerAdapter = new MyViewPagerAdapter();
viewPager.setAdapter(myViewPagerAdapter);
viewPager.addOnPageChangeListener(viewPagerPageChangeListener);
btnSkip.setOnClickListener(v -> launchHomeScreen());
btnNext.setOnClickListener(v -> {
// mengecek page terakhir (slide 4)
// jika activity home sudah tampil
int current = getItem(+1);
if (current < layouts.length) {
// move to next screen
viewPager.setCurrentItem(current);
} else {
launchHomeScreen();
}
});
}
private void addBottomDots(int currentPage) {
dots = new TextView[layouts.length];
int[] colorsActive = getResources().getIntArray(R.array.array_dot_active);
int[] colorsInactive = getResources().getIntArray(R.array.array_dot_inactive);
dotsLayout.removeAllViews();
for (int i = 0; i < dots.length; i++) {
dots[i] = new TextView(this);
dots[i].setText(Html.fromHtml("•"));
dots[i].setTextSize(35);
dots[i].setTextColor(colorsInactive[currentPage]);
dotsLayout.addView(dots[i]);
}
if (dots.length > 0)
dots[currentPage].setTextColor(colorsActive[currentPage]);
}
private int getItem(int i) {
return viewPager.getCurrentItem() + i;
}
private void launchHomeScreen() {
prefManager.setFirstTimeLaunch(false);
startActivity(new Intent(LandingPage.this, LoginActivity.class));
finish();
}
// viewpager change listener
ViewPager.OnPageChangeListener viewPagerPageChangeListener = new ViewPager.OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
addBottomDots(position);
// mengubah button lanjut 'NEXT' / 'GOT IT'
if (position == layouts.length - 1) {
// last page. make button text to GOT IT
btnNext.setText(getString(R.string.start));
btnSkip.setVisibility(View.GONE);
} else {
// still pages are left
btnNext.setText(getString(R.string.next));
btnSkip.setVisibility(View.VISIBLE);
}
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
};
/**
* Making notification bar transparent
*/
private void changeStatusBarColor() {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
Window window = getWindow();
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.setStatusBarColor(Color.TRANSPARENT);
}
}
/**
* View pager adapter
*/
public class MyViewPagerAdapter extends PagerAdapter {
private LayoutInflater layoutInflater;
public MyViewPagerAdapter() {
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = layoutInflater.inflate(layouts[position], container, false);
container.addView(view);
return view;
}
@Override
public int getCount() {
return layouts.length;
}
@Override
public boolean isViewFromObject(View view, Object obj) {
return view == obj;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
View view = (View) object;
container.removeView(view);
}
}
}
e. Pastinya nanti akan menemukan error dibagian R.array.array_dot_active dan R.array.array_dot_inactive. Maka tambahkan program di colors.xml dengan :
</color>
<!-- dots active colors -->
<color name="dot_light_screen1">#A9A9A9</color>
<color name="dot_light_screen2">#A9A9A9</color>
<color name="dot_light_screen3">#A9A9A9</color>
<color name="dot_light_screen4">#A9A9A9</color>
<array name="array_dot_active">
<item>@color/dot_light_screen1</item>
<item>@color/dot_light_screen2</item>
<item>@color/dot_light_screen3</item>
<item>@color/dot_light_screen4</item>
</array>
<array name="array_dot_inactive">
<item>@color/dot_dark_screen1</item>
<item>@color/dot_dark_screen2</item>
<item>@color/dot_dark_screen3</item>
<item>@color/dot_dark_screen4</item>
</array>
f. Jalankan program dan akan menghasilkan tampilan seperti ini:
Nah bagaimana hasilnya? Sekian artikel tentang membuat Intro aplikasi yang menarik, semoga dapat memberimu pengetahuan dan manfaat untuk ide projek aplikasi kamu. Terima Kasih
