Include, Merge of Layout

Web Hosting
In this tutorial, I will show you how to use merge, include layout. Adding a customize tabmenu through button and adding image in a EditText widget in android. See output below!



First thing to do is add this image into your drawable folder.







Here's the code for footer_tabs.xml that is merge first and include it in our main_layout.xml.

<merge xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout 
android:id="@+id/bottom_tab_layout"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="center_horizontal"
    android:background="@drawable/black_gradiant"
    >
 <Button 
  android:layout_height="wrap_content" 
  android:id="@+id/home" 
  android:text="Home"
  android:layout_width="fill_parent"
  android:textStyle="bold"
  android:textSize="8sp"
  android:layout_weight="1"
  android:textColor="@drawable/black"
  android:drawableTop="@drawable/home"
  android:background="@drawable/custom_gradiant"
  android:padding="2dp"
  android:layout_marginRight="2dp"
  android:gravity="center|bottom">
  </Button>
  
   <Button 
  android:layout_height="wrap_content" 
  android:id="@+id/media" 
  android:text="Video"
  android:layout_width="fill_parent"
  android:textStyle="bold"
  android:textSize="8sp"
  android:layout_weight="1"
  android:textColor="@drawable/black"
  android:drawableTop="@drawable/video"
  android:background="@drawable/custom_gradiant"
  android:padding="2dp"
  android:layout_marginRight="2dp"
  android:gravity="center|bottom">
  </Button>
  
   <Button 
  android:layout_height="wrap_content" 
  android:id="@+id/news_letter" 
  android:text="Audio"
  android:layout_width="fill_parent"
  android:textStyle="bold"
  android:textSize="8sp"
  android:layout_weight="1"
  android:textColor="@drawable/black"
  android:drawableTop="@drawable/audio"
  android:background="@drawable/custom_gradiant"
  android:padding="2dp"
  android:layout_marginRight="2dp"
  android:gravity="center|bottom">
  </Button>
  
   <Button 
  android:layout_height="wrap_content" 
  android:id="@+id/news_letter" 
  android:text="Mail"
  android:layout_width="fill_parent"
  android:textStyle="bold"
  android:textSize="8sp"
  android:layout_weight="1"
  android:textColor="@drawable/black"
  android:drawableTop="@drawable/email"
  android:background="@drawable/custom_gradiant"
  android:padding="2dp"
  android:gravity="center|bottom">
  </Button>
   
</LinearLayout>
</merge>

Here's the code for MainActivity.java

package pack.coderzheaven;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class MainActivity extends Activity {

Button home, media, news_letter;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_layout);  
        
    }
}

Here's the code for main_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    
  
  
 <LinearLayout 
      android:id="@+id/l1"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:gravity="center_horizontal"
   android:layout_alignParentBottom="true">
   
    <include layout="@layout/footer_tabs"/>
    
 </LinearLayout>

  <Button 
  android:layout_height="wrap_content" 
  android:id="@+id/home" 
  android:text="Home"
  android:layout_width="fill_parent"
  android:textStyle="bold"
  android:textSize="8sp"
  android:textColor="@drawable/black"
  android:drawableTop="@drawable/home"
  android:background="@drawable/custom_gradiant"
  android:padding="2dp">
  </Button>

  <EditText
      android:id="@+id/et_1"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:layout_alignParentLeft="true"
      android:layout_alignParentRight="true"
      android:layout_below="@+id/home"
      android:drawableRight="@drawable/email"
      android:hint="Message"
      android:ems="10" >

      <requestFocus />
  </EditText>
  
  <EditText
      android:id="@+id/et_2"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:layout_below="@+id/et_1"
      android:layout_alignParentLeft="true"
      android:layout_alignParentRight="true"
      android:drawableLeft="@drawable/video"
      android:hint="Videos"
      android:ems="10" />

</RelativeLayout>

For the design xml, here's the code for black_gradient.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
            <solid
                android:color="#343434" />
            <stroke
                android:width="1dp"
                android:color="#171717" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#343434"
                android:endColor="#171717"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#171717" />
            <corners
                android:radius="4dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>


And last is the code for custom_gradient.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
            <solid
                android:color="#FF3434" />
            <stroke
                android:width="1dp"
                android:color="#171717" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#FF3434"
                android:endColor="#171717"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#171717" />
            <corners
                android:radius="4dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>

</selector>

Web Hosting
That's all, Hope this may help you. Happy Coding

No comments:

Post a Comment