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

Android LinearLayout: putting some object with equal space

I need to put some ImageButton with equal space in layout(something like the picture I attached).
I checked a lot of similar posts like:
Android: How to make all elements inside LinearLayout same size?
give equal space between ImageViews
What is android:weightSum in android, and how does it work?
However they didn't help me.
Using margin and padding didn't solve my problem, because I want to have equal space around ImageButton. It is important for me to keep the space equal in any device. Also I want to set size to my ImageButton. It's a rounded image so the height and width of image should be equal . When I use weightsum, I can't set arbitrary width as layout_width for ImageButton.
Thanks for helping me.
P.S. This is not duplicate post. In the first link which i brought, it is not possible to set equal space. It just put objects next to each other.
This is a layout with 2 ImageButton with arbitrary size:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context="info.androidhive.materialdesign.activity.HomeFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/background_home">
<ImageButton
android:layout_width="#dimen/log_guid_image_height"
android:layout_height="#dimen/log_guid_image_height"
android:onClick="onLastClick"
android:id="#+id/btn_menu_last"
android:background="#drawable/menu_last" />
<ImageButton
android:layout_width="#dimen/log_guid_image_height"
android:layout_height="#dimen/log_guid_image_height"
android:onClick="onAddClick"
android:id="#+id/btn_menu_add_records"
android:background="#drawable/menu_add_records" />
</LinearLayout>
I added android:layout_weight="1" to each ImageButton, and set android:layout_width="0px" and it gave me this:
The problem is that how I can add equal space around ImageButton and gave arbitrary size to them!!!

You can use TableLayoutas below:
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="left|top"
android:stretchColumns="*">
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/imageButton" />
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageButton2" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageButton3" />
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageButton4" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageButton5" />
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageButton6" />
</TableRow>
</TableLayout>
You can you use a inner LinearLayout at the place of ImageButton to customize your ImageButton position.

Try this:-
<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="wrap_content"
android:background="#drawable/background_home"
android:weightSum="1" >
<ImageView
android:id="#+id/btn_menu_last"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:onClick="onLastClick"
android:src="#drawable/menu_last" />
<ImageView
android:id="#+id/btn_menu_add_records"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:onClick="onAddClick"
android:src="#drawable/menu_add_records" />
</LinearLayout>

Just nest LinearLayouts like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:gravity="center"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:gravity="center"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
Put ImageButtons inside each LinearLayouts.
Using LinearLayout and getting equal space is essentially the same idea as the past Q&A you read.
And inside these equal spaced cells, you can put ImageButtons with layout_gravity="center" (or gravity="center" with LinearLayout as shown abobe).

I think for this problem you need use a GridView and specify columnWidth option.

dimens file in values-sw360dp clashes with nexus4 & nexus5 UI

Creating an application in portrait mode where I have to align Button on image based on top margin. I'm using dimens file in values-sw360dp which is looking proper in nexus 5 but the same values is not aligning the Buttons in nexus 4 as both of the devices using values-sw360dp folder for dimens file.
Can you please suggest the solution for this. Also can any one provide list of all possible values folder that should be integrated to support multiple screens
Following is the code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/windowBackground">
<ImageView
android:id="#+id/bc_logo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitStart"
android:src="#drawable/bc_imgbc_logo" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/bc_logo"
android:orientation="horizontal"
android:weightSum="1"
android:layout_alignParentTop="true"
android:layout_marginTop="#dimen/bc_img_margin_top">
<Button
android:id="#+id/login_btn"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:background="#drawable/signing_tab_btn"
android:text="SIGN IN"
android:textColor="#color/colorAccent" />
<Button
android:id="#+id/registration_btn"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:text="REGISTER"
android:textColor="#FFFFFF" />
</LinearLayout>
</RelativeLayout
In above code I need to align the LinearLayout on the ImageView so using android:layout_marginTop="#dimen/bc_img_margin_top"for setting margin.
I have the Image in <ImageView/> which i have to give height and width as match parent in order to maintain aspect ratio and occupy width of screen so this results in the image showing in the area i wanted top of screen but the <ImageView/> is occupying area of whole screen and I want to align the <LinearLayout/> having buttons on the bottom part of Image.
Following is the image in which the sign in button with yellow underline and register button in white text needs to be aligned on bottom most part of the image where image ends. and the blue area depicts the area occupied by which covers the whole device height.

you need to add some values by yourself like backgrounds and dimensions...
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00FF00">
<ImageView
android:id="#+id/bc_logo"
android:layout_width="match_parent"
android:layout_height="250dp"
android:scaleType="fitXY"
android:src="#drawable/background" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="200dp"
android:orientation="horizontal"
android:layout_gravity="top"
android:weightSum="1"
>
<Button
android:id="#+id/login_btn"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:text="SIGN IN"
android:textColor="#00FFFF" />
<Button
android:id="#+id/registration_btn"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:text="REGISTER"
android:textColor="#00FFFF" />
</LinearLayout>
</FrameLayout>

Create this kind of value structre for different sizes

Element relative height in layout

I have seen that the width of an element can be set to a fraction of the screen width by using a relative layout (code below showing ONLY the relevant properties):
<LinearLayout>
<ImageView
android:layout_width="0dp"
android:layout_weight=".40" />
</imageView>
<TextView
android:layout_width="0dp"
android_layout_weight=".60" />
</LinearLayout>
But ... apparently this same trick can NOT be done for assigning proportional height of an element. Eclipse complains if I attempt to set a layout_height of 0dp. What should I do if I want an image with a caption, where the image takes up 40% of the screen height and the caption below gets 60% ?

You can indeed assign weights for both horizontal and vertical orientations of a LinearLayout.
Horizontal orientation example:
<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:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".40" />
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".60" />
</LinearLayout>
Vertical orientation example:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".40" />
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".60" />
</LinearLayout>
As an aside, it's useful to know that you don't have to specify floating point numbers for the weights. Android will simply sum up all of the weights and then divide by the total to get the percentage for each. So using 4 and 6 respectively for the layout_weights would have worked just as well.

Add android:orientation="vertical" to your layout and then set layout_height=0dp and weight to wanted values.
So:
<LinearLayout
android:orientation="vertical">
<ImageView
android:layout_height="0dp"
android:layout_weight=".40" />
</imageView>
<TextView
android:layout_height="0dp"
android_layout_weight=".60" />
</LinearLayout>

ImageViews aren't aligned vertically when using padding

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"
/>