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
Related
Consider the following layout:
<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/black"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
/>
<TextView
android:id="#+id/primary_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textColor="#color/white"
android:textSize="24sp"
tools:text="Primary!"
/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
/>
<TextView
android:id="#+id/secondary_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textColor="#color/white"
android:textSize="24sp"
tools:text="Secondary!"
/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
/>
</LinearLayout>
See the screenshot below for the result. The layout works fine, but Android Studio warns me that the FrameLayouts are considered useless and should be removed. However, they're not useless. I use layout_weight here. The idea is that the space between and around the two TextViews are relative with weights 2:1:3.
How can I rewrite my layout that results in the same weighted positioning of the views without having to use empty FrameLayouts?
You can get rid of the first two FrameLayout by setting the height of your TextView to 0dp and their weight to the values you set for your FrameLayout.
FrameLayout is a container that is supposed to have children. For a gap, a View is sufficient. I replaced each empty FrameLayouts with:
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
/>
and the linter warning was gone.
I have some problem in my layout width edit-text
here are screenshots which describe my problem
1. normal layout (all views are inside the LinearLayout)
2. I want layout below when user input many text lines inside the Edit Text
3. But When user enter many text lines.. my layout looks like below.
I want the Edit Text should be stretched until only ImageView meets the bottom ViewGroup.
but, more entering text lines, more being increased the height of Edit Text so, i cannot see Image View.
i'd appreciate it if you give me any solution.
LinearLayout handles this sort of layouts great. You can use the attribute android:layout_weight="1" within a LinearLayout to set the priority of the space you want the object to take.
The official documentation describe it best:
developer.android.com
Take RelativeLayout as your parent layout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="?actionBarSize"
android:orientation="vertical">
<EditText
android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.9"
android:inputType="textMultiLine"
android:scrollbars="vertical"/>
<ImageView
android:id="#+id/imageView1"
android:layout_marginBottom="?actionBarSize"
android:layout_width="match_parent"
android:layout_weight="0.1"
android:layout_height="?actionBarSize" />
</LinearLayout>
<View
android:id="#+id/view1"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:layout_alignParentBottom="true" />
<?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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/bottomGroup"
android:orientation="vertical">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<RelativeLayout
android:id="#+id/bottomGroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" />
</RelativeLayout>
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.
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>
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>