我们如何在android中制作底部布局?

时间:2016-09-19 22:57:57

标签: android xml

请看图片,我想像这样制作底部标签。

enter image description here

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent">


<fragment xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/map"
    android:name="com.google.android.gms.maps.SupportMapFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/toolbar"
    tools:context="com.ambeez.MainMapActivity" />

<Button
    android:id="@+id/rescue_btn"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_margin="10dp"
    android:background="@drawable/border_radius_btn"
    android:text="Rescue Me"
    android:textColor="@android:color/white"
    android:textSize="18dp"
    android:visibility="gone" />

<RelativeLayout
    android:id="@+id/rltLyt"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/toolbar"
    android:background="@android:color/darker_gray"
    android:visibility="gone">

    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:text="Nearest Available Rescue Person"
        android:textColor="@android:color/holo_red_dark"
        android:textSize="16dp" />

    <ListView
        android:id="@+id/rescue_list"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/name"
        android:layout_marginTop="10dp"
        android:visibility="gone"></ListView>
</RelativeLayout>

<RelativeLayout
    android:id="@+id/btm_lyt"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true">
    <View
        android:id="@+id/parent_view"
        android:layout_width="match_parent"
        android:layout_above="@+id/bottom_bar"
        android:background="@android:color/transparent"
        android:layout_height="20dp"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:id="@+id/bottom_bar"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:orientation="horizontal">


        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:orientation="horizontal"
            android:padding="5dp"
            android:weightSum="5">

            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1">

                <ImageView
                    android:id="@+id/my_account"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:layout_centerVertical="true"
                    android:src="@drawable/profile" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center">

                <ImageView
                    android:id="@+id/call_history"
                    android:layout_centerHorizontal="true"
                    android:layout_centerVertical="true"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/notification" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                android:layout_marginTop="-20dp"
                android:background="@drawable/cirlce_layout"
                android:gravity="center">

                <ImageView
                    android:id="@+id/contact_us"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ambulance_with_moon" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center">

                <ImageView
                    android:id="@+id/about_us"
                    android:layout_width="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:layout_centerVertical="true"
                    android:layout_height="wrap_content"
                    android:src="@drawable/call_history" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center">

                <ImageView
                    android:id="@+id/sign_out"
                    android:layout_centerHorizontal="true"
                    android:layout_centerVertical="true"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/help" />
            </RelativeLayout>
        </LinearLayout>
    </LinearLayout>
</RelativeLayout>

请告诉我正确的解决方案。这是我的布局代码。我试图使底部栏像图像一样,但我的中心图像隐藏在片段或视图后面。

1 个答案:

答案 0 :(得分:2)

很棒的例子,这是googles SDK的一部分,

http://androidgifts.com/build-android-material-design-bottom-navigation/ https://material.google.com/components/bottom-navigation.html#bottom-navigation-usage

mBottomBar = BottomBar.bind(this, R.layout.activity_main,
            savedInstanceState);

    mBottomBar.setItems(
            new BottomBarTab(R.drawable.ic_recents, "Recents"),
            new BottomBarTab(R.drawable.ic_favorites, "Favorites"),
            new BottomBarTab(R.drawable.ic_nearby, "Nearby"),
            new BottomBarTab(R.drawable.ic_friends, "Friends")
    );

    mBottomBar.setOnItemSelectedListener(new OnTabSelectedListener() {
        @Override
        public void onItemSelected(final int position) {
            // the user selected a new tab
        }
    });
}