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
Related
If I want to have a Picture in the Center of my layout, I easily use: "Center Vertically" and "Center Horizontally". But now I want a picture to have it in the Center of the left side. But I don't want to use marginLeft=..dp. I want to work without dp. Is there a possibility like "Center Vertically" etc? Here is the code with dp-values. What can I use instead of MarginLeft"38dp"?
<?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" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_centerInParent="true"
android:layout_marginLeft="41dp"
android:src="#drawable/rosezwei" />
</RelativeLayout>
If I understood correctly you want the image center at 25% of your screen width...
Alas Android has no percentage in XML, to do that you must use a LinearLayout to split your screen
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:layout_gravity="center"
android:src="#drawable/rosezwei" />
<Space
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".5"/>
</LinearLayout>
use
android:layout_gravity="left|center_vertical"
Will work inside a LinearLayout view.
<?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="horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_gravity="left|center_vertical"
android:src="#drawable/rosezwei" />
</LinearLayout >
Note that the LinearLayout is horizontal, so views can choose its VERTICAL position.
I am trying to create a layout that would always display 2 images, splitting the screen length equally into half, leaving no whitespace on screen (even if the images are center cropped).
So far I have the following code, but this leaves a lot of empty white space at the bottom of the screen. The reason I use "RelativeLayout" within the "LinearLayout" is because I want my text1 view to come at the lower portion of my image 1 (overlapping the image1).
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="230dp"
android:layout_marginBottom="3dp" >
<ImageView
android:id="#+id/img1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true"
android:contentDescription="#string/picture"
android:scaleType="centerCrop" />
<TextView
android:id="#+id/text1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center"
android:padding="5dp"
android:textColor="#fff" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="230dp"
android:layout_marginBottom="3dp" >
<ImageView
android:id="#+id/img2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true"
android:contentDescription="#string/picture"
android:scaleType="centerCrop" />
</RelativeLayout>
You are hardcoding the height to 230dp for each layout which could be causing the problem. In the Linear layout you should use weights to distribute the screen area equally.
Use android:layout_weight="1" in both the relative layouts
Check here for more information
Android: 2 relative layout divided in half screen
The layout you are describing is a simple, weighted LinearLayout. Simply add the following attribute to your LinearLayout:
android:weightSum="2"
Then for each RelativeLayout, change the height attribute to:
android:layout_height="0px"
And add the following attribute to the same RelativeLayouts:
android:layout_weight="1"
try to use the frame layout if you want to overlap the textview on image view and use layout weight on the frame layout
Sample code for layout xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="3dp"
android:layout_weight="0.5" >
<ImageView
android:id="#+id/img1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true"
android:scaleType="centerCrop" />
<TextView
android:id="#+id/text1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Test"
android:gravity="center"
android:layout_gravity="center_vertical|bottom"
android:padding="5dp"
android:textColor="#android:color/black" />
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="3dp"
android:layout_weight="0.5" >
<ImageView
android:id="#+id/img2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true"
android:scaleType="centerCrop" />
</FrameLayout>
Im trying to get two ImageViews side by side with a gap around the image. Ive been using Padding, Margin etc and all have had the same effect (See Image Below)
as you can see the image on the right is shifted upwards, how do i stop this?
Here's the layout file im using:
<?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" >
<!-- Top Row -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines"
android:layout_margin="5sp"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines"
/>
</LinearLayout>
I am going to be using more rows of images hence the extra LinearLayout
Use layout_weight to divide your layout equally. Try the following code:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<!-- Top Row -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="6dp"
android:layout_marginRight="3dp"
android:layout_weight="1"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="3dp"
android:layout_marginRight="6dp"
android:layout_weight="1"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines" />
</LinearLayout>
</LinearLayout>
Also, never use sp for specifying layout dimensions. Use dp instead.
You have given layout_margin for left side image and didn't give for the right side image.That's where the issue lies. If you want only two images in a row and if the image size is same for the both then you can make use of layout_weight attribute and give padding for space in between them.
so,try this. It will work.
<!-- Top Row -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines"
android:padding="3dp"
/>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines"
android:padding="3dp"
/>
</LinearLayout>
To fix Vertical alignment :
Use android:layout_height="match_parent" in your ImageView
by using android:layout_height="match_parent" inside ImageView it will be matched to its parent your LinearLayout which is android:layout_height="wrap_content"
Now Question arises why the height will be same for both ImageViews ?
Reason your parent LinearLayout's Height will be automatically chosen from ImageView Whose height is greater because of android:layout_height="wrap_content" in your LinearLayout !
and by using android:layout_height="match_parent" you will be using same height for ImageView whose height is smaller !
To Fix Horizontal alignment :
use android:layout_weight="equal weight value for btoh"
change your code to
<ImageView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines"
android:layout_margin="5sp"
/>
<ImageView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines"
/>
Im trying to create a stampcard system on my application but when its coming to laying out the stamps (they wil be invisable untill requested and shoud be spaced evenly in 2xrows of 3),
I cant get the view to sit right, I want the stamps to appear evenly over an Image view but it just wont happen, I tried to get my linear layout that will hold the 2 rows to stretch to the relative view ( who's size is set by the stampcard ImageView) so i could space them out evenly using their weight but it wouldn't stretch it would allways wrap the content any help would be appreciated.
The layout xml:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:id="#+id/main_fragment_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/home_page_title"
android:layout_width="match_parent"
android:layout_height="64dp"
android:background="#drawable/bottom_bar"
android:gravity="center_horizontal|fill_vertical"
android:text="#string/home_fragment_title"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#FFFFFF"
android:textStyle="bold" />
<RelativeLayout
android:id="#+id/stamp_card_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/home_page_title"
android:gravity="center" >
<ImageView
android:id="#+id/the_stamp_card"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/stamp_card" />
<LinearLayout
android:id="#id/row_holder"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/stamp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/stamp" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
<Button
android:id="#+id/scanBtn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/stamp_card_layout"
android:background="#drawable/brown_btn"
android:text="Scan?"
android:textColor="#FFFFFF"
android:textSize="23sp"
android:textStyle="bold"
android:typeface="normal" />
</RelativeLayout>
The Result:
I don't know what to do as they have to be over the image and stay relative to the stampcard and the only way I know how was using a relative layout and it is being designed for api 8 so it has to be simple :/
thanks in advanced!
The solution I came to is to just have multiple Stampcard images each with a one more stamp than the last and to cycle though them.
I have a RelativeLayout with some stuff in it, and I want a background view to fill the whole thing. This is what I would expect to work:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000" >
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
android:layout_margin="1px"
android:background="#fafafa" />
<ImageView
android:id="#+id/im"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_blank_profile" />
.... and so on.
That doesn't work. It fills the width but the height gets set to zero. However, if I change layout_alignParentBottom to layout_alignBottom="#+id/im" then it does work (sort of; that's not a satisfactory solution but at least it isn't 0 height any more).
What's going on? Is this a bug?
You need to change the relative layout from
android:layout_height="wrap_content"
to
android:layout_height="match_parent"
Because you are wrapping the height of the parent to the child, and the child to match the parent, it will come up 0.
if you are wanting to have other things above/below the relative layout, then use android weights.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0px" <!-- or 0dip -->
android:layout_weight="1"
android:background="#000" >
Try setting the layout_height property of you relative layout to match_parent
And what happens if you remove all the alignParent properties from the view and just use match_parent for the width and the height of the view?
Rolf
Final Edit?:
Small example, something like this?
Using a container? When the content of the inner RelativeLayout grows the View will just stretch with it.
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<View
android:id="#+id/view1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignBottom="#+id/relativeLayout1"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_margin="1px"
android:background="#fafafa" />
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/im"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_blank_profile" />
</RelativeLayout>
</RelativeLayout>
</LinearLayout>