I would like to create layout that looks like this:
Layout1and Layout2 are some layouts of any kind, nested in a parent LinearLayout. The LinearLayout is necessary to give both child layouts a 50% height by using layout_weight.
The red squares should be Buttons which overlap both Layout1and Layout2 and are centered between the two layouts.
Of course this could achived by using RelativeLayout as parent instead but then I would loose the possibility to use layout_weight...
If I keep using LinearLayout, it seems to be impossible to let the buttons overlap the two other layouts.
Furthermore the buttons cannot be siblings of the two layouts but need to be nested inside a common container layout that takes care of the horizontal positioning (e.g. a LinearLayout with horizontal orientation).
Any idea how to solve this?
I already tried to place the buttons inside Layout1 (or Layout2), place them below the bottom and use android:clipChildren=false, but this had no effect. The button where simple cut in half.
Edit:
Splitting the height between the two layouts 50/50 is just one version. Another view uses the same basic layout but splits the height 70/30 between the two layouts. The buttons should always be centered between the two layouts. Sorry for not pointing this out earlier.
Layout Code:
<!-- parent/root layout -->
<LinearLayout
...
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
... >
<!-- Layout1 -->
<LinearLayout
android:layout_weight="1"
... />
<!-- Buttons -->
<LinearLayout
android:orientation="horizontal"
... >
<Button ... />
<Button ... />
<Button ... />
</LinearLayout>
<!-- Layout2 -->
<LinearLayout
android:layout_weight="1"
... />
</LinearLayout>
50% linearOne 50% linearTwo
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/activity_test"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/colorAccent">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/colorPrimary">
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_centerInParent="true"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:layout_weight="1"
android:layout_width="50dp"
android:layout_height="50dp"
/>
<View
android:layout_weight="1"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#000" />
<View
android:layout_weight="1"
android:layout_width="50dp"
android:layout_height="50dp"
/>
<View
android:layout_weight="1"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#000" />
<View
android:layout_weight="1"
android:layout_width="50dp"
android:layout_height="50dp"
/>
<View
android:layout_weight="1"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#000" />
<View
android:layout_weight="1"
android:layout_width="50dp"
android:layout_height="50dp"
/>
</LinearLayout>
</RelativeLayout>
============================================================================
70% linearOne 30% linearTwo
Just close your eyes Copy and paste
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="10"
tools:context="com.ncrypted.myapplication.MainActivity">
<LinearLayout
android:layout_weight="6"
android:id="#+id/linear1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#color/colorAccent"
android:orientation="vertical">
</LinearLayout>
<RelativeLayout
android:layout_weight="2"
android:id="#+id/relative1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#color/colorAccent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#color/colorAccent"
android:layout_weight="1" />
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#color/colorPrimary"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_centerInParent="true"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:layout_weight="1"
android:layout_width="50dp"
android:layout_height="50dp"
/>
<View
android:layout_weight="1"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#000" />
<View
android:layout_weight="1"
android:layout_width="50dp"
android:layout_height="50dp"
/>
<View
android:layout_weight="1"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#000" />
<View
android:layout_weight="1"
android:layout_width="50dp"
android:layout_height="50dp"
/>
<View
android:layout_weight="1"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#000" />
<View
android:layout_weight="1"
android:layout_width="50dp"
android:layout_height="50dp"
/>
</LinearLayout>
</RelativeLayout>
<LinearLayout
android:layout_weight="2"
android:id="#+id/linear2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#color/colorPrimary"
android:orientation="vertical">
</LinearLayout>
</LinearLayout>
Hm, if you don't have any restrictions besides those ones that you've described in the question, you could do it by the next way:
<!-- parent/root layout -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
...
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
... >
<!-- Layout1 -->
<LinearLayout
android:layout_weight="1"
... />
<!-- Layout2 -->
<LinearLayout
android:layout_weight="1"
... />
</LinearLayout>
<!-- Buttons -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:orientation="horizontal"
android:background="#android:color/transparent"
... >
<Button ... />
<Button ... />
<Button ... />
</LinearLayout>
</RelativeLayout>
Here, this is the solution using only Linearlayout.
Key point is: button is consist of two part. Half top and Half bottom. And minus margin means half of your button's height.
But, please do not use this code. Use GuideLine of ConstraintLayout. It has percentage option, so you can implement almost evert layout you want.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/activity_test"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:background="#d3d3d3">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginBottom="-25dp"
android:layout_weight="1"
android:src="#mipmap/ic_launcher"/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginBottom="-25dp"
android:layout_weight="1"
android:src="#mipmap/ic_launcher"/>
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginBottom="-25dp"
android:layout_weight="1"
android:src="#mipmap/ic_launcher"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:background="#Ed1c24">
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_marginTop="-25dp"
android:layout_weight="1"
android:src="#mipmap/ic_launcher"/>
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_marginTop="-25dp"
android:layout_weight="1"
android:src="#mipmap/ic_launcher"/>
<ImageView
android:id="#+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_marginTop="-25dp"
android:layout_weight="1"
android:src="#mipmap/ic_launcher"/>
</LinearLayout>
</LinearLayout>
Here you can use this:
Position the imageviews according to your requirement
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_test"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#e2e2"
android:layout_weight="1"
>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#Ed1c24"
android:layout_weight="1"
>
</LinearLayout>
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"
android:id="#+id/imageView"
android:layout_marginStart="48dp"
android:layout_centerVertical="true"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"
android:id="#+id/imageView1"
android:layout_toEndOf="#+id/imageView"
android:layout_marginStart="48dp"
android:layout_centerVertical="true"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"
android:id="#+id/imageView3"
android:layout_toEndOf="#+id/imageView1"
android:layout_marginStart="38dp"
android:layout_centerVertical="true"
/>
</RelativeLayout>
Related
I need to add some buttons at the bottom of a RecyclerView but whatever i do it always takes up the whole space and the buttons wont show on screen.
I tried adding padding that's the same size as the height of the buttons but it doesn't work.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="20dp"
android:gravity="top|center"
android:orientation="horizontal">
<ImageView
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_marginEnd="10dp"
android:gravity="center"
android:scaleType="fitXY"
android:src="#drawable/accueil"
app:tint="#color/orange" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/redressed"
android:gravity="center"
android:text="#string/app_name"
android:textColor="#color/bleu"
android:textSize="30sp" />
</LinearLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/list_recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="60dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Generer horaire"
android:layout_gravity="start"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Ajouter tache"
android:layout_gravity="end"
/>
</LinearLayout>
</LinearLayout>
I have this code where I want 4 buttons to appear in given size and a textview to occupy the remaining space. this code while rendering correctly on android studio designer but on device it seems textview takes the wrapcontent property instead of layoutweight. did i miss anything?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/bg_now_playing"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/primaryColor"
android:orientation="vertical"
tools:ignore="RtlHardcoded"
android:baselineAligned="false">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0.7"
android:background="#color/miniplayer_color"
android:orientation="vertical">
<!--few components-->
<LinearLayout
android:id="#+id/bottom_controls"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:id="#+id/options"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/now_playing_extra_options_bg"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:id="#+id/nowplaying_favourites"
android:layout_width="#dimen/nowplaying_icon_dimension"
android:layout_height="#dimen/nowplaying_icon_dimension"
android:layout_marginLeft="#dimen/nowplaying_button_padding"
android:src="#drawable/favorite_icon" />
<ImageView
android:id="#+id/download_btn"
android:layout_width="#dimen/nowplaying_icon_dimension"
android:layout_height="#dimen/nowplaying_icon_dimension"
android:layout_margin="#dimen/nowplaying_button_padding"
android:src="#drawable/download_icon" />
<ImageView
android:id="#+id/now_playing_share_btn"
android:layout_width="#dimen/nowplaying_icon_dimension"
android:layout_height="#dimen/nowplaying_icon_dimension"
android:layout_marginRight="#dimen/nowplaying_button_padding"
android:src="#drawable/share_icon" />
<views.CustomTextView
android:id="#+id/caller_tune"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/roundcorner_white"
android:fontFamily="#string/roboto_regular"
android:text="#string/tune"
android:textAlignment="center"
android:textColor="#color/miniplayer_color"
android:textSize="#dimen/button_text_size"
android:textStyle="bold" />
<ImageView
android:id="#+id/equalizer_now_playing"
android:layout_width="#dimen/nowplaying_icon_dimension"
android:layout_height="#dimen/nowplaying_icon_dimension"
android:layout_margin="#dimen/nowplaying_button_padding"
android:gravity="right"
android:src="#drawable/equalizer_icon" />
</LinearLayout>
</LinearLayout>
<!--few more components-->
</LinearLayout>
</LinearLayout>
I think it might be problem with your custom view. Because I placed just textview it worked fine. Here is my sample code with sample icons and metrics.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/bg_now_playing"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/darker_gray"
android:baselineAligned="false"
android:orientation="vertical"
tools:ignore="RtlHardcoded">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0.7"
android:background="#color/colorPrimary"
android:orientation="vertical">
<!--few components-->
<LinearLayout
android:id="#+id/bottom_controls"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:id="#+id/options"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:id="#+id/nowplaying_favourites"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginLeft="4dp"
android:src="#android:drawable/ic_delete" />
<ImageView
android:id="#+id/download_btn"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginLeft="4dp"
android:src="#android:drawable/ic_delete" />
<ImageView
android:id="#+id/now_playing_share_btn"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginLeft="4dp"
android:src="#android:drawable/ic_delete" />
<views.CustomTextView
android:id="#+id/caller_tune"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/roundcorner_white"
android:fontFamily="#string/roboto_regular"
android:text="#string/tune"
android:textAlignment="center"
android:textColor="#color/miniplayer_color"
android:textSize="#dimen/button_text_size"
android:textStyle="bold" />
<ImageView
android:id="#+id/equalizer_now_playing"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginLeft="4dp"
android:gravity="right"
android:src="#android:drawable/ic_delete" />
</LinearLayout>
</LinearLayout>
<!--few more components-->
</LinearLayout>
I am trying to make a scroll view. I have a text field in my app and when I open the keyboard, the entire screen shifts up and I want to make it scroll so I could see what's going up there.
My scroll view has a text field and some image views to show up on the screen.
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbars="vertical"
android:fillViewport="true"
android:id="#+id/scrollView2" >
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:minHeight="570dp">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="60dp"
android:layout_marginTop="30dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Total Lives :"
android:id="#+id/textView12"
android:layout_marginTop="8dp"
android:layout_marginLeft="20dp" />
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:id="#+id/lifeImage1"
android:src="#drawable/full_brain_game" />
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:id="#+id/lifeImage2"
android:src="#drawable/full_brain_game" />
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:id="#+id/lifeImage3"
android:src="#drawable/full_brain_game" />
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:id="#+id/lifeImage4"
android:src="#drawable/full_brain_game" />
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:id="#+id/lifeImage5"
android:src="#drawable/full_brain_game" />
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:id="#+id/lifeImage6"
android:src="#drawable/full_brain_game" />
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:id="#+id/textView7"
android:layout_marginLeft="150dp"
android:textColor="#color/red"
android:layout_marginTop="150dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:src="#drawable/full_brain_game_1" />
</LinearLayout>
</ScrollView>
Change ScrollView child as RelativeLayout as follows and add Linear Layout inside RelativeLayout:
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textStyle="bold"
android:id="#+id/txtsignup"
android:text="Register Here"
android:textSize="30dp"
android:padding="10dp"/>
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
Try this, and keep adding your views in the Linear Layout.
first of all you need to Set your ScrollView's height and width to match_parent then the height of your linearLayout must be match_parent too. then everything gonna be okay.
I'm attempting to prevent two images from overlapping - and I though I'd be able to do so using two RelativeLayouts inside a LinearLayout - both set to wrap_content - however the two imageViews ( #+id/imageView1 - the boxart and #+id/background - the background) however they still seem to overlap.
Can someone spot what I may have done wrong in this implementation?
XML Source:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/download"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/black" >
<RelativeLayout
android:id="#+id/rl_ListView2"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:background="#color/black" >
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:adjustViewBounds="true"
android:background="#drawable/boxart"
android:gravity="left"
android:paddingBottom="65dp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/background"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:background="#drawable/background_faded"
android:gravity="right"
android:paddingBottom="65dp"
android:scaleType="fitXY" />
</RelativeLayout>
<ImageView
android:id="#+id/downloadbtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginBottom="20dp"
android:layout_marginTop="200dp"
android:paddingLeft="500dp"
android:src="#drawable/button_download" />
<ProgressBar
android:id="#+id/progressbar_Horizontal"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="585dp"
android:layout_height="5dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginBottom="440dp"
android:layout_marginRight="100dp"
android:max="100"
android:progressDrawable="#drawable/progressbar2" />
<LinearLayout
android:id="#+id/footer"
android:layout_width="fill_parent"
android:layout_height="80dp"
android:layout_alignParentBottom="true"
android:background="#drawable/timeline_bottom_android"
android:orientation="horizontal" >
<ImageView
android:id="#+id/backbtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:gravity="left"
android:src="#drawable/icon_back_arrow" />
<TextView
android:id="#+id/backButtonTxt"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignRight="#+id/saveButton"
android:gravity="center_vertical"
android:text="Movies"
android:textSize="40sp" />
</LinearLayout>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/downloadbtn"
android:layout_below="#+id/downloadbtn"
android:layout_marginRight="207dp"
android:layout_marginTop="110dp" />
</RelativeLayout>
</LinearLayout>
Screenshot:
Instead of using Relative layout use a Linear layout with orientation horizontal and then use two Linear layouts with layout_weight=1 for each ImageView. It will divide your screen into two equal parts horizontally.
For example :-
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout android:layout_weight="1"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:orientation="vertical" />
<LinearLayout android:layout_weight="1"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:orientation="vertical" />
</LinearLayout>
As per your given layout update your layout as follows:-
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/download"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/black"
android:orientation="vertical">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:id="#+id/rl_ListView2"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/black"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:background="#drawable/boxart"
android:paddingBottom="65dp" />
</LinearLayout >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/background"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:background="#drawable/background_faded"
android:gravity="right"
android:paddingBottom="65dp"
android:scaleType="fitXY" />
</RelativeLayout>
<ImageView
android:id="#+id/downloadbtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginBottom="20dp"
android:layout_marginTop="200dp"
android:paddingLeft="500dp"
android:src="#drawable/button_download" />
<ProgressBar
android:id="#+id/progressbar_Horizontal"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="585dp"
android:layout_height="5dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginBottom="440dp"
android:layout_marginRight="100dp"
android:max="100"
android:progressDrawable="#drawable/progressbar2" />
<LinearLayout
android:id="#+id/footer"
android:layout_width="fill_parent"
android:layout_height="80dp"
android:layout_alignParentBottom="true"
android:background="#drawable/timeline_bottom_android"
android:orientation="horizontal" >
<ImageView
android:id="#+id/backbtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:gravity="left"
android:src="#drawable/icon_back_arrow" />
<TextView
android:id="#+id/backButtonTxt"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignRight="#+id/saveButton"
android:gravity="center_vertical"
android:text="Movies"
android:textSize="40sp" />
</LinearLayout>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/downloadbtn"
android:layout_below="#+id/downloadbtn"
android:layout_marginRight="207dp"
android:layout_marginTop="110dp" />
</LinearLayout>
With regards to your particular situation, the 2 ImageViews causing problems are placed each in a RelativeLayout, which are also placed in a RelativeLayout. Views placed in a relative layout can overlap each other. So when you added the 2 children RelativeLayouts in the parent one, exactly this happened. To make one follow the other, you can add android:layout_toRightOf="#id/id_of_the_layout_you_want_on_the_left_of_this_one" to the second child.
Also, if you are willing to change your layout a bit, you could achieve this through weight and LinearLayout (note however that this will work only if the desired combined width of the 2 children is less than what the parent is willing to offer):
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
... />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
... />
</LinearLayout>
</LinearLayout>
I am creating an android app with the above design in mind. I have made a custom action bar and stuck that to the onCreateOptionsMenu in my MainActivity.
getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
getSupportActionBar().setCustomView(R.layout.action_bar);
I have also created a fixed footer in my MainActivity which is basically the imageviews for triggering different fragments in the app. Now these imageviews are set to wrap_content for their heights.
My questions are -
How do I restrict the size of my fragments so it sticks to the fixed viewgroup at the bottom as it does not have a specific height?
Is this the best approach to implementing such a design where there is a fixed footer to swap between fragments?
How to create and add a re-usable UI component similar to something like a google card where I can push in data from the server and include those dynamically in the scrollview.
Thank you.
Edit 1
activity_main -
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/mainActivity"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="dd.MainActivity" >
<!-- Footer aligned to bottom -->
<LinearLayout
android:id="#+id/llFooterPlaceholder"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical" >
<View
android:layout_width="fill_parent"
android:layout_height="3dp"
android:background="#color/green" />
<LinearLayout
android:id="#+id/llFooterMenu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/bottom_bar"
android:orientation="horizontal" >
<ImageView
android:id="#+id/iv1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="20"
android:scaleType="fitCenter"
android:src="#drawable/state_definition_iv1" />
<ImageView
android:id="#+id/iv2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="20"
android:scaleType="fitCenter"
android:src="#drawable/state_definition_iv2" />
<ImageView
android:id="#+id/iv3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="20"
android:background="#color/green"
android:scaleType="center"
android:src="#drawable/state_definition_iv3" />
<ImageView
android:id="#+id/iv4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="20"
android:scaleType="fitCenter"
android:src="#drawable/state_definition_iv4" />
<ImageView
android:id="#+id/iv5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="20"
android:scaleType="fitCenter"
android:src="#drawable/state_definition_iv5" />
</LinearLayout>
</LinearLayout>
<!-- Scrollable item above footer -->
<ScrollView
android:id="#+id/svContent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/llFooterPlaceholder"
android:layout_alignParentTop="true" >
<!-- Inflate the contents of the ScrollView dynamicaly -->
</ScrollView>
</RelativeLayout>
fragment1 which is activated onClick of iv1 of the footer (layout not complete yet) -
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="30"
android:background="#444"
android:orientation="horizontal"
android:padding="#dimen/item_padding" >
<ImageView
android:id="#+id/ivAvtar"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="30"
android:background="#000"
android:scaleType="fitCenter" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="50"
android:background="#fff"
android:orientation="vertical" >
<TextView
android:id="#+id/tvUsername"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="50"
android:background="#0ff"
android:text="Username"
android:textColor="#color/green"
android:textStyle="bold" />
<TextView
android:id="#+id/tvImageTitle"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="50"
android:background="#ff0"
android:text="Title"
android:textColor="#color/orange"
android:textStyle="italic" />
</LinearLayout>
<TextView
android:id="#+id/tvTimestamp"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="20"
android:gravity="center"
android:text="Timestamp"
android:textColor="#color/green"
android:textStyle="bold" />
</LinearLayout>
<ImageView
android:id="#+id/ivImage"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="60"
android:background="#999"
android:padding="#dimen/item_padding"
android:scaleType="fitCenter" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="10"
android:background="#EEE"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="80"
android:background="#000"
android:orientation="horizontal" >
</LinearLayout>
<ImageView
android:id="#+id/ivShare"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="20"
android:background="#ddd"
android:padding="#dimen/item_padding"
android:scaleType="fitCenter" />
</LinearLayout>
</LinearLayout>
Change your ScrollView height from fill_parent to wrap_content. Because android:layout_height="fill_parent" your ScrollView come over your llFooterPlaceholder
like this
<ScrollView
android:id="#+id/svContent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#id/llFooterPlaceholder"
android:layout_alignParentTop="true" >
<!-- Inflate the contents of the ScrollView dynamicaly -->
</ScrollView>