尝试使用进度条和底部标签创建Web视图

Question

Below is my Code. I am not able to display the include element which is the tab in the bottom part of the page properly.It gets hidden. Any suggestions would be welcome. Take a look at the code and let me know.

<LinearLayout xmlns:android= "http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"   
>

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/header_yellow" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="10dip"
        android:orientation="horizontal" >
    </LinearLayout>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@drawable/logo" />

    <LinearLayout
        android:layout_width="68dp"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="10dip" >

        <ImageView
            android:id="@+id/webview_scan_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:onClick="onScanner"
            android:src="@drawable/barcode_icon" />
    </LinearLayout>
</RelativeLayout>

<RelativeLayout
    android:id="@+id/layout1"
    android:layout_width="wrap_content"
    android:layout_height="450dp"        
     >

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1" 
         />

    <ProgressBar
        android:id="@+id/progressBar1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true" />       

</RelativeLayout>
 <include layout="@layout/tabs"
     android:layout_width="wrap_content"
        android:layout_height="wrap_content"
      />

Answer 1

Although your question/desirable output are not clear, try this

<LinearLayout xmlns:android= "http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#aaaaaa" >

    <ProgressBar
        android:id="@+id/progressBar1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true" />

    <ImageView
        android:id="@+id/webview_scan_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@+id/progressBar1"
        android:onClick="onScanner"
        android:src="@android:drawable/ic_menu_search" />

    <ImageView
        android:id="@+id/webview_logo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:src="@android:drawable/ic_menu_info_details" />

</RelativeLayout>

<WebView
    android:layout_below="@+id/webview_scan_button"
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1" />

<include layout="@layout/tabs"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

Answer 2

You can customize your tub as you want, for examle:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/tabsLayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/bg_tab_gradient"
    android:gravity="center"
    android:orientation="vertical"
    tools:ignore="contentDescription" >

    <ProgressBar
        style="?android:attr/progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/progressBar" />

    <ImageView
        android:id="@+id/tab_icon"
        android:layout_marginTop="4dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView 
        android:id="@+id/tab_text"
        android:layout_marginBottom="3dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/tab_text_color"/>

</LinearLayout>

using this examle you can use this layout and create Tabs at bottom: https://stackoverflow.com/a/23150258/2765497

for support api<11 replace TabView to FragmentTabVeiw and add enother imports from Sherlock of Support library