how to make app a percent of the screen size - android

I am trying to use percentRelativeLayout to make my app 90% width of the screen size and 50% of the screen height.
My layout consists of two fragments: 1) the left side is 4 buttons and 2) the right side is a container that inserts a different fragment with each button click.
When I use percentRelativeLayout or percentFrameLayout to make the height 50% of the screen, and the width 90% of the screen I get the result below where it seems like I am getting my fragments as 50% height and 90% width INSIDE a box that is 50% of the height of the total screen and 90% of the width of the total screen. Does anyone know how I can fix this?
I have tried setting my layout_height and width to match_parent for both my layouts and the result is either the same, or the app takes up the whole screen. I also made sure to use a theme that takes up the whole screen, and not a Dialog theme. I have also tried using a parent RelativeLayout with a percentRelativeLayout nested inside with layout_widthPercent and layout_heightPercent applied to my fragments and I get the same result.
<android.support.percent.PercentFrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout 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:layout_gravity="center"
android:background="#drawable/rounded_edges"
android:theme="#style/Theme.AppCompat.Light.NoActionBar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
app:layout_widthPercent="90%"
app:layout_heightPercent="50%"
>
<fragment
android:id="#+id/menuFragment"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_margin="5dp"
class="it.anddev.bradipao.janus.MenuFragment"
tools:layout="#layout/fr_menu">
</fragment>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</android.support.percent.PercentFrameLayout>
Here is what I want it to look like
Here is what it looks like now

It looks like your menu fragment's width takes about 30% of the total width of its dialog styled parent and the content takes about 70%. I would use a PercentRelativeLayout inside the PercentFrameLayout like the following
<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentFrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.percent.PercentRelativeLayout
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"
android:layout_gravity="center"
android:background="#drawable/rounded_edges"
android:theme="#style/Theme.AppCompat.Light.NoActionBar"
app:layout_heightPercent="50%"
app:layout_widthPercent="90%">
<fragment
android:id="#+id/menuFragment"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:layout_alignParentStart="true"
app:layout_widthPercent="30%"
class="it.anddev.bradipao.janus.MenuFragment"
tools:layout="#layout/fr_menu">
</fragment>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toEndOf="#+id/menuFragment" />
</android.support.percent.PercentRelativeLayout>
</android.support.percent.PercentFrameLayout>
As for the double white background appearing behind your Welcome fragment, I cannot really tell why it is happening without looking at its layout file. You may want to remove the background in the layout for all the fragments you replace in the container FrameLayout

Things which i have changed to show button is removed the menu fragment with four buttons to mimic the image you want as the result, you can replace this four buttons with the menu fragment
<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentFrameLayout 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:background="#android:color/transparent">
<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:layout_gravity="center"
android:background="#android:color/holo_blue_dark"
android:padding="4dp"
app:layout_heightPercent="50%"
app:layout_marginPercent="5%"
app:layout_widthPercent="90%">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_margin="4dp"
android:layout_weight="0.3"
android:background="#android:color/holo_purple"
android:contentDescription="this is where you can keep your buttons"
android:gravity="center"
android:orientation="vertical">
<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_margin="4dp"
android:layout_weight="1"
android:text="First"
android:textAllCaps="false" />
<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_margin="4dp"
android:layout_weight="1"
android:text="Second"
android:textAllCaps="false" />
<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_margin="4dp"
android:layout_weight="1"
android:text="Third"
android:textAllCaps="false" />
<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_margin="4dp"
android:layout_weight="1"
android:text="Forth"
android:textAllCaps="false" />
</LinearLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="bottom"
android:layout_margin="4dp"
android:layout_weight="0.7"
android:background="#android:color/holo_green_dark"
android:contentDescription="this would be your frame container"></FrameLayout>
</LinearLayout>
</android.support.percent.PercentFrameLayout>
output

Related

Layout, one ViewGroup takes the 60% of the height, and the other one fills the rest

I've bounced around quite a bit and haven't been able to find a solution that matches what i'm trying to do.
I have 2 RelativeLayouts inside a LinearLayout.
I would like the first RelativeLayout to take up 60% of the screen.
I would like the second layout to take up the remainder of the screen.
I am using weights but I'm trying to see if there is a way that I can avoid using a secondary weight on the second RelativeLayout.
The reason for this is that the user has the ability through a Button click to hide the first layout.
In code I do this by setting the visibility of the first RelativeLayout to "Gone".
The problem is if I have weight set to .6 and .4 and sum of 1, when the first one is set to gone, the second one moves up correctly, but its height doesn't increase because it was set to 40%.
Ideally I could have it set to fill the remaining space on the screen and therefore when the first one is hidden, it will now take up all 100% of the screen.
Is this possible or do I need to do more programmatically when I hide the first View to increase the allowed height of the second view?
Hopefully this makes sense, if not let me know and i'll try to clarify further.
I've stripped out some of the contents of the RelativeLayouts for simplicity as well as some ids.
Code below:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:breadCrumbNavigationLayout="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:id="#+id/linearlayout1"
android:focusable="true"
android:focusableInTouchMode="true"
android:weightSum="1">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:id="#+id/relativeLayout1"
android:layout_weight="0.6">
<FrameLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/frame1" />
<ProgressBar
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:id="#+id/progress"
android:indeterminateOnly="true"
android:keepScreenOn="true"
android:visibility="gone" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/relative2">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text=""
android:textSize="16dp"
android:gravity="center_horizontal"
android:layout_below="#+id/relativeLayout1" />
<ListView
android:id="#+id/list"
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:dividerHeight="1dp" />
</RelativeLayout>
</LinearLayout>
You can use Android Support Library's Percentage Relative Layout to achieve this.
Percentage Relative Layout
import percentage support library by adding following line to your build.gradle(app level),
compile 'com.android.support:percent:24.2.1'
And Your XML file will be,
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:breadCrumbNavigationLayout="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:id="#+id/linearlayout1"
android:focusable="true"
android:focusableInTouchMode="true"
android:weightSum="1">
<android.support.percent.PercentRelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_height="0dp"
android:layout_width="match_parent"
app:layout_heightPercent="60%"
android:id="#+id/relativeLayout1"
>
<FrameLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/frame1" />
<ProgressBar
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:id="#+id/progress"
android:indeterminateOnly="true"
android:keepScreenOn="true"
android:visibility="gone" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/relativeLayout1"
android:id="#+id/relative2">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text=""
android:textSize="16dp"
android:gravity="center_horizontal"
android:layout_below="#+id/relativeLayout1" />
<ListView
android:id="#+id/list"
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:dividerHeight="1dp" />
</RelativeLayout>
</android.support.percent.PercentRelativeLayout>
</LinearLayout>
Once you set,
relativeLayout1.setVisibility(View.GONE);
you are able to see that the Relative layout 2 will occupy the whole parent space.
I hope it will help you. All the best.

Android toolbar Layout issue

I am trying to make a bottom bar using the toolbar and aligning it to the parent bottom. This is how it looks:
But somehow as mentioned in the image, their is a lot of empty space due to which the layout is not exactly centered. Why is that happening?
bottom_tool_bar.xml
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/ColorPrimaryLight"
android:elevation="4dp"
android:layout_alignParentBottom="true"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="#+id/origin_select"
android:src="#mipmap/ic_action_play"
android:background="#drawable/feedback_background"
android:onClick="choose_origin_button"
/>
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="#+id/destination_select_select"
android:src="#mipmap/ic_action_stop"
android:background="#drawable/feedback_background"
android:onClick="choose_destination_button"/>
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="#+id/poi_select"
android:src="#mipmap/ic_action_pause"
android:background="#drawable/feedback_background"
android:onClick="choose_interest_button"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
The layout file for the concerned activity:
<include
android:id="#+id/tool_bar"
layout="#layout/tool_bar"
>
</include>
<include
android:id="#+id/bottom_tool_bar"
layout="#layout/bottom_tool_bar">
</include>
<fragment
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/plot_path_map"
android:layout_below="#+id/tool_bar"
android:layout_above="#+id/bottom_tool_bar"
android:name="com.google.android.gms.maps.MapFragment"
/>
<Button
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/submit_button"
android:text="Submit"
android:textColor="#FFFFFF"
android:layout_centerHorizontal="true"
android:background="#drawable/feedback_background"
android:layout_centerVertical="true"
android:textSize="20sp"
android:layout_alignParentBottom="true"
android:visibility="invisible"
android:onClick="submit_button_click"
/>
</RelativeLayout>
If you want to place the toolbar at the bottom, this is what you should be doing.
Use a LinearLayout with alignParentBottom="true"
<RelativeLayout
android:id="#+id/mainLyt"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<!-- Some layout things -->
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/bottomBar">
<!-- some scrolling content -->
</ScrollView>
<LinearLayout
android:id="#+id/bottomBar"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:orientation="horizontal"
android:layout_alignParentBottom="true">
<!-- Some Buttons -->
</LinearLayout>
</RelativeLayout>
As you mentioned about spacing, which I believe is another question, you can modify it by using the following attributes inside your ToolBar.
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
Make a separate layout file and name it tool_bar.xml and make sure LinearLayout is your root layout.
Then in your activity type this:
<include
android:id="#+id/tool_bar"
layout="#layout/tool_bar"
></include>
Then give weight of 0.3 to all your ImageViews and layout:width and layout:height as wrap_content
Use below line to avoid left side gap in activity class.
mToolbar.setContentInsetsAbsolute(0, 0);
Look below code for avoid top and bottom space.
<ImageView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/origin_select"
android:src="#mipmap/ic_action_play"
android:background="#drawable/feedback_background"
android:onClick="choose_origin_button"
/>
In your image view width should be a wrap_content and height should be 0dp
For centering the Views you have many options two are the following (I believe the second is best):
First include weigthsum in your linearlayout, I like to use 100 since this helps me think in percentage, then include 2 stump framelayout in order to push your imageviews to the horizontal center and to let them keep responsive properties by using weight like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="100"
android:orientation="horizontal"
>
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="30"/>
<ImageView
android:id="#+id/origin_select"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="13"
android:background="#drawable/feedback_background"
android:onClick="choose_origin_button"
android:src="#mipmap/ic_action_play"
/>
<ImageView
android:id="#+id/destination_select_select"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="13"
android:background="#drawable/feedback_background"
android:onClick="choose_destination_button"
android:src="#mipmap/ic_action_stop"/>
<ImageView
android:id="#+id/poi_select"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="13"
android:background="#drawable/feedback_background"
android:onClick="choose_interest_button"
android:src="#mipmap/ic_action_pause"/>
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="30"/>
</LinearLayout>
As you can see both framelayout have nothing inside but they help you push your other ImageViews to the center they both give you 60% of space used and leave you just another 40% for your ImageViews thus they have each 13%.
On the other hand you can use a RelativeLayout as your parent element instead of LinearLayout and position Imageview with id: destination_select_select align center to parent both horizontal and vertical and then position the other two imageviews at the side of the one centered in the middle. This option might be the best:
Like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:id="#+id/origin_select"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#drawable/feedback_background"
android:onClick="choose_origin_button"
android:src="#mipmap/ic_action_play"
android:layout_alignLeft="#+id/destination_select_select"
/>
<ImageView
android:id="#+id/destination_select_select"
android:layout_width="wrap_content"
android:layout_centerInParent="true"
android:layout_height="match_parent"
android:background="#drawable/feedback_background"
android:onClick="choose_destination_button"
android:src="#mipmap/ic_action_stop"/>
<ImageView
android:id="#+id/poi_select"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignRight="#+id/destination_select_select"
android:background="#drawable/feedback_background"
android:onClick="choose_interest_button"
android:src="#mipmap/ic_action_pause"/>
</RelativeLayout>
To avoid top and bottom spaces,
Add this line
android:minHeight="0dp"
to the <android.support.v7.widget.Toolbar> properties.

Android: Layout looks different on different devices

Hi I have an activity with an imageview and a row with buttons at the bottom.The buttons are added to the iconView layout programmatically.When I test my app on my HTC one the buttons are displayed correct.
Once I run it on a device with a smaller screen it is cropped i.e. only the top of the buttons is displayed.
How can I make my code device independent?
<?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:background="#000000"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/mainView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background2"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="0.95"
android:orientation="vertical"
android:paddingLeft="4dp"
android:paddingTop="4dp"
android:paddingRight="4dp"
android:paddingBottom="4dp"
android:src="#android:drawable/ic_menu_camera" />
<LinearLayout
android:id="#+id/iconView"
android:layout_weight="0.05"
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal" >
</LinearLayout>
</LinearLayout>
</LinearLayout>
Thanks in advance.
Try this layout:
<?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:background="#000000" >
<RelativeLayout
android:id="#+id/mainView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background2" >
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="4dp"
android:layout_above="#+id/iconView"
android:src="#android:drawable/ic_menu_camera" />
<LinearLayout
android:id="#+id/iconView"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
android:orientation="horizontal" />
</RelativeLayout>
</LinearLayout>
Try this
make the first view with android:layout_weight="1"
and the with a static height without the layout_weight, this should solve it
Unfortunately the solutions did not work. Eventually I changed my code and add the buttons in the xml, not programmatically. This works fine. I don't know why...
When adding button either programmatically or in XML layout, try to use LinearLayout as the parent for button and leverage the "weightsum" property of that LinearLayout.
When you're going to share the real state of screen's width or height equally between a number of views such as buttons or textview or ..., you can set "layout_weight" property on those controls. Notice that, this is only possible when using LinearLayouts.
What happens at the end is that the linearlayout's real estate is calculated and allocated according to each child's element's "layout_weight" value.
The example below shows how to put two buttons beside each other and make them fill the screen's width equally :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="2"
>
<Button
android:id="#+id/btn_left"
android:layout_width="0dp" // width is calculated by weight
android:layout_height= "wrap_content"
android:layout_weight="1" />
<Button
android:id="#+id/btn_right"
android:layout_width="0dp" // width is calculated by weight
android:layout_height= "wrap_content"
android:layout_weight="1" />
<LinearLayout/>

Divide screen by percentage

I am trying to create a Relative layout in when it 3 views layed out vertically. The first view is text and supposed to take 10% of the screen. Second view is image and is supposed to take 50% of the screen. 3rd view is text and is supposed to take the remaining 40%.
The way I do it is that by adjusting the dimensions of the image manually and estimating that it is close to what I want by looking at it. I am sure this is not the right way. So how can I do it? Bascially how can I devide the screen percentage wise and can I do it with Relative layout
Thank you
You should use LinearLayout with android:weightSum.
use android:weightSum="100" on the root layout and give the android:layout_weight according to your requirement. And android:layout_height="0dp" for each View.
<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" >
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="10" />
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="50"
android:contentDescription="#string/image"
android:src="#drawable/ic_launcher" />
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="40" />
</LinearLayout>
Hope this will help you.
You can do it using LinearLayout and android:layout_weight attribute:
<?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">
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<View
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="5" />
<View
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="4" />
</LinearLayout>

How can I create a 50/50 vertical layout with stacked GridViews?

One of my DialogFragments implements two equal-sized GridViews, one stacked on top of the other. Ideally, my layout would look like this (as seen in Android Studio):
Unfortunately, when I load up the layout on an actual Android device, I get something like this:
When the Kanji GridView is empty, it's completely invisible. Additionally, its height varies depending on the number of elements it has to display. How can I force the bottom GridView to fill 50% of the height as per the layout seen in Android Studio, even when it's empty?
Here is the XML for this particular layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/kanji_lookup_root"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:focusableInTouchMode="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ProgressBar
android:layout_width="32dp"
android:layout_height="32dp"
android:id="#+id/progress_bar"
android:layout_toStartOf="#+id/search_box_kanji"
android:visibility="gone"
android:indeterminate="true"
android:layout_centerVertical="true"/>
<SearchView
android:layout_width="300dp"
android:layout_height="wrap_content"
android:id="#id/search_box_kanji"
android:queryHint="#string/menu_search_hint"
android:iconifiedByDefault="false"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<TextView
style="#style/EntryDetailsHeader"
android:text="#string/components" />
<com.tonicartos.widget.stickygridheaders.StickyGridHeadersGridView
android:id="#+id/grid_components"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numColumns="9"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<TextView
style="#style/EntryDetailsHeader"
android:text="#string/kanji" />
<GridView
android:id="#+id/grid_kanji"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:numColumns="9"/>
</LinearLayout>
</LinearLayout>
(By the way I'm using the StickyGridHeaders library for the upper Components GridView)
Change the '0dp' layout_height on your two LinearLayouts to 'match_parent'.
You're missing a weightSum attribute on your outermost LinearLayout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/kanji_lookup_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusableInTouchMode="true"
android:orientation="vertical"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:weightSum="2" > <!-- This line is what you were missing -->
...
</LinearLayout>
Tested this as working on device (assuming your EntryDetailsHeader style sets match_parent width and wrap_content height).

Categories

Resources