Clever Geek Handbook

How can I achieve such a layout in my android app?

I am a beginner programmer-programmer. I am developing my first application which is an mp3 player. I want to create a layout like 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 tried RelativeLayouts, Fragments and LinearLayouts. But nothing works.

What should I do instead?

+3


source to share


3 answers


You need to create a custom Navigation Box . For demo purpose NavigationDrawer-MaterialDesign AND JamsMusicPlayer



+2


source


To get started, use:

  • a RelativeLayout

    as a root.
  • The header must be aligned to the top:
    • android:layout_alignParentTop="true"

  • The footer must be aligned to the bottom:
    • android:layout_alignParentBottom="true"

  • The body should be aligned between the header and footer
    • android:layout_above="@+id/footer"

    • android:layout_below="@+id/header"

This gives a layout as shown below:

enter image description here

Inside the header and footer, you can use the same pattern to align the elements there, except that you would align to the right and left of the parent instead of the header and footer. As for NavigationDrawer, Google has a few docs on this here .



NOTE: You can also use nested LinearLayout

, but this has been known to give poor performance ( see here ).

code

This xml layout that created the above image is located 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>
0


source


If you want to have a menu (hidden by default and the user can swipe to show it), you must use it DrawerLayout

as the root element. The guide is here .

The second root element must be LinearLayout

vertical. This layout will contain 3 other LinearLayout

layouts:

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

The second (vertical orientation) contains the album image, artist name ...

The latter (orientation to horizontal) contains the play, pause, next ...

0


source






More articles:


All Articles