Membuat Gambar / Text Zoom In Dan Zoom Out

Widget Zoom Control adalah widget yang mendukung UI (User Interface) atau disebut juga antar muka, yang dapat membersarkan dan mengecilkan text ataupun gambar.

Pada tutorial berikut ini kita akan belajar bagaimana menerapkan Widget Zoom In Dan Zoom Out yang dimana widget ini akan menampilkan botton Zoom in dan Zoom out. dan pada  tutorial berikut ini kita akan menggunakanya pada TextView dan ViewImage.

Langsung saja kita kita membuat program nya

1. Buat lah project baru.
2. Copy paste kan gambar ke dalam file drawable dan beri nama "img_coba"

3. Buka acitivty_main.xml dan ketikan kode di bawah ini:

<?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"    android:layout_marginTop="?android:attr/actionBarSize">
    <ImageView        android:id="@+id/imageView1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerHorizontal="true"        android:layout_centerVertical="true"        android:src="@drawable/img_coba" />
    <TextView        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:text="www.tipblack.blogspot.com adalah situs yang mempelajari tentnag sistem informasi dan program"        android:id="@+id/textView"        android:layout_above="@+id/zoomControls"        android:layout_alignParentLeft="true"        android:layout_alignParentStart="true" />
    <ZoomControls        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:id="@+id/zoomControls"        android:layout_alignParentBottom="true"        android:layout_alignParentRight="true"        android:layout_alignParentEnd="true" />

</RelativeLayout>

Dari kode di atas akan menampilkan tampilan sebagai berikut

4. Dan selanjutnya buka MainAcitivity.java untuk melakukan pengkodean..

untuk lebih mudahnya ketikan kode di bawah ini

package com.example.farisa.myapplication;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.ZoomControls;


public class MainActivity extends AppCompatActivity {
    ZoomControls zoom;
    ImageView img;
    TextView txt;
    @Override    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        txt = (TextView) findViewById(R.id.textView);
        img = (ImageView) findViewById(R.id.imageView1);
        zoom = (ZoomControls) findViewById(R.id.zoomControls);

        zoom.setOnZoomInClickListener(new View.OnClickListener() {

            @Override            public void onClick(View v) {
                // TODO Auto-generated method stub
                int w = img.getWidth();
                int h = img.getHeight();
                int wt = txt.getWidth();
                int ht = txt.getHeight();

                RelativeLayout.LayoutParams params =
                        new RelativeLayout.LayoutParams(w + 10, h + 10);
                new RelativeLayout.LayoutParams(wt + 10, ht + 10);
                params.addRule(RelativeLayout.CENTER_IN_PARENT);

                img.setLayoutParams(params);
                txt.setLayoutParams(params);
            }
        });

        zoom.setOnZoomOutClickListener(new View.OnClickListener() {

            @Override            public void onClick(View v) {
                // TODO Auto-generated method stub
                int w = img.getWidth();
                int h = img.getHeight();
                int wt = txt.getWidth();
                int ht = txt.getHeight();

                RelativeLayout.LayoutParams params =
                        new RelativeLayout.LayoutParams(w - 10, h - 10);
                new RelativeLayout.LayoutParams(wt - 10, ht - 10);
                params.addRule(RelativeLayout.CENTER_IN_PARENT);

                img.setLayoutParams(params);
                txt.setLayoutParams(params);
            }
        });
    }

}

5. Jalan programnya .... semoga sukses dan bermanfaat

Baca Selengkapnya »