Once more time, I would like to say that this problem is not hard to do but to make it well that is not simple! By searching on the net, there are a lot of external libary help us performing this work easily. By this post, I will present Subsampling Scale Image View and I realize it is very well libary, doing well above works, it's also scale, archive and display a large image in a small device screen.
DEMO VIDEO:
Firstly, in order to use this libary, after create a new Android project, open app/build.gradle file and add this dependency:
compile 'com.davemorrissey.labs:subsampling-scale-image-view:3.4.1'Design an activity layout in contain a SubsamplingScaleImageView - a "full-featured" ImageView, like this:
In activity programmatically code, we can easily set content of this view directly from Assets by this code:
imageView = (SubsamplingScaleImageView) findViewById(R.id.image);
imageView.setImage(ImageSource.asset("android_6_marshmallow_large.jpg"));
I would like to list the main features of this view are the following:- Double tap: double tap the image to zoom in to that spot. Double tap again to zoom out.
- Fling: if you drag quickly and let go, fling momentum keeps the image moving.
- Drag: use one finger to drag the image around.
- Pinch to zoom: use a two finger pinch to zoom in and out. The zoom is centred on the pinch gesture, and you can pan at the same time.
- Quick scale: double tap and swipe up or down to zoom in or out. The zoom is centred where you tapped.
We also rotate the image by the following code:
imageView.setOrientation((imageView.getOrientation() + 90) % 360);A further special features of SubsamplingScaleImageView is scaling and archive a large image and small details will becom clearly when we zoom it.
In this main activity, I create a rotate button in ActionBar and put a note in bottom scree, full code for it:
package devexchanges.info.photoview;
import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;
import com.davemorrissey.labs.subscaleview.ImageSource;
import com.davemorrissey.labs.subscaleview.SubsamplingScaleImageView;
import java.util.Arrays;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private List<Note> notes;
private SubsamplingScaleImageView imageView;
private TextView note;
private int position = 0;
private View btnNext, btnPrev;
@SuppressLint("SetTextI18n")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
note = (TextView) findViewById(R.id.note);
btnNext = findViewById(R.id.next);
btnPrev = findViewById(R.id.previous);
locateImageView();
btnPrev.setOnClickListener(onClickListener(0));
btnNext.setOnClickListener(onClickListener(1));
notes = Arrays.asList(
new Note("Pinch to zoom", "Use two finger pinch to zoom in and out. The zoom is centred on the pinch gesture, and you can pan at the same time."),
new Note("Quick scale", "Double tap and swipe up or down to zoom in or out. The zoom is centred where you tapped."),
new Note("Drag", "Use one finger to drag the image around."),
new Note("Fling", "If you drag quickly and let go, fling momentum keeps the image moving."),
new Note("Double tap", "Double tap the image to zoom in to that spot. Double tap again to zoom out.")
);
note.setText(notes.get(position).subtitle + ": " + notes.get(0).text);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.menu_main, menu);
return super.onCreateOptionsMenu(menu);
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
if (item.getItemId() == R.id.rotate) {
//rotating image
imageView.setOrientation((imageView.getOrientation() + 90) % 360);
}
return super.onOptionsItemSelected(item);
}
@SuppressLint("SetTextI18n")
private View.OnClickListener onClickListener(final int i) {
return new View.OnClickListener() {
@Override
public void onClick(View v) {
if (v == btnNext) {
if (position < notes.size() - 1) {
position++;
note.setText(notes.get(position).subtitle + ": " + notes.get(position).text);
Toast.makeText(MainActivity.this, "Next tip!", Toast.LENGTH_SHORT).show();
}
} else {
if (position > 0) {
position--;
Toast.makeText(MainActivity.this, "Previous tip!", Toast.LENGTH_SHORT).show();
}
note.setText(notes.get(position).subtitle + ": " + notes.get(position).subtitle + ": " + notes.get(position).text);
}
}
};
}
private void locateImageView() {
imageView = (SubsamplingScaleImageView) findViewById(R.id.image);
imageView.setImage(ImageSource.asset("android_6_marshmallow_large.jpg"));
}
private class Note {
private final String text;
private final String subtitle;
public Note(String subtitle, String text) {
this.subtitle = subtitle;
this.text = text;
}
}
}
Ouput with this screen:
Over here, I've complete making a Photo View with some common features (zoom, drag, rotate,...). By visiting it's page on Github, you can find out more exciting options, through this post, I only "demo" some simple features. Hope this is helpful with your Photo View applications develope!
