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/>
Related
I seem to be having issues understanding weightSum and LayoutWidth. My code is below:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="3">
<LinearLayout
android:background="#cccccc"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:padding="20sp"
android:textSize="30sp"
android:gravity="center_horizontal"
android:text="Cheapest Fare Option"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:background="#666666"
android:layout_weight="2"
android:layout_width="match_parent"
android:layout_height="match_parent">
</LinearLayout>
</LinearLayout>
My understanding of this is the 1st layout will take up 1/3 of the space and 2nd layout will take 2/3 of the space, but the reverse is happening, i.e. 1st layout is taking 2/3 and 2nd layout is taking 1/3
Why is this happening? Trying hard to understand this.
Taking your android:orientation="vertical", you want to get this ratio vertically therefore your android:layout_height attribute should be 0dp for both the child LinearLayout.
Set -
android:layout_height="0dp"
for both the inner LinearLayout.
Alternatively if you want to obtain the ratio horizontally then use android:orientation="horizontal" set -
android:layout_width="0dp"
for both the inner LinearLayout.
The thing is when you want to achieve ratio then you don't set that particular dimension (width or height) to match parent. Rather set it to 0dp so that Android can handle it for you automatically.
<LinearLayout
android:background="#cccccc"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp">
<TextView
android:padding="20sp"
android:textSize="30sp"
android:gravity="center_horizontal"
android:text="Cheapest Fare Option"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:background="#666666"
android:layout_weight="2"
android:layout_width="match_parent"
android:layout_height="0dp">
</LinearLayout>
I need to put some ImageButton with equal space in layout(something like the picture I attached).
I checked a lot of similar posts like:
Android: How to make all elements inside LinearLayout same size?
give equal space between ImageViews
What is android:weightSum in android, and how does it work?
However they didn't help me.
Using margin and padding didn't solve my problem, because I want to have equal space around ImageButton. It is important for me to keep the space equal in any device. Also I want to set size to my ImageButton. It's a rounded image so the height and width of image should be equal . When I use weightsum, I can't set arbitrary width as layout_width for ImageButton.
Thanks for helping me.
P.S. This is not duplicate post. In the first link which i brought, it is not possible to set equal space. It just put objects next to each other.
This is a layout with 2 ImageButton with arbitrary size:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context="info.androidhive.materialdesign.activity.HomeFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/background_home">
<ImageButton
android:layout_width="#dimen/log_guid_image_height"
android:layout_height="#dimen/log_guid_image_height"
android:onClick="onLastClick"
android:id="#+id/btn_menu_last"
android:background="#drawable/menu_last" />
<ImageButton
android:layout_width="#dimen/log_guid_image_height"
android:layout_height="#dimen/log_guid_image_height"
android:onClick="onAddClick"
android:id="#+id/btn_menu_add_records"
android:background="#drawable/menu_add_records" />
</LinearLayout>
I added android:layout_weight="1" to each ImageButton, and set android:layout_width="0px" and it gave me this:
The problem is that how I can add equal space around ImageButton and gave arbitrary size to them!!!
You can use TableLayoutas below:
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="left|top"
android:stretchColumns="*">
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/imageButton" />
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageButton2" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageButton3" />
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageButton4" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageButton5" />
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageButton6" />
</TableRow>
</TableLayout>
You can you use a inner LinearLayout at the place of ImageButton to customize your ImageButton position.
Try this:-
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/background_home"
android:weightSum="1" >
<ImageView
android:id="#+id/btn_menu_last"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:onClick="onLastClick"
android:src="#drawable/menu_last" />
<ImageView
android:id="#+id/btn_menu_add_records"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:onClick="onAddClick"
android:src="#drawable/menu_add_records" />
</LinearLayout>
Just nest LinearLayouts like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:gravity="center"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:gravity="center"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
Put ImageButtons inside each LinearLayouts.
Using LinearLayout and getting equal space is essentially the same idea as the past Q&A you read.
And inside these equal spaced cells, you can put ImageButtons with layout_gravity="center" (or gravity="center" with LinearLayout as shown abobe).
I think for this problem you need use a GridView and specify columnWidth option.
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 am developing an app which has a splash screen, you can see it in the picture below.
My problem is that I am needing to put a progress bar as you can see in the picture below without many layouts, because now I have eight layout in order to get this effect (layout-sw320dp, layout-sw320dp-land, layout-sw480dp, layout-sw480dp-land...600,720).
I was trying use relative layout and center horizontally the progress bar, but with different screen sizes the progress bar get other position vertically.
Could I solve it with less folders?
This is my layout file for 320dp:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/splash_screen_land"
android:orientation="vertical" >
<ProgressBar
android:id="#+id/progressBar1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="24dp" />
</RelativeLayout>
I suggest you use just one layout file, let's say splash.xml. Put in a RelativeLayout your ImageView, with android:layout_centerInParent="true". Then your ProgressBar with android:below="#id/image" to put it relatively below the image. You can change the layout paddingBottom to adjust views in the center of the layout.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="#dimen/padding_bottom">
<ImageView
android:id="#id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/image"
android:minHeight="#dimen/progress_height"
android:minWidth="#dimen/progress_height" />
</RelativeLayout>
Now instead of having many layouts, you will keep the above layout, and create many values according to your screen sizes. Meaning :
values/dimens.xml
values-large/dimens.xml
values-land/dimens.xml
etc.
Thus, your view's layout won't change from a screen to another, only their size will !
Maybe 3 horizontal LinearLayout using layout_weight to center everything horizontaly with respect of the ratio, containing a vertical LinearLayout with centered gravity?
If you post your actual layout file, that could be easier to explain.
Edit:
Something like that: (you may have to play with the layout_weight values to get the size you want:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"></LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"></LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/splash_screen_land"/>
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"></LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"></LinearLayout>
</LinearLayout>
I could solve it with weightSum, layout_weight properties which are very useful to imitate percentages.
This is my code with the problem solved:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/LinearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/splash_screen_land"
android:gravity="center_horizontal"
android:orientation="vertical" >
<android.support.v7.widget.Space
android:id="#+id/space1"
android:layout_weight="100"
android:layout_width="match_parent"
android:layout_height="0dp" />
<ProgressBar
android:id="#+id/progressBar1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="15" />
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="17"
android:gravity="center"
android:text="TextView"
android:textSize="20sp" />
</LinearLayout>
I hope this will be useful for someone else
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>