Skip to main content

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

Popular posts from this blog

How to use NumberPicker in Android

Table of contentsNumberPicker ExamplesetOnValueChangedListeneronValueChange()setWrapSelectorWheel()setMinValue()setMinValue()setMaxValue()NumberPicker with String ArraysetDisplayedValues()String Array1. NumberPicker Example activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/rl" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="16dp" tools:context=".MainActivity" android:background="#ffffff" > <TextView android:id="@+id/tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="25dp" android:text="Select a number..." /> <NumberPicker android:id="@+id/np" …

TextView new line (multiline) in android

TextView new line (multiline) TextView display text on android app. by default, TextView show text on a single line, and if it is long then TextView take more lines to display its text. android developers can generate a new line on TextView both programmatically and syntactically. android developers can make a multiline TextView without splitting text to multiline by android:minLines attribute.

the following android example code demonstrate us how can we syntactically create a new line on TextView widget by xml layout file and string resource file.

the simplest way to create a new line on TextView is android:text attribute. android:text attribute allow us to display text on android app. we can add a simple '\n' to TextView text where we want to start a new line. in this way we can create a multiline TextView widget in android app. we can assign android:text attribute value by this way android:text="Line1 \n Line2 \n Line3" for a TextView widget. this value will…

How to change TextView font size in android

TextView font size TextView widget display text on android application. we can set or change TextView font size statically by declarative syntax in xml layout file or programmatically at run time in java file. even we can use an xml file source to define font size.

the following example code demonstrate us how can we define TextView font size in xml layout file and how can we uses dimens.xml to reference font size. in this example we did not changes any coding in java file, so here we only include the layout xml file and dimens.xml file. activity_main.xml <LinearLayout 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:orientation="vertical" android:layout_margin="25dp" tools:context=".MainActivity" > <TextView android:id=&…