Mohon untuk bersikap bijak dalam setiap menyikapi infomasi dan berita yang beredar di internet karena tidak semua berita itu benar, terkadang di salah gunakan oknum tertentu untuk membuat kekacauan dan fitnah

Cara Membuat View Pager di Android Studio - Coding Rakitan

Berita Anda, Halo Pengunjung blog dimanapun anda berada semoga kalian tetap dalam keadaan sehat, saat ini anda sedang membaca Artikel dengan judul Cara Membuat View Pager di Android Studio - Coding Rakitan, semoga bermanfaat dan selamat membaca



Hai Sobat Coding Rakitan kali ini kita akan belajar menggunakan View Pager di Android Studio. View Pager sendiri merupakan sebuah widget yang disediakan oleh Android Studio untuk membuat tampilan list yang keren pada aplikasi. Dengan menggunakan PagerView kita dapat membuat tampilan aplikasi seperti slide, list file horizontal, dan masih banyak lagi.

Berikut contoh tampilan yang bisa dibuat dengan memanfaatkan widget View Pager.



Sedangkan untuk tampilan yang akan kita buat nantinya akan tampak seperti berikut.



Berikut adalah daftar file baik Class, layout, ataupun drawable yang akan dibuat dalam tutorial kali ini.




Selain itu ada beberapa data berupa array yang diperlukan dalam mengisi card yang akan di tampilkan dalam View Pager nantinya. Cara membuat array ini anda tinggal klik kanan pada folder values -> New -> Value resources file, lalu beri nama array. Selanjutnya isi dengan kode seperti dibawah ini.


 
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string-array name="judul">
<item>Google</item>
<item>Coding Rakitan</item>
<item>Facebook</item>
</string-array>
<string-array name="text">
<item>Google merupakan website mesin pencari ...</item>
<item>Coding Rakitan merupakan sebuah blog. . . </item>
<item>Salah satu media sosial yang paling . . .</item>
</string-array>
<string-array name="gambar">
<item>a</item>
<item>b</item>
<item>c</item>
</string-array>
</resources>


Langsung saja untuk membuat tampilan seperti di atas menggunakan View Pager silahkan buka Android Studio anda. Buat sebuah project baru dengan format sperti dibawah.

  • Name : Belajar Pagerview
  • Package name : codingrakitan.blogspot.com.belajarpagerview (Atur sesuai keinginan)
  • Language : Java
  • Minimum API Level : API17 Android 4.2 (Jelly Bean)
  • Chose Your Project : Empty Activity

Bagi pemula yang belum tahu cara membuat project baru silahkan kunjungi Cara Membuat Project Baru di Android Studio.

Setelah project baru selesai dibuat, lanjut ke tahap menambahkan dependencies yaitu "implementation 'com.android.support:support-v4:28.0.0'" kedalam file build.grandle (Module.app). Sehingga nantinya dependencies kita akan tampak seperti berikut.

 
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'com.android.support.test:runner:1.0.2'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
implementation 'com.android.support:support-v4:28.0.0'
}


Atau cara cepatnya silahkan klik ikon download seperti pada gambar di bawah.



MainActivity

 
public class MainActivity extends AppCompatActivity {

TextView a, b;
ViewPager pagerView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
a = findViewById(R.id.a);
b = findViewById(R.id.b);
pagerView = findViewById(R.id.pager);
isiViewPager();
}

private void isiViewPager() {
Resources res = getResources();
String[] judul = res.getStringArray(R.array.judul);
String[] text = res.getStringArray(R.array.text);
String[] gambar = res.getStringArray(R.array.gambar);
AdapterViewPager adapter = new AdapterViewPager();
b.setText(""+judul.length);
for (int i=0;i<judul.length;i++){
adapter.addCardItem(new ModelItem(judul[i], text[i], gambar[i]));
}
pagerView.setAdapter(adapter);
pagerView.setOffscreenPageLimit(3);
pagerView.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int i, float v, int i1) {

}

@Override
public void onPageSelected(int i) {
int p = i+1;
a.setText(""+p);
}

@Override
public void onPageScrollStateChanged(int i) {

}
});
}
}

AdapterViewPager

 
public class AdapterViewPager extends PagerAdapter {


private List<ModelItem> mData;


private Context context;
public AdapterViewPager() {
mData = new ArrayList<>();
}



public void addCardItem(ModelItem item) {
mData.add(item);
}


@Override
public int getCount() {
return mData.size();
}

@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}

@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = LayoutInflater.from(container.getContext())
.inflate(R.layout.cardw, container, false);
TextView judul = view.findViewById(R.id.tv_judul);
TextView text = view.findViewById(R.id.tv_text);

judul.setText(mData.get(position).getJudul());
text.setText(mData.get(position).getText());


container.addView(view);
return view;
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}


}



ModelItem

 
public class ModelItem{

String judul, text, gambar;
public ModelItem(String judul, String text, String gambar){
this.judul = judul;
this.text = text;
this.gambar = gambar;
}

public String getJudul() {
return judul;
}

public void setJudul(String judul) {
this.judul = judul;
}

public String getText() {
return text;
}

public void setText(String text) {
this.text = text;
}

public String getGambar() {
return gambar;
}

public void setGambar(String gambar) {
this.gambar = gambar;
}
}

activity_main.xml

 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="#E8E8E8"
android:orientation="vertical"
tools:context=".MainActivity">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
android:padding="10dp">

<TextView
android:id="@+id/a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textColor="@android:color/black"
android:textSize="24sp" />

<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:text="/"
android:textColor="@android:color/black"
android:textSize="24sp" />

<TextView
android:id="@+id/b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="-"
android:textColor="@android:color/black"
android:textSize="24sp" />
</LinearLayout>

<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:overScrollMode="never"
android:paddingLeft="50dp"
android:paddingEnd="50dp"
android:paddingRight="50dp" />
</LinearLayout>

cardw.xml

 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="wrap_content"
android:orientation="vertical"
android:padding="10dp">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="370dp"
android:background="@android:color/white"
android:orientation="vertical">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="@android:color/holo_blue_dark"
android:orientation="vertical" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="20dp">

<TextView
android:id="@+id/tv_judul"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:textColor="@android:color/black"
android:textSize="18sp"
android:textStyle="bold" />

<TextView
android:id="@+id/tv_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="7dp"
android:text="TextView" />
</LinearLayout>

<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="10dp"
android:background="@color/colorAccent"
android:text="More"
android:textColor="@android:color/white" />

</LinearLayout>

</LinearLayout>


Labels: Android_Studio

Thanks for reading Cara Membuat View Pager di Android Studio - Coding Rakitan. Please share...!

0 Komentar untuk "Cara Membuat View Pager di Android Studio - Coding Rakitan"

Back To Top