How to make a fancy slide show in Android?

by / Thursday, 31 October 2013 / Published in Android

Fancy  SlideShow Application is capable to display predefined sequence of images with specified delays, text captions, voice comments or background music.

In this example we will describe different fancy slide shows. We have used following java classes and layouts to implement this.

The java classes are:

1. SimpletExample.java

2. ViewGroupExample.java

3. ViewGroupReflectionExample.java

4. XmlInflatExample.java

The layouts are:

1. layout_inflate_example.xml

2. main.xml

Code for SimpletExample.java:

public class SimpletExample extends Activity {

private FancyCoverFlow fancyCoverFlow;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.main);
this.fancyCoverFlow = (FancyCoverFlow) this.findViewById(R.id.fancyCoverFlow);

this.fancyCoverFlow.setAdapter(new FancyCoverFlowSampleAdapter());
this.fancyCoverFlow.setUnselectedAlpha(1.0f);
this.fancyCoverFlow.setUnselectedSaturation(0.0f);
this.fancyCoverFlow.setUnselectedScale(0.5f);
this.fancyCoverFlow.setSpacing(50);
this.fancyCoverFlow.setMaxRotation(0);
this.fancyCoverFlow.setScaleDownGravity(0.2f);
this.fancyCoverFlow.setActionDistance(FancyCoverFlow.ACTION_DISTANCE_AUTO);
}

}

Code for ViewGroupExample.java:

public class ViewGroupExample extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
this.setContentView(R.layout.layout_inflate_example);

FancyCoverFlow fancyCoverFlow = (FancyCoverFlow) findViewById(R.id.fancyCoverFlow);
fancyCoverFlow.setAdapter(new ViewGroupExampleAdapter());
}

private static class ViewGroupExampleAdapter extends FancyCoverFlowAdapter {

// =============================================================================
// Private members
// =============================================================================

private int[] images = {R.drawable.image1, R.drawable.image2, R.drawable.image3, R.drawable.image4, R.drawable.image5, R.drawable.image6,};

// =============================================================================
// Supertype overrides
// =============================================================================

@Override
public int getCount() {
return images.length;
}

@Override
public Integer getItem(int i) {
return images[i];
}

@Override
public long getItemId(int i) {
return i;
}

@Override
public View getCoverFlowItem(int i, View reuseableView, ViewGroup viewGroup) {
CustomViewGroup customViewGroup = null;

if (reuseableView != null) {
customViewGroup = (CustomViewGroup) reuseableView;
} else {
customViewGroup = new CustomViewGroup(viewGroup.getContext());
// customViewGroup.setLayoutParams(new FancyCoverFlow.LayoutParams(300, 600));
customViewGroup.setLayoutParams(new FancyCoverFlow.LayoutParams(250, 350));
}

customViewGroup.getImageView().setImageResource(this.getItem(i));
customViewGroup.getTextView().setText(String.format("Item %d", i));

return customViewGroup;
}
}

private static class CustomViewGroup extends LinearLayout {

// =============================================================================
// Child views
// =============================================================================

private TextView textView;

private ImageView imageView;

private Button button;

// =============================================================================
// Constructor
// =============================================================================

private CustomViewGroup(Context context) {
super(context);

this.setOrientation(VERTICAL);

this.textView = new TextView(context);
this.imageView = new ImageView(context);
this.button = new Button(context);

LinearLayout.LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
this.textView.setLayoutParams(layoutParams);
this.imageView.setLayoutParams(layoutParams);
this.button.setLayoutParams(layoutParams);

this.textView.setGravity(Gravity.CENTER);

this.imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
this.imageView.setAdjustViewBounds(true);

this.button.setText("Mettletech");
this.button.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
Intent i = new Intent(Intent.ACTION_VIEW, Uri.parse("http://mettletech.co/"));
view.getContext().startActivity(i);
}
});

this.addView(this.textView);
this.addView(this.imageView);
this.addView(this.button);
}

// =============================================================================
// Getters
// =============================================================================

private TextView getTextView() {
return textView;
}

private ImageView getImageView() {
return imageView;
}
}
}

Code for ViewGroupReflectionExample.java:

public class ViewGroupReflectionExample extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
this.setContentView(R.layout.layout_inflate_example);

FancyCoverFlow fancyCoverFlow = (FancyCoverFlow) findViewById(R.id.fancyCoverFlow);
fancyCoverFlow.setReflectionEnabled(true);
fancyCoverFlow.setReflectionRatio(0.3f);
fancyCoverFlow.setReflectionGap(0);

fancyCoverFlow.setAdapter(new ViewGroupExampleAdapter());
}

private static class ViewGroupExampleAdapter extends FancyCoverFlowAdapter {

// =============================================================================
// Private members
// =============================================================================

private int[] images = {R.drawable.image1, R.drawable.image2, R.drawable.image3, R.drawable.image4, R.drawable.image5, R.drawable.image6,};

// =============================================================================
// Supertype overrides
// =============================================================================

@Override
public int getCount() {
return images.length;
}

@Override
public Integer getItem(int i) {
return images[i];
}

@Override
public long getItemId(int i) {
return i;
}

@Override
public View getCoverFlowItem(int i, View reuseableView, ViewGroup viewGroup) {
CustomViewGroup customViewGroup = null;

if (reuseableView != null) {
customViewGroup = (CustomViewGroup) reuseableView;
} else {
customViewGroup = new CustomViewGroup(viewGroup.getContext());
//customViewGroup.setLayoutParams(new FancyCoverFlow.LayoutParams(300, 600));
customViewGroup.setLayoutParams(new FancyCoverFlow.LayoutParams(250, 350));
}

customViewGroup.getImageView().setImageResource(this.getItem(i));

return customViewGroup;
}
}

private static class CustomViewGroup extends LinearLayout {

// =============================================================================
// Child views
// =============================================================================

private ImageView imageView;

private Button button;

// =============================================================================
// Constructor
// =============================================================================

private CustomViewGroup(Context context) {
super(context);

this.setOrientation(VERTICAL);
this.setWeightSum(5);

this.imageView = new ImageView(context);
this.button = new Button(context);

LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);

this.imageView.setLayoutParams(layoutParams);
this.button.setLayoutParams(layoutParams);

this.imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
this.imageView.setAdjustViewBounds(true);

this.button.setText("Mettletech");
this.button.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
Intent i = new Intent(Intent.ACTION_VIEW, Uri.parse("http://mettletech.co/"));
view.getContext().startActivity(i);
}
});

this.addView(this.imageView);
this.addView(this.button);
}

// =============================================================================
// Getters
// =============================================================================

private ImageView getImageView() {
return imageView;
}
}
}

Code for XmlInflatExample.java:

public class XmlInflatExample extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
this.setContentView(R.layout.layout_inflate_example);

FancyCoverFlow fancyCoverFlow = (FancyCoverFlow) findViewById(R.id.fancyCoverFlow);
fancyCoverFlow.setAdapter(new FancyCoverFlowSampleAdapter());
}

}

Code for layout:

Code for main.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<in.mettletech.fancycoverflow.FancyCoverFlow
android:id="@+id/fancyCoverFlow"
android:layout_width="match_parent"
android:layout_height="match_parent"/>

</LinearLayout>

Code for layout_inflate_example.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:fcf="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

<in.mettletech.fancycoverflow.FancyCoverFlow
android:id="@+id/fancyCoverFlow"
android:layout_width="match_parent"
android:layout_height="match_parent"
fcf:maxRotation="45"
fcf:unselectedAlpha="0.3"
fcf:unselectedSaturation="0.0"
fcf:unselectedScale="0.4"
fcf:scaleDownGravity="0.5"/>

</LinearLayout>

 

TOP