Why is my 'transparent' overlay view opaque? - java

I have a single activity with a simple layout (a bunch of coloured panels) and I'm trying to overlay a small moving graphic on a transparent view over the top. Like #umar here I'm following this tutorial but my overlay view is refusing to be transparent. I can make the view appear, it contains just what it should, but the background of the view is black and however I try to make it transparent fails. I've tried a few of the solutions mentioned on SO and it always comes out the same.
My layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/everything"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#00ffffff"
>
<LinearLayout
android:id="#+id/row_1_bg"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:orientation="horizontal"
>
<FrameLayout
android:layout_height="fill_parent"
android:layout_width="100dp"
>
<LinearLayout
android:id="#+id/row_1_table"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#808080"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:orientation="horizontal"
>
<TextView
android:id="#+id/row_1_pantone"
android:paddingLeft="6dip"
android:textColor="#f0f0f0"
android:textStyle="bold"
android:gravity="center_vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
</TextView>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:orientation="horizontal"
>
<TextView
android:id="#+id/row_1_rgb"
android:paddingLeft="6dip"
android:textColor="#f0f0f0"
android:textStyle="bold"
android:gravity="center_vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
</TextView>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:orientation="horizontal"
>
<TextView
android:id="#+id/row_1_hex"
android:paddingLeft="6dip"
android:textColor="#f0f0f0"
android:textStyle="bold"
android:gravity="center_vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
</TextView>
</LinearLayout>
</LinearLayout>
</FrameLayout>
</LinearLayout>
<LinearLayout
android:layout_height="fill_parent"
android:layout_width="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:paddingRight="5px"
android:paddingTop="5px"
android:paddingLeft="5px"
android:gravity="bottom"
android:orientation="vertical"
android:background="#00808080">
<barry.pantone.TransparentPanel
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:id="#+id/transparent_panel"
android:paddingRight="5px"
android:paddingTop="5px"
android:paddingLeft="5px"
android:paddingBottom="5px"
android:background="#00808080">
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/button_click_me"
android:text="Click Me!"
/>
</barry.pantone.TransparentPanel>
</LinearLayout>
</LinearLayout>
My TransparentPanel.java is straight from the tutorial, using:
innerPaint.setARGB(225, 75, 75, 75);
to make a transparent panel, and this is my onCreate from the main activity:
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Resources res = getResources();
sPantone = res.getStringArray(R.array.pantone); // gets colour definitions
iHeight = getWindowManager().getDefaultDisplay().getHeight();
PopulateTable (); // draws colours in the various layout elements
}
The problem is that whatever I do inside the view is fine - I can draw a semi transparent panel over other elements in that view, but the overlay view itself has a black background which obscures the layout beneath. If anyone can help me understand why transparency doesn't work, I will be eternally grateful.
Many thanks
Baz
EDIT
Following another idea I tried moving the definition of the overlay out into its own XML file and using a LayoutInflater to inflate and add the new view. Nope. Exactly the same - the additional view has a solid background. Here's the tranny.xml layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:background="#80000040"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:paddingRight="5dip"
android:paddingTop="5dip"
android:paddingLeft="5dip"
android:gravity="bottom"
android:orientation="vertical"
>
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/button_click_me"
android:text="Click Me!"
/>
</LinearLayout>
and here's the code from onCreate to inflate the new view and add it to the main layout:
private View view;
ViewGroup parent = (ViewGroup) findViewById(R.id.everything);
view = LayoutInflater.from(getBaseContext()).inflate(R.layout.tranny, parent, false);
parent.addView(view);
Basically I've gone about creating exactly the same result using a different technique. Handy to learn about LayoutInflater for the first time, but no help re transparency :(

OK, no answers so I'm assuming there's no way to use parent.addView(view) to add an overlaid view which has a transparent background. I had hoped to add a narrow transparent view over the right hand edge of my layout (a scrollbar) into which I could draw a bitmap indicating the position in the big list of displayed items.
Instead I have now made my whole layout slightly narrower and left room for a narrow LinearLayout down the right edge, which has a black background, and into that I draw my bitmap, so I get this:
I would have preferred to put the pointer over the top of the blocks of colour, but unless some guru in the future finds this question and shows us how to do it, I'm close enough.
Baz.

I can draw a semi transparent panel over other elements in that view
Exactly this. You need the "transparency" to be overlaying what's behind it.
The transparency is likely working, but the parent layout's background is transparent (#00ffffff), so the background of the overlay looks black.
Change your root layout's background and you'll likely see that the transparency is working.
If you want it overlay the other elements of your view, you need the transparency as a child to that section of the layout. The way it's currently laid out is like:
<App>
<Content>
</Content>
<Overlay>
</Overlay>
</App>
Whereas you need:
<App>
<Content>
<Overlay>
</Overlay>
</Content>
</App>
If you look at the source for that tutorial you're following, you'll see the custom transparent panel is a child of the MapView, not the root application view. This is why it's able to overlay the MapView content.

Related

Imageview stucked at the top of android layout

I have put two linear layouts, under the first linear layout I have put the "textview" and In the second one I have put "imageview". But the problem is that image view is not moving, I want that dice icon in the centre. Whenever I try to drag that icon it gets stucked at the top left corner of the layout.
I can't figure out what's going wrong as I am new to android.
Have a look at the screenshot
https://i.stack.imgur.com/SJmEY.png
activity_main.xml
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="#string/Logo"
android:textAlignment="center"
android:textColor="#ffffff"
android:textSize="36sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:srcCompat="#drawable/five" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
MainActivity.java
package com.example.snakes;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
You cannot drag elements in a LinearLayout. They are placed in the order they are declared in the layout file, depending on the orientation set (either horizontally or vertically).
There is also no reason to have two linear layouts like this in your case. You can place both of your elements inside of the first one, and use the gravity property to center the image view (ex. gravity = "center_vertical").
EDIT:
I ended up trying it myself, and resolved it using a RelativeLayout inside a LinearLayout. Make sure the RelativeLayout matches the parents width and height, then center the ImageView inside of the RelativeLayout, like so:
<androidx.constraintlayout.widget.ConstraintLayout 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">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center_vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/someImage"
android:orientation="vertical"
android:layout_centerInParent="true"/>
</RelativeLayout>
</LinearLayout>
You need to add to the second linear layout - constraints statements. I can't recall the exact name of them but I think It's something like "layout_constraintTop_toBottomOf". this should make them constraint. then if you want you can determine the gap and adjust the view.

Android: Why does View background draw in editor but not in app?

I have an Android project with an xml file representing a row for an Adapter.
This row has a coloured View on the left hand side.
For some reason the View renders correctly in the graphical editor in Eclipse but not when I run it on a device.
The View draws at the correct size but there's no blue background like the editor has.
I've noticed when I dump the UI hierarchy that the View nodes aren't in the hierarchy.
If I break on binding the views in the adapter, I can see that mMeasuredHeight is correct but mMeasuredWidth is 0. I feel like I'm missing something fundamental.
Attached are screenshots and the xml file.
<?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/view_header_accent"
android:layout_width="50dp"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#color/blue_primary" />
<TextView
android:id="#+id/txt_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="#dimen/grid_small"
android:layout_marginTop="#dimen/grid_small"
android:layout_toLeftOf="#+id/img_cancel"
android:layout_toRightOf="#+id/view_header_accent"
android:text="Brad"
android:textSize="18sp" />
<TextView
android:id="#+id/txt_subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/txt_title"
android:layout_alignRight="#+id/txt_title"
android:layout_below="#+id/txt_title"
android:paddingBottom="#dimen/grid_small"
android:text="Active"
android:textColor="#80000000"
android:textSize="14sp" />
<ImageView
android:id="#+id/img_cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="#dimen/grid_small"
android:src="#drawable/ic_cancel" />
</RelativeLayout>
Screenshot from graphical editor in Eclipse:
Screenshot from device:
Found the issue.
The issue is because the top level view is a RelativeLayout with wrap_content as the height.
Combine this with the child having a layout_height of match_parent and the measured height for the coloured child View ends up getting calculated to 0.
The workaround unfortunately is to set a fixed height for the row or optionally specify the top and bottom alignment of the coloured view to match other child views.
The final View looks like this:
<View
android:id="#+id/view_header_accent"
android:layout_width="8dp"
android:layout_height="match_parent"
android:layout_alignBottom="#+id/txt_subtitle"
android:layout_alignParentLeft="true"
android:layout_alignTop="#+id/txt_title"
android:background="#color/blue_primary" />

How to center Textview inside Listview using RelativeLayout?

ArrayAdapter<String> arrayAdapter = new ArrayAdapter<String>(this,R.layout.activity_haltestellen, R.id.tvHaltestellen, HaltestellenListe);
lvH.setAdapter(arrayAdapter);
this is how the stuff is set and .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" >
<ListView
android:id="#+id/lvHaltestellen"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" >
</ListView>
<TextView
android:id="#+id/tvHaltestellen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
/>
I get the StringArray from a database.
so how can center the tv inside the listview? realy bad thing
Try to add this one: android:layout_centerInParent="true"
<TextView
android:id="#+id/tvHaltestellen"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
I'm not quite sure what do you want to do, but if you want to center the TextView inside the RelativeLayout then remove
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
from TV and try adding something like android:layout_centarInParent="true", and in the relative layout change match_parent to wrap_contents
You could anchor the TextView to the top and bottom of the ListView (and optionally left and right too, depending on the desired effect). That will make the TextView equally tall (and optionally wide), so use a center gravity to position the text in the middle.
<?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" >
<ListView
android:id="#+id/lvHaltestellen"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />
<TextView
android:id="#+id/tvHaltestellen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/lvHaltestellen"
android:layout_alignBottom="#+id/lvHaltestellen"
android:layout_alignLeft="#+id/lvHaltestellen"
android:layout_alignRight="#+id/lvHaltestellen"
android:gravity="center" />
</RelativeLayout>
If you're planning to add a background colour to the TextView, you'll need to wrap it inside another transparent container (e.g. a FrameLayout), to avoid the colour from obscuring what's displayed in the list. Something like:
<?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" >
<ListView
android:id="#+id/lvHaltestellen"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/lvHaltestellen"
android:layout_alignLeft="#+id/lvHaltestellen"
android:layout_alignRight="#+id/lvHaltestellen"
android:layout_alignTop="#+id/lvHaltestellen" >
<TextView
android:id="#+id/tvHaltestellen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#android:color/black" />
</FrameLayout>
</RelativeLayout>
Alternatively, if you decide to make the ListView fill up the whole height of the RelativeLayout, you don't need to anchor the TextView to the list anymore. As already pointed out by #user1796624, you can then just center the TextView.
As per your earlier comment on someone else's answer:
the textview is shown inside the listview.
I understand what you're trying to say here, but please do realize that the TextView does not sit inside the ListView, but rather floats on top of it.

Multiple Screen Support

I have some problem with multiple screen support, I work with dp(dpi) for specify the layout_heigth and layout_width and I hope that is the better way to support multiple screen, but when I tried with two smartphone I meet two different result.
I give an example, this is a layout I use:
<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/cities_main_layout"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:id="#+id/citieslist"
android:layout_width="wrap_content"
android:layout_height="320dip"
android:layout_gravity="center_vertical"
android:layout_below="#id/cities_main_layout"
/>
<LinearLayout
android:id="#+id/cities_button_layout"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/citieslist"
android:layout_gravity="center_vertical">
<Button
android:id="#+id/bycountry"
android:layout_height="50dip"
android:layout_width="105dip"
android:background="#drawable/buttonmarket"
android:text="#string/button_bycountry"
/>
<Button
android:id="#+id/top10"
android:layout_height="50dip"
android:layout_width="105dip"
android:background="#drawable/buttonmarket"
android:text="#string/button_top10"
/>
<Button
android:id="#+id/recommended"
android:layout_height="50dip"
android:layout_width="105dip"
android:background="#drawable/buttonmarket"
android:text="#string/button_recommended"
/>
</LinearLayout>
</RelativeLayout>
The button are at the bottom of the layout, and I see two different result:
http://img600.imageshack.us/img600/5513/htcmagicg2.png http://img600.imageshack.us/img600/5513/htcmagicg2.png
http://img441.imageshack.us/img441/6440/samsunggalaxys.png http://img441.imageshack.us/img441/6440/samsunggalaxys.png
In the last smartphone I can see the buttons, instead in the first I cannot...what's wrong?
I have to write a layout for any set of screen??!!!
Your ListView has
android:layout_height="320dip"
Now if the phone screen is smaller, it will not fit.
Try doing this instead: (Edited due to comments. This is displayed correcty in eclipse)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relative"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:id="#+id/listview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FF0000"
android:layout_above="#+id/linlay">
</ListView>
<LinearLayout
android:id="#+id/linlay"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="30dip"
android:background="#00FF00"
android:layout_alignParentBottom="true">
</LinearLayout>
</RelativeLayout>
Thant should fix it I think.
Cheers
As others have indicated, your problem is that you hardwired in a size for the ListView. If you want a business rule of "have the buttons at the bottom and have the ListView fill up the rest", you actually need to write code that implements "have the buttons at the bottom and have the ListView fill up the rest".
There are two main approaches here:
Use a LinearLayout parent for the buttons and the ListView. Use
android:layout_height="0px" and android:layout_weight="1" for the
ListView. Use a regular android:layout_height for the buttons (presumably in their own LinearLayout) and no
android:layout_weight for for them
Use a RelativeLayout parent for the buttons and the ListView.
Define the buttons as having android:layout_alignParentBottom="true".
Define the ListView as having android:layout_alignParentTop="true"
and android:layout_above="...", where the ... is the ID of the buttons' LinearLayout.
I would say it's because you are specifically declaring a height for your ListView and then laying the LinearLayout that holds your buttons at the bottom. Try changing it instead of being at the bottom of the ListView to something like
<LinearLayout
android:id="#+id/cities_button_layout"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:alignparentbottom="true"
android:layout_gravity="center_vertical">
I'm not entirely sure if align_parent_bottom is the 100% correct spelling of that.
Well, others have beaten me to it while I was typing, haha, but yeah, you're hardwiring a lot of things that shouldn't be, both the ListView and the Buttons. Take a look at this:
<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/cities_main_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:id="#+id/cities_button_layout"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
>
<Button
android:id="#+id/bycountry"
android:layout_height="50dip"
android:layout_width="fill_parent"
android:layout_weight="1"
android:background="#drawable/buttonmarket"
android:text="#string/button_bycountry"
/>
<Button
android:id="#+id/top10"
android:layout_height="50dip"
android:layout_width="fill_parent"
android:layout_weight="1"
android:background="#drawable/buttonmarket"
android:text="#string/button_top10"
/>
<Button
android:id="#+id/recommended"
android:layout_height="50dip"
android:layout_width="fill_parent"
android:layout_weight="1"
android:background="#drawable/buttonmarket"
android:text="#string/button_recommended"
/>
</LinearLayout>
<ListView
android:id="#+id/citieslist"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/cities_button_layout"
/>
</RelativeLayout>
You have android:orientation on your RelativeLayout, which isn't actually an attribute that RelativeLayout contains.
You should use the layout_weight attribute rather than hardwiring sizes for the Buttons. In my example, all buttons have a width of fill_parent, and a weight of 1. This makes them distribute the space evenly.
List the fixed button layout first, setting it to alignParentBottom="true". Then set the ListView to fill_parent, and layout_above your button layout. This keeps the button layout at the bottom, and makes the ListView take all the space above your buttons.
Tada!

Android Layout with ListView and Buttons

Alright, this specific layout is just annoying me. And can't seem to find a way to have a listView, with a row of buttons at the bottom so that the listview doesn't extend over top of the buttons, and so the buttons are always snapped to the bottom of the screen. Here's what I want:
removed dead ImageShack link
It seems like it should be so easy, but everything I've tried has failed. Any help?
Here's my current code:
RelativeLayout container = new RelativeLayout(this);
container.setLayoutParams(new RelativeLayout.LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));
//** Add LinearLayout with button(s)
LinearLayout buttons = new LinearLayout(this);
RelativeLayout.LayoutParams bottomNavParams = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
bottomNavParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
bottomNavParams.addRule(RelativeLayout.CENTER_HORIZONTAL);
buttons.setLayoutParams(bottomNavParams);
ImageButton newLayer = new ImageButton(this);
newLayer.setImageResource(R.drawable.newlayer);
newLayer.setLayoutParams(new LinearLayout.LayoutParams(45, LayoutParams.FILL_PARENT));
buttons.addView(newLayer);
container.addView(buttons);
//** Add ListView
layerview = new ListView(this);
RelativeLayout.LayoutParams listParams = new RelativeLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);
listParams.addRule(RelativeLayout.ABOVE, buttons.getId());
layerview.setLayoutParams(listParams);
container.addView(layerview);
I think this is what you are looking for.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<Button android:layout_width="fill_parent"
android:layout_height="wrap_content" android:id="#+id/testbutton"
android:text="#string/hello" android:layout_alignParentBottom="true" />
<ListView android:layout_width="fill_parent"
android:layout_height="fill_parent" android:id="#+id/list"
android:layout_alignParentTop="true" android:layout_above="#id/testbutton" />
</RelativeLayout>
I had the same problem for ages.
The solution to keeping the ListView above the buttons, but preventing it from covering them up when the list is long, is to set android:layout_weight="1.0" on the ListView. Leave the layout_weight on the buttons unset so that they remain at their natural size, otherwise the buttons will get scaled. This works with LinearLayout.
There's an example in the Android ApiDemos:
ApiDemos/res/layout/linear_layout_9.xml
I was just searching for an answer to this question and this was one of the first results. I feel as if all of the answers, including the one that is currently chosen as the "best answer" is not addressing the issue being asked about. The problem that is being stated is that there is an overlap of the two components Button and ListView in that the ListView is taking up the entire screen, and the Button is visually floating above (in front of) the ListView (blocking view/access of the last item in the ListView)
Based on the answers I've seen here and on other forums, I finally came to a conclusion on how to resolve this.
Originally, I had:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FF394952">
<ListView
android:id="#+id/game_list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
style="#android:style/ButtonBar">
<Button
android:id="#+id/new_game"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/new_game"
android:textColor="#FFFFFFFF"
android:background="#drawable/button_background" />
</LinearLayout>
</RelativeLayout>
Note the use of RelativeLayout as the root node.
This is the final, working version in which the Button does not overlap the ListView:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FF394952">
<ListView
android:id="#+id/game_list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_weight="1.0" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
style="#android:style/ButtonBar">
<Button
android:id="#+id/new_game"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/new_game"
android:textColor="#FFFFFFFF"
android:background="#drawable/button_background" />
</LinearLayout>
</LinearLayout>
There are only two differences. First, I've switched to using a LinearLayout. This will help with the next bit, which was adding android:layout_weight to my ListView
I hope this helps.
The best way is a relative layout that sets the buttons below the listview. In this example the buttons are also in a linear layout because it is easier to put them side by side at an equal size.
<RelativeLayout android:id="#+id/RelativeLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView android:id="#+id/ListView01"
android:layout_alignParentTop="true"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
</ListView>
<LinearLayout android:id="#+id/LinearLayout01"
android:layout_below="#+id/ListView01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<Button android:id="#+id/ButtonJoin"
android:text="Join"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_alignParentBottom="true">
</Button>
<Button android:id="#+id/ButtonJoin"
android:layout_alignRight="#id/ButtonCancel"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Cancel"
android:layout_alignParentBottom="true">
</Button>
</LinearLayout>
</RelativeLayout>
I know this post is rather old, but, to answer the original poster's question, the reason the code did not work was buttons.getId() returns -1. If you are going to do this, you need to set do something like call buttons.setId(10). If you do that, the code works just fine.
the easiest solution would be to create two linear layouts, one with the button and the other with the list view(Wrap content on the button height and match parent on the list layout height). then only make a scroll view over the layout with the list view and the button layout will be ignored. hope it helps, sorry i didn't feel like writing out the code.
this should work. to have buttons above the listview too, put the buttons inside another linear layout.
<LinearLayout> main container // vertical
<LinearLayout> scrollview must be contained in a linear layout //vertical - height to fill parent
<ScrollView> set the height of this to fill parent
<ListView> will be contained in the scrollview
</ListView>
</ScrollView>
</LinearLayout>
<LinearLayout> //horizontal - height to wrap content
<Button>
</Button>
</LinearLayout>
</LinearLayout>

Categories