Develop Reference

adjusting button size to a certain proportion

Consider the following diagram:
The blue buttons are buttons and the red is a textview. I am trying to place them side by side as shown in the diagram but am having confusion because the app should be compatible with different screen sizes and densities.
Basically I want all the buttons to be of the same sizes(square typically) and TextView larger and say when the screen gets bigger(e.g. rotating) only the middle(red) textView should expand and the button size should be the same while they stay in their positions.
what I have tried
I tried using LinearLayout with layout_weight set accordingly but
for bigger screensizes the buttons(blue) would also scale in
proportion of their layout weight, and they'd not look square.
It'd be easy doing this using constraint layout but, it requires
hardcoding the button size(sizing the button in the design editor
does this), which I don't think is a good idea because if screen get bigger button would be smaller.
I could also take a certain percentage of the screen width and apply it to the button size, but how do I make sure that icon for the button renders okay with the scaled buttons and the buttons are aligned as so:
i.e. their centers are aligned but different in height, equidistant from each other.
also I'd have to do that programmatically instead of using the design editor or the xml.
So for this type of purposes what layout should I use and how should I set up my views?

If you want this design in xml, then try this
Note : Use the dimensions from dimens folder for different screen size. Here for LinearLayout of TextView Height use from dimens folder
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:orientation="horizontal"
android:gravity="center"
android:background="#color/colorPrimary"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:weightSum="0.9">
<Button
android:layout_width="0dp"
android:background="#color/colorAccent"
android:layout_weight="0.1"
android:layout_height="wrap_content"
android:layout_margin="2dp"/>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="0.5"
android:layout_height="100dp"
android:layout_margin="2dp">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff00ff" />
</LinearLayout>
<Button
android:layout_width="0dp"
android:background="#color/colorAccent"
android:layout_weight="0.1"
android:layout_height="wrap_content"
android:layout_margin="2dp"/>
<Button
android:layout_width="0dp"
android:background="#color/colorAccent"
android:layout_weight="0.1"
android:layout_height="wrap_content"
android:layout_margin="2dp"/>
<Button
android:layout_width="0dp"
android:background="#color/colorAccent"
android:layout_weight="0.1"
android:layout_height="wrap_content"
android:layout_margin="2dp"/>
</LinearLayout>
</LinearLayout>

Use linear layout and use layout_weight only to TextView and for Buttons give fix width
e.g.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="match_parent">
<Button
android:layout_width="#dimen/length_50"
android:background="#color/colorPrimary"
android:layout_height="#dimen/length_50"/>
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:background="#color/colorAccent"
android:layout_height="#dimen/length_50"/>
<Button
android:layout_width="#dimen/length_50"
android:layout_marginEnd="#dimen/_10dp"
android:background="#color/colorPrimary"
android:layout_height="#dimen/length_50"/>
<Button
android:layout_width="#dimen/length_50"
android:layout_marginEnd="#dimen/_10dp"
android:background="#color/colorPrimary"
android:layout_height="#dimen/length_50"/>
<Button
android:layout_width="#dimen/length_50"
android:background="#color/colorPrimary"
android:layout_height="#dimen/length_50"/>
</LinearLayout>
and result

How to refresh match_parent in a linearLayout after using setRotation?

I have several nested layouts that I'm trying to rotate 90 degrees on demand in code. I've got the setRotation part of things working just fine, but unfortunately things aren't resizing quite right with the rotation. The width on these elements is set to match_parent, and after the rotation it's still matching the parent width, not the parent height that it should be matching.
XML
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/mainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="link.basiclifecounter.LifeCounter"
android:background="#CC00CC">
<LinearLayout
android:id="#+id/topPlayers"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:orientation="vertical"
android:background="#CC0000">
<RelativeLayout
android:id="#+id/p3"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
**A bunch of stuff in here**
</RelativeLayout>
<RelativeLayout
android:id="#+id/p2"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
**A bunch of stuff in here**
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/bottomPlayer"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical"
android:background="#00CC00">
<RelativeLayout
android:id="#+id/p1"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
**A bunch of stuff in here**
</RelativeLayout>
</LinearLayout>
</LinearLayout>
Rotation Java Code
view.findViewById(R.id.topPlayers).setRotation(90); //Rotate the entire top box
view.findViewById(R.id.p3).setRotation(180); //Flip one side so both players face outwards
This picture shows the image before the rotation occurs.
This picture shows the image after the rotation occurs.
As you can see, the entire box has been rotated after it's height and width are already set. In the unrotated version the width (match_parent) should be full screen and the height (layout_weight=2) should be 2/3rds of the screen. That works just fine. The problem is after it rotates, those sizes stay the same instead of adapting and changing to the new rotation.
I threw in some bright background colors to help troubleshoot, that Pink that you're seeing is in the main LinearLayout, not in any of the layouts that are rotated.
I did try including the rotation in the xml itself, instead of within the code, and got the exact same results as the after picture, so it's clearly something I don't understand about how to get the layout widths the way I want. Can I just not use layout_weight effectively with rotation?

I think that you are having the same issue as outlined in this Stack Overflow question. It appears that the rotation is simply not taken into account for layout purposes. In other words, layout occurs then the rotation happens with the views as laid out prior to rotation.
This answer to that same question may help you.
You could also manually adjust the measurements. Either way is a little messy, but I think that is the way it is.
You could load an alternate layout that will behave as you wish instead of doing the rotation. (See layout and image below.) You can also be achieve the same result by changing the layout parameters programmatically.
Here is a project on GitHub that demonstrates doing the rotation programmatically. The view rotates after a three second pause.
I hope that you find this useful.
alternate.xml
<LinearLayout
android:id="#+id/topPlayers"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:background="#CC0000"
android:orientation="horizontal">
<RelativeLayout
android:id="#+id/p3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical"
android:rotation="90">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="p3"
android:textSize="48sp" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/p2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#0000CC"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:rotation="-90"
android:text="p2"
android:textSize="48sp" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/bottomPlayer"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#00CC00"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/p1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="p1"
android:textSize="48sp" />
</RelativeLayout>
</LinearLayout>

Combine layout_weight with minWidth

I have a layout which I want to split into 2 views using layout_weight (1:2). But, I want the left view to have at least 400dp width.
For example, if the left view gets 420dp width by using weight then leave it, but if it has less than 400dp, than let it be 400dp and give the other view all the rest.
This is the layout I've tried and did not work for me.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:minWidth="400dp"
android:background="#android:color/holo_blue_bright"/>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:background="#android:color/holo_green_light"/>
</LinearLayout>
Please help,
Thanks!

I think this is what you need:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<View
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:minWidth="400dp"
android:background="#android:color/holo_blue_bright"/>
<View
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:background="#android:color/holo_green_light"/>
</LinearLayout>
Basically, let the first layout take the needed space but no less than 400dp. The second one will take all the remaining. As with all the cases when weight is involved, be sure that the needed space (for width) for the 2 children is less than what the parent can offer, otherwise you will have things off screen.
Note: I tried it on phone layout, but 400dp was off screen in portrait so it seemed like the first layout was taking all the space, so please make sure to try it out on a device with more than 400dp in the direction you want your layout span :-)

Try this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:weightSum="3" >
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/holo_blue_bright"
android:minWidth="400dp" />
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:background="#android:color/holo_green_light" />
</LinearLayout>

Scrollable Perfectly Symmetrical ImageButtons in XML Android

In my Android app, I want to create a scrollable grid of images that have the same width/height. I don't want to use GridView because there will not be that many images. So far, I have:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="2">
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitCenter"
android:background="#null"
android:src="#drawable/food"/>
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitCenter"
android:background="#null"
android:src="#drawable/music" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="2">
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitCenter"
android:background="#null"
android:src="#drawable/offcampus"/>
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitCenter"
android:background="#null"
android:src="#drawable/sports" />
</LinearLayout>
</LinearLayout>
</ScrollView>
It is very close to what I want to achieve, but the second LinearLayout (the one with the layout_height of 0dp) causes the first two ImageButtons to take up the majority of the screen, so that the user has to scroll a lot to see the next two ImageButtons. In other words, there is way too much space between "rows" of images. Is there any way I can fix this?
I attached a picture in case there was confusion.
Thanks for your help.

Check if the extra space is due to the LinearLayout being too tall or if the ImageButtons themselves are. You can use "Dump View Hierarchy" button in the ADT in Eclipse's Devices view.
I suspect it's the ImageButtons using the images' original height. See if setting android:adjustViewBounds on the ImageButtons help with the issue. See reference: http://developer.android.com/reference/android/widget/ImageView.html#attr_android:adjustViewBounds

How to place UI components uniformly using dip

I need to make below UI for my android app.
Specifications:
UI contains total 4 sections (1-4).
Component 1,2 & 4 must be of same size.
Component 3 must be twice the size of component 1.
But how can I calculate the exact dip size so that all the component are uniformly sized on different sized screens?
If my approach is wrong then please advice.
Thank You

If my approach is wrong then please advice.
Use a vertical LinearLayout and android:layout_weight on the children. If we pretend for a moment that the children are buttons, use:
<?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">
<Button
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:text="1"/>
<Button
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="2"
android:text="2"/>
<Button
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:text="3"/>
<Button
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:text="4"/>
</LinearLayout>
The result is: