Create Images Gallery Android Studio
Hello guys, in this post I will discuss Android again. Yupp, I will try to explain about how to create an image gallery application that has two views, the first is the grid model and the second with the slide model according to the picture above.
Okay, first open Android Studio and create a new project. If it's ready, open it in the res> values> colors.xml and replace it with the following color (Optional)
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#00695C</color>
<color name="colorPrimaryDark">#004D40</color>
<color name="colorAccent">#ffffff</color>
</resources>
Next, open the res> menu> menu_main.xml then replace it with the following code
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/change"
android:orderInCategory="100"
android:title="Switch"
app:showAsAction="always" />
</menu>
And here we need 3 layouts and 5 class :
- activity_main.xml
- full_image.xml
- grid_layout.xml
- MainActivity.java
- Adapter1.java
- Adapter2.java
- FullImage.java
- galeri2.java
Okay, if everything is ready, now open activity_main.xml and enter the following code
<LinearLayout 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:orientation="vertical"
tools:context=".MainActivity">
<ImageView
android:id="@+id/selectedImageView"
android:layout_width="match_parent"
android:layout_height="400dp"
android:scaleType="fitXY" />
<Gallery
android:id="@+id/simpleGallery"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:unselectedAlpha="50" />
</LinearLayout>
Next, open grid_layout.xml and enter the following code
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/grid_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numColumns="auto_fit"
android:columnWidth="110dp"
android:padding="5dp"
android:verticalSpacing="10dp"
android:gravity="center"
android:stretchMode="columnWidth"
android:background="@null">
</GridView>
Next, open full_image.xml and enter the following code so that the image appears with a full screen
<?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"
android:background="#000000" >
<ImageSwitcher
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/imageSwitcher"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true">
<ImageView android:id="@+id/full_image_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</ImageSwitcher>
</LinearLayout>
When it's finished, we need to prepare some images in the drawable folder in our project, and here I use 13 images
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
public class Adapter1 extends BaseAdapter {
private Context mContext;
public Integer[] mThumbIds = {
R.drawable.img1,
R.drawable.img2,
R.drawable.img3,
R.drawable.img4,
R.drawable.img5,
R.drawable.img6,
R.drawable.img7,
R.drawable.img8,
R.drawable.img9,
R.drawable.img10,
R.drawable.img11,
R.drawable.img12,
R.drawable.img13
};
public Adapter1(Context c){
mContext = c;
}
@Override
public int getCount() {
return mThumbIds.length;
}
@Override
public Object getItem(int position) {
return mThumbIds[position];
}
@Override
public long getItemId(int position) {
return 0;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView = new ImageView(mContext);
imageView.setImageResource(mThumbIds[position]);
imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
imageView.setLayoutParams(new GridView.LayoutParams(200, 200));
return imageView;
}
}
Next, open Adapter2.java and enter the following code
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageView;
public class Adapter2 extends BaseAdapter {
private Context context;
private int[] images;
public Adapter2(Context c, int[] images) {
context = c;
this.images = images;
}
public int getCount() {
return images.length;
}
public Object getItem(int position) {
return position;
}
public long getItemId(int position) {
return position;
}
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView = new ImageView(context);
imageView.setImageResource(images[position]);
imageView.setLayoutParams(new Gallery.LayoutParams(200, 200));
return imageView;
}
}
We move to FullImage.java and enter the following code
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.MotionEvent;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.Toast;
public class FullImage extends Activity {
ImageSwitcher Switch;
ImageView images;
float initialX;
Adapter1 imageAdapter;
private int position ;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.full_image);
Switch = (ImageSwitcher) findViewById(R.id.imageSwitcher);
Intent i = getIntent();
position = i.getExtras().getInt("id");
imageAdapter = new Adapter1(this);
images = (ImageView) findViewById(R.id.full_image_view);
images.setImageResource(imageAdapter.mThumbIds[position]);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
initialX = event.getX();
break;
case MotionEvent.ACTION_UP:
float finalX = event.getX();
if (initialX > finalX) {
if (position == imageAdapter.mThumbIds.length-1) {
position = 0;
images.setImageResource(imageAdapter.mThumbIds[0]);
Toast.makeText(getApplicationContext(), "First Image",
Toast.LENGTH_LONG).show();
Switch.showPrevious();
} else {
position++;
images.setImageResource(imageAdapter.mThumbIds[position]);
Toast.makeText(getApplicationContext(), "Next Image",
Toast.LENGTH_LONG).show();
Switch.showNext();
}
}
else
{
if(position > 0)
{
position= position-1;
images.setImageResource(imageAdapter.mThumbIds[position]);
Toast.makeText(getApplicationContext(), "Previous Image",
Toast.LENGTH_LONG).show();
Switch.showPrevious();
}
else
{
position = imageAdapter.mThumbIds.length-1;
images.setImageResource(imageAdapter.mThumbIds[position]);
Toast.makeText(getApplicationContext(), "Last Image",
Toast.LENGTH_LONG).show();
Switch.showPrevious();
}
}
break;
}
return false;
}
}
Now, open MainActivity.java then enter the following code
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.Gallery;
import android.widget.ImageView;
public class MainActivity extends AppCompatActivity {
Gallery simpleGallery;
Adapter2 customGalleryAdapter;
ImageView selectedImageView;
int[] images = {R.drawable.img1,
R.drawable.img2,
R.drawable.img3,
R.drawable.img4,
R.drawable.img5,
R.drawable.img6,
R.drawable.img7,
R.drawable.img8,
R.drawable.img9,
R.drawable.img10,
R.drawable.img11,
R.drawable.img12,
R.drawable.img13};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
simpleGallery = (Gallery) findViewById(R.id.simpleGallery);
selectedImageView = (ImageView) findViewById(R.id.selectedImageView);
customGalleryAdapter = new Adapter2(getApplicationContext(), images);
simpleGallery.setAdapter(customGalleryAdapter);
selectedImageView.setImageResource(images[0]);
simpleGallery.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
selectedImageView.setImageResource(images[position]);
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.change) {
startActivity(new Intent(MainActivity.this,galeri2.class));
finish();
return true;
}
return super.onOptionsItemSelected(item);
}
}
And finally, open galeri2.java and enter the following code
import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
public class galeri2 extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.grid_layout);
GridView gridView = (GridView) findViewById(R.id.grid_view);
gridView.setAdapter(new Adapter1(this));
gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
Intent i = new Intent(getApplicationContext(), FullImage.class);
i.putExtra("id", position);
startActivity(i);
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.change) {
startActivity(new Intent(galeri2.this,MainActivity.class));
finish();
return true;
}
return super.onOptionsItemSelected(item);
}
}
If there is no error here, the last step is to open manifests.xml and enter the following code
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="your package">
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="By Ndiappink"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:theme="@style/AppTheme">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name=".FullImage"
android:label="@string/app_name"
android:theme="@style/AppTheme">
</activity>
<activity
android:name=".galeri2"
android:label="@string/app_name"
android:theme="@style/AppTheme">
</activity>
</application>
</manifest>
Okay, now the program is ready to run.
