How to make a design for Android mobile and tablet using RelativeLayout?

Question

I want to design an application for both Android mobile devices as well as tablets using RelativeLayout. The design looks like below:

design

The header and footer are the same for all screens. So please any one tell me how to design the screen like this? I don't want to repeatedly use the header and footer in all the screens.

Create a `Base` layout class which has the header and footer. Then extend that layout to include different elements for different sceens. — Amulya Khare, Dec 24 '13 at 07:17
This post may help you out -http://stackoverflow.com/questions/12994957/how-to-create-a-generic-android-xml-layout-for-all-activities — Carbon, Dec 24 '13 at 07:21

score 1 · Accepted Answer · answered Dec 24 '13 at 07:27

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/lineartopview"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentTop="true"
        android:background="@android:color/holo_green_dark"
        android:orientation="horizontal" >
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearmiddleview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/linearview"
        android:layout_below="@+id/lineartopview"
        android:orientation="horizontal" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical" >

            <ImageView
                android:id="@+id/imageView1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:src="@drawable/ic_launcher" />

            <ImageView
                android:id="@+id/imageView1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:src="@drawable/ic_launcher" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="horizontal" >

            <ImageView
                android:id="@+id/imageView1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:src="@drawable/ic_launcher" />
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearview"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:background="@android:color/holo_green_dark"
        android:orientation="horizontal" >
    </LinearLayout>

</RelativeLayout>

Rudi · Answer 2 · 2013-12-24T07:43:26.090

You can make a xml file for MainActivity with just a Header and Footer, and in the middle a Fragment, and then just replace any fragment inside that.

Something like below in a RelativeLayout:

<RelativeLayout 
android:id="@+id/main"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

<RelativeLayout
android:id="@+id/header"
        android:layout_width="fill_parent"
        android:layout_height="50dp"/>

<FrameLayout
        android:below:"@+id/header"
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
android:margin_bottom:"40dp" />

<RelativeLayout
        android:id="@+id/footer"
        android:layout_alignParentBottom="true"
        android:layout_width="fill_parent"
        android:layout_height="40dp"/>

<RelativeLayout/>

Now to replace a fragment you can use this :

    //Your new fragment
    Fragment fragment = new PlanetFragment();

    //If you want to pass something to it
    Bundle args = new Bundle();
    args.putInt(PlanetFragment.ARG_PLANET_NUMBER, position);
    fragment.setArguments(args);

    // Insert the fragment by replacing any existing fragment
    FragmentManager fragmentManager = getFragmentManager();
    fragmentManager.beginTransaction()
                   .replace(R.id.content_frame, fragment)
                   .commit();

I dont have eclipse installed on my Mac, so sorry if I have error on my xml

score 0 · Answer 3 · answered Dec 24 '13 at 07:43

you can do that by making the base layout which contains the header i think that will be Title bar and inflate it to FragmentActivity

and use the Frame layout to fill your views using fragments and layout for each one

use FragmentTransaction to add fragments to the FragmentActivity by adding fragment to the fragmenttransaction try this example

score 0 · Answer 4 · edited May 23 '17 at 12:28

The header and footer is same for all screens. so please any one tell me how to design the screen like this. I don't want to repeatably use the header and footer in all the screen.

For this, You can create a xml with name like header.xml or footer.xml. Then you could use these xml in your code by tag in other xml.

See this Stackoverflow Answer, Suggestion 1 For more about include tag, See this developer.android

How to make a design for Android mobile and tablet using RelativeLayout?

4 Answers4