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>
Related
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
I have a imageView and a linear layout inside a linear layout. It looks like this:
What I want to happen is have the second linear layout with all of the buttons and params be a fixed height, and then have the image view height be dynamic depending on whatever the size of the screen is. So if there is a large screen then the image will be large and the button and sliders will always be the same.
Here is a snippet of what I have:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
>
<ImageView
android:id="#+id/imgPreview"
android:layout_width="match_parent"
android:layout_height="400dp"
android:visibility="visible"
android:layout_gravity="center_vertical|right"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:scaleType="centerCrop"
/>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="fill_parent">
Is there an easy way to do this?
You can do this by giving the ImageView a layout_height of 0dp and setting its layout_weight to 1. The inner LinearLayout will have its layout_height set to wrap_content.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" >
<ImageView
android:id="#+id/imgPreview"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:visibility="visible"
android:scaleType="centerCrop" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Your button and slider content here>
</LinearLayout>
</LinearLayout>
Yes, you can do this using:
android:layout_height="0dp"
android:layout_weight="YOUR VALUE"
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 am solving a problem with image and text in one scroll view. The main problem is, that I get different image height from server side . But the place with image should be all the time same.
Now the height of image place is dynamic. The text should be scrollable with the image.
Is there any possibility how to make the image height static?
Thank you!
EDIT
<?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" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/article_gallery"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="4" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<ImageView
android:id="#+id/article_image_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:src="#drawable/sipka_l" />
<ImageView
android:id="#+id/article_image"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1" />
<ImageView
android:id="#+id/article_image_next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:src="#drawable/sipka_p" />
</LinearLayout>
<TextView
android:id="#+id/image_desc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/tran_dark_gray"
android:gravity="center"
android:padding="#dimen/size_8"
android:textAppearance="#style/xsmallLight" />
</RelativeLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="6"
android:background="#color/opaq_light"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="#dimen/size_16" >
<TextView
android:id="#+id/article_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="#dimen/size_12"
android:textAppearance="#style/normalBold" />
<TextView
android:id="#+id/article_body"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="#style/xsmall" />
</LinearLayout>
</ScrollView>
</LinearLayout>
</FrameLayout>
If you declare the ImageView with a fixed width and height it will remain static all the time.
Try something like:
<ImageView
android:id="#+id/imageView1"
android:layout_width="50dp"
android:layout_height="50dp"
/>
Put this ImageView inside a ScrollView and ofcourse put your TextView inside the same ScrollView.
you can use layout weights for your linearlayout. Set the width to 0 and let the weight determine actual size. Setting weight to 0.33 each gives each images 1/3 of the screen.
Or you could set one to 0.5 and the others to 0.25 each or whatever makes sense for your app.
Set the 3 images as:
<ImageView
android:id="#+id/article_image_back"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.33"
android:layout_gravity="center_vertical"
android:src="#drawable/sipka_l" />
I'm currently doing a special xml layout of a landscape screen, where 4 images are present and 2 LinearLayouts are next to each other with 2 images each. These LinearLayouts I call linearLayout1 and linearLayout2.
linearLayout1 is marked with blue rectangle:
linearLayout2 is marked with blue rectangle:
As you can see, the first one uses ~80% of the screen, while the second one uses what's left. I don't want this of course, I want 50% for each. I can't use layout_weight because it's already used in the LinearLayouts themselves (positioning of the two images) and nested weights are bad for performance.
I've tried many different variations, but I simply can't get the two LinearLayouts to have 50% of the screen each. Here's the code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/db1_root"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/title_container"
style="#style/TitleBar" >
<ImageView
style="#style/TitleBarLogo"
android:contentDescription="#string/imgViewDesc"
android:src="#drawable/title_logo" />
<ImageView
style="#style/TitleBarSeparator"
android:contentDescription="#string/imgViewDesc" />
<TextView style="#style/TitleBarText" />
<ImageButton
style="#style/TitleBarAction"
android:contentDescription="#string/imgViewDesc"
android:onClick="onClickAbout"
android:src="#drawable/title_about" />
</LinearLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/title_container"
android:layout_above="#+id/mobFoxView" >
<!-- LEFT COLUMN -->
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/mobFoxView"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/linearLayout2"
android:background="#color/white"
android:gravity="center"
android:orientation="vertical"
android:weightSum="2" >
<ImageView
android:id="#+id/imgNews"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:contentDescription="#string/imgViewDesc"
android:onClick="onClickFeature"
android:src="#drawable/front_news_1" />
<ImageView
android:id="#+id/imgReleases"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:contentDescription="#string/imgViewDesc"
android:onClick="onClickFeature"
android:src="#drawable/front_releases_1" />
</LinearLayout>
<!-- RIGHT COLUMN -->
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_above="#+id/mobFoxView"
android:layout_alignParentRight="true"
android:layout_alignTop="#id/linearLayout1"
android:background="#color/white"
android:gravity="center"
android:orientation="vertical"
android:weightSum="2" >
<ImageView
android:id="#+id/imgArtists"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:contentDescription="#string/imgViewDesc"
android:onClick="onClickFeature"
android:src="#drawable/front_artists_1" />
<ImageView
android:id="#+id/imgLabels"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:contentDescription="#string/imgViewDesc"
android:onClick="onClickFeature"
android:src="#drawable/front_labels_1" />
</LinearLayout>
</RelativeLayout>
<com.mobfox.sdk.MobFoxView
android:id="#+id/mobFoxView"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
mode="test"
publisherId="#string/mobFoxID" />
</RelativeLayout>
Well, there are two options I see available here.
Screw that LINT warning and use the nested weights anyway. Phones are fast and it will make milliseconds worth of a difference since you only inflate layouts once (most of the time). Having nested layouts is only bad for performance because the inflator needs to make more passes to measure the layouts.
Swap your top LinearLayout with a RelativeLayout and align the two children to an invisible View in the center like so:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/top"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/center_point"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerInParent="true"/>
<LinearLayout
android:id="#+id/left_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignRight="#+id/center_point">
</LinearLayout>
<LinearLayout
android:id="#+id/right_layout"
android:orientation="horizontal" //default
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_alignLeft="#+id/center_point">
</LinearLayout>
</RelativeLayout>
You can set "Weight" for the layouts , like this :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
</LinearLayout>
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
</LinearLayout>
So each linearlyouts take 50% of the screen. :)
If you're trying to avoid using a feature for its intended purpose you probably should consider if your approach is non-ideal... It seems like you're trying to arrange items into rows and columns. Try using a TableLayout.
Without layout_weight, put both of those linearlayouts into a parent linearlayout
<LinearLayout orientation:horizontal>
<LinearLayout Child 1 />
<LinearLayout Child 2 />
</LinearLayout>
center them using layout_gravity , if the content of those linearlayouts are the same size, they should be the same size
if not, then you could still have a problem
and may need to resize using code