I am working on a basic audio view for an android app (xamarin.android), i want to achieve the following result:
But instead i am getting this ugly result (ignore the other anomalies, focus on the layout):
The bottom relativeLayout (the one that holds the buttons) seems t get more space that actually needed, when i set the top RelativeLayout (the image holder) to match_parent the bottom RelativeLayout disappeared entirely even tho its high is set to wrap_content.
Here is my view's layout, what i am doing wrong?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:fitsSystemWindows="true"
android:id="@+id/top_parent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
layout="@layout/Toolbar"
android:id="@+id/toolbar_content" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
android:layout_below="@id/toolbar_content"
android:id="@+id/gridLayout1">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/black"
android:id="@+id/cover_layout"
android:layout_marginBottom="0.0dp">
<ImageView
android:layout_width="500dp"
android:layout_height="400dp"
android:id="@+id/imageview_cover"
android:background="@color/gray"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
android:layout_centerVertical="true" />
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/linearLayout1"
android:layout_alignParentRight="true"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true">
<TextView
android:id="@+id/textview_title"
android:gravity="left"
android:textColor="@color/white"
android:textStyle="bold"
android:text="Audio Book Title"
android:textSize="@dimen/text_very_huge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true" />
<TextView
android:id="@+id/textview_author"
android:gravity="left"
android:textColor="@color/colorAccent"
android:text="Author"
android:textSize="@dimen/text_small"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true" />
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/cover_layout"
android:id="@+id/relativeLayout2"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentLeft="true"
android:paddingBottom="8dp"
android:paddingTop="8dp"
android:background="@color/white"
android:layout_marginTop="0.0dp">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/relativeLayout3"
android:layout_alignParentRight="true"
android:layout_alignParentLeft="true"
android:layout_marginTop="@dimen/element_margin_tiny"
android:layout_marginBottom="@dimen/element_margin_tiny">
<TextView
android:text="Position"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textview_position"
android:gravity="center"
android:layout_marginLeft="@dimen/element_margin_large"
android:textColor="@color/black"
android:layout_centerVertical="true" />
<SeekBar
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/textview_position"
android:id="@+id/player_seekbar"
android:layout_toLeftOf="@+id/textview_duration"
android:clickable="true"
style="@style/GreenSeekBar"
android:layout_centerVertical="true" />
<TextView
android:text="Duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textview_duration"
android:layout_alignParentRight="true"
android:layout_alignBottom="@+id/seekBar1"
android:layout_alignTop="@+id/seekBar1"
android:gravity="center"
android:layout_marginRight="@dimen/element_margin_large"
android:textColor="@color/black"
android:layout_centerVertical="true" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:id="@+id/relativeLayout5"
android:layout_below="@id/relativeLayout3"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<ToggleButton
android:src="@drawable/toggle_sound"
android:id="@+id/btnSound"
android:layout_width="30dp"
android:layout_height="30dp"
android:textOff=" "
android:textOn=" "
android:layout_weight="2"
android:scaleType="center"
android:paddingLeft="@dimen/element_margin_tiny" />
<ImageButton
android:layout_width="40dp"
android:layout_height="40dp"
android:id="@+id/btnPrevious"
android:background="@null"
android:src="@drawable/button_previous"
android:scaleType="center"
android:layout_toRightOf="@+id/btnSound"
android:layout_weight="2" />
<ToggleButton
android:layout_width="50dp"
android:layout_height="50dp"
android:id="@+id/btnPlayPause"
android:src="@drawable/togglebutton_playpause"
android:layout_centerVertical="true"
android:scaleType="center"
android:textOff=" "
android:textOn=" "
android:layout_toRightOf="@+id/btnPrevious"
android:layout_toLeftOf="@+id/btnNext"
android:layout_weight="2" />
<ImageButton
android:layout_width="40dp"
android:layout_height="40dp"
android:id="@+id/btnNext"
android:background="@null"
android:src="@drawable/button_next"
android:scaleType="center"
android:layout_centerVertical="true"
android:layout_toLeftOf="@+id/btnRepeat"
android:layout_weight="2" />
<ToggleButton
android:src="@drawable/toggle_playlist"
android:id="@+id/btnRepeat"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centerVertical="true"
android:textOff=" "
android:textOn=" "
android:scaleType="center"
android:layout_weight="2" />
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
you need to decrease your imageView size. And also you need to change your main layout to LinearLayout. Try below solution and it will work for you.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/gridLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:id="@+id/cover_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="@+id/relativeLayout2"
android:layout_alignParentTop="true"
android:layout_marginBottom="0.0dp" >
<ImageView
android:id="@+id/imageview_cover"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:background="@color/gray" />
<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:orientation="vertical">
<TextView
android:id="@+id/textview_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left"
android:singleLine="true"
android:text="Audio Book Title"
android:textColor="@color/white"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="@+id/textview_author"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left"
android:singleLine="true"
android:text="Author"
android:textColor="@color/colorAccent"
android:textSize="12sp" />
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:id="@+id/relativeLayout2"
android:layout_width="match_parent"
android:layout_height="80dp"
android:gravity="center"
android:layout_alignParentBottom="true">
<RelativeLayout
android:id="@+id/relativeLayout3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/relativeLayout5"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="@dimen/element_margin_tiny"
android:layout_marginTop="@dimen/element_margin_tiny">
<TextView
android:id="@+id/textview_position"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="@dimen/element_margin_large"
android:layout_marginLeft="@dimen/element_margin_large"
android:gravity="center"
android:text="Position"
android:textColor="@color/black" />
<SeekBar
android:id="@+id/player_seekbar"
style="@style/GreenSeekBar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="@+id/textview_duration"
android:layout_toRightOf="@+id/textview_position"
android:clickable="true" />
<TextView
android:id="@+id/textview_duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="@dimen/element_margin_large"
android:gravity="center"
android:text="Duration"
android:textColor="@color/black" />
</RelativeLayout>
<LinearLayout
android:id="@+id/relativeLayout5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<ToggleButton
android:id="@+id/btnSound"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_weight="2"
android:paddingLeft="@dimen/element_margin_tiny"
android:scaleType="center"
android:src="@drawable/toggle_sound"
android:textOff=" "
android:textOn=" " />
<ImageButton
android:id="@+id/btnPrevious"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_weight="2"
android:background="@null"
android:scaleType="center"
android:src="@drawable/button_previous" />
<ToggleButton
android:id="@+id/btnPlayPause"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_weight="2"
android:scaleType="center"
android:src="@drawable/togglebutton_playpause"
android:textOff=" "
android:textOn=" " />
<ImageButton
android:id="@+id/btnNext"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_centerVertical="true"
android:layout_toLeftOf="@+id/btnRepeat"
android:layout_weight="2"
android:background="@null"
android:scaleType="center"
android:src="@drawable/button_next" />
<ToggleButton
android:id="@+id/btnRepeat"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centerVertical="true"
android:layout_weight="2"
android:scaleType="center"
android:src="@drawable/toggle_playlist"
android:textOff=" "
android:textOn=" " />
</LinearLayout>
</RelativeLayout>