{"id":11942,"date":"2014-07-21T11:24:56","date_gmt":"2014-07-21T08:24:56","guid":{"rendered":"http:\/\/examples.javacodegeeks.com\/?p=11942"},"modified":"2019-05-09T11:09:08","modified_gmt":"2019-05-09T08:09:08","slug":"android-framelayout-example","status":"publish","type":"post","link":"https:\/\/examples.javacodegeeks.com\/android\/core\/widget\/framelayout\/android-framelayout-example\/","title":{"rendered":"Android FrameLayout Example"},"content":{"rendered":"

FrameLayout<\/code><\/a> represents a simple layout for the user interface of Android applications. It is usually used for displaying single Views<\/code> at a specific area on the screen or overlapping its child views.<\/p>\n

In our example we are going to show how you can add and handle FrameLayout<\/code> in your application.<\/p>\n

For this tutorial, we will use the following tools in a Windows 64-bit platform:
\n 
\n 
\n 
\n <\/p>\n

    \n
  1. JDK 1.7<\/li>\n
  2. Eclipse 4.2 Juno<\/li>\n
  3. Android SDK 4.1<\/li>\n<\/ol>\n
    Tip<\/strong>
    \nYou may skip project creation and jump directly to the     beginning of the example<\/strong><\/a> below.<\/div>\n<\/p>\n

    1. Create a New Android Application Project<\/h2>\n

    Open Eclipse IDE and go to File \u2192 New \u2192 Project \u2192 Android Application Project.<\/p>\n

    Specify the name of the application, the project and the package and then click Next.<\/p>\n

    \"Figure<\/a>
    Figure 1. Create a new Android application<\/figcaption><\/figure><\/p>\n

    In the next window, the \u201cCreate Activity\u201d option should be checked. The new created activity will be the main activity of your project. Then press Next button.<\/p>\n

    \"Figure<\/a>
    Figure 2. Configure the project<\/figcaption><\/figure><\/p>\n

    In \u201cConfigure Launcher Icon\u201d window you should choose the icon you want to have in your app. We will use the default icon of android, so click Next button.<\/p>\n

    \"Figure<\/a>
    Figure 3. Configure the launcher icon<\/figcaption><\/figure><\/p>\n

    Select the \u201cBlank Activity\u201d option and press Next.<\/p>\n

    \"Figure<\/a>
    Figure 4. Create the activity and select its type<\/figcaption><\/figure><\/p>\n

    You have to specify a name for the new Activity and a name for the layout description of your app. The .xml file for the layout will automatically be created in the res\/layout<\/code> folder. Finally, press Finish.

    <\/div> <\/div><\/p>\n

    \"Figure<\/a>
    Figure 5. Create a new blank activity<\/figcaption><\/figure><\/p>\n

    Now you can see the final structure of the project in the following image.<\/p>\n

    \"Figure<\/a>
    Figure 6. The final structure of the project<\/figcaption><\/figure><\/p>\n

    2. Create the layout of the Main Activity<\/span><\/h2>\n

    Now we are going to add FrameLayout<\/code> component to our XML layout file. Open res\/layout\/activity_main.xml<\/code>, go to the respective tab and paste the following code.<\/p>\n

    activity_main.xml:<\/u><\/em><\/p>\n

    <?xml version=\"1.0\" encoding=\"utf-8\"?>\n\n<FrameLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n\tandroid:layout_width=\"fill_parent\"\n\tandroid:layout_height=\"fill_parent\"\n\tandroid:id=\"@+id\/framelayout\" >\n\t    \n\t<ImageView \n\t\tandroid:id=\"@+id\/frameImage\"\n\t\tandroid:layout_width=\"200dp\"\n\t\tandroid:layout_height=\"300dp\"\n\t\tandroid:src=\"@drawable\/ic_launcher\"\n\t\tandroid:layout_gravity=\"center\"\n\t\tandroid:clickable=\"true\" \/>\n\t    \n\t<TextView\n\t\tandroid:id=\"@+id\/frameText\"\n\t\tandroid:layout_width=\"wrap_content\"\n\t\tandroid:layout_height=\"wrap_content\"\n\t\tandroid:text=\"This is a text\"\n\t\tandroid:textSize=\"15sp\"\n\t\tandroid:textStyle=\"bold\" \n\t\tandroid:visibility=\"gone\"\n\t\tandroid:layout_gravity=\"center\" \/>\n\t    \n<\/FrameLayout>\n<\/pre>\n
    In this example, we include two different Views<\/code> inside the content of the FrameLayout<\/code> and we make them to overlap. The important thing we should mention, is that FrameLayout<\/code> give us the capability to control child element’s position through layout_gravity<\/code> attribute.<\/p>\n
    If we want to display only one drawable to the layout, we can use the following XML attributes that FrameLayout<\/code> offers us:<\/p>\n