You are on page 1of 5

Widget ZoomControls Android

Disadur dari Okedroid.com

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).

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 danImageView.

Oh ya sebelumnya kalian bisa menyiapkan gambar, untuk contoh saya


menggunakan gambar billgates dan menyimpanya di folder res/drawable.
seperti pada tampilan di bawah:

file gambar di folder drawable


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

activity_main.xml
1. <?xml version="1.0" encoding="utf-8"?>
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. xmlns:tools="http://schemas.android.com/tools"
4. android:layout_width="match_parent"
5. android:layout_height="match_parent"
6. android:paddingBottom="@dimen/activity_vertical_margin"
7. android:paddingLeft="@dimen/activity_horizontal_margin"
8. android:paddingRight="@dimen/activity_horizontal_margin"
9. android:paddingTop="@dimen/activity_vertical_margin"
10. android:layout_marginTop="?android:attr/actionBarSize"
11. >
12.
13. <ImageView
14. android:id="@+id/imageView1"
15. android:layout_width="wrap_content"
16. android:layout_height="wrap_content"
17. android:layout_centerHorizontal="true"
18. android:layout_centerVertical="true"
19. android:src="@drawable/bill_gates" />
20.
21. <TextView
22. android:layout_width="fill_parent"
23. android:layout_height="wrap_content"
24. android:text="Bill gates adalah seorang pendiri Microsoft dia dulu sempat di lempari botol oleh
orang-orang"
25. android:id="@+id/textView"
26. android:layout_above="@+id/zoomControls"
27. android:layout_alignParentLeft="true"
28. android:layout_alignParentStart="true" />
29.
30. <ZoomControls
31. android:layout_width="wrap_content"
32. android:layout_height="wrap_content"
33. android:id="@+id/zoomControls"
34. android:layout_alignParentBottom="true"
35. android:layout_alignParentRight="true"
36. android:layout_alignParentEnd="true" />
37.
38.
39.
40.
41. </RelativeLayout>

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 :

Hasil Zoom Controls Android

Dengan menggunakan Widget Zoom Controls kalian dapat membesarkan atau


mengkecilkan text ataupun gambar.

You might also like