How do i create the above view in my android application?

Because i'm create an app similar to what was shown below but i have no idea how to create a view similar to what was shown above after i click a buttton to navigate to this page where all the video and map log file is shown.. I'm kinna new in android/java can someone guide me on this?

EDIT: This is a series of code for creating a directory to store my video files but these files can only be seen outside the application but i wanted it to be seen in the application where when a button is pressed it navigates to the VideoList to browse the various videa file i have filmed and when press it display a custom screen seen here. But what are the things should be done to achieve this?

File dirlist = new File(Environment.getExternalStorageDirectory() + "/VideoList");
if(!(dirlist.exists()))    
dirlist.mkdir();
File TempFile = new File(Environment.getExternalStorageDirectory()                     + "/VideoList", dateFormat.format(date) + fil开发者_如何学GoeFormat);
mediaRecorder.setOutputFile(TempFile.getPath());

Hay Zack its a custom Dialog check out this... code

main.xml(Your main page layout)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:id="@+id/RelativeLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<TextView android:id="@+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is my main activity, from here, I want to display a dialog, after the user clicked the button below this text.">
</TextView>
<Button android:layout_height="wrap_content"
android:layout_below="@+id/TextView01"
android:layout_width="wrap_content"
android:id="@+id/Button01main"
android:text="Hey! There is more..."></Button>
</RelativeLayout>

maindialog.xml(Your Dialog layout page)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" android:layout_height="wrap_content">
<ImageView android:id="@+id/ImageView01"
 android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_centerHorizontal="true" />
<ScrollView android:id="@+id/ScrollView01"
android:layout_width="wrap_content" android:layout_below="@+id/ImageView01"
android:layout_height="200px">
 <TextView android:text="@+id/TextView01" android:id="@+id/TextView01"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
</ScrollView>
<Button android:id="@+id/Button01" android:layout_below="@id/ScrollView01"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_centerHorizontal="true" android:text="Cancel" />
</RelativeLayout>

dilo.java(Display dialog on click button code)

package com.example.dilo;

import android.app.Activity;
import android.app.Dialog;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;

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

        Button button1main = (Button) findViewById(R.id.Button01main);

        button1main.setOnClickListener(new OnClickListener() {

        @Override

            public void onClick(View v) {

                //set up dialog
                final Dialog dialog = new Dialog(dilo.this);
                dialog.setContentView(R.layout.maindialog);
                dialog.setTitle("This is my custom dialog box");
                dialog.setCancelable(true);
                //there are a lot of settings, for dialog, check them all out!
                //set up text
                TextView text = (TextView) dialog.findViewById(R.id.TextView01);
                text.setText(R.string.lots_of_text);
                //set up image view
                ImageView img = (ImageView) dialog.findViewById(R.id.ImageView01);
                img.setImageResource(R.drawable.icon);
                //set up button
                Button button = (Button) dialog.findViewById(R.id.Button01);
                button.setOnClickListener(new OnClickListener() {
                @Override
                    public void onClick(View v) {
                        dialog.cancel();
                    }
                });
                //now that the dialog is set up, it's time to show it   
                dialog.show();
            }
        });

   }
}

i think it should help you .... ok... N joy

zack it is custom dialog u need to create custom dialog

for more info.. go this link 1) link 2