Cara Menerapkan Contoh Widget ZoomControls Android

CODEORAYO COMMUNITY Programming Tutorial Mobile Development Cara Menerapkan Contoh Widget ZoomControls Android

  • Post
    codeorayo
    Keymaster
    none
    ZoomControls  adalah suatu widget yang mendukung komponen User Interface(Antar Muka), yang dapat membesarkan(Zoom in) atau mengkecilkan(Zoom out) baik itu text maupun gambar.Widget ini termasuk widget yang sangat lawas penggunaanya , karna biarpun sudah lama tapi masih bisa digunakan sampai library yang sekarang (v23 Appcompat).

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

    Quote:

    Pada tutorial belajar android kali ini , kita akan menerapkan Contoh widget dari ZoomControls yang dimana widget ini akan menampilkan button Zoom in dan Zoom Out. Dan disini kita akan mencoba menggunakanya pada TextView dan ImageView.

    Oh ya sebelumnya kalian bisa menyiapkan gambar, untuk contoh saya menggunakan gambar billgates dan menyimpanya di folder res/drawable.

     seperti pada tampilan di bawah:

    [table]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [/table]

    [td][img width=320,height=131]https://4.bp.blogspot.com/-TsvzkMJAX00/Vp9OuaqrctI/AAAAAAAAEic/GnfwLFXRyC4/s320/file-gambar-di-folder-drawable.png[/img][/td]
    [td]file gambar di folder drawable[/td]

    1. Pertama pastinya kita akan menerapkan baris instruksi (codingan) dibawah pada file activity_main.xml dan juga MainActivity.java.

    activity_main.xml


    1. http://schemas.android.com/apk/res/android“

    2.                 xmlns:tools=”http://schemas.android.com/tools

    3.                 android:layout_width=”match_parent”

    4.                 android:layout_height=”match_parent”

    5.                 android:paddingBottom=”@dimen/activity_vertical_margin”

    6.                 android:paddingLeft=”@dimen/activity_horizontal_margin”

    7.                 android:paddingRight=”@dimen/activity_horizontal_margin”

    8.                 android:paddingTop=”@dimen/activity_vertical_margin”

    9.                 android:layout_marginTop=”?android:attr/actionBarSize”

    10.                 >

    11.  

    12.     

    13.         android:id=”@+id/imageView1″

    14.         android:layout_width=”wrap_content”

    15.         android:layout_height=”wrap_content”

    16.         android:layout_centerHorizontal=”true”

    17.         android:layout_centerVertical=”true”

    18.         android:src=”@drawable/bill_gates” />

    19.  

    20.     

    21.         android:layout_width=”fill_parent”

    22.         android:layout_height=”wrap_content”

    23.         android:text=”Bill gates adalah seorang pendiri Microsoft dia dulu sempat di lempari botol oleh orang-orang”

    24.         android:id=”@+id/textView”

    25.         android:layout_above=”@+id/zoomControls”

    26.         android:layout_alignParentLeft=”true”

    27.         android:layout_alignParentStart=”true” />

    28.  

    29.     

    30.         android:layout_width=”wrap_content”

    31.         android:layout_height=”wrap_content”

    32.         android:id=”@+id/zoomControls”

    33.         android:layout_alignParentBottom=”true”

    34.         android:layout_alignParentRight=”true”

    35.         android:layout_alignParentEnd=”true” />

    36.  

    37.  

    38.  

    39.  



    40. MainActivity.java.

      1. package com.okedroid.fathur.myapplication;

      2.  

      3. import android.os.Bundle;

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

      5. import android.view.View;

      6. import android.widget.ImageView;

      7. import android.widget.RelativeLayout;

      8. import android.widget.TextView;

      9. import android.widget.ZoomControls;

      10.  

      11.  

      12. public class MainActivity extends AppCompatActivity {

      13.     ZoomControls zoom;

      14.     ImageView img;

      15.     TextView txt;

      16.  

      17.  

      18.     @Override

      19.     protected void onCreate(Bundle savedInstanceState) {

      20.         super.onCreate(savedInstanceState);

      21.         setContentView(R.layout.activity_main);

      22.  

      23.  

      24.        

      25.         txt = (TextView) findViewById(R.id.textView);

      26.         img = (ImageView) findViewById(R.id.imageView1);

      27.         zoom = (ZoomControls) findViewById(R.id.zoomControls);

      28.  

      29.         zoom.setOnZoomInClickListener(new View.OnClickListener() {

      30.  

      31.             @Override

      32.             public void onClick(View v) {

      33.                 // TODO Auto-generated method stub

      34.  

      35.                 int w = img.getWidth();

      36.                 int h = img.getHeight();

      37.                 int wt = txt.getWidth();

      38.                 int ht = txt.getHeight();

      39.  

      40.                 RelativeLayout.LayoutParams params =

      41.                         new RelativeLayout.LayoutParams(w + 10, h + 10);

      42.                 new RelativeLayout.LayoutParams(wt + 10, ht + 10);

      43.                 params.addRule(RelativeLayout.CENTER_IN_PARENT);

      44.  

      45.                 img.setLayoutParams(params);

      46.                 txt.setLayoutParams(params);

      47.             }

      48.         });

      49.  

      50.         zoom.setOnZoomOutClickListener(new View.OnClickListener() {

      51.  

      52.             @Override

      53.             public void onClick(View v) {

      54.                 // TODO Auto-generated method stub

      55.  

      56.                 int w = img.getWidth();

      57.                 int h = img.getHeight();

      58.                 int wt = txt.getWidth();

      59.                 int ht = txt.getHeight();

      60.  

      61.                 RelativeLayout.LayoutParams params =

      62.                         new RelativeLayout.LayoutParams(w – 10, h – 10);

      63.                 new RelativeLayout.LayoutParams(wt – 10, ht – 10);

      64.                 params.addRule(RelativeLayout.CENTER_IN_PARENT);

      65.  

      66.                 img.setLayoutParams(params);

      67.                 txt.setLayoutParams(params);

      68.             }

      69.         });

      70.     }

      71.  

      72. }


        2. Setelah di copy semuanya ,mari kita lihat hasilnya , dengan cara menjalankan aplikasinya di Android Studio.

        Hasilnya :

        [table]

        [tr]

        [/tr]

        [tr]

        [/tr]

        [/table]

        [td][img width=163,height=320]https://2.bp.blogspot.com/-XPj5MObQCXo/Vp9RVLnuf-I/AAAAAAAAEio/zrvHPPioXmc/s320/hasil-zoomcontrol-android.png[/img][/td]
        [td]Hasil Zoom Controls Android

        [/td]

      • You must be logged in to reply to this topic.