Cara Menciptakan Intro Slider App Dengan Android Studio

FAST DOWNLOADads
Download
Cara Membuat Intro Silder App dengan Android Studio Cara Membuat Intro Slider App dengan Android Studio
Intro Silder
Berikut ini aku akan membagikan sebuah tutorial Cara Membuat Intro Silder App dengan Android Studio. Apasih Intro Slider itu? Intro Slider yaitu hidangan awal yang muncul ketika membuka aplikasi berupa slide yang pada umumnya berisi gambar dan teks. Seperti Splash Screen, namun Intro Slider mempunyai slide yang berisi klarifikasi dari aplikasi tersebut. Kalian sanggup menekan tombol skip/lewati atau next/lanjut dan sanggup juga digeser untuk menuju halaman utama aplikasi.

Untuk lebih jelasnya aku akan mendemonstrasikannya, aku buatkan sample aplikasi yang berisi beberapa Intro Slider dengan tombol skip & next dan kalian juga sanggup menggesernya. Saya asumsikan kalian sudah paham dalam menciptakan project gres dengan Android Studio. Langsung saja kita buat! Ikuti langkah-langkah dibawah ini:
  • Pertama kalian buat project gres di Android Studio dari File ⇒ New Project. Lalu kalian pilih Empty Activity dan klik lanjut.
  • Download terlebih dahulu drawable untuk icon Intro Slider DISINI. File itu berisi beberapa gambar menarik yang diharapkan untuk project ini. Tempatkan file tersebut ke dalam folder drawable.
  • Masukkan beberapa arahan warna pada res/values/colors.xml. Berikut yaitu palet warna yang sudah aku berikan untuk mendesain layar Intro Slider. Untuk setiap layar kita membutuhkan tiga warna yaitu warna latar belakang dan dua warna titik ketika aktif / tidak aktif.
  <?xml version="1.0" encoding="utf-8"?> <resources>     <color name="colorPrimary">#3F51B5</color>     <color name="colorPrimaryDark">#303F9F</color>     <color name="colorAccent">#FF4081</color>     <!-- Screens background color-->     <color name="bg_screen1">#f64c73</color>     <color name="bg_screen2">#20d2bb</color>     <color name="bg_screen3">#3395ff</color>     <color name="bg_screen4">#c873f4</color>     <!-- dots inactive colors -->     <color name="dot_dark_screen1">#d1395c</color>     <color name="dot_dark_screen2">#14a895</color>     <color name="dot_dark_screen3">#2278d4</color>     <color name="dot_dark_screen4">#a854d4</color>     <!-- dots active colors -->     <color name="dot_light_screen1">#f98da5</color>     <color name="dot_light_screen2">#8cf9eb</color>     <color name="dot_light_screen3">#93c6fd</color>     <color name="dot_light_screen4">#e4b5fc</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> </resources>
  • Kemudian kalian tambahkan teks berikut pada strings.xml.
  <resources>     <string name="app_name">Intro Slider</string>     <string name="title_activity_welcome">Home Screen</string>     <string name="next">NEXT</string>     <string name="skip">SKIP</string>     <string name="start">GOT IT</string>       <string name="slide_1_title">Hello Food!</string>     <string name="slide_1_desc">The easiest way to order food from your favourite restaurant!</string>       <string name="slide_2_title">Movie Tickets</string>     <string name="slide_2_desc">Book movie tickets for your family and friends!</string>       <string name="slide_3_title">Great Discounts</string>     <string name="slide_3_desc">Best discounts on every single service we offer!</string>       <string name="slide_4_title">World Travel</string>     <string name="slide_4_desc">Book tickets of any transportation and travel the world!</string>       <string name="play_again_desc">To see the welcome slider again, goto Settings -> apps -> welcome slider -> clear data</string>     <string name="play_again">Play Again</string> </resources>
  • Lalu kalian tambahkan juga teks ini ke dalam dimens.xml.
  <resources>     <!-- Default screen margins, per the Android Design guidelines. -->     <dimen name="activity_horizontal_margin">16dp</dimen>     <dimen name="activity_vertical_margin">16dp</dimen>     <dimen name="fab_margin">16dp</dimen>     <dimen name="dots_height">30dp</dimen>     <dimen name="dots_margin_bottom">20dp</dimen>     <dimen name="img_width_height">120dp</dimen>     <dimen name="slide_title">30dp</dimen>     <dimen name="slide_desc">16dp</dimen>     <dimen name="desc_padding">40dp</dimen> </resources>
  • Terakhir di folder yang sama, kalian tambahkan juga teks ini ke styles.xml.
  <resources>     <!-- Default screen margins, per the Android Design guidelines. -->     <dimen name="activity_horizontal_margin">16dp</dimen>     <dimen name="activity_vertical_margin">16dp</dimen>     <dimen name="fab_margin">16dp</dimen>     <dimen name="dots_height">30dp</dimen>     <dimen name="dots_margin_bottom">20dp</dimen>     <dimen name="img_width_height">120dp</dimen>     <dimen name="slide_title">30dp</dimen>     <dimen name="slide_desc">16dp</dimen>     <dimen name="desc_padding">40dp</dimen> </resources>
  • Setelah semua yang ada di folder values kita edit, kini kita buat class dengan nama PrefManager.java.
  package id.azhar.introslider;   import android.content.Context; import android.content.SharedPreferences;   /**  * Created by Azhar Rivaldi on 07/10/2017.  */   public class PrefManager {     SharedPreferences pref;     SharedPreferences.Editor editor;     Context _context;       // shared pref mode     int PRIVATE_MODE = 0;       // Shared preferences file name     private static final String PREF_NAME = "tajwid-welcome";       private static final String IS_FIRST_TIME_LAUNCH = "IsFirstTimeLaunch";       public PrefManager(Context context) {         this._context = context;         pref = _context.getSharedPreferences(PREF_NAME, PRIVATE_MODE);         editor = pref.edit();     }       public void setFirstTimeLaunch(boolean isFirstTime) {         editor.putBoolean(IS_FIRST_TIME_LAUNCH, isFirstTime);         editor.commit();     }       public boolean isFirstTimeLaunch() {         return pref.getBoolean(IS_FIRST_TIME_LAUNCH, true);     }   }
  • Berikutnya kita akan menciptakan layout slide untuk tampilan ketika aplikasi dibuka. Disini aku buat 4 layout dengan isi yang sama berupa gambar dan teks. Empat layout itu aku beri nama welcome_side1.xml, welcome_side2.xml, welcome_side3.xml dan welcome_side4.
  <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@color/bg_screen1">       <LinearLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerInParent="true"        android:gravity="center_horizontal"        android:orientation="vertical">           <ImageView            android:layout_width="@dimen/img_width_height"            android:layout_height="@dimen/img_width_height"            android:src="@drawable/ic_food" />           <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="@string/slide_1_title"            android:textColor="@android:color/white"            android:textSize="@dimen/slide_title"            android:textStyle="bold" />           <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginTop="20dp"            android:paddingLeft="@dimen/desc_padding"            android:paddingRight="@dimen/desc_padding"            android:text="@string/slide_1_desc"            android:textAlignment="center"            android:textColor="@android:color/white"            android:textSize="@dimen/slide_desc" />       </LinearLayout> </RelativeLayout>

  <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@color/bg_screen2">       <LinearLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerInParent="true"        android:gravity="center_horizontal"        android:orientation="vertical">           <ImageView            android:layout_width="@dimen/img_width_height"            android:layout_height="@dimen/img_width_height"            android:src="@drawable/ic_movie" />           <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="@string/slide_2_title"            android:textColor="@android:color/white"            android:textSize="@dimen/slide_title"            android:textStyle="bold" />           <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginTop="20dp"            android:paddingLeft="@dimen/desc_padding"            android:paddingRight="@dimen/desc_padding"            android:text="@string/slide_2_desc"            android:textAlignment="center"            android:textColor="@android:color/white"            android:textSize="@dimen/slide_desc" />       </LinearLayout>   </RelativeLayout>

  <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@color/bg_screen3">       <LinearLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerInParent="true"        android:gravity="center_horizontal"        android:orientation="vertical">           <ImageView            android:layout_width="@dimen/img_width_height"            android:layout_height="@dimen/img_width_height"            android:src="@drawable/ic_discount" />           <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="@string/slide_3_title"            android:textColor="@android:color/white"            android:textSize="@dimen/slide_title"            android:textStyle="bold" />           <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginTop="20dp"            android:paddingLeft="@dimen/desc_padding"            android:paddingRight="@dimen/desc_padding"            android:text="@string/slide_3_desc"            android:textAlignment="center"            android:textColor="@android:color/white"            android:textSize="@dimen/slide_desc" />       </LinearLayout>   </RelativeLayout>

  <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@color/bg_screen4">       <LinearLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerInParent="true"        android:gravity="center_horizontal"        android:orientation="vertical">           <ImageView            android:layout_width="@dimen/img_width_height"            android:layout_height="@dimen/img_width_height"            android:src="@drawable/ic_travel" />           <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="@string/slide_4_title"            android:textColor="@android:color/white"            android:textSize="@dimen/slide_title"            android:textStyle="bold" />           <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginTop="20dp"            android:paddingLeft="@dimen/desc_padding"            android:paddingRight="@dimen/desc_padding"            android:text="@string/slide_4_desc"            android:textAlignment="center"            android:textColor="@android:color/white"            android:textSize="@dimen/slide_desc" />       </LinearLayout>   </RelativeLayout>

Jika sudah, kini kembali lagi menciptakan class dengan nama WelcomeActivity.java untuk menampilkan Intro Silder.
  package id.azhar.introslider;   /**  * Created by Azhar Rivaldi on 07/10/2017.  */   import android.content.Context; import android.content.Intent; import android.graphics.Color; import android.os.Build; import android.os.Bundle; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.text.Html; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.view.Window; import android.view.WindowManager; import android.widget.Button; import android.widget.LinearLayout; import android.widget.TextView;   public class WelcomeActivity extends AppCompatActivity {       private ViewPager viewPager;     private MyViewPagerAdapter myViewPagerAdapter;     private LinearLayout dotsLayout;     private TextView[] dots;     private int[] layouts;     private Button btnSkip, btnNext;     private PrefManager prefManager;       @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);           // Checking for first time launch - before calling setContentView()         prefManager = new PrefManager(this);         if (!prefManager.isFirstTimeLaunch()) {             launchHomeScreen();             finish();         }           // Making notification kafe transparent         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_welcome);           viewPager = (ViewPager) findViewById(R.id.view_pager);         dotsLayout = (LinearLayout) findViewById(R.id.layoutDots);         btnSkip = (Button) findViewById(R.id.btn_skip);         btnNext = (Button) findViewById(R.id.btn_next);             // layouts of all welcome sliders         // add few more layouts if you want         layouts = new int[]{                 R.layout.welcome_slide1,                 R.layout.welcome_slide2,                 R.layout.welcome_slide3,                 R.layout.welcome_slide4};           // adding bottom dots         addBottomDots(0);           // making notification kafe transparent         changeStatusBarColor();           myViewPagerAdapter = new MyViewPagerAdapter();         viewPager.setAdapter(myViewPagerAdapter);         viewPager.addOnPageChangeListener(viewPagerPageChangeListener);           btnSkip.setOnClickListener(new View.OnClickListener() {             @Override             public void onClick(View v) {                 launchHomeScreen();             }         });           btnNext.setOnClickListener(new View.OnClickListener() {             @Override             public void onClick(View v) {                 // checking for last page                 // if last page home screen will be launched                 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("&#8226;"));             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(WelcomeActivity.this, MainActivity.class));         finish();     }       //  viewpager change listener     ViewPager.OnPageChangeListener viewPagerPageChangeListener = new ViewPager.OnPageChangeListener() {           @Override         public void onPageSelected(int position) {             addBottomDots(position);               // changing the next button text '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 kafe 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);         }     } }

Kemudian untuk layoutnya activity_welcome.xml.
  <?xml version="1.0" encoding="utf-8"?> <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:showIn="@layout/activity_welcome">         <android.support.v4.view.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"></LinearLayout>       <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="@string/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="@string/skip"        android:textColor="@android:color/white" />        </RelativeLayout>

Langkah terakhir kalian ubah AndroidManifest.xml menjadi menyerupai ini:
  <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android"    package="info.androidhive.introslider">       <application        android:allowBackup="true"        android:icon="@mipmap/ic_launcher"        android:label="@string/app_name"        android:supportsRtl="true"        android:theme="@style/AppTheme">         <activity android:name="info.androidhive.introslider.WelcomeActivity">             <intent-filter>                 <action android:name="android.intent.action.MAIN" />                   <category android:name="android.intent.category.LAUNCHER" />             </intent-filter>         </activity>         <activity            android:name="info.androidhive.introslider.MainActivity"            android:label="@string/title_activity_welcome"            android:theme="@style/AppTheme.NoActionBar"></activity>     </application>   </manifest>

Kalau semua tidak ada yang terlewat silahkan kalian Run dengan Emulator Android Studio atau memakai device yang kalian punya. Jika berhasil maka tampilannya akan menyerupai ini:
Cara Membuat Intro Silder App dengan Android Studio Cara Membuat Intro Slider App dengan Android Studio
Intro Slider App
Sebelum mencoba tutorial ini aku harapkan kalian sudah paham dan mengerti bagaimana cara memakai Android Studio. Ini hanya sample saja, jadi kalian sanggup menerapkannya ke aplikasi lain yang kalian buat
Bagaimana berdasarkan kalian? Cukup mudah? Atau Sulit? Jika kalian merasa kesulitan, silahkan berikan komentar kalian pada kolom yang disediakan. Tutorial ini aku ambil dari Androidhive.

Demikian gosip yang aku bagikan untuk kalian. Jangan lupa bagikan artikel ini ke teman-teman kalian biar ikut membaca Cara Membuat Intro Slider App dengan Android Studio ini. Siapa tahu ada yang membutuhkan.

Gabung juga di Channel BBM . Ada banyak gosip penting lainnya yang tidak aku publikasikan website ini. Join di Channelnya dengan kode PIN: C004C7E92. Semoga kalian lebih nyaman dan gampang dalam mengakses Blog dimanapun kalian berada.

Terima Kasih...
FAST DOWNLOADads
| Server1 | Server2 | Server3 |
Download
Next Post Previous Post