Develop Reference

Flexible Horizontal Layout with `layout_weight` and `maxWidth`

I have a TextView and a square ImageView that I would like to show in a horizontal linear layout. Each should take half of the parent view's width and the height should fit the content (i.e. the image). The text should be centered vertically.
Additional constraint is that the image should not grow beyond a given maxWidth (= maxHeight), and excess width should be made available to the TextView. Obviously, this conflicts with the 50/50 rule above. Is there a way to prioritize the constraints, i.e. allow the image to take half of the space unless it exceeds a given size?
These are layouts I tried:
The first one nicely stretches the left side to the available space. But the image takes more than half of the width as its layout_weight is not specified (as in image below).
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Some text."/>
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxWidth="200dp"
android:adjustViewBounds="true"
android:src="#drawable/image" />
</LinearLayout>
When I add layout_weight to the ImageView it always takes half of the width and ignore the maxWidth (see image below).
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:maxWidth="200dp"
android:adjustViewBounds="true"
android:src="#drawable/image" />
Enclosing the ImageView in another LinearLayout enables the maxWidth again, but the enclosing LinearLayout still takes half of the available space (see image below).
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:maxWidth="200dp"
android:adjustViewBounds="true"
android:src="#drawable/image" />
</LinearLayout>
Another option I have found for similar scenarios is to use a RelativeLayout with an invisible view as a center divider, but that locks the division to 50/50 (or wherever the divider is placed).

Okay, gonna go on ahead and post the xml I created, it's pretty much simple, it does most of your conditions.. One thing I'm having trouble with is the part where each view takes half of the parent view's width. Hope this still helps you in some way.
sample_layout.xml
<?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="wrap_content"
android:layout_margin="2dp"
android:background="#android:color/darker_gray">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/img_sample"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginRight="2dp"
android:layout_toLeftOf="#id/img_sample"
android:background="#color/colorPrimary"
android:gravity="center_vertical"
android:text="Some text." />
<ImageView
android:id="#id/img_sample"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginLeft="2dp"
android:adjustViewBounds="true"
android:maxWidth="200dp"
android:src="#drawable/sample_img" />
</RelativeLayout>
Here is a sample screenshot:
If ever you figure out how to the the half of each thing, kindly comment it here, It'd be nice to know about it for possible future use. :)
PS: Have you considered doing the half of each thing programatically? Like checking the LayoutParams then dynamically setting weightSum and the layout_weights.
Sample Image retrieved from this link

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="#color/blue"
android:src="#drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_margin="5dp"
android:layout_toStartOf="#id/imageView"
android:background="#color/colorPrimary"
android:padding="10dp"
android:text="Some text. " />
</RelativeLayout>

It won't be a perfect solution in term of performance. But you can achieve it by playing with FrameLayout and ImageView.
Here is the output:
Layout.xml:
<?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/textGray"
android:orientation="vertical">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/skyBlue">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#android:color/white">
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxWidth="200dp"
android:src="#drawable/ic_settings"
android:visibility="invisible" />
<TextView
android:id="#+id/TextView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:text="!" />
</FrameLayout>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:maxWidth="200dp"
android:src="#drawable/ic_settings" />
</LinearLayout>
</FrameLayout>
</LinearLayout>
In order to achieve desire behaviour, You would have to set same images to both imagesviews in this layout. one of them is invisble, It is just helping to make parent with same width and heights which would lead us to create TextView with same dimensions.
Note: If you want to change textView alignment, you can do it with layout_gravity or gravity.

I can't place two images on the center of layout

I try to place the two images in the center of layout,
but I have the extra space on the top and on the bottom of my layout.
Images are png files.
Important part of my XML is below:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/backDark2"
android:orientation="horizontal"
>
<ImageView
android:id="#+id/imageDriverProfileFace"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:src="#drawable/driver"
/>
<ImageView
android:id="#+id/imageDriverProfileCar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:src="#drawable/car"
/>
</LinearLayout>
Any ideas please how to remove mentioned extra space?
Thanks!

set android:adjustViewBounds="true" param to your imageview's

how to set images inside a layout on screen?

I need to put two images one below the other in the center of the screen. They need to be in the center. the images will keep changing depending on the code so how do i get the images to work on all screens without moving or the size increasing or decreasing?
I tried using grid view but it seems too much code for two images. it works but is there anything more efficient?

For this type of design i always create a center point on screen,check below code -
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/image1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:layout_centerHorizontal="true"
android:layout_above="#+id/center_point" />
<View
android:id="#+id/center_point"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_centerInParent="true"/>
<ImageView
android:id="#+id/image2"
android:src="#drawable/ic_launcher"
android:layout_below="#+id/center_point"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true" />
it will surely works.
All the best

If u have always only 2 images, you can set it in xml file like that:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/image1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
<ImageView
android:id="#+id/image2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true" />
</RelativeLayout>
First image centers in parent and the second one centers horizontal and also aligns bottom of the screen.
Good luck.

Here this code may help you.You must create one LinearLayout and set him vertical orientation and layout_gravity = center horizontal.After that create two image views which are automatic position in center of the screen one below other.I hope this will help you.Happy coding :)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center_horizontal">
<ImageView
android:id="#+id/image_view_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
/>
<ImageView
android:id="#+id/image_view_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</LinearLayout>

Make a vertical Linear-layout that contains both of your ImageViews and then set an equal layout_weight for both of them. Set the layout_centerInParent true for your Linear_layout
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/lock_layout_keypad"
android:orientation="vertical"
android:layout_centerInParent="true"
android:layout_marginBottom="4dp">
<ImageView
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:src="#drawable/ic_launcher"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<ImageView
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView2"
android:src="#drawable/ic_launcher"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
</LinearLayout>
You can remove android:layout_weight.

Putting 2 ImageViews side by side

I am attempting to put two android ImageViews side on the same line, with one gravitated to the left and the other to the right. The 2nd image ends up positioned below the first. I would like to fix this and put them both on the same line.
<ImageView
android:id="#+android:id/expandIcon"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:src="#drawable/arrow_down_float"
/>
<ImageView
android:id="#+android:id/expandIcon"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:src="#drawable/arrow_down_float"
/>

Wrap them in horizontal linear layout
<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="#+android:id/expandIcon1"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:src="#drawable/arrow_down_float" />
<ImageView
android:id="#+android:id/expandIcons2"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:src="#drawable/arrow_down_float"
/>
</LinearLayout>

layout_gravity="left" and layout_gravity="right" won't do anything in a horizontal LinearLayout since they are already positioned left-to-right.
Make the parent Layout a RelativeLayout and use alignParentright="true" for the second one. By default, the first one will be placed to the left of the parent.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+android:id/expandIcon"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:src="#drawable/arrow_down_float" />
<ImageView
android:id="#+android:id/expandIcons"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/arrow_down_float"?>
</RelativeLayout >

Android - having trouble properly sizing an xml layout used for a listview row

I'm trying to set up an xml layout to be used for a row in a ListView. The layout consists of a root LinearLayout with a child RelativeLayout containing two ImageViews (one anchored to the other's bottom/right corner) and a child vertical LinearLayout containing two TextViews. I want each row in the listview to have the same width and height, despite the size of the content in the subviews. I realize I cannot use wrap_content which will size the views based on their content, but I'm unclear on what I should use to accomplish a uniform width/height. I tried using fixed dp values, but that just made it even worse. I've attached two screenshots. The first one, from the iOS version, shows how it should look, while the second one shows how it looks on the Android version with the following layout. As a said, I know what's wrong (the wrap_content attributes), but how do I change it to size correctly? Thanks in advance!
<?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" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/campaign_thumbnail_container" >
<ImageView
android:id="#+id/campaign_thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<ImageView
android:id="#+id/campaign_mark_new"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/campaign_thumbnail"
android:layout_alignRight="#id/campaign_thumbnail"
android:src="#drawable/new1" />
</RelativeLayout>
<LinearLayout
android:id="#+id/campaign_bg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/word_bar"
android:orientation="vertical" >
<TextView
android:id="#+id/campaign_category"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/campaign_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/campaign_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Small Text"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/campaign_footer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Small Text"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>

EDIT - According to comments below:
One general thing: To size elements in a LinearLayout uniformly, you need to do two things:
Use a equal android:layout_weight for each element
Make the width or height (whatever has to be uniquely sized) ="0dip"
This is, because the weight factor is only used to fill the rest of the available space. First all elements are placed using their weight/height, then the still available space is calculated and distributed by weight to each element.
EDIT-end
Now, let me create the layouts step by step.
First, this would be your layout of one entry without the "new campaign" indication.
<!-- Type 1: Picture left, text right. half-half size. Picture resized to fit -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#android:drawable/ic_menu_camera" />
<TextView
android:id="#+id/textView1"
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:gravity="center"
android:text="Your Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
You get a warning, because the LinearLayout itself has a weight. That is necessary, to give all list entries the same height.
Here's type 2:
<!-- Type 2: Picture right, text left. half-half size. Picture resized to fit -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:orientation="horizontal" >
<TextView
android:id="#+id/textView2"
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:gravity="center"
android:text="Your Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#android:drawable/ic_menu_camera" />
</LinearLayout>
(Where's my "That was easy!" button?)
And Type 3. Even easier:
<!-- Type 3: Picture full width. Picture resized to fit -->
<ImageView
android:id="#+id/imageView2"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#android:drawable/ic_menu_camera" />
Now the final thing. Put these three layouts in separate XML-files and include them into a wrapping RelativeLayout.
<!-- Finally overlay the entry with a new indication -->
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1" >
<ImageView
android:id="#+id/newIndication"
android:layout_width="24dip"
android:layout_height="24dip"
android:layout_alignRight="#+id/entry1"
android:layout_alignBottom="#+id/entry1"
android:scaleType="fitCenter"
android:src="#android:drawable/ic_input_add" />
<include
layout="#layout/type1entry"
android:id="#+id/entry1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</RelativeLayout>
Note the include. I've put the Type1 LinearLayout in its own XML file named "type1entry". By giving this a new id with #+id/entry1 I can access this entry explicitely in the Activity. Also, I've given the indicator a size of 24dip in square. Change that to your image accordingly.
I've checked the layouts in Eclipse and they did look as I expected them.

Do you need to use a relative layout?
If not, use linearLayout with weights like this.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/campaign_thumbnail_container"
android:weightSum="100" >
<ImageView
android:id="#+id/campaign_thumbnail"
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="50"
android:scaleType="fitCenter"
/>
<ImageView
android:id="#+id/campaign_mark_new"
android:layout_width="0dip"
android:layout_height="match_parent"
android:src="#drawable/new1"
android:layout_weight=50
android:scaleType="fitCenter" />
</LinearLayout>
This is untested, but similar solutions like this have worked for me in the past.