Unable to display the ImageView in FrameLayout (Android) - android

I had made a simple camera app and was thinking about customizing the view. Currently, I've been stuck with a problem with the ImageView not being able to be displayed on the top of the framelayout. Is there something wrong with the xml code below ? Or should I set some parameter in the code ? All I want to do is to display the Imageview above the framelayout.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<FrameLayout
android:id="#+id/camera_preview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="right|center_vertical">
<ImageView
android:id="#+id/button_capture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/shot_dot_icn" />
</LinearLayout>
</FrameLayout>
</LinearLayout>

Try this layout, I am not sure if I understand your requirement though.
<?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"
>
<ImageView
android:id="#+id/button_capture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/shot_dot_icn" />
<FrameLayout
android:id="#+id/camera_preview"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="right|center_vertical">
</LinearLayout>
</FrameLayout>
</LinearLayout>

I solved the problem with the script below. All I had to do was to set the bringToFront() to the ImageView to set the view on top of the Framelayout.
ImageView captureButton = (ImageView) findViewById(R.id.button_capture);
captureButton.bringToFront();

Related

Android LinearLayout with Button and FrameLayout using the Maximum Height

I am trying to make a layout where there are a LinearLayout and inside it I want a FrameLayout and a button.
I want the button to use the bottom of the linearlayout and to use the maximum width and the enough height for the button, using wrap content.
The other component, the FrameLayout I want to use it the remaining part of the screen.
How can I do it?
Here it the layout so far..
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical" >
<FrameLayout
android:id="#+id/camera_preview"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<Button
android:id="#+id/button_capture"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:onClick="snapIt"
android:text="#string/Capture" />
</LinearLayout>
Is not showing the button :s
Thanks alot in advance ;)
Better to work out with relative layout with button aligned to parent bottom and your frame layout above it occupying the rest space of the screen.Like this
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<FrameLayout
android:id="#+id/camera_preview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/button_capture"/>
<Button
android:id="#+id/button_capture"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:onClick="snapIt"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
use the following xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical" >
<Button
android:id="#+id/button_capture"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:onClick="snapIt"
android:layout_alignParentBottom="true"
android:text="capture" />
<FrameLayout
android:id="#+id/camera_preview"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_above="#+id/button_capture"
/>
</RelativeLayout>
i am just trying to make these layout, after compare my layout code and your layout code, i find a different code, there is in my code. Did you missing it or just move it away cause it useless from the layout code ?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<FrameLayout
android:id="#id/flayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/hello_world">
</FrameLayout>
</LinearLayout>

Can I overlap the WebView with an ImageButton?

What I want to create should look like this :
I want it like this because I want the button to cover a part of the content of the webview making it unreachable for the user.
You can do it using FrameLayout as follows...
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<WebView
android:id="#+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="Button" />
</FrameLayout>
Yes You can do.for that purpose you have to use relative layout.first you have add webview,then add image button and set gravity bottom to image button.i think this can help you.
<?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"
android:orientation="vertical" >
<WebView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="20dp"
/>
<ImageButton
android:layout_width="fill_parent"
android:layout_height="40dp"
android:background="#android:color/darker_gray"
android:layout_alignParentBottom="true"
/>
</RelativeLayout>

android Layouts overlapping ListView and LinearLayout

I am using FrameLayout in which I am having a search Textbox and Button and a ListView to be displayed in the next line of the TextBox
My layout is like this ,
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:src="#drawable/pattern1" />
<LinearLayout
android:id="#+id/LinearLayout02"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="top" >
<Button
android:id="#+id/btnadd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="addCustomers"
android:text="Add"
android:textColor="#000000" >
</Button>
<EditText
android:id="#+id/edtSearch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2"
android:ems="10"
android:hint="Search"
android:inputType="textPersonName" >
<requestFocus />
</EditText>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="60dp"
android:gravity="bottom"
android:orientation="vertical">
<ListView
android:id="#+id/list_customers"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom|center_horizontal" >
</ListView>
</LinearLayout>
</FrameLayout>
I am using this TextView to diplay List item in the ListView,
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/txtsimple_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="60dp"
android:gravity="center_vertical"
android:textSize="20sp"
android:textStyle="bold" />
I have given margin top attribute for the ListView, but even though it overlaps on the Button and EditText controls.
I am using a FrameLayout but of no use. Please suggest me any help!!
Any help is appreciated!!
You should use LinearLayout as parent, just set android:orientation="vertical".
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:src="#drawable/pattern1" />
<LinearLayout
android:id="#+id/LinearLayout02"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="top" >
...
</LinearLayout>
<ListView
android:id="#+id/list_customers"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom|center_horizontal" >
...
</ListView>
</LinearLayout>
FrameLayout has no 'rules of placement' so everything just stacks on to each other.
Instead, use a LinearLayout with android:orientation="vertical"
or use a RelativeLayout and add positioning values to the childs, such as android:layout_below
+1 Neoh and remove imageview, instead put the image as background image attribute at parent view
android:background="#drawable/pattern1"
FrameLayout are used very less,beacuse they are used to display single view or views which overlaps each other.
So you should use RelativeLayout.
FrameLayout is not the best option. You can use other layouts, eg, GridLayout, RelativeLayout or ListView.

Creating a layout for a skype-style text input bubble

In iPhone there is a method on UIImage called stretchableimagewithleftcapwidth which can be used to create a chat bubble to stretch for any size (keeping the corners natural size).
We don't seem to have this in Android so I've set out to make a layout that I can then use as a background image with a FrameLayout. The trouble I'm having at the moment is the top row which consists of 3 columns: the left top corner, the stretchable top, and the right top corner. How do I get the left and right top corners to remain fixed size (11dip) and tell the middle to fill any remaining space in the parent? This is what I have so far.
<?xml version="1.0" encoding="UTF-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/layout_bubble_container"
android:orientation="vertical">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="11dip"
android:id="#+id/layout_bubble_toprow"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/layout_top_leftCorner"
android:layout_width="11dip"
android:layout_height="fill_parent"
android:gravity="left|top">
<ImageView
android:id="#+id/bubble_top_leftcorner"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/bubble_lefttop" />
</LinearLayout>
<LinearLayout
android:id="#+id/layout_top"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="top|center" >
<ImageView
android:id="#+id/bubble_top"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:src="#drawable/bubble_top" />
</LinearLayout>
<LinearLayout
android:id="#+id/layout_top_rightCorner"
android:layout_width="11dip"
android:layout_height="fill_parent"
android:gravity="right|top" >
<ImageView
android:id="#+id/bubble_top_rightcorner"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/bubble_righttop" />
</LinearLayout>
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="11dip"
android:id="#+id/layout_bubble_middlerow"
android:orientation="horizontal"
android:background="#color/WHITE">
<LinearLayout
android:id="#+id/layout_left"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:gravity="left"
android:layout_weight="1">
<ImageView
android:id="#+id/bubble_left"
android:layout_width="11dip"
android:layout_height="fill_parent"
android:src="#drawable/bubble_left" />
</LinearLayout>
<LinearLayout
android:id="#+id/layout_right"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="right"
android:layout_weight="1">
<ImageView
android:id="#+id/bubble_right"
android:layout_width="11dip"
android:layout_height="fill_parent"
android:src="#drawable/bubble_right" />
</LinearLayout>
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="11dip"
android:id="#+id/layout_bubble_bottomrow"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/layout_bottom_leftCorner"
android:layout_width="11dip"
android:layout_height="fill_parent"
android:gravity="left|top">
<ImageView
android:id="#+id/bubble_bottom_leftcorner"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/bubble_leftbottom" />
</LinearLayout>
<LinearLayout
android:id="#+id/layout_bottom"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="top|center" >
<ImageView
android:id="#+id/bubble_bottom"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:src="#drawable/bubble_bottom" />
</LinearLayout>
<LinearLayout
android:id="#+id/layout_bottom_rightCorner"
android:layout_width="11dip"
android:layout_height="fill_parent"
android:gravity="right|top" >
<ImageView
android:id="#+id/bubble_bottom_rightcorner"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/bubble_rightbottom" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
Here is the layout tree in eclipse if this helps.
Here is what it looks like rendered in the layout editor in eclipse. Note the top and bottom rows not stretching appropriately.
Thanks in advance.
i also needed a chat bubble kind of view in my app so I used a 9 patch drawable as the background image and it is working fine.
check this question:
Why do 9-patch graphics size correctly in the emulator but not on a phone?
And also this link:
http://warting.se/2012/06/04/chat-bubbles-in-android/

Space unwanted layout and image

like the title said it there are some "space" before and after an image and i don't want it.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/fond"
>
<ImageView
android:id="#+id/imageView1"
android:contentDescription="#string/desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/top"
android:layout_gravity="top"
/>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/fond1"
>
</LinearLayout>
</LinearLayout>
So like you can see i have a first Layout with a background.
The ImageView is just after and should be on the top but it didn't.
The second Layout is to much after the image.
->
first layout
--unwanted space--
image
--unwanted space--
second layout
If anyone know how to delete this "space", thanks.
Use android:adjustViewBounds="true" inside your ImageView. That way your ImageView will be adjusted to the provided image bounds.
Use Relative layout this Way::
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/fond"
>
<ImageView
android:id="#+id/imageView1"
android:contentDescription="#string/desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/top"
android:layout_gravity="top"
android:layout_alignParentTop="true"
/>
<LinearLayout
android:layout_below="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#drawable/fond1"
>
</LinearLayout>
</RelativeLayout>

Categories

Resources