Develop Reference

Layout Weight distribution wrongly interpreted

I want to define a composite layout where the header and footer LinearLayout blocks take 10% of the view and body block the remaining 80%. Without setting weights, all 3 blocks have the same size, so I have set the weight of header and footer layout to 10 and body to 80 with weight sum 100 but this had an unwanted result that actually is opposite to the one expected, and body despite has the higher weight disappears due to the fact header and footer block take all the available space.
Layout code
<?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"
android:weightSum="100">
<LinearLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="10"
android:baselineAligned="false"
android:orientation="horizontal">
<RelativeLayout
android:id="#+id/head"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:background="#drawable/hf"
android:padding="5dp">
<TextView
android:id="#+id/texthead"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Sample head" />
<ImageView
android:id="#+id/imageh"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:srcCompat="#drawable/him" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/body"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="80"
android:baselineAligned="false"
android:orientation="horizontal">
<RelativeLayout
android:id="#+id/bd0"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:background="#drawable/bdf"
android:padding="10dp">
<TextView
android:id="#+id/textbd0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="1dp"
android:gravity="center"
android:text="Lorem ipsum" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:srcCompat="#drawable/bdim" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/bd1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:background="#drawable/bdf"
android:padding="10dp">
<TextView
android:id="#+id/textbd1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="1dp"
android:gravity="center"
android:text="Lorem ipsum" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:srcCompat="#drawable/bdim" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/footer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="10"
android:baselineAligned="false"
android:orientation="horizontal">
<RelativeLayout
android:id="#+id/ft"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:background="#drawable/ftf"
android:padding="5dp">
<TextView
android:id="#+id/textft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Sample footer" />
<ImageView
android:id="#+id/imageft"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:srcCompat="#drawable/ftim" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>

Try the following code:
(You can undo the background changes I did, it was just so I could visualize what was going on.)
According to the following post: Android layout weight not working as I thought -- you need to set your wanted attribute to 0dp for layout_weight to work properly.
In summary: by setting the height to match_parent, you are confusing the XML compiler and it doesn't know how to apply layout_weight properly.
<?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="match_parent"
android:orientation="vertical"
android:weightSum="100">
<LinearLayout
android:id="#+id/header"
android:background="#color/material_dynamic_neutral30"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="10"
android:baselineAligned="false"
android:orientation="horizontal">
<RelativeLayout
android:id="#+id/head"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:background="#color/black"
android:padding="5dp">
<TextView
android:id="#+id/texthead"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Sample head" />
<ImageView
android:id="#+id/imageh"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/body"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="80"
android:background="#color/teal_200"
android:baselineAligned="false"
android:orientation="horizontal">
<RelativeLayout
android:id="#+id/bd0"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:background="#color/cardview_light_background"
android:padding="10dp">
<TextView
android:id="#+id/textbd0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="1dp"
android:gravity="center"
android:text="Lorem ipsum" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/bd1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:background="#color/teal_200"
android:padding="10dp">
<TextView
android:id="#+id/textbd1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="1dp"
android:gravity="center"
android:text="Lorem ipsum" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/footer"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="10"
android:background="#color/teal_700"
android:baselineAligned="false"
android:orientation="horizontal">
<RelativeLayout
android:id="#+id/ft"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:background="#color/material_dynamic_neutral30"
android:padding="5dp">
<TextView
android:id="#+id/textft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Sample footer" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>

How to put a TextView at the end of my ScrollView?

I want to add a TextView at the bottom of my ScrollView, in which I can put the version number. So when a user first enters the screen, they don't see the Version Number. After they Scroll down, they can see the version number at the bottom of the screen. I tried all kinds of ways, doesn't work.
The layout is pretty nested.
This is the screenshot of the layout implementing the code below
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/linearLayoutThatDoesNotScroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg_splash"
android:clickable="true"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="#dimen/cnt_full">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="false"
android:layout_centerVertical="true"
android:layout_gravity="center">
<com.onkore.app.view.FontTextView
android:id="#+id/profile_num_trophies_won"
style="#style/Theme.App.Text.Headline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_marginTop="#dimen/cnt_half"
android:drawablePadding="#dimen/cnt_tiny"
android:drawableStart="#drawable/icon_trophy"
android:fontFamily="thick"
android:gravity="center_vertical"
android:text="99"
android:textColor="#color/color_text_primary_inverse"
android:textSize="32sp" />
<com.onkore.app.view.FontTextView
style="#style/Theme.App.Text.Caption"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/profile_num_trophies_won"
android:text="#string/profile_trophies"
android:textColor="#color/color_text_primary_inverse" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
<com.makeramen.roundedimageview.RoundedImageView
android:id="#+id/profile_user_pic"
android:layout_width="#dimen/profile_image_size"
android:layout_height="#dimen/profile_image_size"
android:layout_centerInParent="true"
android:layout_centerVertical="false"
android:src="#drawable/icon_profile_default"
app:riv_oval="true" />
<com.mikhaellopez.circularprogressbar.CircularProgressBar
android:id="#+id/profile_progress_bar"
android:layout_width="#dimen/profile_progress_bar_size"
android:layout_height="#dimen/profile_progress_bar_size"
android:layout_centerHorizontal="false"
android:layout_centerInParent="true"
android:layout_centerVertical="false"
app:cpb_background_progressbar_color="#color/color_base"
app:cpb_background_progressbar_width="#dimen/elev_06"
app:cpb_progress="25"
app:cpb_progressbar_color="#color/color_progress"
app:cpb_progressbar_width="#dimen/cnt_tiny" />
<com.onkore.app.view.FontTextView
android:id="#+id/profile_level"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/profile_progress_bar"
android:layout_centerHorizontal="true"
android:layout_centerInParent="false"
android:layout_marginTop="#dimen/cnt_dbl"
android:textColor="#color/color_text_primary_inverse"
android:textSize="#dimen/text_size"
tools:text="Level 99" />
</RelativeLayout>
<com.onkore.app.view.FontTextView
android:id="#+id/profile_okoins"
style="#style/Theme.App.Coins.Balance"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_gravity="center_vertical"
tools:text="999k" />
</RelativeLayout>
<com.onkore.app.view.FontTextView
style="#style/Theme.App.Tile.Text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/cnt_full"
android:layout_marginStart="#dimen/cnt_full"
android:layout_marginTop="#dimen/cnt_full"
android:background="#drawable/bg_card_empty"
android:gravity="center"
android:paddingBottom="#dimen/cnt_dbl"
android:paddingTop="#dimen/cnt_part"
android:text="Tap to Personalize"
android:textAllCaps="true"
android:visibility="gone" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/color_primary_translucent"
android:visibility="gone">
<com.onkore.app.view.FontTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Friends" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
>
<TextView
android:id="#+id/versionName"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#color/cardview_dark_background"
android:gravity="center_vertical|center_horizontal|center"
android:text="HAHA"
android:textColor="#color/cardview_light_background"
android:visibility="visible" />
</LinearLayout>
</LinearLayout>
</ScrollView>
</RelativeLayout>

maybe something like this?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="8dp">
<ScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/linearLayoutThatDoesNotScroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorAccent"
android:clickable="true"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="1000dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="version"
android:textSize="50dp" />
</LinearLayout>
</ScrollView>
</RelativeLayout>

Multiple recyclerview issue

I am trying to create an XML layout for football teams statistics and add who scored the goal for each team on the side of the vertical red view
After some work i created this layout:
This is my layout xml code :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:card_view="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="5dp"
app:cardUseCompatPadding="true"
card_view:cardCornerRadius="4dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_centerVertical="true"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start">
<ImageView
android:id="#+id/image_team1"
android:layout_width="50dp"
android:layout_height="50dp"
android:adjustViewBounds="true"
android:src="#drawable/placemahdi"
/>
</LinearLayout>
<LinearLayout
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end">
<ImageView
android:id="#+id/image_team2"
android:layout_width="50dp"
android:layout_height="50dp"
android:adjustViewBounds="true"
android:src="#drawable/placemahdi"/>
</LinearLayout>
<TextView
android:id="#+id/versus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/txt_stadium"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text=":"
android:textSize="25sp" />
<com.github.pavlospt.CircleView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="30dp"
android:id="#+id/point1"
android:layout_height="35dp"
app:cv_titleText="2"
app:cv_titleSize="14sp"
android:layout_marginRight="10dp"
android:layout_toStartOf="#+id/versus"
android:layout_toLeftOf="#+id/versus"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
app:cv_titleColor="#color/white"
app:cv_subtitleText=""
app:cv_strokeColorValue="#color/colorGreen"
app:cv_backgroundColorValue="#color/yellow"
app:cv_fillColor="#color/yellow"
app:cv_fillRadius="0.9"
app:cv_strokeWidthSize="3"/>
<com.github.pavlospt.CircleView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="30dp"
android:id="#+id/point2"
android:layout_height="35dp"
app:cv_titleText="2"
app:cv_titleSize="14sp"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_toEndOf="#+id/versus"
android:layout_toRightOf="#+id/versus"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
app:cv_titleColor="#color/white"
app:cv_subtitleText=""
app:cv_strokeColorValue="#color/colorGreen"
app:cv_backgroundColorValue="#color/yellow"
app:cv_fillColor="#color/yellow"
app:cv_fillRadius="0.9"
app:cv_strokeWidthSize="3"/>
<TextView
android:id="#+id/team2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="ahed2"
android:textAlignment="center"
android:textSize="10sp"
android:layout_marginTop="5dp"
android:layout_alignParentBottom="true"
android:layout_alignLeft="#+id/point2"
android:layout_alignStart="#+id/point2" />
<TextView
android:id="#+id/team1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_alignParentBottom="true"
android:text="ahed2"
android:textAlignment="center"
android:textSize="10sp"
android:layout_marginTop="5dp"
android:layout_below="#+id/point1"
android:layout_alignLeft="#+id/point1"
android:layout_alignStart="#+id/point1" />
</RelativeLayout>
<View
android:layout_width="2dp"
android:layout_height="300dp"
android:layout_gravity="center"
android:layout_marginTop="50sp"
android:background="#a40404" />
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center|bottom"
android:layout_gravity="bottom"
android:textSize="20sp"
/>
</android.support.v7.widget.CardView>
</ScrollView>
</LinearLayout>
And this is my layout inflater where i added a recyclerview:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipe_refresh"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_post"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</ScrollView>
</android.support.v4.widget.SwipeRefreshLayout>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
Here is an image i am following :
I just want to add the player who scored the goal with the football icon foreach side of the vertical red line.
Should i create two recyclerview?
Any suggestions please?

If you are using LinearLayout with weight property you can reslove this issue..
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="100">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_one"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="50"/>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/holo_red_dark"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_two"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="49"/>
</LinearLayout>
try this..

Why doesn't this HorizontalScrollView fills the parent?

I've made a layout that worked fine with a vertical scroll view, but I need to make another one with a horizontal scroll view.
I just changed ScrollView to HorizontalScrollView:
<?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="match_parent"
android:orientation="vertical" >
<HorizontalScrollView
android:layout_weight="1"
android:scrollbars="none"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:text="#string/activity_visibilidade_cronologia_aula_subtitulo"
android:textSize="16dp" />
<ImageButton
android:id="#+id/activity_visibilidade_cronologia_aula_btn_info"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
android:background="#null"
android:scaleType="fitXY"
android:src="#drawable/btn_info" />
</RelativeLayout>
<LinearLayout
android:id="#+id/activity_visibilidade_cronologia_aula_linear_conteudo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
</LinearLayout>
<Button
android:id="#+id/activity_visibilidade_cronologia_aula_btn_confimar"
android:layout_width="165dp"
android:layout_height="35dp"
android:layout_centerVertical="true"
android:layout_gravity="right"
android:layout_marginBottom="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:background="#drawable/botao_add_confirmar"
android:text="#string/dialogo_alterar_classe_confirmar"
android:textColor="#color/branco" />
</LinearLayout>
</HorizontalScrollView>
</LinearLayout>
And its result is:
Why doesn't HorizontalScrollView fills the parent, is there something wrong?

I solved merging all your advices and also using android:fillViewport="true" my final code is:
<?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="match_parent"
android:orientation="vertical" >
<include layout="#layout/layout_titulo_views" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:text="#string/activity_visibilidade_cronologia_aula_subtitulo"
android:textSize="16dp" />
<ImageButton
android:id="#+id/activity_visibilidade_cronologia_aula_btn_info"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
android:background="#null"
android:scaleType="fitXY"
android:src="#drawable/btn_info" />
</RelativeLayout>
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:scrollbars="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/activity_visibilidade_cronologia_aula_linear_conteudo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
</HorizontalScrollView>
<Button
android:id="#+id/activity_visibilidade_cronologia_aula_btn_confimar"
android:layout_width="165dp"
android:layout_height="35dp"
android:layout_centerVertical="true"
android:layout_gravity="right"
android:layout_marginBottom="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:background="#drawable/botao_add_confirmar"
android:text="#string/dialogo_alterar_classe_confirmar"
android:textColor="#color/branco" />
</LinearLayout>
</LinearLayout>
Thank you all

I found teh problem. In addition to removing the weight sum, you need to change the linear layout orientation to horizontal.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >

Displaying framelayout one above another

I have a framelayout with id listLayout that contains the button. I want it to be just above the other framelayout with id news_fragment but it is coming besides this.
Here is the xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/listLayout"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content">
<Button
android:id="#+id/lists"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="#drawable/btn_black_xml"
android:padding="8dp"
android:text="List"
android:textColor="#ffffff"
android:textSize="20dp" />
</FrameLayout>
<FrameLayout
android:id="#+id/news_fragment"
android:layout_weight="2"
android:layout_width="0dp"
android:layout_height="match_parent">
</FrameLayout>
<FrameLayout
android:id="#+id/channel_fragment"
android:layout_weight="3"
android:layout_width="0dp"
android:layout_height="match_parent" />
</LinearLayout>

You LinearLayout is horizontal, that why child views are shown besides each other. try to put it vertical instead :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
...
I hope I understand well you question.
also be aware that you should simplify your layout : having one single view inside some layouts is useless and resource consuming :
in other word :
<FrameLayout
android:id="#+id/listLayout"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content">
<Button
android:id="#+id/lists"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="#drawable/btn_black_xml"
android:padding="8dp"
android:text="List"
android:textColor="#ffffff"
android:textSize="20dp" />
</FrameLayout>
is bad, the FrameLayout is useless.

Take a look if it is what are looking for:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<FrameLayout
android:id="#+id/listLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/lists"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:padding="8dp"
android:text="List"
android:textColor="#ffffff"
android:textSize="20dp" />
</FrameLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent" >
<FrameLayout
android:id="#+id/news_fragment"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" >
</FrameLayout>
<FrameLayout
android:id="#+id/channel_fragment"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" >
</FrameLayout>
</LinearLayout>
</LinearLayout>

Put them both in Linearlayout vertical like so
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical" >
<FrameLayout
android:id="#+id/listLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" >
<Button
android:id="#+id/lists"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="#drawable/btn_black_xml"
android:padding="8dp"
android:text="List"
android:textColor="#ffffff"
android:textSize="20dp" />
</FrameLayout>
<FrameLayout
android:id="#+id/news_fragment"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2" >
</FrameLayout>
</LinearLayout>
<FrameLayout
android:id="#+id/channel_fragment"
android:layout_weight="3"
android:layout_width="0dp"
android:layout_height="match_parent" />
</LinearLayout>