Please help me in a doubt regarding Image gallery. The regular image gallery is usually found to be in a linear or straight line way i.e one image after another along a straight line. Is it possible somehow to display the images revolving around a circular path. Like below:
used this link...
https://github.com/ludovicroland/carousel-android
Gradle
compile 'fr.rolandl:carousel:1.0.1@aar'
Maven
<dependency>
<groupId>fr.rolandl</groupId>
<artifactId>carousel</artifactId>
<version>1.0.1</version>
<type>aar</type>
</dependency>
As Library Project
Alternatively, check out this repository and add it as a library project.
$ git clone https://github.com/ludovicroland/carousel-android.git Import the project into your favorite IDE and add android.library.reference.1=/path/to/carousel-android/library to your project.properties.
Layout
You need to declare the Carousel directly into your layout.
<fr.rolandl.carousel.Carousel
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/carousel"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animationDuration="200"
/>
Items
An item should be associated with a business object (a classical pojo), for example:
public final class Photo
implements Serializable
{
private static final long serialVersionUID = 1L;
public final String name;
public final String image;
public Photo(String name, String image)
{
this.name = name;
this.image = image;
}
}
with a specific layout, for example:
<TextView
android:id="@+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@android:color/black"
/>
and with a CarouselItem that should override the extractView and update methods :
public final class PhotoItem
extends CarouselItem<Photo>
{
private ImageView image;
private TextView name;
private Context context;
public PhotoItem(Context context)
{
super(context, R.layout.item);
this.context = context;
}
@Override
public void extractView(View view)
{
image = (ImageView) view.findViewById(R.id.image);
name = (TextView) view.findViewById(R.id.name);
}
@Override
public void update(Photo photo)
{
image.setImageResource(getResources().getIdentifier(photo.image, "drawable", context.getPackageName()));
name.setText(photo.name);
}
}
Adapter
You also have to create your own adapter that takes a list of business object in its constructor:
public final class MyAdapter
extends CarouselAdapter<Photo>
{
public MyAdapter(Context context, List<Photo> photos)
{
super(context, photos);
}
@Override
public CarouselItem<Photo> getCarouselItem(Context context)
{
return new PhotoItem(context);
}
}
In the Activity/Fragment
In the activity or the fragment that uses the carousel, you can find its reference:
final Carousel carousel; = (Carousel) findViewById(R.id.carousel);
create your list of business objects:
final List<Photo> photos = new ArrayList<>();
photos.add(new Photo("Photo1", "fotolia_40649376"));
photos.add(new Photo("Photo2", "fotolia_40973414"));
photos.add(new Photo("Photo3", "fotolia_48275073"));
photos.add(new Photo("Photo4", "fotolia_50806609"));
photos.add(new Photo("Photo5", "fotolia_61643329"));
create an instance of your adapter:
final CarouselAdapter adapter = adapter = new MyAdapter(this, photos);
carousel.setAdapter(adapter);
adapter.notifyDataSetChanged();
Listeners
You can also use some listeners on the carousel.
The OnItemClickListener:
carousel.setOnItemClickListener(new OnItemClickListener()
{
@Override
public void onItemClick(CarouselBaseAdapter<?> carouselBaseAdapter, View view, int position, long id)
{
Toast.makeText(getApplicationContext(), "The item '" + position + "' has been clicked", Toast.LENGTH_SHORT).show();
carousel.scrollToChild(position);
}
});
The OnItemLongClickListener:
carousel.setOnItemLongClickListener(new OnItemLongClickListener()
{
@Override
public boolean onItemLongClick(CarouselBaseAdapter<?> carouselBaseAdapter, View view, int position, long id)
{
Toast.makeText(getApplicationContext(), "The item '" + position + "' has been long clicked", Toast.LENGTH_SHORT).show();
carousel.scrollToChild(position);
return false;
}
});
see also this link..
We need to create 2 xml file, 1) for Oval drawable and 2) for layout design. Create below 2 files and add that into your project.
drwbl_ovalview.xml (res --> drawable)
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke
android:width="5dp"
android:color="#5EC7F1" />
</shape>
activity_main.xml (res --> layout)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="250dp"
android:layout_margin="16dp">
<ImageView
android:id="@+id/imgvw_ovalview"
android:layout_width="match_parent"
android:layout_height="250dp"
android:layout_margin="25dp"
android:src="@drawable/drwbl_ovalview"
android:contentDescription="Images"/>
<ImageView
android:id="@+id/imgvw_yahoo"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:src="@drawable/yahoo_icon"
android:contentDescription="Yahoo images"/>
<ImageView
android:id="@+id/imgvw_messenger"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true"
android:src="@drawable/messenger_icon"
android:contentDescription="Messenger images"/>
<ImageView
android:id="@+id/imgvw_google"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:src="@drawable/google_icon"
android:contentDescription="Google images"/>
<ImageView
android:id="@+id/imgvw_facebook"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:src="@drawable/facebook_icon"
android:contentDescription="Facbook image"/>
</RelativeLayout>
</LinearLayout>
Review screenshot of above code
