I have a weird situation. I have a relatively simple layout with some rows and an image.
My layout looks like this (high level drawing):
The red square is an ImageView, the others are LinearLayouts and TextViews. My problem is that if i use Java code (setImageBitmap) to update the red ImageView's bitmap image then the Text 3's LinearLayout's weight seems disappear and its height will equal to the Text 3's TextView's height.
Like on this mockup (the green square is the new image):
The Text 3's LinearLayout's Weight is set to 1 so its height will force the Text 4's LinearLayout to be pushed to the bottom of the screen. So the Text 4 wont be on the bottom anymore, it jumps right after the Text 3's LinearLayout's bottom.
Here is my layout xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/MainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/textView6"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Text 1" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="#+id/text2text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text 2" />
</LinearLayout>
<ImageView
android:id="#+id/Pic2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/timage" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/Text3Container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/TextView02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text 3" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" >
<TextView
android:id="#+id/TextView03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text 4" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
It looks like im using some LinearLayouts that i should not but it contains more elements in the real layout, i just stripped it a little bit to be more simple to analyse here. But generally this is my xml.
Do you guys have any suggestion why is this happening? I also tried to put the image into a FrameLayout, same...
Thanks!
Related
I have a RecycleView where i add items vertically:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:gravity="top">
<android.support.v7.widget.RecyclerView
android:id="#+id/contrattiRecycle"
android:scrollbars="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top|center"
android:layout_weight="1"/>
</LinearLayout>
and the itemcontainer is like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:id="#+id/ore"
android:layout_weight="1"
android:foregroundGravity="center"
android:gravity="center_horizontal"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:id="#+id/contratti"
android:layout_weight="1"
android:gravity="center_horizontal"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:id="#+id/resa"
android:layout_weight="1"
android:gravity="center_horizontal"/>
</LinearLayout>
When i fill the RecycleView with items they won't align properly but appear like the picture below:
The RecycleView is filled in a normal way. As long as every layout width is: android:layout_width="match_parent" it should expand this layouts to the parents width and the items logically should be aligned. Any suggestion?
android:layout_weight="1"
as you use the layout_weight property,if you set android:layout_width="wrap_content",The system first assigns the three textviews their width wrap_content (wide enough to contain their content), and then assigns the remaining screen space to the three textviews according to the ratio of 1:1:1,so your content is not the same width, it will not appear aligned.
you just need to change TextView
android:layout_width="wrap_content"
to
android:layout_width="0dp"
in this case,it will divide the width by 1:1:1 first
For both the linear layouts and text views make:
android:layout_gravity="center"
android:gravity="center"
not center_vertical or center_horizontal
Attached is the kind of layout i am trying to have in android layout. I have two text views placed next to each other each covering half of the place horizontally. And then i have other text views in the space below.
I was going to use relative layout, but then i could not get to place the two of them side by side and occupy same amount of space. Can someone help me with how can i achieve this?
try this way
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="hello " />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="hello" />
</LinearLayout>
<TextView
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="hello " />
<TextView
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="hello" />
</LinearLayout>
Try below Logic.
LinearLayout
- Vertical Orientation
- LinearLayout
-HorizontalOrientation
-weightSum=2
-TextView1 with weight=1
-TextView2 with weight = 1
-TextView 3
-TextView 4
I don't know how to align 3 elements side by side. I would like to have :
One view with a thin width on the left
One linearLayout with text content on the middle
One imageView always on the right
Like this :
And today, i got this :
Here is my code :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/gris_clair"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#color/blanc" >
<View
android:id="#+id/view1"
android:layout_width="7dp"
android:layout_height="90dp"
android:background="#color/green_normal" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
<ImageView
android:id="#+id/imageView1"
android:layout_width="80dp"
android:layout_height="90dp"
android:layout_gravity="right"
android:scaleType="centerCrop"
android:src="#drawable/test2" />
</LinearLayout>
</LinearLayout>
You can simplify your layout by setting the root LinearLayout to a horizontal orientation:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/gris_clair"
android:layout_margin="5dp"
android:orientation="horizontal" >
<View
android:id="#+id/view1"
android:layout_width="7dp"
android:layout_height="match_parent"
android:background="#color/green_normal" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="TextView" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="80dp"
android:layout_height="90dp"
android:layout_gravity="right"
android:scaleType="centerCrop"
android:src="#drawable/test2" />
</LinearLayout>
You may want to tweak the colors or sizes to fit your desired end result.
I set the parent View's height to wrap the content, first two Views to match the parent view's height and the image to your size. This means that your image will decide the parent View's height.
If you want to evenly space/scale the views horizontally on your screen and use up all the space they have available you should look at the android:layout_weight attribute. You would set android:layout_width="0dp" for each View you want to scale with screen size and add android:layout_weight="x" where x is a number.
The number you choose will depend on how you want to divide up the available space each View will use. As an example if you wanted one View to use 1/3rd of the available space with a second using 2/3rds then set the first to 1 and the second to 2. 1+2=3 so 1 of a total 3 units and 2 of a total 3 units.
For your textview use weight to fill up space:
<TextView
android:id="#+id/textView1"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView" />
You can use relative layout for that. and for the image view add alignparentright rule.
<RelativeLayout >
<View />
<LinearLayout/>
</LinearLayout>
<ImageView
android:alignParentRight="true" />
</RelativeLayout>
or use the weight for linearlayout, put 1 for textview and rest 0.
You can easy solve this problem using weight in LinearLayout, or make your parent RelativeLayout and place middle layout toLeftOf your left view and toRightOf your right view.
You can use relative Layout instead of linear layout to design custom design of your page.
It might help you.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/gris_clair"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#color/blanc" >
<View
android:id="#+id/view1"
android:layout_width="7dp"
android:layout_height="90dp"
android:background="#color/green_normal" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView1"
android:layout_width="80dp"
android:layout_height="90dp"
android:scaleType="centerCrop"
android:src="#drawable/test2"
android:layout_alignParentRight="true"
/>
</RelativeLayout>
</LinearLayout>
check this it might help you
Desired layout is a header, with two frames below (to contain fragments later) and buttons fixed at the bottom of the screen:
Header Text
----------------------
frame 1 | frame 2
----------------------
btn 1 btn 2 btn 3
I pretty much have this sorted (xml at end), with one problem... the two frames are overlapping the buttons.
I've done some searching on the issue and found this, but all that does is change my problem from the frames overflowing the buttons to the frames overflowing the header.
I also tried setting the buttons to appear below the frames instead of aligned to the bottom of the parent, but that just pushed them off the screen.
current layout xml:
<?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"
android:orientation="vertical" >
<TextView
android:id="#+id/fdname"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:clickable="true"
android:gravity="center"
android:text="No department info has been entered yet"
android:textSize="25dp" />
<TextView
android:id="#+id/fdaddress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/fdname"
android:gravity="center"
android:text="address"
android:textSize="15dp" />
<TextView
android:id="#+id/horizontalline"
android:layout_width="match_parent"
android:layout_height="2dip"
android:layout_below="#id/fdaddress"
android:background="#ff23cf"
android:gravity="center_vertical"
android:paddingBottom="2dip"
android:paddingTop="2dip" />
<LinearLayout
android:id="#+id/frames"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/horizontalline"
android:orientation="horizontal" >
<FrameLayout
android:id="#+id/leftpane"
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight="1" />
<TextView
android:id="#+id/verticalline"
android:layout_width="2dp"
android:layout_height="match_parent"
android:background="#ff23cf"
android:gravity="center_horizontal"
android:paddingLeft="5dip"
android:paddingRight="5dip" />
<FrameLayout
android:id="#+id/rightpane"
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight="1" >
</FrameLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/EventViewButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:minHeight="25dp"
android:text="#string/menu_event_view"
android:textSize="15dp"
android:layout_weight="1">
</Button>
<Button
android:id="#+id/MemberViewButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:minHeight="25dp"
android:text="#string/menu_member_view"
android:textSize="15dp"
android:layout_weight="1">
</Button>
<Button
android:id="#+id/AttendanceViewButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:minHeight="25dp"
android:text="#string/menu_atnd_view"
android:textSize="15dp"
android:layout_weight="1">
</Button>
</LinearLayout>
</RelativeLayout>
Try to declare the LinearLayout containing your buttons before the LinearLayout containing your frames, preserving the android:layout_alignParentBottom="true" attribute.
Then, to your frames container, add an above constraint:
android:layout_below="#id/horizontalline"
android:layout_above="#id/buttons"
This way should force your frames to be last thing to be drawn on the screen, thus filling the remaining space.
Hope it works!
<LinearLayout
android:id="#+id/frames"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/horizontalline"
android:orientation="horizontal" >
Why is your layout_height="match_parent"? You'll need to specify some height, or wrap_content.
http://developer.android.com/resources/samples/ApiDemos/res/layout/relative_layout_1.html
Refer to this for top layer/alignment of you three views.(three text views in example)
Then use linearlayout with orientation horizontal, for your two frames, and same again for buttons
--
so basically to the frames id add alignbottom true , and provide
android:layout_above
android:layout_below
parameters
<?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"
>
<TextView
android:text="Title"
android:id="#+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30px"
android:textStyle="bold"
>
</TextView>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="60px">
<Button
android:text="Choose a Story"
android:id="#+id/choose"
android:layout_width="150px"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginBottom="1px">
</Button>
<Button
android:text="Info"
android:id="#+id/info"
android:layout_width="150px"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginBottom="1px">
</Button>
</LinearLayout>
</LinearLayout>
In this code, as you can see, there is a title, 2 linear layouts, and 2 buttons that are inside a linear layout. What I'm trying to do is center the 2 buttons. No matter what I do, I can never get the 2 buttons to be centered at the bottom with a height of 60px.
In the end I'm trying to make the text centered both vertically and horizontally, and have the 2 buttons on the bottom centered horizontally. What do I need to change?
Heres a picture of what it looks like in the Layout Editor.
On your inner linear layout, set the layout_gravity.
Here's one solution
<?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"
>
<TextView
android:text="Title"
android:id="#+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30dip"
android:textStyle="bold"
/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="60dip"
android:layout_gravity="bottom|center_horizontal"
android:layout_marginBottom="1dip"
>
<Button
android:text="Choose a Story"
android:id="#+id/choose"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
<Button
android:text="Info"
android:id="#+id/info"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="wrap_content"
/>
</LinearLayout>
</FrameLayout>
In general, you should style the outermost component (container) which will then position all of its children accordingly. As a side not, this layout would be achieved using just a single (or pair, depending on exactly what you're trying to do) or FrameLayouts, which would significantly reduce the layout overhead. While there's nothing wrong with LinearLayout, it is surprisingly computationally expensive.