Skip to content

Instantly share code, notes, and snippets.

@vuhung3990
Last active August 1, 2019 08:05
Show Gist options
  • Save vuhung3990/469b097f232f0ed882660302afa87306 to your computer and use it in GitHub Desktop.
Save vuhung3990/469b097f232f0ed882660302afa87306 to your computer and use it in GitHub Desktop.
simple image slider for android
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.tux.mylab.MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/image_slider"
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="@color/colorAccent" />
<RadioGroup
android:id="@+id/slider_indicator_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:orientation="horizontal">
<RadioButton
android:id="@+id/page1"
style="@style/indicator_style"
android:checked="true" />
<RadioButton
android:id="@+id/page2"
style="@style/indicator_style" />
<RadioButton
android:id="@+id/page3"
style="@style/indicator_style" />
<RadioButton
android:id="@+id/page4"
style="@style/indicator_style" />
</RadioGroup>
</FrameLayout>
compile 'com.android.support:appcompat-v7:25.3.1'
compile 'com.github.bumptech.glide:glide:3.7.0'
public class ImageSliderAdapter extends FragmentPagerAdapter {
private final List<Fragment> fragmentList = new ArrayList<>();
public ImageSliderAdapter(@NonNull FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return fragmentList.get(position);
}
@Override
public int getCount() {
return fragmentList.size();
}
/**
* add image fragment into view pager
*
* @param fragment
*/
public void addFragment(Fragment fragment) {
fragmentList.add(fragment);
}
}
/**
* slider item
* require: glide, permission internet (if load from internet)
*/
public class ImageSliderFragment extends Fragment {
private static final String IMAGE_URL = "image_url";
public static ImageSliderFragment newInstance(String imageUrl) {
Bundle args = new Bundle();
args.putString(IMAGE_URL, imageUrl);
ImageSliderFragment fragment = new ImageSliderFragment();
fragment.setArguments(args);
return fragment;
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
ImageView view = (ImageView) inflater.inflate(R.layout.item_slider, container, false);
String url = getUrlFromInstance();
loadImage(view, url);
return view;
}
/**
* load image use glide
*
* @param view view to show image from url
* @param url url of image
*/
private void loadImage(ImageView view, String url) {
Glide.with(this)
.load(url)
.thumbnail(0.3f)
.into(view);
}
/**
* @return url of image passing from newInstance
*/
private String getUrlFromInstance() {
return getArguments().getString(IMAGE_URL);
}
}
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener, ViewPager.OnPageChangeListener {
private ViewPager viewPager;
private RadioGroup group;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = (ViewPager) findViewById(R.id.image_slider);
group = (RadioGroup) findViewById(R.id.slider_indicator_group);
group.setOnCheckedChangeListener(this);
viewPager.addOnPageChangeListener(this);
ImageSliderAdapter adapter = new ImageSliderAdapter(getSupportFragmentManager());
adapter.addFragment(ImageSliderFragment.newInstance("http://www.clipartkid.com/images/12/playground-clipart-9sdTKA-clipart.png"));
adapter.addFragment(ImageSliderFragment.newInstance("http://www.clipartkid.com/images/12/slide-clipart-clipart-panda-free-clipart-images-UzpAUg-clipart.jpg"));
adapter.addFragment(ImageSliderFragment.newInstance("https://trishdeitch.files.wordpress.com/2010/06/all_tp_products_tp_crazywavy_slide_body_green1.jpg"));
viewPager.setAdapter(adapter);
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
// when current page change -> update radio button state
int radioButtonId = group.getChildAt(position).getId();
group.check(radioButtonId);
}
@Override
public void onPageScrollStateChanged(int state) {
}
@Override
public void onCheckedChanged(RadioGroup group, @IdRes int checkedId) {
// when checked radio button -> update current page
viewPager.setCurrentItem(group.indexOfChild(group.findViewById(checkedId)), true);
}
}
<uses-permission android:name="android.permission.INTERNET" />
<style name="indicator_style">
<item name="android:layout_margin">10dp</item>
<item name="android:layout_width">10dp</item>
<item name="android:layout_height">10dp</item>
<item name="android:button">@null</item>
<item name="android:background">@drawable/bg_indicator</item>
</style>
@anisaazhar
Copy link

@drawable/bg_indicator

What is the picture like?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment