ads_header

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 :
  1. activity_main.xml
  2. full_image.xml
  3. grid_layout.xml
  1. MainActivity.java
  2. Adapter1.java
  3. Adapter2.java
  4. FullImage.java
  5. 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

If your image is ready, we move the class section, then open Adapter1.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.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.

2 comments:

  1. Best casino bonuses 2021 - JammyHub
    The best slots and the best 창원 출장마사지 casino 익산 출장안마 bonuses at JTJH.com. Get your free 김제 출장마사지 spins on 제주 출장마사지 some of our latest slots 청주 출장마사지 and table games.

    ReplyDelete

Powered by Blogger.