Android Image Viewer Look and Feel

Nigel December 16, 2015 8:07 am

The android image viewer look and feel tutorial is an introduction to a new tutorial series for beginners to android.

Where the viewers will be shown how to create a basic android application that loads an image thumbnail and then displays it on the full screen.

This android tutorial series targeted towards beginners to android who would like to learn how to create a basic android application.

For this tutorial we will be working on the android image viewer look and feel.

Get Code

The code to start this tutorial is on github here

https://github.com/mobapptuts/android_image_viewer.git Tag image-viewer-look-feel

or you can run this command

git clone –branch image-viewer-look-feel https://github.com/mobapptuts/android_image_viewer.git

Code Samples

Fix for the design layout view

There is a bug in android shows an error when viewing the layout in the design view as demonstrated below

The fix can be made by changing this line in the styes.xml file from

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

<style name="AppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar">

The layout file which includes the ImageView

<?xml version="1.0" encoding="utf-8"?>
<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="mobapptut.com.imageviewer.ImageViewMainActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/imageView"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true" />
</RelativeLayout>

Accessing the ImageView in code

public class VideoImageMainActivity extends AppCompatActivity {

private ImageView imageView;

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_video_image_main);

        imageView = (ImageView) findViewById(R.id.imageView);
 }
}