Gallery,Imageview and ImageSwitcher View - Hallo sahabat Google Android Developer Tutorial, Pada Artikel yang anda baca kali ini dengan judul Gallery,Imageview and ImageSwitcher View, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Gallery,Imageview and ImageSwitcher View
link : Gallery,Imageview and ImageSwitcher View

Gallery,Imageview and ImageSwitcher View

GALLERY AND IMAGE VIEWTutorial

Gallery can be used to show Views in a horizontal list, and user can select a View , User selected view will be shown in center of the Horizontal list.The items of Gallery are populated from an Adapter, similar to ListView, in which ListView items are populated from an Adapter.We need to create an Adapter class which extends BaseAdapter class and override getView() method. getView() method called automatically for all items of Gallery (similar to list view in which getView() method called for each item of ListView) .
Gallery view together with an ImageView view to display a series of thumbnail images so that when one is selected, the selected image is displayed in the ImageView view.The Gallery is a view that shows items (such as images) in a center-locked, horizontal scrolling list. Figure 1 shows the Gallery view used in the Android Market.(Gallery view is deprecated from Android 4.2 use viewPager instead of Gallery view)

Figure 1: The Gallery view used in the Android Market

To see how the Gallery view works.
1.Create Project names ,package name,Activity and layout xml as listed in table below

Property name	Property value
Project name	SRM_GalleryViewTutorial
Package name	in.ac.srmuniv.gallerviewtutorial
Activity name	MainActivity
Layout xml name	activity_main

2.Add the code to the file activity_main.xml in res/layout folder

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical" >

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="Images of SRM University" />

<Gallery

android:id="@+id/gallery1"

android:layout_width="fill_parent"

android:layout_height="wrap_content" />

<ImageView

android:id="@+id/srm1"

android:layout_width="320px"

android:layout_height="250px"

android:scaleType="fitXY" />

</LinearLayout>

3.Add a new file to the res/values folder and name it as attrs.xml. Populate it with the following:

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <declare-styleable name="Gallery1">

        <attr name="android:galleryItemBackground" />

    </declare-styleable>

</resources>

The Gallery1 style is used to apply to images displayed in the Gallery view so that the each image has a border around it (see Figure 2).

Figure 2: Gallery view, with borders on images

4.Add a few images to the res/drawable folder (see Figure 3).

Figure 3: Adding images

5.Copy the code in MainActivity.java Activity

package in.ac.srmuniv.galleryviewtutorial;

import in.ac.srmuniv.galleryviewtutorial.R;

import android.app.Activity;

import android.content.Context;

import android.content.res.TypedArray;

import android.os.Bundle;

import android.view.View;

import android.view.ViewGroup;

import android.widget.AdapterView;

import android.widget.BaseAdapter;

import android.widget.Gallery;

import android.widget.ImageView;

import android.widget.Toast;

import android.widget.AdapterView.OnItemClickListener;

public class MainActivity extends Activity

{

// ---the images to display---

Integer[] imageIDs = {

R.drawable.srm1,

R.drawable.srm2,

R.drawable.srm3,

R.drawable.srm4,

R.drawable.srm5,

R.drawable.srm6,

R.drawable.srm7,

R.drawable.srm8,

};

@Override

public void onCreate(Bundle savedInstanceState)

{

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

Gallery gallery = (Gallery) findViewById(R.id.gallery1);

gallery.setAdapter(new ImageAdapter(this));

gallery.setOnItemClickListener(new OnItemClickListener()

{

public void onItemClick(AdapterView parent, View v, int position,

long id)

{

// ---display the images selected---

ImageView imageView = (ImageView) findViewById(R.id.srm1);

imageView.setImageResource(imageIDs[position]);

}

});

}

public class ImageAdapter extends BaseAdapter

{

private Context context;

private int itemBackground;

public ImageAdapter(Context c)

{

context = c;

// ---setting the style---

TypedArray a = obtainStyledAttributes(R.styleable.Gallery1);

itemBackground = a.getResourceId(

R.styleable.Gallery1_android_galleryItemBackground, 0);

a.recycle();

}

// ---returns the number of images---

public int getCount() {

return imageIDs.length;

}

// ---returns the ID of an item---

public Object getItem(int position) {

return position;

}

public long getItemId(int position) {

return position;

}

// ---returns an ImageView view---

public View getView(int position, View convertView, ViewGroup parent) {

ImageView imageView = new ImageView(context);

imageView.setImageResource(imageIDs[position]);

imageView.setScaleType(ImageView.ScaleType.FIT_XY);

imageView.setLayoutParams(new Gallery.LayoutParams(150, 120));

imageView.setBackgroundResource(itemBackground);

return imageView;

}




6.No need to modify  Androidmanifest.xml code

7.Run the application on the Android emulator. Figure 4 shows the Gallery view in action. You can scroll through the list of thumbnail images by swiping it. When an image is selected, the name of the image selected will be displayed by the Toast class.

Figure 4: The Gallery view in action with sliding images over swipe.

Figure 5: Selected image displayed in ImageView view
CODE EXPLANATION:
You create the ImageAdapter class (which extends the BaseAdapter class) so that it can bind to the Gallery view with a series of ImageView views. The ImageView view is used to display images.
When an image in the Gallery view is selected (or clicked), the position of the image selected is displayed.
If you want to display the selected image in an ImageView view, modify the onItemClick() method so that the selected image is shown in the ImageView (image1) view.

              public  void onItemClick(AdapterView parent,View v, int position, long id)

//---display the images selected---

                ImageView imageView = (ImageView) findViewById(R.id.image1);

                imageView.setImageResource(imageIDs[position]);

When an image is selected, it will now be displayed in the ImageView view below (see Figure 5).

GALLERY AND IMAGESWITCHER VIEW

ImageSwitcher benefits you if want a sliding display of multiple images.It helps to Scale images to fit screen.Making animation control while sliding.View recycling to save memory.
1.Create Android project as per the details listed in the table.

Property name	Property value
Project name	SRM_ImageSwitcherView
Package name	in.ac.srmuniv.imageswitcherview
Activity name	MainActivity
Layout xml name	activity_main

2.Code for activity_main.xml in res/layout folder
<?xml version="1.0"encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="#ff000000"

android:orientation="vertical" >

<ImageSwitcher

android:id="@+id/switcher1"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_alignParentBottom="true"

android:layout_alignParentLeft="true"

android:layout_alignParentRight="true" />

<Gallery

android:id="@+id/gallery1"

android:layout_width="fill_parent"

android:layout_height="wrap_content" />

</RelativeLayout>
3.Code for resources.xml in res/value folder

<?xml version="1.0" encoding="utf-8"?>

<declare-styleable name="Gallery1">

</declare-styleable>

</resources>
Figure 1 Shows Project anatomy

4.Code for MainActivity.java Activity

package in.ac.srmuniv.imageswitcherview;

import android.app.Activity;

import android.content.Context;

import android.content.res.TypedArray;

import android.os.Bundle;

import android.view.View;

import android.view.ViewGroup;

import android.view.animation.AnimationUtils;

import android.widget.AdapterView;

import android.widget.BaseAdapter;

import android.widget.~~Gallery~~;

import android.widget.~~Gallery~~.LayoutParams;

import android.widget.ViewSwitcher.ViewFactory;

import android.widget.ImageSwitcher;

import android.widget.ImageView;

import android.widget.AdapterView.OnItemClickListener;

public class MainActivity extends Activity implements ViewFactory {

// ---the images to display---

Integer[] imageIDs = { R.drawable.srm1, R.drawable.srm2, R.drawable.srm3,

R.drawable.srm4, R.drawable.srm5, R.drawable.srm6, R.drawable.srm7 };

private ImageSwitcher imageSwitcher;

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

imageSwitcher = (ImageSwitcher) findViewById(R.id.switcher1);

imageSwitcher.setFactory(this);

imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,

android.R.anim.fade_in));

imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,

android.R.anim.fade_out));

~~Gallery~~ gallery = (~~Gallery~~) findViewById(R.id.gallery1);

gallery.setAdapter(new ImageAdapter(this));

gallery.setOnItemClickListener(new OnItemClickListener() {

public void onItemClick(AdapterView parent, View v, int position,

long id) {

imageSwitcher.setImageResource(imageIDs[position]);

}

});

}

public View makeView() {

ImageView imageView = new ImageView(this);

imageView.setBackgroundColor(0xFF000000);

imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);

imageView.setLayoutParams(new ImageSwitcher.LayoutParams(

LayoutParams.~~FILL_PARENT~~, LayoutParams.~~FILL_PARENT~~));

return imageView;

}

public class ImageAdapter extends BaseAdapter {

private Context context;

private int itemBackground;

public ImageAdapter(Context c) {

context = c;

// ---setting the style---

TypedArray a = obtainStyledAttributes(R.styleable.Gallery1);

itemBackground = a.getResourceId(

R.styleable.Gallery1_android_galleryItemBackground, 0);

a.recycle();

}

// ---returns the number of images---

public int getCount() {

return imageIDs.length;

}

// ---returns the ID of an item---

public Object getItem(int position) {

return position;

}

public long getItemId(int position) {

return position;

}

// ---returns an ImageView view---

public View getView(int position, View convertView, ViewGroup parent) {

ImageView imageView = new ImageView(context);

imageView.setImageResource(imageIDs[position]);

imageView.setScaleType(ImageView.ScaleType.FIT_XY);

imageView.setLayoutParams(new ~~Gallery~~.LayoutParams(150, 120));

imageView.setBackgroundResource(itemBackground);

return imageView;

}


5.No need to Modify the AndroidManifest.xml file 

5.Run the project in emulator



       Figure 1: The ImageSwitcher in action Figure 2 Shows selected image in displayed in ImageView

CODE EXPLANATION

The MainActivity class implements the ViewFactory class. The ViewFactory class creates the views in a ViewSwitcher view. When your class implements the ViewFactory interface, you need to override the makeView() method, which creates a new View to be added in a ViewSwitcher.Run the application and observe the ImageSwitcher in action as shown in Figure 1.

Demikianlah Artikel Gallery,Imageview and ImageSwitcher View

Sekianlah artikel Gallery,Imageview and ImageSwitcher View kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Gallery,Imageview and ImageSwitcher View dengan alamat link https://googleandroiddevelopertutorial.blogspot.com/2012/09/galleryimageview-and-imageswitcher-view.html

Gallery,Imageview and ImageSwitcher View

4/ 5

Oleh Unknown

Unknown 4:43 AM Komentar

Google Android Developer Tutorial

Tuesday, September 18, 2012