Next Tutorial
Coding a ListView Fragment

Prev Page
View All Tutorials

---

Coding a Weighted Fragment

Example Code

Complete Example Codes are available for each of our tutorials. With these example codes you can make a functioning android app in either AIDE or Android Studio.

COPY/PASTE CODE
First, create a java/xml android template app using AIDE, (or Android Studio). Then you can get the code for this app from the EXAMPLE CODE section on this page. Replace the code on the pages you need to(with our tutorial code); in order to create this app.
Sometimes, new pages have to be created.
All the other coded pages in your app can remain as they are; they don't need to be changed.

---

This is the App - Fragments
It has 2 fragments in the layout, coded by using the weight attribute; meaning each fragment is given a % weight of the layout total.
The percentage for each fragment can be whatever you choose. For this app; fragment 1 is 30% of the layout, and fragment 2 is 70% of the layout. This means that fragment 2 is a larger section of the layout.

Where - How To Use Fragments

Fragments are added to your app interface. You can have as many fragments as you like. Fragments reside within your main app activity(MainActivity.java)

Fragments can be used for any purpose in your app. This tutorial shows how they can be added as a 'weighted fragment'. Each fragment has its own section of the app screen layout.

Creating - Naming Your App Using AIDE

When creating your app,(from left menu) choose:
Create New Project;
Then, choose
New Android App(gradle, android Java/xml)
or
Hello World App Java/xml
if your using the original version of AIDE

You can name your app whatever you like; if your using the name as shown in our example code use;

Fragments for the App Name and,
for the package name(next line) use:
com.aac.fragmentexample ;

If you want to name it differently, you can, just change the code to whatever name you choose where it says, com.aac.fragmentexample, in the coded pages; at the top of the java class pages like- MainActivity.java

The Coded Pages

Code for the app - Fragments

For this app you will use these coded pages:

1 layout file, main.xml, where you define your 2 fragments; located at res/layout/,
2 fragments, you must create 2 xml pages, one for each fragment; and put them at res/layout/fragment1.xml; and res/layout/fragment2.xml. Create the new pages in your res/layout folder.

2 fragment java pages, you must create 2 java pages; one for each fragment you create; here we define the java class code for each fragment; put them at src/java/Fragment1.java and src/java/Fragment2.java. Create the new java pages in your src/java folder.

AndroidManifest.xml

Unlike java pages that are created for each new screenview(activity) and then declared in the AndroidManifest.xml; the coding process is different for fragment java pages.

With fragment java pages you don't have to declare them in the manifest. In this case, you only need to declare the MainActivity.java; as this is how fragments are nested into the view.
And, since the MainActivity.java is created and declared for us in our 'template app' we created, we don't need to change or update the code at AndroidManifest xml.

Strings

1 strings.xml page, where you define the app name Fragments, located at res/values/strings.xml.
The other text in the view was added at our textview element, using the 'android:text=' attribute.

Images

Since this app has no images; we don't have to add any to our drawable-hdpi folder. The folder src/res/drawable-hdpi also has our ic_launcher.png image; but we don't need to add it because it was added automatically when we created our android template app.

EXAMPLE CODE - Code For This Tutorial

JUST copy the code for this tutorial App Name is 'Fragments' - located at AppProjects/Fragments in AIDE, open the AIDE app, then open App Projects, THEN select the 'Fragments', app from your files hierachy(left menu); then click on any file from the app, like strings.xml Make sure at top of page, the app name 'Fragments' is there next to AppProjects like so: AppProjects/Fragments, then you know you have the proper App.

Once a file is in the editor, you can edit, save it, then RUN your APP, Install, and Open your app.

Make sure you SAVED EACH PAGE,(or choose automatic saving in AIDE settings) before you RUN your code. SAVE, RUN, INSTALL, OPEN, your App. Once it has been installed on your tablet, you can open it Simply by Clicking on the Android little green App Icon,with the wording 'Fragments' on your tablet. It will be with your other installed apps.

If you make further changes to this App, you need to SAVE, RUN, UPDATE, INSTALL, OPEN the app again

Example Code App - Fragments :
Use Mouse To Copy Paste the Code
main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal" > <fragment android:name="com.aac.fragmentexample.Fragment1" android:id="@+id/fragment1" android:layout_weight=".30" android:layout_width="0px" android:layout_height="match_parent" /> <fragment android:name="com.aac.fragmentexample.Fragment2" android:id="@+id/fragment2" android:layout_weight=".70" android:layout_width="0px" android:layout_height="match_parent" /> </LinearLayout> ______________________________________ fragment2.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#b6ffdb"> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="This is fragment #2" android:textColor="#000000" android:textSize="20dp" /> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="15dp" android:text="A weighted fragment is useful to section your screen." android:textColor="#000000" android:textSize="20dp" /> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="15dp" android:text="You can use fragment 1 For a Topic, Heading, Photo, and fragment 2 to elaborate on your Topic, Heading, Photo" android:textColor="#000000" android:textSize="20dp" /> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="15dp" android:text="To add a fragment to your app's activity,(app page) you must define it in your layout file.\nNext add a xml file for each fragment your adding, and also code a java file for each fragment." android:textColor="#000000" android:textSize="20dp" /> </LinearLayout> ______________________________________ fragment1.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#68ffb5"> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="This is fragment #1" android:textColor="#000000" android:textSize="20dp" /> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="15dp" android:text="FRAGMENTS" android:textColor="#000000" android:textSize="24dp" /> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="15dp" android:text="TOPIC, HEADING, PHOTO" android:textColor="#000000" android:textSize="24dp" /> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:text="CODING A FRAGMENT" android:textColor="#000000" android:textSize="24dp" /> </LinearLayout> ______________________________________ Fragment2.java: package com.aac.fragmentexample; import android.app.Fragment; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class Fragment2 extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { //Inflate the layout for this fragment return inflater.inflate( R.layout.fragment2, container, false); } } ______________________________________ Fragment1.java package com.aac.fragmentexample; import android.app.Fragment; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class Fragment1 extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { //Inflate the layout for this fragment return inflater.inflate(R.layout.fragment1, container, false); } } ______________________________________ strings.xml <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">Fragments</string> </resources> ______________________________________

This free script provided by
JavaScript Kit