2016-09-19 5 views
0

親切にイメージを見て、私はこのような下のタブを作りたいです。アンドロイドで下のレイアウトを作る方法は?

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> 

親切に私に適切なソリューションを教えてください。ここに私のレイアウトコードです。私はイメージのようにボトムバーを作ろうとしていますが、私の中心的なイメージはフラグメントまたはビューの後ろに隠れています。これはグーグルのSDKの一部である

答えて

2

グレート少し例、

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 
     } 
    }); 
} 
+0

私はちょうど[この](https://github.com/roughike/BottomBar)ライブラリを使用することになり、あなたの1つのレイアウトにすべてを絞ろうとすると、レイアウトからメニューを分離し、適切にオーバーレイする必要があります。ライブラリに従うことで、これを達成することができます。 – skryshtafovych

関連する問題