I'm trying to use relative layout with a custom class that extends view, and a couple of buttons. This is what I eventually want it to look like:
http://imgur.com/B5MtdJ7
(forgive me for posting a link rather than an image, apparently I'm not cool enough yet)
Currently this is hardcoded with heights in dp (see XML below), and there are two problems with this:
It only looks acceptable on my Nexus 7 screen, and no other device
Both custom views' onDraw method still provides a canvas with height and width that exactly match the resolution of the device
If I try to set layout_height to wrap_content, each custom view attempts to take up the whole screen, which seems consistent with bullet point 2, but clearly is not what I want.
What I want to achieve is a Relative Layout with two custom views, that looks exactly as shown in the picture, but will scale itself to the dimensions of the screen it's sitting on AND the custom views canvas actually knows how big a part of the screen it sits on. How do I do this?
Edit: the reason this is "vs programmatic" is that I think overriding on measure wouldn't be a bad shout, but I have no idea how that would interact with the XML. I'd rather have the layout definition in one place, too.
My XML is below:
<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="match_parent"
android:orientation="vertical"
tools:context=".TrajectoryView" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.5" >
<com.sportsim.virtualcricket.view.SideProfileView
android:id="#+id/side_profile_view"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</com.sportsim.virtualcricket.view.SideProfileView>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.5" >
<com.sportsim.virtualcricket.view.BirdsEyeView
android:id="#+id/birds_eye_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:orientation="horizontal" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:text="Button" />
</LinearLayout>
This would be fairly easy using LinearLayout and weights. I've given an example below but I can't test it at the moment. It should provide some direction though.
<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="match_parent"
android:orientation="vertical"
tools:context=".TrajectoryView" >
<com.sportsim.virtualcricket.view.SideProfileView
android:id="#+id/side_profile_view"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.5"/>
<com.sportsim.virtualcricket.view.BirdsEyeView
android:id="#+id/birds_eye_view"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:orientation="horizontal">
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:text="Button" />
</LinearLayout>
</LinearLayout>
Related
I am trying to write an application with two separate views of graphical data - one as an X-Y graph. and the other an X vs T graph. I want the two to be arranged vertically, with the X-Y graph on top. I have written an extension to the View class which manages the plotting, and that is not the problem.
I initially used a RelativeLayout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:custom="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/content_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#CCCCFF"
android:orientation="vertical"
android:gravity="center_horizontal">
<RelativeLayout
android:id="#+id/button_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="clearCanvas"
android:text="#string/btn1Text"
style="#android:style/Widget.Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="startPlot"
android:text="#string/btn2Text"
android:layout_toRightOf="#id/button1"
style="#android:style/Widget.Button" />
</RelativeLayout>
<co.android.bmd.chaoswithtime.CanvasView
android:id="#+id/plot_canvas"
android:layout_width="1000px"
android:layout_height="1000px"
android:textColor="#FFFFFF" />
<co.android.bmd.chaoswithtime.CanvasView
android:id="#+id/trend_canvas"
android:textColor="#FFFFFF"
tools:layout_below="#id/plot_canvas"
android:layout_height="500px"
android:layout_width="1000px" />
</RelativeLayout
According to the layout shown in Android Studio, this should give the required result:
X-T view overlaying the XY view:
I've tried a number of variants to get the alignment sorted out, but the only way to do it was to add a hefty top margin to the X-T view - not very satisfactory.
I can get what I want using a LinearLayout, but cannot figure out why the Relativelayout does not work (and why there is a difference between the preview in Android Studio and the emulated result from the same package. (The emulated result actually comes up on the real device as well.)
Can anyone come up with an explanation?
You have passed width and height in pixels, that means it's content and when you run your code it takes only 1000 pixels in screen.
Better is that you should use LinearLayout as parent of your custom view and use weight and weightSum. And pass match_parent width and height to LinearLayout.
you can try with below xml. this could help you.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:custom="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/content_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#CCCCFF"
android:gravity="center_horizontal"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/button_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<Button
android:id="#+id/button1"
style="#android:style/Widget.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="clearCanvas"
android:text="#string/btn1Text" />
<Button
android:id="#+id/button2"
style="#android:style/Widget.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button1"
android:onClick="startPlot"
android:text="#string/btn2Text" />
</RelativeLayout>
<LinearLayout
android:layout_below="#+id/button_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="3">
<co.android.bmd.chaoswithtime.CanvasView
android:id="#+id/plot_canvas"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:textColor="#FFFFFF" />
<co.android.bmd.chaoswithtime.CanvasView
android:id="#+id/trend_canvas"
android:layout_height="0dp"
android:layout_weight="2"
android:textColor="#FFFFFF"
tools:layout_below="#id/plot_canvas"1
android:layout_width="match_parent" />
</LinearLayout>
</RelativeLayout
I have a bunch of RelativeLayout inside LinearLayout. Inside this will be ProgressBar and other elements.
The problem at the moment is that the ProgressBar is extending the height dimension of the parent LinearLayout when placed inside the RelativeLayout.
Here's the basics of what I have.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight="1"
android:weightSum="2">
<RelativeLayout
android:id="#+id/timer1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/darker_gray">
<ProgressBar
android:layout_width="200dp"
android:layout_height="20dp"
style="#android:style/Widget.ProgressBar.Horizontal"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:layout_centerInParent="true"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/timer2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/holo_blue_light"/>
</LinearLayout>
The ProgressBar looks like it is extending height of the parent LinearLayout by the height of the ProgressBar. Which of course is not wanted.
Bare in mind that the above LinearLayout is inside another vertical LinearLayout where weightSum="3". So this distortion of the height means all will not fit in the screen vertically.
The one flaw I may have in my thinking is that because I have not yet completed the code (not put ProgressBar in each of the three levels) that it's just a quirk. I'll do that and report back. But it still seems to me this can't be a good thing.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="1">
<RelativeLayout
android:id="#+id/timer1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/darker_gray">
<ProgressBar
android:layout_width="200dp"
android:layout_height="20dp"
style="#android:style/Widget.ProgressBar.Horizontal"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:layout_centerInParent="true"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/timer2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/holo_blue_light"/>
</LinearLayout>
when using weights use the width or the height to 0dp which ever orientation u need
Well there you go. After I filled all three levels of the outer LinearLayout (not visible in example code above), the layout seemed to sort itself out.
All height parameters are the same (each taking up one third of the height of the screen) and this is true in both the xml Preview pane and when tested on an emulator.
So it looks to me that if you have a weightSum of 3, then the layout will not balance out until you have actually written the code for all three weight divisions.
For example, this would work:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:wieghtSum="3" >
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="#string/example_text" />
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="#string/example_text" />
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="#string/example_text" />
<LinearLayout/>
But the following would potentially show a distorted height of the text views because the code is incomplete. weightSum is set to 3 but only code for two of the three divisions is written.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:wieghtSum="3" >
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="#string/example_text" />
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="#string/example_text" />
<LinearLayout/>
This is my first post on Stackoverflow.
My question is related to ImageViews : I have a simple XML layout file composed of two LinearLayouts included in a general LinearLayout.
The first LinearLayout contains a simple ImageView, and the second one contains three buttons.
My problem is that the ImageView takes all the space on the screen and therefore the three buttons aren't displayed.
I've done quite a lot of research, I've tried to change everything I could to make it work and the only thing that did the trick was to turn the ImageView layout_width attribute into a dp value.
Why do I have to do that? Is it somehow related to the dimension of the original picture (1280 x 800)?
The XML file is :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/linearMainCreateTape"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="horizontal"
tools:context="com.example.anthony.walkmanfreeversion.CreateTapeActivity" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageView"
android:src="#drawable/highresoltape1"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Button1"/>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Button2"/>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Button3"/>
</LinearLayout>
</LinearLayout>
For anyone having this issue, there is a quick solution for that.
In your imageView XML add the following property:
android:adjustViewBounds="true"
for. eg
<ImageView
android:adjustViewBounds="true"
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/ic_launcher"/>
If you are using a Constraint Layout, don't forget to add the constraints.
You could use android:layout_weight in order to define how much space should be taken by the layouts:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/linearMainCreateTape"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="horizontal"
tools:context="com.example.anthony.walkmanfreeversion.CreateTapeActivity" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageView"
android:src="#drawable/highresoltape1"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button1"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button2"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button3"/>
</LinearLayout>
</LinearLayout>
In the example above both inner layouts have the same weight, so they bot fill 50% of the height.
If all views reserve the entire available height (match_parent) then the first one wins. So in your case the top level layout (linearMainCreateTape) fills the whole height and the layout which contains the ImageView does the same. So there's nothing left for the three buttons below it.
although i read myself through several threads explaining the differences between dp,sp,px etc. and also tried to get a good layout,
I am still struggeling to get it done right for different phones.
I am using different fragments, but if I get help to make it all right in one fragment, I'm sure i will be able to fix the others on my own.
<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"
<!--all paddings=0-->
android:keepScreenOn="true"
tools:context=".MainActivity">
...
<fragment
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/fragmentBase"
class="...FragmentBase" />
<!--other fragments-->
</RelativeLayout>
So im trying to get a proper layout in that fragmentBase, which looks like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
<!--all paddings=0-->>
<fragment
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/fragmentBase"
class="...FragmentBase" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="400dp"
android:layout_marginTop="40dp"
android:requiresFadingEdge="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!--elements-->
</LinearLayout>
</ScrollView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom">
<Button
android:layout_width="0dp"
android:layout_weight="0.8"
android:layout_height="40dp"
<!--other stuff-->/>
<Button
android:layout_width="0dp"
android:layout_weight="0.5"
android:layout_height="40dp"
<!--other stuff--> />
<Button
android:layout_width="0dp"
android:layout_weight="0.7"
android:layout_height="40dp"
<!--other stuff-->/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
android:layout_marginBottom="40dp">
<Button
android:layout_width="0dp"
android:layout_weight="0.6"
android:layout_height="40dp"
<!--other stuff--> />
<Button
android:layout_width="0dp"
android:layout_weight="0.5"
android:layout_height="40dp"
<!--other stuff--> />
<Button
android:layout_width="0dp"
android:layout_weight="0.6"
android:layout_height="40dp"
<!--other stuff--> />
</LinearLayout>
</RelativeLayout>
Sooooo. The problem is basically, that the scrollview in some cases is too long, in other cases too short. Having a fixed layout_height="400dp" seems to be a mistake.
Also setting the height of the two button-rows to 40dp and have one 40dp above the other, both starting from the bottom doesn't seem to be such a good decision, but those buttons got background-images, so I can't use wrap_content.
How would the layout be correct? I want the scrollView to start right under my "header", so android:layout_marginTop="40dp" is more or less fixed, while the two buttonrows should be at the very bottom of the screen.
I guess I want the scrollview to be dynamic length.
Plz help :S
I'll try to help you out without rewriting all of the code above.
First I'll start by suggesting a few changes:
You could set the height of the two LinearLayouts that contain the buttons to 40dp and set the buttons's heights to "match_parent"
You could give both LinearLayouts that contain the buttons an id, let's say
android:id="#+id/row1"
and
android:id="#+id/row2"
Then set the bottom one (id=row2) to have
android:layout_alignParentBottom="true"
And the top one (id=row1) to have
android:layout_above="#id/row2"
Once that is done you can set in the ScrollView the following parameters
android:layout_alignParentTop="true"
android:layout_above="#id/row1"
If I understood the problem, this should help. Hope what I wrote was usefull
try to add this code to your scrollview
android:layout_toStartOf="#+id/linearlayout1"
and this
android:id="#+id/linearlayout1"
to your 40 margin layout
this may help
I have a <TableLayout> with two <TableRow>s. The first row contains two buttons (this works fine), and the second row contains a <FrameLayout> that contains an <ImageView>. My problem is, the second TableRow (and FrameLayout) do not appear until I load an image into the ImageView. I want the FrameLayout to be visible (with its background color) at all times.
I have used android:layout_width="match_parent" and android:layout_height="match_parent" in the <ImageView> and <FrameLayout>, but it does not seem to help.
Here is the layout xml:
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="5dp"
android:stretchColumns="1">
<TableRow>
<Button
android:id="#+id/buttonLoadPhoto"
android:text="Load..."
android:textSize="20sp"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:id="#+id/buttonPrintPhoto"
android:text="Print..."
android:textSize="20sp"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
</TableRow>
<TableRow
android:background="#FF4422">
<FrameLayout
android:id="#+id/frameLayoutPhoto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#303030">
<ImageView
android:id="#+id/imageViewPhoto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="matrix">
</ImageView>
</FrameLayout>
</TableRow>
</TableLayout>
Note 1: I have included a background color for the offending <TableRow> just so I could narrow down the problem to the TableRow and not the ImageView (the TableRow's background color does not show up).
Note 2: This is the layout for an Activity that is loaded into a <TabHost>'s <FrameLayout>, in case that matters.
Note 3: I am targeting Android 2.2, and I am using a Xoom to test.
Essentially, I want the <FrameLayout> to take up the remaining space in the tab. Is there an alternative way to do this?
Thanks!
The documentation states that layout_height should be WRAP_CONTENT and width should be MATCH_PARENT, and that you do not need to specify these since it will enforce it anyway. I'm not sure if you added those in as you were trying to debug it or not.
Edit (This line is incorrect, but remains here as it is mentioned in the comments):You can also try setting a height for the TableRow, since none is provided and the content inside of it does not have a height until an image is there.
I found an alternative solution using <LinearLayout>s instead:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="5dp">
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/buttonLoadPhoto"
android:text="Load..."
android:textSize="20sp"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:id="#+id/buttonPrintPhoto"
android:text="Print..."
android:textSize="20sp"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
<FrameLayout
android:id="#+id/frameLayoutPhoto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#303030">
<ImageView
android:id="#+id/imageViewPhoto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="matrix">
</ImageView>
</FrameLayout>
</LinearLayout>