Tuesday, May 19, 2015

How to use FrameLayout in Android

Table of contents
  1. Android FrameLayout Example
    • FrameLayout
    • FrameLayout Gravity
    • FrameLayout Overlay
    • RelativeLayout
    • LinearLayout
  2. Create FrameLayout Programmatically
    • FrameLayout
    • ImageView
    • FrameLayout Gravity
    • ImageView Layout Gravity
    • ImageView width height
    • Add view to FrameLayout
    • FrameLayout background color
    • FrameLayout padding
    • ActionBar background color

1. Android FrameLayout Example

activity_main.xml

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/fl"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:background="@android:color/white"
    android:padding="16dp"
    >
    <RelativeLayout
        android:id="@+id/rl_elephant"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left|bottom"
        >
        <TextView
            android:id="@+id/tv_elephant"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="ELEPHANT"
            android:layout_centerHorizontal="true"
            />
        <ImageView
            android:id="@+id/iv_elepahnt"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:src="@drawable/elephant_big"
            android:scaleType="centerInside"
            android:layout_below="@id/tv_elephant"
            />
    </RelativeLayout>
    <ImageView
        android:id="@+id/iv_dog"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:src="@drawable/dog_big"
        android:scaleType="centerInside"
        android:layout_gravity="center"
        />
    <TextView
        android:id="@+id/tv_dog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="DOG"
        android:layout_gravity="center"
        />
    <LinearLayout
        android:id="@+id/ll_cat"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_gravity="right|top"
        >
        <ImageView
            android:id="@+id/iv_cat"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:src="@drawable/cat_big"
            android:scaleType="centerInside"
            />
        <TextView
            android:id="@+id/tv_cat"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="CAT"
            android:layout_gravity="center"
            />
    </LinearLayout>
</FrameLayout>
MainActivity.java

package com.cfsuman.me.androidcodesnippets;

/*
    compileSdkVersion 22
    minSdkVersion 21
    targetSdkVersion 22
 */

import android.os.Bundle;
import android.app.Activity;
import android.widget.FrameLayout;

public class MainActivity extends Activity{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Get widgets reference from XML layout
        FrameLayout fl = (FrameLayout) findViewById(R.id.fl);
    }
}

2. Create FrameLayout Programmatically

MainActivity.java

package com.cfsuman.me.androidcodesnippets;

/*
    compileSdkVersion 22
    minSdkVersion 21
    targetSdkVersion 22
 */

import android.app.ActionBar;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
import android.app.Activity;
import android.view.Gravity;
import android.widget.FrameLayout;
import android.widget.FrameLayout.LayoutParams;
import android.widget.ImageView;

public class MainActivity extends Activity{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Get the app ActionBar
        ActionBar ab = getActionBar();
        // Set a background color for ActionBar
        ab.setBackgroundDrawable(new ColorDrawable(Color.parseColor("#828059")));

        // Initialize a new FrameLayout
        FrameLayout fl = new FrameLayout(getApplicationContext());
        // Create Layout Parameters for FrameLayout
        FrameLayout.LayoutParams lp = new FrameLayout.LayoutParams(
                LayoutParams.MATCH_PARENT,
                LayoutParams.MATCH_PARENT);
        // Apply the Layout Parameters for FrameLayout
        fl.setLayoutParams(lp);
        // Apply 16 pixels padding each site of frame layout
        fl.setPadding(16,16,16,16);

        // Assign a background color for frame layout
        fl.setBackgroundColor(Color.parseColor("#FFFDDB"));

        // Initialize a new ImageView to display monkey
        ImageView iv_monkey = new ImageView(this);
        // Create LayoutParams for the monkey ImageView
        LayoutParams lp_monkey = new LayoutParams(
                200, // Width in pixel
                200, // Height in pixel
                Gravity.LEFT|Gravity.TOP); // Layout Gravity (left top)
        // Apply the LayoutParams to monkey ImageView
        iv_monkey.setLayoutParams(lp_monkey);
        //  Set an image resource for ImageView
        iv_monkey.setImageResource(R.drawable.monkey);

        // Initialize a new ImageView to display giraffe
        ImageView iv_giraffe = new ImageView(this);
        // Create LayoutParams for the giraffe ImageView
        LayoutParams lp_giraffe = new LayoutParams(
                LayoutParams.WRAP_CONTENT, // Width
                LayoutParams.WRAP_CONTENT, // Height
                Gravity.CENTER); // Layout Gravity exact center
        // Apply the LayoutParams to giraffe ImageView
        iv_giraffe.setLayoutParams(lp_giraffe);
        //  Set an image resource for ImageView
        iv_giraffe.setImageResource(R.drawable.giraffe);

        // Initialize a new ImageView to display camel
        ImageView iv_camel = new ImageView(this);
        // Create LayoutParams for the camel ImageView
        LayoutParams lp_camel = new LayoutParams(
                200, // Width in pixel
                200); // Height in pixel
        // Apply the LayoutParams to camel ImageView
        iv_camel.setLayoutParams(lp_camel);
        //  Set an image resource for ImageView
        iv_camel.setImageResource(R.drawable.camel);

        // Another way to assign layout gravity to a view
        LayoutParams lp_iv_camel = (LayoutParams)iv_camel.getLayoutParams();
        lp_iv_camel.gravity = Gravity.BOTTOM|Gravity.RIGHT;
        iv_camel.setLayoutParams(lp_iv_camel);

        //  Add those programmatically created ImageView to FrameLayout
        fl.addView(iv_monkey);
        fl.addView(iv_giraffe);
        fl.addView(iv_camel);

        // Set FrameLayout as the MainActivity.java file's content view root
        setContentView(fl);
    }
}
More android examples