Android gallery usage (custom border + small dot at the bottom)

Recently I used image Carousel in the project. I tried Gallery, viewflipper, and viewpager. It seems that gallery is the most suitable, but the system border of gallery is very ugly. I need to use my own background image in the project.

The following describes how to use gallery to implement image carousel.

Running effect:

Layout file:

    <FrameLayout        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:paddingLeft="16dp"        android:paddingRight="16dp"        android:paddingTop="10dp" >        <Gallery            android:id="@+id/gallery"            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:fadingEdge="none"            android:spacing="0dp" />        <RelativeLayout            android:layout_width="fill_parent"            android:layout_height="18dp"            android:layout_gravity="bottom"            android:layout_marginBottom="3dp"            android:layout_marginLeft="3dp"            android:layout_marginRight="3dp"            android:background="#80776f63"            android:gravity="center" >            <ImageView                android:id="@+id/dot_1"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:src="@drawable/ic_dot_normal" />            <ImageView                android:id="@+id/dot_2"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginLeft="10dp"                android:layout_toRightOf="@+id/dot_1"                android:src="@drawable/ic_dot_normal" />            <ImageView                android:id="@+id/dot_3"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginLeft="10dp"                android:layout_marginRight="10dp"                android:layout_toRightOf="@+id/dot_2"                android:src="@drawable/ic_dot_normal" />        </RelativeLayout>    </FrameLayout>

Android: fadingedge = "NONE" eliminates shadows on both sides of the image. Use framelayout to show small dots at the bottom

Public class mainactivity extends activity {private gallery mgallery; private int Index = 0; // record the selected Image Location private imageview [] mimageviewids; // small dot imageview array Private Static final int image_count = 3; // The number of small dots @ overridepublic void oncreate (bundle savedinstancestate) {super. oncreate (savedinstancestate); setcontentview (R. layout. activity_main); findviews (); mimageviewids [0]. setimagedrawable (getbasecontext (). get Resources (). getdrawable (R. drawable. ic_dot_focused); imageadapteradapter = new imageadapter (this); mgallery. setadapter (adapter); timer = new timer (); timer. schedule (task, 2000,200 0); mgallery. setonitemselectedlistener (onitemselectedlistener); mgallery. setonitemclicklistener (onitemclicklistener);} private void findviews () {mgallery = (Gallery) findviewbyid (R. id. gallery); mimageviewids = new imagevie W [] {(imageview) findviewbyid (R. id. dot_1), (imageview) findviewbyid (R. id. dot_2), (imageview) findviewbyid (R. id. dot_3) };} private timertask task = new timertask () {@ overridepublic void run () {message = new message (); message. what = 2; Index = mgallery. getselecteditemposition (); index ++; handler. sendmessage (Message) ;}};/*** start a thread to execute time-consuming operations */private handler = new handler () {@ overridepublic v Oid handlemessage (Message MSG) {super. handlemessage (MSG); Switch (MSG. what) {Case 2: mgallery. setselection (INDEX); break; default: Break ;}};/*** sets the dot display, position will always increase. If you want to show images cyclically, You Need To remainder the position, otherwise, the array is out of bounds */private onitemselectedlistener = new onitemselectedlistener () {@ overridepublic void onitemselected (adapterview <?> Parent, view, int position, long ID) {int Pos = position % image_count; mimageviewids [POS]. setimagedrawable (getbasecontext (). getresources (). getdrawable (R. drawable. ic_dot_focused); If (Pos> 0) {mimageviewids [pos-1]. setimagedrawable (getbasecontext (). getresources (). getdrawable (R. drawable. ic_dot_normal);} If (Pos <(image_count-1) {mimageviewids [POS + 1]. setimagedrawable (getbasecontext (). getr Esources (). getdrawable (R. drawable. ic_dot_normal);} If (Pos = 0) {mimageviewids [image_count-1]. setimagedrawable (getbasecontext (). getresources (). getdrawable (R. drawable. ic_dot_normal) ;}}@ overridepublic void onnothingselected (adapterview <?> Arg0) {// todo auto-generated method stub};/*** click the event and click the image to enter secondactivity */private onitemclicklistener = new onitemclicklistener () {@ overridepublic void onitemclick (adapterview <?> Arg0, view arg1, int POs, long arg3) {intent = new intent (); intent. setclass (mainactivity. this, secondactivity. class); startactivity (intent );}};}

The imageadapter class, which is used to describe image information by rewriting Android. widget. baseadapter.

Public class imageadapter extends baseadapter {private context; private int [] mimages = {R. drawable. bg_timeline_01, R. drawable. bg_timeline_02, R. drawable. bg_timeline_03}; Private Static final int image_px_height = 198; Public imageadapter (context) {This. context = context;} @ overridepublic int getcount () {return integer. max_value; // implement cyclic display} @ overridepublic object getitem (INT position) {return position ;}@ overridepublic long getitemid (INT position) {return position ;} @ overridepublic view getview (INT position, view convertview, viewgroup parent) {imageview = new imageview (context); imageview. setimageresource (mimages [position % mimages. length]); imageview. setscaletype (imageview. scaletype. center); imageview. setlayoutparams (new gallery. layoutparams (Gallery. layoutparams. fill_parent, image_px_height); relativelayout borderimg = new relativelayout (context); borderimg. setpadding (2, 2, 2, 2); borderimg. setbackgroundresource (R. drawable. bg_gallery); // set the imageview border borderimg. addview (imageview); Return borderimg ;}}

If you use the system background, you can write

Int mgalleryitembackground; private context mcontext; Public imageadapter (context) {mcontext = context; // you can obtain the property typedarray = obtainstyledattributes (R. styleable. gallery); mgalleryitembackground = typedarray. getresourceid (R. styleable. gallery_android_galleryitembackground, 0 );}

Set in getview

imageView.setBackgroundResource(mGalleryItemBackground);

Gallery Component Property Information is defined in res \ values \ attrs. xml

<?xml version="1.0" encoding="utf-8"?><resources><declare-styleable name="Gallery"><attr name="android:galleryItemBackground" /></declare-styleable></resources>

For more information, see http://www.eoeandroid.com/forum.php? MoD = viewthread & tid = 182297.

Custom Border Reference http://stackoverflow.com/questions/4830173/change-border-style-in-gallery