I am developing my app on a 4in emulator in Eclipse. My phone is a 4.6in android device and when I test it on there, the content doesn't scale correctly.
It looks like the phone keeps the content at the same size, and it just moves everything up and leaves the extra space empty.
From what I have read, I thought it was supposed to keep the same layout as long as I use dp and not in. Does that mean my images need to be dp as well?
Any suggestions?
EDIT:
Here is some 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="#drawable/tfltestbg2"
android:orientation="vertical" >
<ImageView
android:layout_width="fill_parent"
android:layout_height="55dp"
android:background="#drawable/tfl_header_port"
android:gravity = "center_horizontal"
android:layout_gravity = "center_horizontal"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="40dp"
android:orientation="horizontal"
android:layout_gravity = "center"
android:gravity = "center"
>
<Button
android:id="#+id/buttonTakePic"
android:layout_width="100dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:gravity = "left"
android:background="#drawable/takepic_button" />
<Button
android:id="#+id/mMegaGalleryButton"
android:layout_width="120dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity = "center"
android:background="#drawable/add_fotos" />
<Button
android:id="#+id/mGalleryButton"
android:layout_width="100dp"
android:layout_height="match_parent"
android:layout_gravity="right"
android:gravity = "right"
android:background="#drawable/selectpic"
android:paddingLeft = "10dp"
android:paddingRight = "10dp"/>
</LinearLayout>
<LinearLayout
android:id="#+id/image_container"
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_gravity="center"
android:background="#drawable/outline_box"
android:gravity="center">
<FrameLayout
android:layout_width = "match_parent"
android:layout_height = "fill_parent"
android:gravity = "center"
android:layout_gravity = "center">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background = "#drawable/blank"
android:gravity="center" />
<ImageView
android:id="#+id/picsImage"
android:layout_width = "100dp"
android:layout_height = "100dp"
android:layout_gravity="center"
android:gravity="center"
android:background = "#drawable/picture_box"/>
</FrameLayout>
</LinearLayout>
<Button
android:id="#+id/mEditButton"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_gravity="center"
android:background="#drawable/edit_pic_button" />
<View
android:layout_width="match_parent"
android:layout_height="10dp" />
<Button
android:id="#+id/buttonUploadPic"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_gravity="center"
android:background="#drawable/upload_pic_button" />
</LinearLayout>
Use relative layout instead of linear layout and dont use hardcoded dimesions like 40dp,50dp if use app for different sizes of screen.
Relative layout
Problem in your layout is that you used fixed values in wrong places! Instead android:layout_width="100dp" in button (this in horizontal layout) you should use android:layout_width="fill_parent".
You have to set none zero value for layout_weight for this buttons so they could share space with other siblings in this layout.
Simplest way to convert fixed dp to weight:
change this:
android:layout_width="100dp"
to this:
android:layout_width="0dp"
android:layout_weight="100"
do it for all buttons and they will look exactly like they was in 4" and will scale perfect in any screen.
Related
I create a horizontal LinearLayout that contains an EditText and a button. The button should be as narrow as possible, and the EditText should occupy the entire remaining space.
Like that:
I write this code:
<LinearLayout
android:id="#+id/textInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<EditText
android:id="#+id/editTextToSpeak"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:ems="10"
android:hint="#string/text_to_speak"
android:inputType="text" />
<Button
android:id="#+id/saveCard"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="#string/save_card" />
</LinearLayout>
And I get this picture:
The button is not visible at all, and the height of the EditText has doubled.
How to make these elements look like in the first picture?
You can easily archive that by using android:layout_weight="1" and android:layout_width = "0dp" in your EditText, so it will take the rest of the space except your button's area.
<LinearLayout
android:id = "#+id/textInputLayout"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:orientation = "horizontal">
<EditText
android:layout_weight="1"
android:id="#+id/editTextToSpeak"
android:layout_width="0dp"
android:layout_height="match_parent"
android:ems="10"
android:hint="#string/text_to_speak"
android:inputType="text" />
<Button
android:id="#+id/saveCard"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="#string/save_card" />
</LinearLayout>
Hope that help :)
You can also be implemented using a Relative layout in android.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_height="wrap_content"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<EditText
android:id="#+id/editTextToSpeak"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="#string/text_to_speak"
android:inputType="text"
android:layout_toStartOf="#+id/saveCard"/>
<Button
android:id="#+id/saveCard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/save_card"
android:layout_alignParentEnd="true"/>
</RelativeLayout>
I hope it helps.)
Use android:weightSum & android:weight. It will give you the ability to fix the sizes either vertically or horizontally.
<LinearLayout
android:id = "# + id/textInputLayout"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:orientation = "horizontal"
android:weightSum="3">
<EditText
android:id = "#+id/editTextToSpeak"
android:layout_width ="match_parent"
android:layout_height = "match_parent"
android:ems = "10"
android:hint = "#string/text_to_speak"
android:inputType = "text"
/>
<Button
android:id = "#+id/saveCard"
android:layout_width = "wrap_content"
android:layout_height = "match_parent"
android:text = "# string/save_card"
android:layout_weight="1"/>
I am trying to create some clickable image in android that fills up the width of the screen, but the height of the clickable surface matches the height of the the image itself.
I have the following code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/image1"
android:onClick="onClick2" />
</RelativeLayout>
None of the answers posted so far have helped me, FitXY doesn't help as I want to retain aspect ratio. The other answers regarding image button or changing the scale type, give me exactly the same problem.
the tag needed is android:adjustViewBounds="true"
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height = "fill_parent" android:layout_width = "fill_parent">
<ImageView
android:layout_width = "wrap_content"
android:adjustViewBounds="true"
android:layout_height = "wrap_content" android:id = "#+id/ImageView1"
android:src = "#drawable/ic_launcher"/>
<ImageView android:layout_width = "wrap_content"
android:layout_height = "wrap_content" android:id = "#+id/ImageView2"
android:src = "#drawable/ic_launcher"
android:adjustViewBounds="true"
android:layout_below = "#+id/ImageView1"/>
</RelativeLayout>
Make use on linearLayout with vertical orientation
If i understand your problem correctly, you can put the image height to fill_parent (match_parent for API 8 and above) like the following. Then the image has the same height as its parent element.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:src="#drawable/image1"
android:onClick="onClick2" />
</RelativeLayout>
You have forget to set the width of Your image view to match_parent.Also, set the relativeLayout to android:layout_height="match_parent". But it is better to put an ImageButton:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageButton
android:id="#+id/imageButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/image1"
android:scaleType="centerInside"
android:onClick="onClick2"
android:layout_alignParentTop="true" />
</RelativeLayout>
And You can play a little bit with the scaleTypes (it´s also available at imageView). In the relativeLayout, You have to set for example layout_alignParentTop="true" to set a view to the top.
It is best to make the parent layout be a LinearLayout and set the height with a defined value, and do it like this.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:src="#drawable/image1"/>
</LinearRelativeLayout>
OR
add weight to the imageview itself, but still has a LinearLayout as a parent.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" //This could be like 0.1, 0.7, so long as not 0
android:src="#drawable/image1"/>
</LinearRelativeLayout>
Adjusting the weight itself gives you control to the image in a manner of percentage.
Set ScaleType of ImageView to centerCrop or fitXY.
<ImageView
android:scaleType="centerCrop" />
Try this way,hope this will help you to solve your problem.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#drawable/ic_launcher"
android:onClick="onClick2" />
</RelativeLayout>
I just implemented a ListView inside a LinearLayout, but I need to define the height of the LinearLayout (it has to be 50% of the screen height).
<LinearLayout
android:id="#+id/widget34"
android:layout_width="300px"
android:layout_height="235px"
android:orientation="vertical"
android:layout_below="#+id/tv_scanning_for"
android:layout_centerHorizontal="true">
<ListView
android:id="#+id/lv_events"
android:textSize="18sp"
android:cacheColorHint="#00000000"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/tv_scanning_for"
android:layout_centerHorizontal="true">
</ListView>
</LinearLayout>
Is that possible?
I did something similar for a button and an EditText, but doesn't seem to work on Layouts.
This is my Code:
//capture the size of the devices screen
Display display = getWindowManager().getDefaultDisplay();
double width = display.getWidth();
//my EditText will be smaller than full screen (80%)
double doubleSize = (width/5)*4;
int editTextSize = (int) doubleSize;
//define the EditText
userName = (EditText) this.findViewById(R.id.userName);
password = (EditText) this.findViewById(R.id.password);
//set the size
userName.setWidth(editTextSize);
password.setWidth(editTextSize);
Set its layout_height="0dp"*, add a blank View beneath it (or blank ImageView or just a FrameLayout) with a layout_height also equal to 0dp, and set both Views to have a layout_weight="1"
This will stretch each View equally as it fills the screen. Since both have the same weight, each will take 50% of the screen.
*See adamp's comment for why that works and other really helpful tidbits.
This is easy to do in xml. Set your top container to be a LinearLayout and set the orientation attribute as you wish. Then inside of that place two linearlayouts that both have "fill parent" on width and height. Finally, set the weigth attribute of those two linearlayouts to 1.
This is my android:layout_height=50%
activity:
<?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" >
<LinearLayout
android:id="#+id/alipay_login"
style="#style/loginType"
android:background="#27b" >
</LinearLayout>
<LinearLayout
android:id="#+id/taobao_login"
style="#style/loginType"
android:background="#ed6d00" >
</LinearLayout>
</LinearLayout>
style:
<style name="loginType">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">match_parent</item>
<item name="android:layout_weight">0.5</item>
<item name="android:orientation">vertical</item>
</style>
best way is use
layout_height="0dp"
layout_weight="0.5"
for example
<WebView
android:id="#+id/wvHelp"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.5" />
<TextView
android:id="#+id/txtTEMP"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.5"
android:text="TextView" />
WebView,TextView have 50% of the screen height
To make sure the height of a view is 50% of the screen then we can create two sub LinearLayouts in a LinearLayout. Each of the child LinearLayout should have "android:layout_weight" of 0.5 to cover half the screen
the parent LinearLAyout should have "android:orientation" set to vertical
.
.
here is code for your reference....
this code contains two buttons of height half the screen
<LinearLayout
android:orientation="vertical"
android:layout_height="match_parent">
<LinearLayout
android:layout_weight="0.5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:padding="10dp"
android:layout_weight="0.5"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="button1"
android:id="#+id/button1"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true"
/>
<Button
android:padding="10dp"
android:layout_weight="0.5"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="button2"
android:id="#+id/button2"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
/>
</LinearLayout>
<LinearLayout
android:layout_weight="0.5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
</LinearLayout>
</LinearLayout>
This kind of worked for me.
Though FAB doesn't float independently, but now it isn't getting pushed down.
Observe the weights given inside the LinearLayout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/andsanddkasd">
<android.support.v7.widget.RecyclerView
android:id="#+id/sharedResourcesRecyclerView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"
/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="bottom|right"
android:src="#android:drawable/ic_input_add"
android:layout_weight="1"/>
</LinearLayout>
Hope this helps :)
You should do something like that:
<LinearLayout
android:id="#+id/widget34"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_below="#+id/tv_scanning_for"
android:layout_centerHorizontal="true">
<ListView
android:id="#+id/lv_events"
android:textSize="18sp"
android:cacheColorHint="#00000000"
android:layout_height="1"
android:layout_width="fill_parent"
android:layout_weight="0dp"
android:layout_below="#+id/tv_scanning_for"
android:layout_centerHorizontal="true"
/>
</LinearLayout>
Also use dp instead px or read about it here.
it's so easy if you want divide your screen two part vertically ( top30% + bottom70%)
<LinearLayout
android:id="#+id/LinearLayoutTop"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="2">
</LinearLayout>
<LinearLayout
android:id="#+id/LinearLayoutBottom"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
</LinearLayout>
To achieve this feat, define a outer linear layout with a weightSum={amount of weight to distribute}.
it defines the maximum weight sum. If unspecified, the sum is computed by adding the layout_weight of all of the children. This can be used for instance to give a single child 50% of the total available space by giving it a layout_weight of 0.5 and setting the weightSum to 1.0.Another example would be set weightSum=2, and if the two children set layout_weight=1 then each would get 50% of the available space.
WeightSum is dependent on the amount of children in the parent layout.
You can use android:weightSum="2" on the parent layout combined with android:layout_height="1" on the child layout.
<LinearLayout
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:weightSum="2"
>
<ImageView
android:layout_height="1"
android:layout_width="wrap_content" />
</LinearLayout>
I'm designing my application UI. I need a layout looks like this:
(< and > are Buttons). The problem is, I don't know how to make sure the TextView will fill the remaining space, with two buttons have fixed size.
If I use fill_parent for Text View, the second button (>) can't be shown.
How can I craft a layout that looks like the image?
Answer from woodshy worked for me, and it is simpler than the answer by Ungureanu Liviu since it does not use RelativeLayout.
I am giving my layout for clarity:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<Button
android:layout_width = "80dp"
android:layout_weight = "0"
android:layout_height = "wrap_content"
android:text="<"/>
<TextView
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"
android:layout_weight = "1"/>
<Button
android:layout_width = "80dp"
android:layout_weight = "0"
android:layout_height = "wrap_content"
android:text=">"/>
</LinearLayout>
If <TextView> is placed in a LinearLayout, set the Layout_weight proprty of < and > to 0 and 1 for the TextView.
If you're using a RelativeLayout, align < and > to the left and right and set "Layout to left of" and "Layout to right of" property of the TextView to the ids of < and >.
If you use RelativeLayout, you can do it something like this:
<RelativeLayout
android:layout_width = "fill_parent"
android:layout_height = "fill_parent">
<ImageView
android:id = "#+id/my_image"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_alignParentTop ="true" />
<RelativeLayout
android:id="#+id/layout_bottom"
android:layout_width="fill_parent"
android:layout_height = "50dp"
android:layout_alignParentBottom = "true">
<Button
android:id = "#+id/but_left"
android:layout_width = "80dp"
android:layout_height = "wrap_content"
android:text="<"
android:layout_alignParentLeft = "true"/>
<TextView
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"
android:layout_toLeftOf = "#+id/but_right"
android:layout_toRightOf = "#id/but_left" />
<Button
android:id = "#id/but_right"
android:layout_width = "80dp"
android:layout_height = "wrap_content"
android:text=">"
android:layout_alignParentRight = "true"/>
</RelativeLayout>
</RelativeLayout>
Using a ConstraintLayout, I've found something like
<Button
android:id="#+id/left_button"
android:layout_width="80dp"
android:layout_height="48dp"
android:text="<"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/left_button"
app:layout_constraintRight_toLeftOf="#+id/right_button"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/right_button"
android:layout_width="80dp"
android:layout_height="48dp"
android:text=">"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
works. The key is setting the right, left, top, and bottom edge constraints appropriately, then setting the width and height to 0dp and letting it figure out it's own size.
It´s simple
You set the minWidth or minHeight, depends on what you are looking for, horizontal or vertical.
And for the other object(the one that you want to fill the remaining space) you set a weight of 1 (set the width to wrap it´s content), So it will fill the rest of area.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center|left"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="80dp"
android:layout_height="fill_parent"
android:minWidth="80dp" >
</LinearLayout>
you can use high layout_weight attribute. Below you can see a layout where ListView takes all free space with buttons at bottom:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
tools:context=".ConfigurationActivity"
android:orientation="vertical"
>
<ListView
android:id="#+id/listView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1000"
/>
<Button
android:id="#+id/btnCreateNewRule"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Create New Rule" />
<Button
android:id="#+id/btnConfigureOk"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Ok" />
</LinearLayout>
You should avoid nesting 2 relative layout since relative layout always make 2 pass for drawing (against 1 for any other type of layout). It becomes exponential when you nest them. You should use linear layout with width=0 and weight=1 on the element you want to fill the space left.
This answer is better for performance and the practices. Remember: use relative layout ONLY when you don't have other choice.
<?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">
<ImageView
android:id="#+id/imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal">
<Button
android:id="#+id/prev_button"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:text="<" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ellipsize="end"
android:singleLine="true"
android:gravity="center"
android:text="TextView" />
<Button
android:id="#+id/next_button"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:text=">" />
</LinearLayout>
</LinearLayout>
For those having the same glitch with <LinearLayout...> as I did:
It is important to specify android:layout_width="fill_parent", it will not work with wrap_content.
OTOH, you may omit android:layout_weight = "0", it is not required.
My code is basically the same as the code in https://stackoverflow.com/a/25781167/755804 (by Vivek Pandey)
When using a relative layout, you can make a view stretch by anchoring it to both of the views it's supposed to stretch toward. Although the specified height will be disregarded, Android still requires a height attribute, which is why I wrote "0dp". Example:
<View
android:id="#+id/topView"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_alignParentTop="true"
android:layout_marginTop="8dp"/>
<View
android:id="#+id/stretchableView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_below="#id/topView"
android:layout_above="#+id/bottomView"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:adjustViewBounds="true"/>
<View
android:id="#id/bottomView"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="16dp"/>
You can use set the layout_width or layout_width to 0dp (By the orientation you want to fill remaining space).
Then use the layout_weight to make it fill remaining space.
use a Relativelayout to wrap LinearLayout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:round="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text="<"/>
<TextView
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"
android:layout_weight = "1"/>
<Button
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text=">"/>
</LinearLayout>
</RelativeLayout>`
i found
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginEnd="10dp"
android:fontFamily="casual"
android:text="(By Zeus B0t)"
`` android:textSize="10sp"
android:gravity="bottom"
android:textStyle="italic" />
I'm trying to get a vertical LinearLayout to display an imageview with a second imageview below it. I want the lower imageview to be the width of the top image view.
I'm trying the current layout xml:
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<ImageView
android:id="#+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerInside"
android:adjustViewBounds="true"
android:layout_weight="1"
/>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/spacer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/spacer"
/>
</LinearLayout>
</LinearLayout>
The images will be displayed with a 'spacer' which is the full width of the screen, rather than the width of the image. The spacer is a fading edge graphic and I want it to be the same width as the image above it.
Note: the image for the top imageview is set programatically and could be a landscape or portrait image.
Anyone any thoughts on how to achieve this?
Thanks in advance!
A RelativeLayout will do. Use layout_below to achieve the vertical ordering and layout_widht="match_parent" to make the bottom image view as wide as possible with layout_alignLeft and layout_alignRight constraints:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" >
<ImageView
android:id="#+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="centerInside"/>
<ImageView
android:id="#+id/spacer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/image_view"
android:layout_alignLeft="#id/image_view"
android:layout_alignRight="#id/image_view"
android:background="#drawable/spacer" />
</RelativeLayout>
Sample output:
Using a slighly altered layout for demo purposes, warnings caused by missing contentDescriptions:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" >
<ImageView
android:id="#+id/image_view"
android:layout_width="100dp"
android:layout_height="100dp"
android:adjustViewBounds="true"
android:scaleType="centerInside"
android:background="#f00"/>
<ImageView
android:id="#+id/spacer"
android:layout_width="fill_parent"
android:layout_height="10dp"
android:layout_below="#id/image_view"
android:layout_alignLeft="#id/image_view"
android:layout_alignRight="#id/image_view"
android:background="#0f0" />
</RelativeLayout>
(Yes I know. Old question but no good answers and got bumped up by Community.)
Hey r3mo use the following code you can get what you want to achieve
<RelativeLayout android:layout_height = "fill_parent" android:layout_width = "fill_parent">
<ImageView android:layout_width = "wrap_content"
android:layout_height = "wrap_content" android:id = "#+id/ImageView1"
android:src = "#drawable/spacer"/>
<ImageView android:layout_width = "wrap_content"
android:layout_height = "wrap_content" android:id = "#+id/ImageView2"
android:src = "#drawable/spacer"
android:layout_below = "#+id/ImageView1"/>
</RelativeLayout>
Use Table Layout Instead of Relative and LinearLayout To achieve this, as Table Layout Automatically provide same column with to all rows.