Cara Membuat Contoh Widget ImageView Android

  • Post
    codeorayo
    Keymaster
    none
    ImageView adalah salah satu widget yang berfungsi sebagai komponen User Interface (Antar Muka)  yang akan  menampilkan sebuah gambar baik itu format .jpg ataupun .png. Jadi jika kalian ingin menampilkan sebuah gambar ,saat pengembangan Aplikasi Android. Kalian bisa menggunakan widget ImageView.

    Pada  tutorial belajar android kali ini ,kita akan mencoba membuat Contoh Penerapan Widget ImageView Android. Kita akan membuat dua gambar berbeda yang akan kita tampilkan dalam satu Activity. Yang dimana ketika kita ingin menampilkan gambar 1 ke 2 kita  membuat tombol dengan widget Button. Begitu juga sebaliknya. Oke jika kalian penasaran langsung saja kita buat.

    [img width=320,height=228]https://4.bp.blogspot.com/-GL555lR-XOc/Vn4FMMFMdqI/AAAAAAAAERY/VMmwqaoJTiU/s320/android-studio-tutorial.png[/img]

    1.Pertama kita akan membuat dua buah widget Button , dan widget ImageView  pada file layout activity_main.xml.

    Copykan baris instruksi berikut pada file activity_main.xml.

    activity_main.xml.


  • 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:gravity=”center_horizontal”

  •     android:orientation=”vertical”

  •     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:id=”@+id/textView”

  •         android:layout_width=”wrap_content”

  •         android:layout_height=”wrap_content”

  •         android:text=”Contoh ImageView Android”

  •         android:textSize=”22sp”

  •         android:textStyle=”bold” />

  •  

  •     

  •         android:id=”@+id/image_view”

  •         android:layout_width=”wrap_content”

  •         android:layout_height=”300dp”

  •         android:layout_below=”@id/textView”

  •         android:src=”@drawable/okedroid” />

  •  

  •     

  •         android:id=”@+id/next_image”

  •         android:layout_width=”wrap_content”

  •         android:layout_height=”wrap_content”

  •         android:layout_below=”@+id/image_view”

  •         android:onClick=”nextImage”

  •         android:text=”Gambar selanjutnya” />

  •  

  •     

  •         android:id=”@+id/previous_image”

  •         android:layout_width=”wrap_content”

  •         android:layout_height=”wrap_content”

  •         android:layout_below=”@+id/image_view”

  •         android:onClick=”previousImage”

  •         android:text=”Gambar sebelumnya” />



  • 2. Kedua kita buat sebuah file java MainActivity.java

    Copykan baris instruksi berikut pada file MainActivity.java

    MainActivity.java

  • package com.okedroid.myapplication;

  •  

  • import android.os.Bundle;

  • import android.support.v7.app.AppCompatActivity;

  • import android.view.View;

  • import android.widget.Button;

  • import android.widget.ImageView;

  •  

  • public class MainActivity extends AppCompatActivity {

  •  

  •     ImageView imageView;

  •     Button nextImage, previousImage;

  •  

  •     @Override

  •     protected void onCreate(Bundle savedInstanceState) {

  •         super.onCreate(savedInstanceState);

  •         setContentView(R.layout.activity_main);

  •  

  •         imageView = (ImageView) findViewById(R.id.image_view);

  •         nextImage = (Button) findViewById(R.id.next_image);

  •         previousImage = (Button) findViewById(R.id.previous_image);

  •         previousImage.setVisibility(View.INVISIBLE);

  •     }

  •  

  •     public void nextImage(View view) {

  •         imageView.setImageResource(R.drawable.tahunbaru);

  •         previousImage.setVisibility(View.VISIBLE);

  •         nextImage.setVisibility(View.INVISIBLE);

  •     }

  •  

  •     public void previousImage(View view) {

  •         imageView.setImageResource(R.drawable.okedroid);

  •         previousImage.setVisibility(View.INVISIBLE);

  •         nextImage.setVisibility(View.VISIBLE);

  •     }

  • }


    Oh ya sebelum itu juga pada atribut drawable bila erorr kalian harus memasukan gambarnya,terlebih dahulu lalu isikan namanya sesuai atribut yang akan dipanggil. Seperti pada gambar dibawah:

    [table]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [/table]

    [td][img width=320,height=199]https://2.bp.blogspot.com/-T4GIgF2Fizk/VoYqwJYH3zI/AAAAAAAAEYM/ZjrkblfwsQ4/s320/lokasi-folder-drawable-android-studio.png[/img][/td]
    [td]Lokasi folder drawable[/td]

    Nah sekarang kita coba jalankan Aplikasinya di Software IDE Android Studio,

    Hasilnya kurang lebih seperti gambar dibawah:

    [table]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [/table]

    [td][img width=320,height=228]https://4.bp.blogspot.com/-6zzb1k2y08U/VoYz24fFnRI/AAAAAAAAEYc/3RlqHs9Mnx4/s320/hasil-contoh-imageview-android.png[/img][/td]
    [td]Hasil Contoh ImageView Android[/td]

    Jadi ketika dijalankan Aplikasinya, ketika kita akan menekan tombol Gambar Selanjutnya maka Activity akan menampilkan gambar yang ke 2. Begitu juga sebaliknya ketika kita menekan tombol Gambar Sebelumnya  maka akan Activity menampilkan gambar yang ke 1.

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com
  • You must be logged in to reply to this topic.