Develop Reference

Android table layout last row smaller

I would like to have a tablellayout with 3 rows and 4 columns.
The first two rows are ok but the last one is far too small then the others.
I tried it with a 5.5 screen size phone (Samsung Galaxy Note 2), where the rows are almost the same height, but on a 9.6 inch tablet (Samsung Galaxy Tab E), the last row is very small. What am I doing wrong?
I have also attached my Layout file and a screenshot with the actual layout.
My code:
<?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:background="#drawable/domestic"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_margin="5sp"
android:gravity="center"
android:background="#drawable/rounded_corner_start">
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:measureWithLargestChild="true"
android:stretchColumns="*">
<!-- Row with 4 columns -->
<TableRow
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="1">
<!--Kutya-->
<LinearLayout
android:id="#+id/lnDog"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_margin="3sp"
android:orientation="vertical"
android:background="#drawable/rounded_corner_elements"
android:layout_weight="1">
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.8"
android:src="#drawable/dog"/>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:fontFamily="sans-serif-thin|bold"
android:text="#string/dog"
android:gravity="center"
android:layout_weight="0.2" />
</LinearLayout>
<!--Macska-->
<LinearLayout
android:id="#+id/lnCat"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_margin="3sp"
android:orientation="vertical"
android:background="#drawable/rounded_corner_elements"
android:layout_weight="1">
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.8"
android:src="#drawable/cat2"/>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:fontFamily="sans-serif-thin|bold"
android:text="#string/cat"
android:gravity="center"
android:layout_weight="0.2" />
</LinearLayout>
<!--Diszno-->
<LinearLayout
android:id="#+id/lnPig"
android:layout_width="0dp"
android:layout_margin="3sp"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/rounded_corner_elements"
android:layout_weight="1">
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.8"
android:src="#drawable/pig"/>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:fontFamily="sans-serif-thin|bold"
android:text="#string/pig"
android:gravity="center"
android:layout_weight="0.2" />
</LinearLayout>
<!--Tyuk-->
<LinearLayout
android:id="#+id/lnChicken"
android:layout_width="0dp"
android:layout_margin="3sp"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/rounded_corner_elements"
android:layout_weight="1">
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.8"
android:src="#drawable/chicken"/>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:fontFamily="sans-serif-thin|bold"
android:text="#string/chicken"
android:gravity="center"
android:layout_weight="0.2" />
</LinearLayout>
</TableRow>
....
4 times
</TableLayout>
</LinearLayout>
</LinearLayout>

So, finally I figured it out that all images should have the same height, and then all rows have the same height. It's strange because I would have expected that by setting the tablerow's weight the inner content would automatically resize itself.

LinearLayout position is shifting to up , When video is playing in Videoview

When the application is launched layout is fine. But when the video is playing. the Layout of the button is moving up.
How to resolve this?
When the application is launched?
When the video is playing the button is moving upwards
Below I had placed the layoutfile.xml which i had been working on.
<?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:weightSum="1"
android:baselineAligned="false"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.3"
android:background="#android:color/background_dark">
<ListView
android:id="#+id/VideoList"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/darker_gray"
android:foreground="#android:color/background_light" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:weightSum="1"
android:layout_weight="0.7">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.9"
android:layout_gravity="center_vertical">
<VideoView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/videoView"
android:layout_gravity="center" />
</FrameLayout>
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.1"
android:text="New Button"
android:id="#+id/button"/>
</LinearLayout>
</LinearLayout>

You should make the LinearLayout(that contains FrameLayout and Button) height match_parent

No need for weight-sum, just make the layout_weights integers like 1 and 9 instead of 0.1 and 0.9
Also, fill_parent is deprecated, use match_parent instead.
You have a LinearLayout with single child. No need, just put ListView with same layout_params.
Lastly, your vertical LinearLayout on the right should have a height of match_parent.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false"
android:orientation="horizontal">
<ListView
android:id="#+id/VideoList"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:background="#android:color/darker_gray"
android:foreground="#android:color/background_light" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="7">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="9"
android:layout_gravity="center_vertical">
<VideoView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/videoView"
android:layout_gravity="center" />
</FrameLayout>
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="New Button"
android:id="#+id/button"/>
</LinearLayout>
</LinearLayout>
Edit: Fixed layout Params on LinearLayout.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false"
android:orientation="horizontal">
<ListView
android:id="#+id/VideoList"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="3"
android:background="#android:color/darker_gray"
android:foreground="#android:color/background_light" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="7">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="9"
android:layout_gravity="center_vertical">
<VideoView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/videoView"
android:layout_gravity="center" />
</FrameLayout>
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="New Button"
android:id="#+id/button"/>
</LinearLayout>
</LinearLayout>
I have done changes in listview "layout_width" and "layout_height" both should be match_parent ,Now it is working

How to design below format in Android

I have a requirement in Android where I have to design four buttons as shown in Image below. I am not sure which Layout should I use and how to make it happen where 60-40% ratio will be resizable across all screens. Thankyou!

You can make your layout relative by using the weight attribute. I provided an example suiting your case. Note that the weight sum in this example is always 1.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.6">
<Button
android:id="#+id/button_1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.6"
android:background="#color/red"/>
<Button
android:id="#+id/button_2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.4"
android:background="#color/black"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.4">
<Button
android:id="#+id/button_3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.4"
android:background="#color/green"/>
<Button
android:id="#+id/button_4"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.6"
android:background="#color/orange"/>
</LinearLayout>
This is the result

After drag and drop, without any alterations to layout_width and layout_height
LinearLayout (Vertical)
LinearLayout (Horizontal) //layout_weight: 0.4
FrameLayout //layout_weight: 0.4
FrameLayout //layout_weight: 0.6
LinearLayout (Horizontal) //layout_weight: 0.6
FrameLayout //layout_weight: 0.6
FrameLayout //layout_weight: 0.4
NOTE: If you change match_parent to 0dp, you shall have the weights in the right places as in 0.6 for 60% and 0.4 for 40%.
Code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.4">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.4"
android:background="#d00000"></FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.6"
android:background="#9be412" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.6">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.6"
android:background="#12b9a3" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.4"
android:background="#b208a7" />
</LinearLayout>
</LinearLayout>

Using 3 Linear Layout. First Linear layout will be vertical and weigthSum=2 with 2 Linear Layout children and their weight be 1 and each child linear layout will be horizontal and have 2 buttons.

you should probably use percent support library to your project.
dependencies {
compile 'com.android.support:percent:xx.x.x'
}
<android.support.percent.PercentRelativeLayout
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">
<View
android:id="#+id/top_left"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_alignParentTop="true"
android:background="#ff44aacc"
app:layout_heightPercent="20%"
app:layout_widthPercent="70%" />
<View
android:id="#+id/top_right"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/top_left"
android:background="#ffe40000"
app:layout_heightPercent="20%"
app:layout_widthPercent="30%" />
<View
android:id="#+id/bottom"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_below="#+id/top_left"
android:background="#ff00ff22"
app:layout_heightPercent="80%" />
</android.support.percent.PercentRelativeLayout>

This will help you..
<?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:background="#android:color/black"
android:weightSum="100">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="60"
android:weightSum="100"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:text="Button1"
android:layout_weight="60"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:text="Button2"
android:layout_weight="40"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="40"
android:weightSum="100"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:text="Button3"
android:layout_weight="40"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:text="Button4"
android:layout_weight="60"/>
</LinearLayout>
</LinearLayout>
Thanks...

ScrollView with weight not working for me

I have a parent linearlayout with two scrollview inside it and I am using weight attribute inside scroll vies but this is not working for me I mean it's not providing any scrolling. Here is the code, how can I make it work?
LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2">
<ScrollView
android:layout_width="0dp"
android:layout_height="match_parent"
android:scrollbars="horizontal"
android:fillViewport="true"
android:layout_weight="1"
android:layout_marginRight="8dp">
<LinearLayout
android:id="#+id/linearLayoutSizes"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginLeft="#dimen/product_detail_items_margin_left"
>
</LinearLayout>
</ScrollView>
<ScrollView
android:layout_width="0dp"
android:layout_height="match_parent"
android:scrollbars="horizontal"
android:fillViewport="true"
android:layout_weight="1"
android:layout_marginLeft="8dp">
<LinearLayout
android:id="#+id/linearLayoutColors"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RadioGroup
android:id="#+id/colorsGroup"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</RadioGroup>
</LinearLayout>
</ScrollView>
</LinearLayout>

Experimented your code and found the issue.
From your code, it does seems like what you want is a Horizontal Scroll. But you are using normal ScrollView which is by default Vertical Scroll. Consider changing ScrollView to HorizontalScrollView.
i.e. from
<ScrollView
android:layout_width="0dp"
android:layout_height="match_parent"
android:scrollbars="horizontal"
android:fillViewport="true"
android:layout_weight="1"
android:layout_marginRight="8dp">
to
<HorizontalScrollView
android:layout_width="0dp"
android:layout_height="match_parent"
android:scrollbars="horizontal"
android:fillViewport="true"
android:layout_weight="1"
android:layout_marginRight="8dp">
Do change on both your scroll view. Cheers!

Since you are fixing weight for the scrollView it thinks that the data should never exceed the height and hence it doesnt scroll. Just cover the scrollviews with frame layouts like below and try.
LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2">
<FrameLayout android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="horizontal"
android:fillViewport="true"
android:layout_weight="1"
android:layout_marginRight="8dp">
<LinearLayout
android:id="#+id/linearLayoutSizes"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginLeft="#dimen/product_detail_items_margin_left"
>
</LinearLayout>
</ScrollView>
<FrameLayout>
<FrameLayout android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="horizontal"
android:fillViewport="true"
android:layout_weight="1"
android:layout_marginLeft="8dp">
<LinearLayout
android:id="#+id/linearLayoutColors"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RadioGroup
android:id="#+id/colorsGroup"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</RadioGroup>
</LinearLayout>
</ScrollView>
</FrameLayout>
</LinearLayout>
See if this works.

See if the following code works for you:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:android="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="2">
<ScrollView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="8dp"
android:layout_weight="1"
android:fillViewport="true"
android:scrollbars="horizontal">
<LinearLayout
android:id="#+id/linearLayoutSizes"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"></LinearLayout>
</ScrollView>
<ScrollView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="8dp"
android:layout_weight="1"
android:fillViewport="true"
android:scrollbars="horizontal">
<LinearLayout
android:id="#+id/linearLayoutColors"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RadioGroup
android:id="#+id/colorsGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
</RadioGroup>
</LinearLayout>
</ScrollView>
</LinearLayout>

your XML looks ok to me so why dont you try and add a couple of buttons or images to the layouts and try to scroll them?
also dont forget to add this line of code to the very top of your XML file:
<?xml version="1.0" encoding="utf-8"?>
let me know how you get on.

Distribute grids evenly to fit screen

i am trying to get three rows in my recyclerview to fit the screen perfectly. In other words distributed evenly with no scrolling. I have a toolbar and a recyclerview with two columns/three rows. As of now i have just set the items height to fit the screen close enough but there has to be a better way?
activity_main.xml
<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:context=".MainActivity">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_below="#id/toolbar"
android:background="#CCCC"
android:layout_width= "match_parent"
android:layout_height = "match_parent"/>
</RelativeLayout>
item.xml
<?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">
<View
android:id="#+id/colorBlock"
android:layout_width="match_parent"
android:layout_height="170dp"
android:background="#CCCCCC" />
<ImageView
android:id="#+id/item"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_centerHorizontal="true"
android:padding="16dp"
/>
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="16dp"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:textColor="#android:color/white"
android:textSize="16sp"/>
</RelativeLayout>

By definition, the RecyclerView is supposed to be used in situations where recycling views can happen - a.k.a. scrollable because large amount of views. I don't mean to say it can not be used for smaller collections, but there's no value in using it upon other layouts. As a matter of fact, not being built for such scenarios, it becomes very difficult to make use of it in scenarios like in this question. If you absolutely want to use RecyclerView, I am not aware of any way to do it in xml only. I think you'll have to implement your own layout manager for this.
If you are open to using other layouts, here's a solution involving a bunch of linear layouts and weights. Not optimal, having to use nested weights, but a solution nevertheless:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_below="#id/toolbar"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#ff0000"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#fff000"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#ff0f00"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#ff00f0"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#00ff00"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#f0ff00"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#0fff00"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#00fff0"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#0000ff"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#f000ff"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#0f00ff"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#00f0ff"/>
</LinearLayout>
</LinearLayout>