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.

Native Android: Create dynamically a grid-like scrollable layout with equal width buttons

I am trying to create a layout as per this picture (paint'ed).
Layout Design
Target level is API 17. This has to be created programmatically, not using XML. This has to be a responsive design.
I extensively researched and attempted other partially similar situations on stackoverflow, using GridLayout, TableLayout, GridView, various layout parameters, gravity, weight, view nesting and so on. However,
(a) I can't get the text buttons width to fill the available width real estate as per device screen size and orientation. Buttons with shorter texts are coming with shorter width.
(b) The plus, minus and number buttons are of fixed height and width irrespective of screen sizes and orientation. But they are not aligning with the text button in the left on the same row. only the bottom few pixels are visible.
I would appreciate any code snippet that can achieve the above layout. Thanks a million.
UPDATE:
Following inputs from #tiny-sunlight, I did this. Next I will recreate this programmatically.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/layoutTable"
android:padding="5dp"
android:orientation="vertical"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/layoutRow"
android:padding="5dp"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_marginEnd="10dp"
android:layout_weight="17"
android:text="This is my button"
android:textSize="15sp"
android:textAllCaps="false"
android:gravity="start"
android:layout_width="0dp"
android:layout_height="40dp" />
<Button
android:layout_marginEnd="5dp"
android:layout_weight="1"
android:text="-"
android:textSize="15sp"
android:textStyle="bold"
android:layout_width="40dp"
android:layout_height="40dp" />
<TextView
android:layout_marginEnd="5dp"
android:layout_weight="1"
android:layout_marginTop="0dp"
android:paddingTop="10dp"
android:text="0"
android:textSize="15sp"
android:gravity="center"
android:layout_width="40dp"
android:layout_height="40dp" />
<Button
android:layout_weight="1"
android:text="+"
android:textSize="15sp"
android:textStyle="bold"
android:layout_width="40dp"
android:layout_height="40dp" />
</LinearLayout>
</LinearLayout>
</ScrollView>

Try to build layout below programmatically.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:padding="5dp"
android:orientation="vertical"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:padding="5dp"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_marginRight="10dp"
android:layout_weight="1"
android:text="1111"
android:layout_width="0dp"
android:layout_height="40dp" />
<ImageView
android:layout_marginRight="5dp"
android:src="#mipmap/ic_launcher"
android:layout_width="40dp"
android:layout_height="40dp" />
<TextView
android:layout_marginRight="5dp"
android:background="#44bb11"
android:layout_marginTop="0dp"
android:paddingTop="10dp"
android:text="11"
android:layout_width="40dp"
android:layout_height="40dp" />
<ImageView
android:src="#mipmap/ic_launcher"
android:layout_width="40dp"
android:layout_height="40dp" />
</LinearLayout>
</LinearLayout>
</ScrollView>

You can use a recycler view, which will provide you scrolling option plus bind views on the fly for you.
So load a linear layout (orientation horizonal) into the recycler view. now for the layout, it then becomes easier. You need a textview, button,textview,button.
For each of these textview and buttons, set widht = 0dp and weight as 7,1,1,1 respectively i.e. your leftmost textview occupy 70% of width whereas all other occupy 10%. Obviously you can change these weights as per your requirements. Thats it for the layout.
Now just fill your data using the adapter.

Button taking too much space

I still dont really get it how many space layouts take.
I have the following xml.
The inner LinearLayout's for the bottom space height is set to wrap_content, so it should take the height of the maximum height in there. Which is 52dp. And there is the ImageButton which is set to wrap_content, so the button should be centered vertically on the right side, since its an 24dp image (in xhdpi it has 32x32 pixels). So why is it stretched over the full height like displayed here?:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="2dp">
<de.ph1b.audiobook.utils.SquareImageView
android:id="#+id/cover"
android:scaleType="fitXY"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:layout_gravity="bottom">
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="52dp"
android:paddingLeft="16dp"
android:maxLines="2"
android:ellipsize="end"
android:paddingRight="16dp"
android:gravity="center_vertical"
android:textSize="16sp" />
<ImageButton
android:id="#+id/editBook"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="?android:attr/borderlessButtonStyle"
android:layout_gravity="center_vertical"
android:src="#drawable/ic_more_vert_grey600_24dp" />
</LinearLayout>
</LinearLayout>

either #drawable/ic_more_vert_grey600_24dp is larger than you think or borderlessButtonStyle has a larger background.
Please check the size. I have replicated the behavior and the ImageButton is set to wrap_content and is centered.

change your image button code
<ImageButton
android:id="#+id/editBook"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="?android:attr/borderlessButtonStyle"
android:scaleType="fitXY"
android:gravity="center_vertical"
android:src="#drawable/ic_more_vert_grey600_24dp" />

android:How to prevent the size of image button or image view being scaled in listView?

There are some rows in listView and each rows has the same format :
From left to Right
ImageView TextViews ImageButton.
i am using relative layout to fix the position of the components but the size of the ImageButton is scaled and only imageButton displayed on each rows.
<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/search_resultItem_Layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/imgBook"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
/>
<LinearLayout
android:id="#+id/bBasicDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignRight="#id/imgBook">
<TextView
android:id="#+id/bid"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:visibility="gone" />
<TextView
android:id="#+id/bName"
android:layout_width="wrap_content"
android:layout_height="0dip"
android:layout_weight="1"
android:textSize="18sp" />
<TextView
android:id="#+id/authors"
android:layout_width="wrap_content"
android:layout_height="0dip"
android:layout_weight="1"
android:text="#string/authors" />
<TextView
android:id="#+id/publisher"
android:layout_width="wrap_content"
android:layout_height="0dip"
android:layout_weight="1"
android:text="#string/publisher" />
<TextView
android:id="#+id/status"
android:layout_width="wrap_content"
android:layout_height="0dip"
android:layout_weight="1"
android:text="#string/status" />
</LinearLayout>
<ImageButton
android:id="#+id/btnMore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/temp"
android:layout_toRightOf="#id/bBasicDesc"
android:layout_alignParentRight="true"/>
</RelativeLayout>
Any wrong in my xml coding?

Because you are doing wrap_content it takes the size of the image that you set as src. That is why its getting scaled and bigger..
To resolve this, instead of using wrap_content you should think about what is the right height that you want for the listView item, and then for both ImageView and ImageButton set something like:
android:layout_width="50dp" // sample value of 50dp
android:layout_height="50dp" // sample value of 50dp
android:adjustViewBounds="true"
android:scaleType="centerCrop" // or android:scaleType="centerInside"

You can set custom height and width of the image you are inputting into your layout. This way no matter what the image will stay that size and not try to stretch or shrink.
You can do this within your activity's .xml file using:
android:layout_width="yourwidthhere.dp"
android:layout_height="yourheighthere.dp"

How to scale TextView in android and keep it in center

I'm trying to do a layout with dynamic scaling of test view. The layout looks like - see bottom left corner.
Now that portion is a composite control. The circle scales just fine, but I can't figure out how to make the text positioned perfectly in the middle while scaling properly. I want the text at let's say 50% of the container size and positioned perfectly in the center. RelativeLayout only allows for absolute values, and I can't seem to get the weighting working with text view for linear layout with textview.
Composite control:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/VarioCircle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:contentDescription="Vario Circle"
android:scaleType="fitCenter"
android:src="#drawable/circle" />
<LinearLayout
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:weightSum="1.0"
android:orientation="vertical"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
>
<TextView
android:id="#+id/VarioText"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:text="200"
android:textColor="#FF0000"
android:textSize="60dp"
android:layout_weight="0.7"
android:textStyle="bold"
android:typeface="monospace" />
</LinearLayout>
</RelativeLayout>
Overal layout:
<com.proflite.VarioView
android:id="#+id/Vario"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentBottom="true"
/>

Put the TextView inside of container. And set Gravity (Views attribute) to Center.
Set TextViews width and height to wrap_content.
This will make TextView centered in it's container.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="200dp"
android:layout_height="200dp" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="20sp" />
</FrameLayout>
This will get TextView centered inside of FrameLayout

try this
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/VarioCircle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:contentDescription="Vario Circle"
android:scaleType="fitCenter"
android:src="#drawable/circle" />
<TextView
android:id="#+id/VarioText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="200"
android:textColor="#FF0000"
android:textSize="60dp"
android:layout_weight="0.7"
android:textStyle="bold"
android:typeface="monospace" />
</RelativeLayout>
</RelativeLayout>

I suggest you make an Button widget and set an image as background which has .png format, having transparent background.
Like this:
After that Make sure to save it as .png
1)Then go to your xml layout create a Button or ImageButton widget.
2)Set this pic saved as a background image ( android:background="#drawable/yourcircle")
3)then finally you can put any text inside ( android:text="blabla") + you can change it from the code for sure using Button.setText("blablabla")
4)You will also want to change the font size using Button.setTextSize(49) for example.
5)Finally to make it in the center, android:gravity="center"