Android: 2 relative layout divided in half screen - android

I tried many times to draw 2 Relative layout aligned horizontally and divided in half screen.
I design the image with paint to explain a bit better what i mean.
Any suggestion?

Another way to accomplish the same task without needing to use a LinearLayout is to put a center-aligned "shim" in the middle of the parent layout, then align other elements to it. If you set the half-width element's width to match_parent, but align both their left and right sides, they'll end up shrinking themselves to fit.
<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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.example.EqualWidthExample" >
<!-- An invisible view aligned to the center of the parent. Allows other
views to be arranged on either side -->
<View
android:id="#+id/centerShim"
android:layout_height="match_parent"
android:layout_width="0dp"
android:visibility="invisible"
android:layout_centerHorizontal="true"/>
<!--Set width to match_parent sets maximum width. alignParentLeft aligns
the left edge of this view with the left edge of its parent. toLeftOf
sets the right edge of this view to align with the left edge of the
given view. The result of all three settings is that this view will
always take up exactly half of the width of its parent, however wide
that may be. -->
<Button
android:id="#+id/btLeft"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/centerShim"
android:text="Left Button" />
<!--Same deal, but on the right -->
<Button
android:id="#+id/btRight"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/centerShim"
android:layout_below="#+id/tvLeft"
android:text="Right Button" />
</RelativeLayout>

You can put these 2 RelativeLayouts inside a LinearLayout with horizontal orientation, then use the weight for both RelativeLayouts. This will divide the LinearLayout in 2 equal parts.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:baselineAligned="false">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
</RelativeLayout>
</LinearLayout>

now you can do it easily using PercentRelativeLayout
<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:padding="16dp"
tools:context=".MainActivity">
<Button
android:id="#+id/button"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="Button"
app:layout_widthPercent="50%"/>
<Button
android:id="#+id/button2"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#id/button"
android:text="Button 2"
app:layout_widthPercent="50%"/>
</android.support.percent.PercentRelativeLayout>
don't forget to add the gradle dependency
dependencies {
compile 'com.android.support:percent:25.3.1'
}
code in github
Update
PercentRelativeLayout is Deprecated since API level 26.0.0

You could use an non-recommended structure with nested wieghts
<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="wrap_content"
android:orientation="vertical"
android:baselineAligned="false"
android:weightSum="5">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
android:layout_gravity="center">
<TextView
android:id="#+id/TopTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Top Text View"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"/>
</RelativeLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:weightSum="2"
android:layout_weight="4">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin">
<TextView
android:id="#+id/LeftTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Left Text View"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin">
<TextView
android:id="#+id/RightTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Right Text View"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"/>
</RelativeLayout>
</LinearLayout>
</LinearLayout>

I see 4 relativelayouts in your drawing...?
If you mean the two in the middle put them into one LinearLayout (horizontal orientation), let all of them have a width of match_parent and give both relative layouts a weight of 1

Related

How to center fit image in linear layout?

I have an xml screen with three children linear layouts in a parent linear layout of vertical orientation. First child contains an image view and when running the application I can not view any image. Why? is the image size too big?? If so.. how to scale it? However Image is view able in my design tab. of android stdudio. Below is my complete code for xml file.
<?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_sign_up"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.example.root.my_laoder.SignUp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:scaleType="centerInside"
android:src="#drawable/ty"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="vertical"
android:paddingTop="50dp"
>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="number"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingTop="50dp"
>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"/>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
/>
</LinearLayout>
</LinearLayout>
1. Add attribute android:gravity="center_horizontal" to LinearLayout, to show ImageView in center.
2. Update ImageView width to android:layout_width="wrap_content" and remove attribute android:layout_gravity="center".
3. Use android:scaleType="fitXY" instead of android:scaleType="centerInside"
Try this:
<?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_sign_up"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/ty" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="vertical"
android:paddingTop="50dp">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="number" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingTop="50dp">
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5" />
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5" />
</LinearLayout>
</LinearLayout>
OUTPUT:
what are the dimens values for these parameters?
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
and why you are using separate linearlayout for imageView even with parent layout as linear?
kindly remove that
have you checked the size of image you are using as a background in ImageView? if size is large than probably image is pushing your rest of your views out of the screen.try to give fixed width and height let's say 100dp for both and see if you are able to see anything.
If you wanna make imageView centre horizontally use in ImagView view
android:layout_gravity="center_horizontal"
above line of code will not work with separate linear layout for ImageView. If you are gonna use separate layout for ImageView anyway, use below line of code inside that linearlayout
android:gravity="center_horizontal"
Note: sorry I'm not able to leave a comment.
Try this for your ImageView:
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:scaleType="centerInside"
android:src="#android:drawable/btn_minus" />
I think you missed scaleType of ImageView, Follow the steps to make your image center
1. Add attribute android:layout_gravity="center_horizontal" to show ImageView in center.
2. Set ImageView layout_width="match_parent" and
layout_height="#dimen/fixed_height"
==> height will be fixed but width will automatically adjust
according to device size
3. and set scaleType="fitEnd" or scaleType="fitCenter"
==> fitEnd is ( Scale the image from the end of the container ) and
possible to have space on top
if image is different each time.
==> fitCenter is (Scale the image from center) and possibility to
have space in top and bottom
Example:
<ImageView
android:id="#+id/cover_image"
android:layout_width="match_parent"
android:layout_height="#dimen/fixed_height"
android:layout_gravity="center_horizontal"
android:scaleType="fitEnd" />

Image does not touch the edges, Android [duplicate]

I am creating an Android app which has a main RelativeLayout and some LinearLayout within it.
Now i have this problem. When dragging items to the editor, e.g. a LinearLayout, it doesn't fit to the full width of the screen. How can I make this possible? This is my XML:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:gravity="fill"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<LinearLayout
android:id="#+id/itemDetailLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:orientation="vertical"
android:fillViewport="true" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/itemImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="40dp"
android:minWidth="40dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/itemName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:text="Name"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:fillViewport="true" >
<TextView
android:id="#+id/itemRecentHigh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Recent High" />
<TextView
android:id="#+id/itemRecentLow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Recent Low" />
<TextView
android:id="#+id/itemAverage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Average" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/listViewLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/itemDetailLayout"
android:layout_marginTop="10dp"
android:fillViewport="true"
android:gravity="fill_horizontal"
android:orientation="vertical" >
<ListView
android:id="#+id/searchListView"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:fillViewport="true" >
</ListView>
</LinearLayout>
Added a screenshot for more info. Added blue background to have some contrast.
Replace this:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
With
android:layout_width="match_parent"
android:layout_height="wrap_content"
into your LinearLayout or Remove all the Padding from main RelativeLayout
Removing padding makes the linear layout fit the entire screen of the device
The space between the blue part and the "end of the screen". On the sides and above the part where the back button and home button are.
Remove the padding from the root RelativeLayout.
Try
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical>
// Other views within the linear layout
</LinearLayout>
I suppose you are using Eclipse. Personally, I hate the Graphical Editor of Eclipse and I usually write the XML code directly because working with the editor is a real pain
Don't use fill_parent as it is deprecated.
Instead to your RelativeLayout set
android:layout_width="fill_parent"
android:layout_height="fill_parent"
Then, to the list view that you want to fill the rest of the screen, you can set this tags
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
By doing so, you are telling the XML that you want your ListView to do what fill_parent used to do in previous versions of Android.
Kind regards!
you should try something like the following :
<LinearLayout
android:id="#+id/itemDetailLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
...
</LinearLayout>
what i mean you should do this :
android:layout_width="fill_parent"
for every LinearLayout that you want its width to fill_parent .
FILL_PARENT means that the view wants to be as big as its parent as mentioned in the documentation .
and please give me some feedback
Hope That Helps .

Why doesn't match_parent work when view is larger than viewport?

UPDATE - 9/28/2015:
I have reached the desired appearance by replacing my oriented GridLayouts with TableLayouts that use TableRows for horizontal siblings with a layout_weight=1 and a layout_weight=1 also on any cell item that is the lowest vertically-aligned sibling.
I am building a UI that is made up of a nested grid of many unequal rows and columns. The lowest level views inside the grid must fill the remainder of the screen. The views are all dynamically inflated except for the ScrollView and frame.
I am using GridLayouts that are set to match_parent for both width and height. The child views (the views that actually go inside the cells of the grid) are also configured the same way. Each cell contains a vertical LinearLayout with the first view being the title bar of the lane and the second view being another GridLayout.
For some reason when my grids become large enough to go off screen because of the amount of items, I notice that other nearby views lose their ability to fill the screen.
CORRECT EXAMPLE (notice right purple square fills space)
INCORRECT (as soon as views go outside screen, making ScrollView take effect, right purple square doesn't match parent)
I'm guessing it has something to do with the views losing ability to determine height once the ScrollView kicks in.
A better way to demonstrate it is by putting this layout XML in Android Studio and removing the LinearLayout with ID = REMOVE_ME_NEXUS_S.
and then adding it back again using a small screen preview device like Nexus S. When you remove the LinearLayout, the right side view fills the screen but when you put it back it only goes as big as its minHeight.
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fillViewport="true">
<FrameLayout
android:id="#+id/board_frame"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
android:background="#android:color/holo_green_dark"
tools:context=".BoardActivity">
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:layout_margin="#dimen/lane_margin"
android:background="#android:color/holo_orange_light"
>
<FrameLayout
android:id="#+id/lane_title_frame"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<TextView
android:id="#+id/lane_tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/lane_title_text_size"
android:layout_gravity="center_horizontal"
android:layout_margin="#dimen/lane_title_margin"
android:textColor="#color/lane_title_text_color"
tools:text="#string/dt_lane_title"/>
</FrameLayout>
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="#dimen/lane_margin"
android:background="#android:color/holo_orange_light"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/lane_title_text_size"
android:layout_gravity="center_horizontal"
android:layout_margin="#dimen/lane_title_margin"
android:textColor="#color/lane_title_text_color"
tools:text="#string/dt_lane_title"/>
</FrameLayout>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="#dimen/lane_minHeight"
android:background="#android:color/holo_purple"
>
</GridLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/REMOVE_ME_NEXUS_S"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="#dimen/lane_margin"
android:background="#android:color/holo_orange_light"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/lane_title_text_size"
android:layout_gravity="center_horizontal"
android:layout_margin="#dimen/lane_title_margin"
android:textColor="#color/lane_title_text_color"
tools:text="#string/dt_lane_title"/>
</FrameLayout>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="#dimen/lane_minHeight"
android:background="#android:color/holo_purple"
>
</GridLayout>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="#dimen/lane_margin"
android:background="#android:color/holo_orange_light"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/lane_title_text_size"
android:layout_gravity="center_horizontal"
android:layout_margin="#dimen/lane_title_margin"
android:textColor="#color/lane_title_text_color"
tools:text="#string/dt_lane_title"/>
</FrameLayout>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="#dimen/lane_minHeight"
android:background="#android:color/holo_purple"
>
</GridLayout>
</LinearLayout>
</GridLayout>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:layout_margin="#dimen/lane_margin"
android:background="#android:color/holo_orange_light"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/lane_title_text_size"
android:layout_gravity="center_horizontal"
android:layout_margin="#dimen/lane_title_margin"
android:textColor="#color/lane_title_text_color"
tools:text="#string/dt_lane_title"/>
</FrameLayout>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="#dimen/lane_minHeight"
android:background="#android:color/holo_purple"
>
</GridLayout>
</LinearLayout>
</GridLayout>
</FrameLayout>
</ScrollView>
I do notice if I set layout_rowWeight to 1 on the right side LinearLayout that it will fill the parent, but it doesn't actually do it on my device, just in the studio preview window.

Android relativeLayout: How to make button take bottom port of screen?

I was wondering can I create a button that would take the bottom portion of the screen as seen here:
I have tried to play with the alignment and margins, but to no avail:
Another question that I had was why my movie poster is not aligning to the left of the top text properly? As can be seen, it's a bit to the right. I had attempted to drag it into place.
Here is my 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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.abushawish.randommovie.MainActivity$PlaceholderFragment" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/button1"
android:layout_alignParentTop="true"
android:layout_marginTop="14dp"
android:text="Black Hawk Down"
android:textAppearance="?android:attr/textAppearanceLarge" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/textView3"
android:layout_alignLeft="#+id/textView1"
android:layout_below="#+id/textView1"
android:src="#drawable/bhd" />
<Button
android:id="#+id/button1"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:text="New Movie Suggestion"
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_marginLeft="-50dp"
android:layout_marginRight="-50dip"
android:layout_marginBottom= "-20dp" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView1"
android:layout_centerVertical="true"
android:text="Description"
android:layout_marginLeft="1dp" />
Thank you!
Try to remove these.
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
They add padding to the RelativeLayout.
You should start by removing the padding and margins in order to have a simple layout.
When it is ok, you can put back the padding & margins one by one to see which ones are ok or not.
Remove the padding from the buttons parent layout, then your button will align with the edges of the screen.
<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"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.abushawish.randommovie.MainActivity$PlaceholderFragment" >
If you still want to have padding for the other objects add them in a separate layout with padding.
Edit
To put the picture in the middle add
android:layout_centerHorizontal="true"
Try android:gravity="bottom" and in the relative layout add android:layout_alignParentBottom="true"
This will give u the intended look.. and yes, don't give weight to children of RelativeLayout
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="New Movie Suggestion" />

Button completely disappears when placed below gridview despite numerous configurations

I have a view in which i'd like a button to be placed below a grid view and fill up the remaining space. The view is a relative layout, and no matter what attributes I give it, if I some how relate the button to the grid view, it disappears. It only appears if I place it in the relative view with it aligned parent bottom, but then it doesn't stretch. The solution I thought would be most likely, though it didn't work either, was to place the button in the relative view, alignParentBottom=True and then layout_below="id/gridview" (all that is psuedo code). This is my code right now:
<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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:background="#drawable/pin_fragment_background"
tools:context="com.lab125.viva_app.MainActivity$PlaceholderFragment" >
<TextView
android:id="#+id/section_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:id="#+id/audioPIN_marquee"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="15dp"
android:paddingBottom="30dip"
android:gravity="center"
android:textSize="15sp"
android:textStyle="bold"
/>
<LinearLayout
android:id="#+id/keypad_wrapper"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_below="#id/audioPIN_marquee">
<GridView
android:id="#+id/keypad"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnWidth="90dp"
android:gravity="center"
android:horizontalSpacing="5dip"
android:verticalSpacing="5dip"
android:numColumns="3"
android:stretchMode="columnWidth" />
<Button
android:id="#+id/start_ver_btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="15sp"
android:textStyle="bold"
android:text="#string/Start_Ver_Button"
android:background="#drawable/button_style" />
</LinearLayout>
<Button
android:id="#+id/audio_playback_btn"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/keypad_wrapper"
android:text="play"
android:textSize="15sp">
</Button>
</RelativeLayout>
Again, with this code, the button does not show at all.
Edit: #Dave's suggestion was correct, and I could see the button after setting the orientation to vertical. However, the only reason I had placed the gridView in a linear layout in the first place was in attempt to just not have the button disappear when having its android:layout_below property to the gridView (by setting its android:layout_below to something else). The more accurate fix for what I wanted to do however, was to not have the gridView's width and height set to match_parent, which was the root cause behind why the button was disappearing. So, i set the gridView's height to wrap content, but that caused the grid to shrink to the point where each grid element's content was no longer visible. I found that the cause of that was => I was programmatically setting the width and height of the gridview to wrap its content, and then the width and height of the components inside by the width and height of the parent view. Realized that was quite cyclical which may be why the gridview was shrinking when I set it to wrap content. I then set the width and height of the grid Elements based on the dimensions of the screen, which fixed the size of the gridView. So everything pretty much works now.
Here is my new layout, if anyone is interested.
<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"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:background="#drawable/pin_fragment_background"
tools:context="com.lab125.viva_app.MainActivity$PlaceholderFragment" >
<TextView
android:id="#+id/section_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:id="#+id/audioPIN_marquee"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginBottom="20dp"
android:paddingTop="15dp"
android:gravity="center"
android:textSize="15sp"
android:textStyle="bold"
/>
<GridView
android:id="#+id/keypad"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/audioPIN_marquee"
android:layout_marginTop="10dp"
android:layout_marginBottom="20dp"
android:columnWidth="90dp"
android:gravity="center"
android:horizontalSpacing="5dip"
android:verticalSpacing="5dip"
android:numColumns="3"
android:stretchMode="columnWidth" />
<Button
android:id="#+id/start_ver_btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/keypad"
android:layout_alignParentBottom="true"
android:layout_marginTop="20dp"
android:textSize="15sp"
android:textStyle="bold"
android:text="#string/Start_Ver_Button"
android:background="#drawable/button_style" />
<!--
<Button
android:id="#+id/audio_playback_btn"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/keypad_wrapper"
android:text="play"
android:textSize="15sp">
</Button> -->
</RelativeLayout>
start_ver_btn won't show because the gridview has match_parent for both width and height, judging by your layout_width and heights, I think you want to set the LinearLayout's orientation to vertical.

Categories

Resources