Image Slideshow with button and music controls in Android

Hello Guys , how are you today? Its super Friday.

In this blog e are going to see how to make an image slideshow with button and music controls in Android. So ,lets get started.

Download

1) First of all create an Android Application Project.

2) Go to "res/layout/activity_main.xml" and create two image buttons there. This code looks like

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

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    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=".MainActivity"

    android:background="@drawable/costume1"

    android:id ="@+id/back" >



    <ImageButton 

        android:layout_height="wrap_content"

        android:layout_width = "wrap_content"

        android:layout_alignParentLeft="true"

        android:layout_centerInParent="true"

        android:layout_centerHorizontal="true"

        android:src="@drawable/left"

        android:background="@null"

        android:id="@+id/left"

        android:alpha="0.5"

        />

    

    <ImageButton 

        android:layout_height="wrap_content"

        android:layout_width = "wrap_content"

        android:layout_alignParentRight="true"

        android:layout_centerInParent="true"

        android:layout_centerHorizontal="true"

        android:src="@drawable/right"

        android:background="@null"

        android:id="@+id/right"

        android:alpha="0.5"/>



    <ImageButton

        android:id="@+id/music"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentBottom="true"

        android:layout_alignParentRight="true"

        android:background="@null"

        android:src="@drawable/mute1" />



</RelativeLayout>

The images used here can be get through the project file in the download link above.

3) Now go to "src/your_package_name/MainActivity.java" and copy paste the below code.

import java.util.ArrayList;

import android.media.MediaPlayer;

import android.os.Bundle;

import android.app.Activity;

import android.content.res.Resources;

import android.graphics.drawable.Drawable;

import android.view.Menu;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.ImageButton;

import android.widget.RelativeLayout;



public class MainActivity extends Activity implements OnClickListener {

    

    ImageButton left,right,music;

    MediaPlayer mp;

    RelativeLayout back;

    ArrayList<Integer> imagearray;

    Resources res;Drawable drawable;

    int track=0;boolean flag=false;



    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        

        imagearray = new ArrayList<Integer>();

        

        back = (RelativeLayout) findViewById(R.id.back);

        left= (ImageButton) findViewById(R.id.left);

        right= (ImageButton) findViewById(R.id.right);

        music= (ImageButton) findViewById(R.id.music);

        //left.setAlpha(45);

        //right.getBackground().setAlpha(45);

        left.setOnClickListener(this);

        right.setOnClickListener(this);

        music.setOnClickListener(this);

        setup();

        res = getResources(); 

    }



    private void setup() {

        // TODO Auto-generated method stub

        imagearray.add(R.drawable.costume1);

        imagearray.add(R.drawable.costume2);

        imagearray.add(R.drawable.costume3);

        imagearray.add(R.drawable.costume4);

        imagearray.add(R.drawable.costume5);

        

        if(track==0) {

            left.setEnabled(false);

            left.setVisibility(View.GONE);

        }

        

        mp=MediaPlayer.create(this, R.raw.music);

        mp.start();

    }



    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        // Inflate the menu; this adds items to the action bar if it is present.

        //getMenuInflater().inflate(R.menu.main, menu);

        return true;

    }



    @Override

    public void onClick(View v) {

        // TODO Auto-generated method stub

        switch(v.getId()) {

        case R.id.left: if(track!=0)track--;

        checkview();

        //drawable = res.getDrawable(imagearray.get(track));

        back.setBackgroundResource(imagearray.get(track));

        break;

        

        case R.id.right: if(track!=imagearray.size()-1) track++;

        checkview();

        //drawable = res.getDrawable(imagearray.get(track));

        back.setBackgroundResource(imagearray.get(track));

        break;

        

        case R.id.music : if(!flag){

            mp.pause();

            music.setImageResource(R.drawable.sound1);

            flag = true;

        }else{

            flag = false;

            mp.start();

            music.setImageResource(R.drawable.mute1);

        }

        }

    }



    private void checkview() {

        // TODO Auto-generated method stub

        if(track==0) {

            left.setEnabled(false);

            left.setVisibility(View.GONE);

        }else {

            left.setEnabled(true);

            left.setVisibility(View.VISIBLE);

        }

        if(track==imagearray.size()-1) {

            right.setEnabled(false);

            right.setVisibility(View.GONE);

        }else {

            right.setEnabled(true);

            right.setVisibility(View.VISIBLE);

        }

    }

    



}

In this code we are traversing the arraylist using a variable track and changing the background of relativelayout accordingly.

Now we are done. Post your questions in the comment. I will be happy to answer those.

For more info visit on facebook https://www.facebook.com/androidcoolstuffs

Thank you