Android Tutorial - Coding a Weighted Listview Fragment

Develop Android Apps, How to code a weighted fragment

Next Tutorial
Coding a Tabbed Fragment

Prev Page
View All Tutorials

Android Tutorial
Coding a ListView Fragment

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 an image of the App - fragmentsWithListView
It has two fragments, and each fragment is given equal weight in the layout. To each fragment we add our list of items; for this app example; it is English to Japanese words. The first fragment contains the list of English words; and the second fragment contains the list of Japanese translation of the English word.

We use the class 'ListView' to create our list design, and the 'array adapter' class to put the words into the listview. Listview Fragment App Example, Android Java/xml

Listview Fragment App Example, Android Java/xml

When- How To Use Fragments

As you read in our previous tutorial; fragments are ideal to sectionalize your apps interface design. They are also ideal to display information in a list like format. In this tutorial, we will learn how to code a Fragment Listview.
For coding purposes; fragments are considered as included in the activity.

Therefore, you only have to declare the MainActivity.java in your AndroidManifest.xml. Any fragment java class pages you create do NOT have to be declared in your manifest page.
And, if you create fragment1.xml, you also create Fragment1.java. The fragment1.xml is coded in your main.xml using the Fragment element as shown at the Example Code section on this page.

Create Your App

To create 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

Name your app

fragmentsWithListView for the App Name and,
for the package name(next line) use:
com.aac.learnfragments.

Where Code is Coded

The Coded Pages

For this app you will use these coded pages:

main.xml

1 layout file, main.xml, where you define your 2 fragments; located at res/layout/main.xml. To declare your fragments, you use the 'Fragment element'. You add a resource identifier for each fragment as:
android:id="@+id/fragment1", android:id="@+id/fragment2".
In these two fragment elements we also add the 'weight' attribute.
android:layout_weight="1". Each fragment has this with a weight of 1. This means the two fragments share equal portion of the page(the screenview).

MainActivity.java

This page corresponds to main.xml, and as such is attached to main.xml using the method,
setContentView(R.layout.main);

Every app has a main.xml and MainActivity.java.
All other pages you create and add to your app stem from these two main pages.

fragment1.xml, fragment2.xml

Because we are creating a dual displayed listview; we must create 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.

In each fragment we must add a resource id.
android:id="@id/android:list"; this is a pre defined resource id that we use when coding this type of ListView. Notice we did not add the + symbol; that is because we are not creating a new resource id but rather using the android pre defined one. We add this resource id to fragment1.xml, and to fragment2.xml, as shown at the Example Code section on this page.
We also add the 'weight' attribute as we did in main.xml. This gives the fragments equal weight in the screen view when displayed.

Fragment1.java, Fragment2.java

These two java pages must be created. Coded at src/java/Fragment1.java and src /java/Fragment2.java

We code all the action(executable code methods) for this app in our Fragment1, and Fragment2 java class pages.

As mentioned, we must declare our Listviews, Array Adapters; and also provide our String method code with the values we want.

The ListView method is coded as;

ListFragment { String[] //and string values coded as
myValue = {"water","wine","meat","cake"};

android.R.layout.simple_list_item_1, myValue)); this code populates our listview design simple_list_item_1, and the values; myValue,get from the value string to the listview by using the ArrayAdapter method.

The values are of course, the English and Japanese words. One fragment contains English; the other contains the Japanese.

simple_list_item_1
is a android pre defined code used for this particular code class, that being our ListView.

To get our info to the screenview this following method creates the 'container', which holds the fragment information.(the listview).
return inflater.inflate
R.layout.fragment1, container,

And, we also added a 'Toast' method that adds the phrase 'English Word' or 'in Japanese', depending on which language word is selected. The code is
Toast.makeText (getActivity(), "English word " + myValue [position], Toast.LENGTH_SHORT).show();

strings.xml

1 strings.xml page, where you define the app name fragmentsWithListView, located at res/values/strings.xml.

AndroidManifest.xml

1 manifest xml page, where we declare our app's activity java page- MainActivity.java. This is created for us when we created our 'template app'; and we do not need to change the code on this page.
As for the fragments we are adding; Fragment1.java, Fragment2.java; as mentioned; they do not need to be defined in the AndroidManifest.xml.

Images - drawable-hdpi

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

Copy the code for this tutorial App Name is 'fragmentsWithListView' - located at AppProjects/fragmentsWithListView in AIDE, open the AIDE app, then open App Projects, THEN select the 'fragmentsWithListView', 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 'fragmentsWithListView' is there next to AppProjects like so: AppProjects/fragmentWithListView, 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 'fragmensWithListView' 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.

Example Code App - ListView Fragments :
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" >

______________________________________

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">

<ListView android:id="@id/android:list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:drawSelectorOnTop="false"/>
</LinearLayout>
______________________________________

fragment2.xml

______________________________________

MainActivity.java

package com.aac.learnfragments;

import android.app.*;
import android.os.*;
import android.view.*;
import android.widget.*;

public class MainActivity extends Activity
{
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState)
{
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

______________________________________

Fragment1.java

package com.aac.learnfragments;

import android.app.ListFragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;

public class Fragment1 extends ListFragment { String[]

myValue = {"water","wine","meat","cake"};

@Override

public View onCreateView(LayoutInflater inflater,
ViewGroup container, Bundle savedInstanceState)
{ return inflater.inflate
(R.layout.fragment1, container, false); }

@Override

public void onCreate(Bundle savedInstanceState)

{ super.onCreate(savedInstanceState);

setListAdapter(new ArrayAdapter <String>(getActivity(),

android.R.layout.simple_list_item_1, myValue)); }

public void onListItemClick(ListView parent, View v,
int position, long id)

{ Toast.makeText (getActivity(),
"English word " + myValue [position],
Toast.LENGTH_SHORT).show();

} }

______________________________________

Fragment2.java

package com.aac.learnfragments;

public class Fragment2 extends ListFragment { String[]

myValue = {"mizu","wain","niku","keeki"};

@Override

public View onCreateView(LayoutInflater inflater,
ViewGroup container, Bundle savedInstanceState)
{ return inflater.inflate
(R.layout.fragment1, container, false); }

@Override

public void onCreate(Bundle savedInstanceState)

{ super.onCreate(savedInstanceState);

setListAdapter(new ArrayAdapter <String>(getActivity(),

android.R.layout.simple_list_item_1, myValue)); }

public void onListItemClick(ListView parent, View v,
int position, long id)

{ Toast.makeText (getActivity(),
  "In Japanese " + myValue [position],
  Toast.LENGTH_SHORT).show();

} }

______________________________________

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.aac.learnfragments"
    android:versionCode="1"
    android:versionName="1.0" >

<uses-sdk
        android:minSdkVersion="14"
        android:targetSdkVersion="21" />

</manifest>

______________________________________

strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

<string name="app_name">fragmentsWithListview</string>

</resources>

This free script provided by
JavaScript Kit

AIDE for creating Android Apps on your tablet or cell phone(android).
Free and Paid.
GoTo Aide

ANDROID STUDIO - for creating Android Apps on your desktop computer.
Free to Install and Use
Learn more - Android Studio

The Java XML files we code(example codes) and the Android Apps we create in our Free Tutorials are compatible with Android Studio and AIDE. Just choose Java XML as your Programming Language.

You May Like:
Make Sushi Rolls Taste World Wines Flavours and Aromas

Android TutorialCoding a ListView Fragment

When- How To Use Fragments

Create Your App

Where Code is Coded

The Coded Pages

Android Tutorial
Coding a ListView Fragment