1/29/2015 1 Android Programming: FrameLayout By Dr. Ramji M. Makwana Professor and Head, Computer...

1/29/2015 www.ai-techsavvy.in 1

Android Programming: FrameLayout

By Dr. Ramji M. Makwana

Professor and Head, Computer Engineering DepartmentA.D. Patel Institute of Technology

New V. V. Nagar, Anand, Gujarat, India


Outline

• Layout Brief Review• Introduction to FrameLayout• Examples: FrameLayout Design• Reusability of Layouts• Attributes


Review of all layouts for given design


Stack of Images in One Frame


What is FrameLayout?

• FrameLayout is used to hold a single child view at a time out of multiple child views

• Can add multiple children to a FrameLayout

• Can control their position within the FrameLayout using the android:layout_gravity attribute.

• Child views are drawn in a stack, with the most recently added child on top.

• The size of the FrameLayout is the size of its largest child (plus padding).

• Attributes: viewObj.VISIBLE and viewObj.GONE.


How FrameLayout Works?

1st Frame2nd Frame


.xml Code

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent“android:layout_height="match_parent"android:orientation="vertical" >

<ImageView android:id="@+id/imageView2" android:layout_gravity="center"

android:src="@drawable/pswami" />

<ImageView android:id="@+id/imageView1" android:layout_gravity="center" android:src="@drawable/rose" /> </FrameLayout>


Java Code

public class MainActivity extends Activity implements OnClickListener {

ImageView i1, i2;protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);setContentView(R.layout.frame_layout);

i1 = (ImageView) findViewById(R.id.imageView1);i2 = (ImageView) findViewById(R.id.imageView2);

i1.setOnClickListener(this);i2.setOnClickListener(this);Log.d("AI-TechSavvy", "OnCreate Called..!");

}


OnClick Method

public void onClick(View v) {// TODO Auto-generated method stubif(v.getId()==R.id.imageView1){

i1.setVisibility(v.GONE);i2.setVisibility(v.VISIBLE);Log.d("AI-TechSavvy", “President Shri Modi..!");

} else{ i1.setVisibility(v.VISIBLE);

i2.setVisibility(v.GONE);Log.i("AI-TechSavvy", “HDH Pramukh Swami");

}}


• Demo and Practice


Displaying multiple Views or ViewGroups but one at a time


On Next Button Click, Show One Image/Frame out of Multiple

1st Frame

Next

2nd Frame3rd Frame


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/rlayout"> <FrameLayout android:id="@+id/flayout"

android:layout_centerHorizontal="true" >

<ImageView android:id="@+id/iv1"android:src = "@drawable/sachin"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:tag="1" />.. ……….


…………………………<ImageView android:id="@+id/iv3" android:src="@drawable/pswami" android:layout_gravity="center" android:tag="3" android:visibility="invisible" />

</FrameLayout>

<Buttonandroid:layout_alignParentLeft="true" android:layout_alignParentRight="true" android:layout_below="@+id/flayout"

android:onClick="btnClick" android:text="Next Image"/>

</RelativeLayout>


MyFrameLayout.java

public class MyFrameLayout extends Activity {int count=1;FrameLayout frame;ImageView imageview; @Overrideprotected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);setContentView(R.layout.framelayout1);

frame= (FrameLayout)findViewById(R.id.flayout);}


public void btnClick(View v) {// Hide current imageimageview = (ImageView) frame.findViewWithTag(String.valueOf(count));imageview.setVisibility(android.view.View.INVISIBLE);

// go to next imagecount ++;if (count>3)

count=1;

// Show next imageimageview=(ImageView)frame.findViewWithTag(String.valueOf(count));imageview.setVisibility(android.view.View.VISIBLE);}


Reusing layouts

• To efficiently re-use complete layouts, you can use the <include/> and <merge/> tags to embed another layout inside the current layout.

• Any elements of your application that are common across multiple layouts can be extracted, managed separately, then included in each layout.

• Reusing layouts is powerful: Example, a yes/no button panel, or custom progress bar with description text.


Re-using Layout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical" >

<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" />

<include layout="@layout/mergelayout"/><include layout="@layout/mergelayout"/>

</LinearLayout>


<merge> tag for optimizing performance

<?xml version="1.0" encoding="utf-8"?><merge xmlns:android="http://schemas.android.com/apk/res/android"> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Add"/>

<Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Delete"/>

</merge>


• Demo and Practice


FrameLayout Attributes

Attributes Apply to What does it do? Value it take

:foreground FrameLayout

Defines the drawable to draw over the content. This can be used as an overlay.

resource in the form "@[+][pkg:]type:name" or to a theme in the form "?[pkg:][type:]name"May be a color value, in the form of "#rgb"

:foregroundGravity

FrameLayout

Gravity of foreground drawable. Defaults to fill

“center”, “top”

:foregroundTint FrameLayout

Tint to apply to the foreground

color value, in the form of "#rgb", "#argb"


Thank You…!

1/29/2015 1 Android Programming: FrameLayout By Dr. Ramji M. Makwana Professor and Head, Computer...

Documents

Transcript of 1/29/2015 1 Android Programming: FrameLayout By Dr. Ramji M. Makwana Professor and Head, Computer...