Last active
August 1, 2019 08:05
-
-
Save vuhung3990/469b097f232f0ed882660302afa87306 to your computer and use it in GitHub Desktop.
simple image slider for android
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
compile 'com.android.support:appcompat-v7:25.3.1' | |
compile 'com.github.bumptech.glide:glide:3.7.0' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<ImageView xmlns:android="http://schemas.android.com/apk/res/android" | |
android:id="@+id/image" | |
android:layout_width="match_parent" | |
android:layout_height="wrap_content" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<uses-permission android:name="android.permission.INTERNET" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@drawable/bg_indicator
What is the picture like?