如何在我的Android应用程序中实现这样的布局？

Question

I am a novice android programmer. I am designing my first app, which is a mp3 player. I wish to achieve a layout like the one below

https://m2.behance.net/rendition/pm/12717697/disp/05ec216e30ef24ec7a2cac85a5329140.jpg

This is my preliminary structure:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:id="@+id/content_frame"
android:layout_height="match_parent">

<LinearLayout
    android:layout_width="fill_parent"
    android:background="#33000000"
    android:layout_height="20dp"
    android:layout_weight="1"
    android:id="@+id/_header"
    android:layout_gravity="top"
    android:orientation="vertical"
    >



</LinearLayout>

<RelativeLayout
    android:layout_width="fill_parent"
    android:background="#74000000"
    android:layout_height="40dp"
    android:layout_weight="2"
    android:id="@+id/_footer"
    android:layout_gravity="bottom"
    >



</RelativeLayout>

<LinearLayout
    android:layout_width="fill_parent"
    android:background="#1A000000"
    android:layout_height="478dp"
    android:layout_weight="3"
    android:id="@+id/_middle"
    android:layout_gravity="center"
    android:orientation="vertical"
    >



</LinearLayout>


</FrameLayout>

However I am not getting the desired effect. The layouts are overlapping and I have no idea how to fix them. I have tried RelativeLayouts, fragments and LinearLayouts. But nothing is working.

What should I do instead?

Answer 1

You need to create custom Navigation drawer . For Demo Purpose . NavigationDrawer-MaterialDesign And JamsMusicPlayer

Answer 2

To get you started, use:

1. a RelativeLayout as the root.
2. Header should be aligned at top:
   • android:layout_alignParentTop="true"
3. Footer should be aligned at bottom:
   • android:layout_alignParentBottom="true"
4. Body should be aligned between Header and Footer
   • android:layout_above="@+id/footer"
   • android:layout_below="@+id/header"

This yields a layout like the following:

The same pattern can be used inside the Header and Footer to align the items in there, except this time you would align to the right and left of the parent instead of top and bottom. As for the NavigationDrawer, Google has some documents on this here .

NOTE: You could also use nested LinearLayout but this is known to give bad performance ( see here ).

---

Code

This xml layout that produced the above image is here:

<?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">

    <RelativeLayout
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="HEADER"
            android:textAppearance="@android:style/TextAppearance.Large"
            android:layout_centerInParent="true"/>
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/body"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/footer"
        android:layout_below="@+id/header">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="BODY"
            android:textAppearance="@android:style/TextAppearance.Large"
            android:gravity="center"/>

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/footer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="FOOTER"
            android:textAppearance="@android:style/TextAppearance.Large"
            android:layout_centerInParent="true"/>
    </RelativeLayout>

</RelativeLayout>

Answer 3

If you want to have a menu (default is hidden, and user can swipe to show it), you should use a DrawerLayout as root element. Guide here .

The second root element should be a LinearLayout , with vertical orientation. This layout will contain 3 other LinearLayout layouts:

The first one (orientation to horizontal) contains menu icon, title, 3 dots...

The second one (orientation to vertical) contains contains album image, singer name...

The last one (orientation to horizontal) contains play, pause, next... button