Develop Reference

layout button corresponts to background

In Android Studio, I want the size of the buttons as well as the distance between them to change with the size of the display.
Basically, I have a background with special places for buttons (I know it's a bad practice) and on different screens, the buttons don't fit the background.
I've tried to accomplish this via ConstraintLayout, but match_constraint makes the size of the button large as the container and margins are static.
I've tried this answer to a similar question, but it didn't work properly.

I didn't manage to do this in ConstraintLayout either. A chain with percentage guidelines will need its children to be set to wrap_content. Therefore the size of the buttons will remain the same, for example in landscape and portrait modes. Therefore I used "empty" Views in a LinearLayout. By giving each element, the buttons AND the empty views, a weight, you can achieve the effect of button sizes relative to screen width. Voila:
<?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">
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".1666" />
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:text="Button1" />
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".1666" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:text="Button2" />
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".1666" />
</LinearLayout>

Gravity of two side-by-side TextViews

I'm trying to have two TextViews side-by-side, and I want one to be touching the right-side of the screen and the other, the left-side. I don't want to define the widths using numbers because screens of different sizes would behave differently. So I'm trying to use layout_gravity, which is not working for some reason.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16dp"
android:layout_gravity="left"
android:text="rrr"
android:textColor="#color/secondTextColor"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:textSize="16dp"
android:text="sss"
android:textColor="#color/secondTextColor" />
</LinearLayout>
Can anyone tell me why? Thanks!

You can create one LinearLayout for each TextView as follows :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="start">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16dp"
android:text="rrr"
android:textColor="#f2f2"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="end">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16dp"
android:text="sss"
android:textColor="#f3f3" />
</LinearLayout>
</LinearLayout>
And the important thing is that in your first LinearLayout you put android:gravity="start" and in your second one android:gravity="end", then it will work :)
Use end instead of right to ensure correct behavior in right-to-left locales.
Why is "end" better than "right"?
Using Gravity#LEFT and Gravity#RIGHT can lead to problems when a layout is rendered in locales where text flows from right to left.
Use Gravity#START and Gravity#END instead. Similarly, in XML gravity and layout_gravity attributes, use start rather than left.
For XML attributes such as paddingLeft and layout_marginLeft, use paddingStart and layout_marginStart.
NOTE: If your minSdkVersion is less than 17, you should add both the older left/right attributes as well as the new start/right attributes. On older platforms, where RTL is not supported and the start/right attributes are unknown and therefore ignored, you need the older left/right attributes. There is a separate lint check which catches that type of error.
(Note: For Gravity#LEFT and Gravity#START, you can use these constants even when targeting older platforms, because the start bitmask is a superset of the left bitmask. Therefore, you can use gravity="start" rather than gravity="left|start".)

You can try with android:layout_weight & android:gravity .
Read What does android:layout_weight mean & Layout Weight
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:weightSum="1" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:gravity="left"
android:text="Intellij" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:gravity="right" // You can add end instead of right
android:text="Amiya" />
</LinearLayout>

You could use android:layout_weight="1" on TextView's and 0dp for width.

Android ImageButton with gradient AND transparent image background[Image included]

Id like to achieve the effect seen in the image ive provided below.....possible?
I know how to do a gradient and I know how to set a imagebuttons src/bg to a drawable but i have nooooooo idea where to even start with pulling off both at the same time.

It's actually incredibly simple. To avoid overdraw by layering a bunch of views, just add a ColorFilter to your ImageView:
imageView.setColorFilter(Color.parseColor("#994dace3"), PorterDuff.Mode.SRC_OVER);
No added overdraw, and you can set whatever color you want, and experiment with different PorterDuff blending modes.
Example:

I know how to do a gradient and I know how to set a imagebuttons
src/bg to a drawable but i have nooooooo idea where to even start with
pulling off both at the same time
I think what you are referring to as being a gradient is actually a color with transparency value set. From what I can tell, you are looking for something like this:
You can achieve this using the following layout:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/the_picture"
android:src="#color/transparent_color" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="Message!" />
</RelativeLayout>
The RelativeLayout is used to position the TextView over the ImageButton. The Picture is set as the background. The src is set to a color(any color) with a transparency value between 00(completely transparent) and ff (completely opaque). In the image above, I have used a transparency of 70. So, say you pick Green(#00ff00), add transparent value to it: #7000ff00 and add it to res/values/colors.xml. You can also use it directly as I have done below.
Here's the complete xml code for the activity in the pic above:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<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="1"
android:background="#drawable/original" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" >
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/original"
android:src="#7000ff00" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:text="Optional Message!"
android:gravity="center"
android:textColor="#android:color/white"
android:textSize="25sp" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
You can set a custom font to the TextView(as in the picture you've provided) in code.

How can I automatically apply the style of the parent?

I have a layout that contains a custom layout. I would like to pass the style from one element to another. I have a class which inflates the layout, which I can post if required. This element of design is added by 2 different layouts, with different sizes depending on what is required.
Child layout
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center_horizontal">
<TableRow android:layout_height="wrap_content" android:gravity="center_horizontal" android:layout_width="fill_parent" android:id="#+id/tableRow1">
<Button android:text="1" android:id="#+id/nb1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="40sp" android:layout_margin="1dip" android:minWidth="70dip"></Button>
<Button android:text="2" android:id="#+id/nb2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="40sp" android:layout_margin="1dip" android:minWidth="70dip"></Button>
<Button android:text="3" android:id="#+id/nb3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="40sp" android:layout_margin="1dip" android:minWidth="70dip"></Button>
</TableRow>
</TableLayout>
And here's the parent layout
Parent Layout
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<pearsonartphoto.AJEG.number_viewer android:id="#+id/numberviewer" style="#style/bigViewer" android:layout_alignParentRight="true" android:layout_alignParentBottom="true">
</pearsonartphoto.AJEG.number_viewer>
</RelativeLayout>
What I would like to do is to pass in a style, and have the style be repeated through all of the children, or at least the textView elements. What do I need to do to make this happen?

As far as I know there is no way in android to inherit the style of parent to the children views, not by just nesting them !
the thing that you could to is to apply a style to the parent
let say styleA, and than apply a style to the children elements let say styleB
and the inheritance could be done in the styles, I mean styleB can inherit properties from styleA and also override some of his parent values
fill_parent
wrap_content
#00FF00
monospace
fill_parent
wrap_content
#00FF00
monospace
the bad news is that you must put style in every children element :-(
I think this is the only way to give a style to some element, if you want to give a style to group of elements than you must define theme and apply it to the activity or to the application this is done usually in code but it could be done pro programmaticlly also.

Uneven LinearLayout weight distribution

I have a LinearLayout that has four views layed out horizontally. The first and last component are a set size. For the inner two views I want to just share the available space 50:50. I set each to a weight of "1" but when the views are layed out, the views are different sizes depending on the content they hold.
Here is my layout xml for reference.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/status"
android:src="#drawable/white"
android:paddingRight="10dip"
android:layout_height="35dip"
android:layout_width="35dip">
</ImageView>
<TextView android:id="#+id/name"
android:text="Name"
android:layout_height="fill_parent"
android:layout_toRightOf="#id/status"
android:layout_width="wrap_content"
android:layout_weight="1"
android:textSize="25dip">
</TextView>
<TextView android:id="#+id/description"
android:text="Description"
android:layout_toRightOf="#id/name"
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:layout_weight="1"
android:textSize="25dip">
</TextView>
<TextView android:id="#+id/time"
android:text="Time"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_toRightOf="#id/description"
android:textSize="25dip">
</TextView>
</LinearLayout>
Obviously these aren't the actual column names but I changed them for privacy purposes. This layout is used by a ListView which changes the text of each view to be whatever value its presented. The name and description fields should line up since they're both given 50% of the remaining screen but when the name is longer the description is shifted right. Why?

For the weight to be considered, the layout dimension needs to be 0 (zero)
<TextView android:id="#+id/name"
android:text="Name"
android:layout_height="fill_parent"
android:layout_width="0dip"
android:layout_weight="1"
android:textSize="25dip">
</TextView>
I also recommend making your weight add up to either 1 (and use fractions) or 100.
So instead of 1 you would use either 50 or .5 for each view. The LinearLayout code will work properly with any weight sum, but it gets difficult if you want to modify your view later with additional sections.
Also, if you are not using relative layout, get rid of the toRightOf attributes. Less is more.

Try to use android:layout_width="fill_parent" instead of "wrap_content" in all children of LinearLayout. Or better yet, make such a structure in your xml:
<RelativeLayout>
<ImageView /> # status, fixed width, alignParentLeft="true"
<TextView /> # time, fixed width, alignParentRight="true"
<LinearLayout> # layout_width="fill_parent", toLeftOf="time" toRightOf="status"
<TextView /> # name, use layout_weight="1"
<TextView /> # description, use layout_weight="1"
</LinearLayout>
</RelativeLayout>
This should do what you want. Using LinearLayout instead of RelativeLayout might work too, but you have to experiment a bit (I believe using nested Layout, as in my example, will do the work).