Customized Include Layout

Web Hosting
In this tutorial, I will show you how to include layout and customized it's content in different pages. See output below.

This is the layout in layout.xml



This is the output when you run this layout.



As you noticed that the title and image are different in the output. This is because, I change its content during runtime.

This is the code in your MainActivity.java

public class MainActivity extends Activity implements OnClickListener{

TextView header_title;
ImageButton home, clear;
@Override
protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);
//this.requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.main_layout);       
initializeVar();    
}

public void initializeVar(){
from = (TextView) findViewById(R.id.tv_sender_name);
header_title = (TextView) findViewById(R.id.tv_header_title);
header_title.setText("Custom Title");
home = (ImageButton) findViewById(R.id.i_btn_home);
clear = (ImageButton) findViewById(R.id.i_btn_clear);
other = (ImageButton) findViewById(R.id.i_btn_sample);

//use to hide the button you dont need to use.
other.setVisibility(View.GONE);

//use when you change the image in image button during runtime,
//clear.setImageResource(R.drawable.ic_input_delete_default);
other.setOnClickListener(this);
home.setOnClickListener(this);
clear.setOnClickListener(this);
}


@Override
public void onClick(View id) {

switch(id.getId()){

case R.id.i_btn_home:
//do something
break;
case R.id.i_btn_clear:
//do something
break;
case R.id.i_btn_sample:
//do something
break;
}

}


This is the code in your layout.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/rl_second"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/header_background"
        android:layout_alignParentTop="true" >

        <ImageButton
            android:id="@+id/i_btn_home"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:background="@drawable/header_background"
            android:paddingBottom="5dp"
            android:paddingLeft="12dp"
            android:paddingRight="12dp"
            android:paddingTop="5dp"
            android:src="@drawable/home" />

        <TextView
            android:id="@+id/tv_header_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_centerVertical="true"
            android:textColor="#FFFFFF"
            android:textSize="20sp"
            android:textStyle="bold"
            android:text="Title Here" />

        <ImageButton
            android:id="@+id/i_btn_clear"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:background="@drawable/header_background"
            android:paddingBottom="5dp"
            android:paddingLeft="12dp"
            android:paddingRight="12dp"
            android:paddingTop="5dp"
            android:src="@drawable/ic_discard" />

        <ImageButton
            android:id="@+id/i_btn_sample"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_toLeftOf="@+id/i_btn_clear"
            android:background="@drawable/header_background"
            android:paddingBottom="5dp"
            android:paddingLeft="12dp"
            android:paddingRight="12dp"
            android:paddingTop="5dp"
            android:src="@drawable/home" />

    </RelativeLayout>

And to use it, you just include layout.xml in main_layout.xml

<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:background="#FFFFFF"
    tools:context=".MainActivity" >

    <include
        android:id="@+id/i_header"
        layout="@layout/layout" />

    <!-- more layout code here -->
</RelativeLayout>

And lastly is header_background.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
     <item android:state_pressed="true" >
         <shape android:shape="rectangle"  >
             <corners android:radius="0dip" />
             <stroke android:width="0dip" android:color="#000000" />
             <gradient  android:angle="-90"  android:startColor="#FF0000" android:centerColor="#800000" android:endColor="#FF0000"  />            
         </shape>
     </item>
    <item android:state_focused="true">
         <shape android:shape="rectangle"  >
             <corners android:radius="0dip" />
             <stroke android:width="0dip" android:color="#000000" />
             <solid  android:color="#FF0000"/>       
         </shape>
     </item>  
    <item >
        <shape android:shape="rectangle"  >
             <corners android:radius="0dip" />
             <stroke android:width="0dip" android:color="#000000" />
             <gradient  android:angle="-90"  android:startColor="#FF0000" android:centerColor="#FF0000" android:endColor="#800000" />            
         </shape>
     </item>
</selector>
Web Hosting
That's it. Hope this may help you. Happy Coding.

No comments:

Post a Comment