Tuesday, September 15, 2015

Tips and Trick Android Editable TextView Using Visibility

Pada kesempatan kali ini saya akan melakukan sedikit trik simple menggunakan fitur visibility pada form. Pada android setiap atributnya terdapat 3 pilihan visibility : 
  • VISIBLE : atribut tampil / terlihat pada layar.
  • INVISIBLE : atribut tidak terlihat pada layar, tetapi  mendapatkan space pada layar tersebut.
  • GONE : atribut tidak terlihat pada layar dan tidak mendapatkan space pada layar.
Setelah mengetahui perbedaan dari fungsi masing nantinya dapat dipikiran penggunaan yang lebih efisien ke depannya :D
Pada kesempatan ini, saya ingin bermain dengan visibility untuk mendapatkan kesan dapat mengedit sebuah TextView pada android. Pertama- tama kita buat dl sebuah Text View dan Edit Text yang memiliki parameter posisi yang sama. Kemudian kita tambahkan sebuah tombol yang akan mentriger perubahan visibility.
Kemudian kita tambahkan parameter visibility pada attribut EditText.
Berikut adalah code untuk tampilan :


<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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/linearAddress"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:paddingLeft="5dip">

            <TextView
                android:id="@+id/txtHello"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:singleLine="false"
                android:text="@string/hello_world"
                android:textSize="17dip"
                android:textStyle="bold"
                android:typeface="sans" />


            <EditText
                android:id="@+id/etHello"
                android:inputType="text"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="10dp"
                android:textColorHint="#cccccc"
                android:layout_marginBottom="10dp"
                android:layout_weight="1"
                android:visibility="gone"/>

            <Button
                android:id="@+id/btnEditHello"
                android:layout_width="25px"
                android:layout_height="25px"
                android:layout_margin="4dp"
                android:background="@drawable/edit"
                android:padding="10dp"
                android:text="Edit"
                android:textColor="#ffffff"
                />

        </LinearLayout>

</RelativeLayout>


Setelah itu kita tambahkan code pada activity yang akan kita gunakan. Cara kerja dari code yang akan kita buat adalah merubah visibility dari TextView dari yang tadinya terlihat menjadi hilang, dan EditText yang tadinya hilang menjadi terlihat. Tak lupa kita tampilkan juga text dari TextView ke EditText.

    private TextView txtHello;
    private EditText editTextHello;
    private Button edit;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        editTextHello = (EditText) findViewById(R.id.etHello);
        txtHello = (TextView) findViewById(R.id.txtHello);
        edit = (Button) findViewById(R.id.btnEditHello);
        edit.setOnClickListener(this);
    }

Pada event on click kita tambahkan :

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btnEditHello:
                editTextHello.setText(txtHello.getText());
                txtHello.setVisibility(View.GONE);
                editTextHello.setVisibility(View.VISIBLE);
            break;
        }}


Hasilnya seperti berikut :



Demikian sekilas trik dengan menggunakan visibility. Banyak trik untuk mempercantik tampilan dengan menggunakan fitur dasar pada android. Sampai bertemu lagi, semoga membantu :D

Source  :
https://github.com/RennyTanuwijaya/Tips-and-Trick-Android-Editable-TextView-Using-Visibility

No comments:

Post a Comment