CODEWITHSUNDEEP
androiduser-interfaceandroid-layoutandroid-fragmentsandroid-studio
Aritra Bhattacharyya
Aritra Bhattacharyya

Reputation: 317

How do I achieve a layout like this in my Android app?

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?

Upvotes: 3

Views: 149

Answers (3)

bcorso
bcorso

Reputation: 47078

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:

enter image description here

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>

Upvotes: 0

IntelliJ Amiya
IntelliJ Amiya

Reputation: 75788

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

Upvotes: 2

t4nhpt
t4nhpt

Reputation: 5302

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

Upvotes: 0

Related Questions