Saturday, October 2, 2010

Dynamic layout changes with visibility property


When i started working on the layouts, i was in a situation where i need to hide a textbox based on checkbox selection. If checkbox selected hide the textbox and checkbox deselected show the textbox. That was my need.

there is a propery called VISIBILITY. It can be set a element on the layoutxml as below ( element can be a LinearLayout(viewgroup) or widgets like TextView,ImageView, etc )

" android:visible = "gone" or "visible" or "invisible"

- gone - Means the element will not be shown and its doesnt occupy space in the entire viewgroup.

- visible - THe element is shown. Visible to user.

- invisible - the element will not be shown, but it occupies empty space in for its width & height in the entire layout.

- in the code this propery can be set as

void setVisibility (int visibility)

- View.VISIBLE or View.INVISIBLE or View.GONE.

Let see an example.

layout.xml:
--------------------------


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/MainLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="3dip"
android:orientation="vertical">
<RelativeLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="10dip">

<ImageView android:id="@+id/favorite"
android:layout_width="30dip"
android:layout_height="30dip"
android:layout_alignParentLeft="true"
android:src="@drawable/favorite"/>

<TextView android:id="@+id/title1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Local Guide"
android:textSize="25sp" />

<ImageView android:id="@+id/info"
android:layout_width="30dip"
android:layout_height="30dip"
android:layout_alignParentRight="true"
android:src="@drawable/info"/>

</RelativeLayout>

<TextView android:id="@+id/text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="25sp"
android:paddingTop="30dip"
android:text="Enter category :" />

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="6dip"
android:orientation="horizontal">

<EditText android:id="@+id/categotytextbox"
android:hint="eg. pubs,restuarants "
android:layout_width="250dip"
android:layout_height="wrap_content"
android:singleLine="true"
android:visibility="gone"
android:ellipsize="marquee"
android:maxLines="1"/>

<ImageView android:id="@+id/search"
android:layout_marginLeft="20dip"
android:layout_width="40dip"
android:layout_height="40dip"
android:src="@drawable/find"/>
</LinearLayout>

<Button android:id="@+id/categories"
android:layout_width="150dip"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="Choose categories"/>

<TextView android:id="@+id/text1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="25sp"
android:text="Enter Location :" />

<EditText android:id="@+id/locationtextbox"
android:hint="eg. Liverpool,uk "
android:layout_width="250dip"
android:layout_height="wrap_content"
android:maxLines="1"/>

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingTop="20dip"
android:id="@+id/locationLayout">

<CheckBox android:id="@+id/checkbox"
android:layout_width="40dp"
android:layout_height="40dp"
android:checked="true"/>

<TextView android:id="@+id/checkboxtext"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:paddingLeft="20dp"
android:layout_gravity="center_horizontal"
android:layout_centerHorizontal="true"
android:textSize="25sp"
android:text="Current Location" />

</LinearLayout>


</LinearLayout>





Main activity ( java file )
-------------------------------

On selection of checkbox, i dynamically show or hide the elements on above that.!!



locationCheckbox.setOnClickListener(new CheckBox.OnClickListener(){
public void onClick(View v) {
if(((CheckBox)v).isChecked())
{
TextView text1 = (TextView)findViewById(R.id.text1);
text1.setVisibility(View.GONE);
EditText locationbox = (EditText)findViewById(R.id.locationtextbox);
locationbox.setVisibility(View.GONE);
}
else
{ TextView text1 = (TextView)findViewById(R.id.text1);
text1.setVisibility(View.VISIBLE);
EditText locationbox = (EditText)findViewById(R.id.locationtextbox);
locationbox.setVisibility(View.VISIBLE);

}
}
});







import android.app.Activity;
import android.app.AlertDialog;
import android.app.Dialog;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.EditText;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;
import android.widget.AdapterView.OnItemClickListener;


public class WelcomeScreen extends Activity {

public final int CATEGORY_ID =0;
EditText categoryTextbox;
EditText locationTextbox;
Dialog dialog;
String category;
String location;
public final static int ACTIVITY_INVOKE = 0;

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.welcome);

categoryTextbox = (EditText)findViewById(R.id.categotytextbox);
locationTextbox = (EditText)findViewById(R.id.locationtextbox);
ImageView search = (ImageView)findViewById(R.id.search);
ImageView info = (ImageView) findViewById(R.id.info);
CheckBox locationCheckbox =(CheckBox)findViewById(R.id.checkbox);

search.setOnClickListener(new Button.OnClickListener(){
public void onClick(View v) {
Intent intent = new Intent();
intent.putExtra("categoryString", category);
location = locationTextbox.getText().toString();
intent.putExtra("locationString", location);
Bundle bun = new Bundle();
bun.putString("categoryString", category);
bun.putString("locationString", location);
intent.putExtras(bun);
intent.setClass(v.getContext(), results.class);
startActivity(intent);
}
});

info.setOnClickListener(new Button.OnClickListener(){
public void onClick(View v) {
Intent intent = new Intent();
intent.setClass(v.getContext(), information.class);
startActivity(intent);
}
});

locationCheckbox.setOnClickListener(new CheckBox.OnClickListener(){
public void onClick(View v) {
if(((CheckBox)v).isChecked())
{
TextView text1 = (TextView)findViewById(R.id.text1);
text1.setVisibility(View.GONE);
EditText locationbox = (EditText)findViewById(R.id.locationtextbox);
locationbox.setVisibility(View.GONE);
}
else
{ TextView text1 = (TextView)findViewById(R.id.text1);
text1.setVisibility(View.VISIBLE);
EditText locationbox = (EditText)findViewById(R.id.locationtextbox);
locationbox.setVisibility(View.VISIBLE);

}
}
});
}
}

2 comments:

  1. Hi.,,

    This is very useful tutorial...Thank you gave me such a nice tutorial...

    ReplyDelete
  2. Good tutorial about this underutilized feature. Thanks.

    ReplyDelete