My question is about building my own ImageButton.
I want to have all of things that have ImageButton, but i want to add some TextField on it.
So i want to create component which have:
Square size
Image on top with: 100% width, 80% height
TextField on bottom: 100% width, 20% height
All square "tile" must be clickable and working as normaly button
Something like this:
How to do that?
It will be very very nice when You can provide some code for this, but in minimum option I will be very grateful for some "todo list" in point what should i do step by step.
you can use the following layout: for 80% and 20% height use android:layout_weight attribute
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/layout_id"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".80"
android:src="#mipmap/ic_launcher"
android:text="left" />
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".20"
android:gravity="center"
android:text="Sample Text" />
</LinearLayout>
Basically we are making a relative layout (parent) which will be our 'image button'. Xml code is below, for Java you just need to implement the setonclicklistener on this id.
<RelativeLayout
android:layout_width="wrap_content"
android:id="#+id/imageButton"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/page_image"
android:layout_marginRight="6dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="#drawable/no_photo" />
<TextView
android:id="#+id/page_name"
android:layout_alignTop="#id/page_image"
android:layout_toRightOf="#id/page_image"
android:layout_below="#id/page_image
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
Related
I'm trying to place two TextViews side by side such that both are always on the screen.
They should always stay next to each other, touching borders. But the text keeps changing dynamically, so even if the text in the first TV becomes too long, it should not push the second TV off the screen.
Here's the basic layout:
<?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="wrap_content"
android:layout_margin="10dp"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#color/colorAccent"
android:padding="10dp"
android:text="Aa" />
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#color/colorPrimary"
android:padding="10dp"
android:text="Bb" />
</LinearLayout>
This is what it looks like:
However, if the text becomes long, the second TextView gets pushed off the screen.
I even tried the same thing using RelativeLayout.
<?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="10dp">
<TextView
android:id="#+id/a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:padding="10dp"
android:text="Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/a"
android:background="#color/colorPrimary"
android:padding="10dp"
android:text="Bb" />
</RelativeLayout>
Still the same problem, the second TextView just won't stay on the screen. I want the first textView to get ellipsized, or convert into two lines without pushing the second TextView off the screen. But I also don't want the second TextView to be stuck to the right of the screen (this can be done by giving the first TextView a weight of 1)
PS: For me, the background of the Views is immaterial, so even if I can manage this by latching the view onto the right side of the screen, it's perfectly fine.
For this, I've tried using weights on both views in LinearLayout, and layout_alignParentRight in RelativeLayout - but without any success.
Edit:
If i use weights on both layouts - this is what it looks like:
<?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="wrap_content"
android:layout_margin="10dp"
android:orientation="horizontal">
<TextView
android:id="#+id/a"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:padding="10dp"
android:layout_weight="1"
android:text="Aaa" />
<TextView
android:id="#+id/b"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#color/colorPrimary"
android:padding="10dp"
android:text="Bbfbd" />
</LinearLayout>
This is fine if the text is long, but with short text, it defeats the purpose.
With long text it works perfectly.
Solution:
The only solution I could figure out was to define the maxWidth property for the first TextView. This property is defined in dimens.xml, with a different value for different screen sizes.
main.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="wrap_content"
android:orientation="horizontal"
android:padding="10dp">
<TextView
android:id="#+id/a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:ellipsize="end"
android:maxLines="1"
android:maxWidth="#dimen/max_text_view_width"
android:padding="10dp"
android:text="Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />
<TextView
android:id="#+id/b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:padding="10dp"
android:maxLines="1"
android:text="Bbbbbbb" />
</LinearLayout>
dimens.xml
<resources>
<dimen name="max_text_view_width">300dp</dimen>
</resources>
The Output for this looks like this:
TextView has a property of maxWidth . you can set that
programmatically
Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int width = size.x; //width of the screen
int height = size.y; // height of the screen
textView1.setMaxWidth(width/2);
textView2.setMaxWidth(width/2); //disable this if you want to have the rest of the screen by second textView
Now, textView will initially have the minimum size and will grow to
the maximum of the half size of the screen. You can customize this
with condition to fullfill your needs.
If it is ok for the textviews to be static you can leave them in LinearLayout and assign weight=1 to each of them. That way they are always going to stay the same.
For a much better and flexible solution use Google's flexbox layout. It is an awesome library where you can do all kinds of stuff.
Enter the below code and the problem will be solved:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:weightSum="2"
android:orientation="horizontal"
android:layout_margin="10dp">
<TextView
android:id="#+id/a"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:padding="10dp"
android:scrollbars="vertical"
android:maxLines="2000"
android:text="Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/a"
android:background="#color/colorPrimary"
android:padding="10dp"
android:scrollbars="vertical"
android:layout_alignParentRight="true"
android:text="Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />
</LinearLayout>
This will definately works :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:orientation="horizontal">
<TextView
android:layout_weight="1"
android:id="#+id/a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:padding="10dp"
android:text="Asssda" />
<TextView
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/a"
android:background="#color/colorPrimary"
android:padding="10dp"
android:text="Bxdadsdc" />
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_margin="10dp">
<TextView
android:id="#+id/a"
android:layout_width="0dp"
android:layout_weight=".5"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:padding="10dp"
android:text="wqkdnoqwndowqndowqowndowqndodnwqodnqow" />
<TextView
android:layout_width="0dp"
android:layout_weight=".5"
android:layout_height="match_parent"
android:background="#color/colorPrimary"
android:padding="10dp"
android:text="Aaaaaaaaainqwdiwdiwdniwqndiwqiwndiwqndiwqdniqwnnwiqdwoqndqowqndolnqwdlnaa\nkpaaaa" />
</LinearLayout>
Its not exaclty the solution but you should use this approach of using weights in linear layouts.
What could work is setting the maxWidth for the first View. You could set the maxWidth using xml resources for multiple screen sizes.
android:maxWidth="#dimen/max_width"
Then you could set max_width in dimens.xml
Giving each view an equal weight would make them occupy half the screen. That is not what you're looking for, I guess.
I think the best option here is to programmatically calculate the screen width of the device and set the max width of the first textView as a percentage of the screen width.
What finally worked for me was to set the maxWidth for the first View.
I set the maxWidth in the dimens xml and overridded the value for multiple screen sizes. It was difficult testing it out on multiple screens, but that's what finally worked for me.
android:maxWidth="#dimen/max_width"
I am trying to design a layout ( basically a splash screen ) which shows the App logo in almost middle of the screen and the company tagline under the logo on the start of the App. While working in Android Studio the design of layout looks like this. I positioned it 200dp downwards from the top.
As you can see, logo is right in the middle of the screen.
But when i run the app on my emulator the screen appears like this.The logo is not at the exact position where i wanted it.
I want my logo at the same relative position, no matter how big the screen size is.
Assume if logo is positioned at 200dp at 1000dp long screen. i want it at 400dp position on a 2000dp screen size.
Simulator : 5.0.0 API-21 768 X 1280
What are the possible solutions ??
Following image contains both outputs.
Follow this Link for the image
Here is the XML code :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f84343"
android:weightSum="1">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/AppIcon"
android:src="#drawable/unnamed"
android:layout_marginTop="200dp"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/simpler_better_faster"
android:id="#+id/textView"
android:layout_gravity="center_horizontal"
android:layout_below="#+id/AppIcon"
android:layout_centerInParent="true"
android:layout_marginTop="50dp"
android:textColor="#ffffff"
android:textSize="20dp" />
</RelativeLayout>
You don't need to use a <RelativeLayout> to achieve that. Below is the code using a <LinearLayout>. The key here is android:gravity="center" in the <LinearLayout> element:
<?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="#f84343"
android:orientation="vertical"
android:gravity="center">
<ImageView
android:id="#+id/AppIcon"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/unnamed"/>
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="#string/simpler_better_faster"
android:textColor="#ffffff"
android:textSize="20dp"/>
</LinearLayout>
[EDIT]
OP - But if i go on using more widgets to the screen i might need to
position them relative to each other. how to overcome that with
Relative layout
Well, technically you can still add more widgets in their required order. But, if you really want to use a <RelativeLayout>, you can use something like:
<?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="match_parent"
android:background="#f84343"
android:gravity="center_vertical">
<ImageView
android:id="#+id/AppIcon"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:src="#drawable/unnamed"/>
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_below="#id/AppIcon"
android:text="#string/simpler_better_faster"
android:textColor="#ffffff"
android:layout_centerHorizontal="true"
android:textSize="20dp"/>
</RelativeLayout>
It looks like you've mixed up some RelativeLayout/LinearLayout attributes.
If you want to use RelativeLayout remove and modify some attributes.
Something like this instead
<?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="match_parent"
android:background="#f84343">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/AppIcon"
android:src="#drawable/unnamed"
android:layout_centerInParent="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/simpler_better_faster"
android:layout_below="#id/AppIcon"
android:id="#+id/textView"
android:layout_marginTop="50dp"
android:textColor="#ffffff"
android:textSize="20dp" />
</RelativeLayout>
Simplify it all down into a TextView if you ask me
<?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="match_parent"
android:background="#f84343" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="#string/simpler_better_faster"
android:drawableTop="#drawable/arrow_right_fill_dark" />
</RelativeLayout>
This gets rid of the ImageView all together, the change being the drawableTop attribute that provides a drawable, centered above the text.
If I want to have a Picture in the Center of my layout, I easily use: "Center Vertically" and "Center Horizontally". But now I want a picture to have it in the Center of the left side. But I don't want to use marginLeft=..dp. I want to work without dp. Is there a possibility like "Center Vertically" etc? Here is the code with dp-values. What can I use instead of MarginLeft"38dp"?
<?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="match_parent" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_centerInParent="true"
android:layout_marginLeft="41dp"
android:src="#drawable/rosezwei" />
</RelativeLayout>
If I understood correctly you want the image center at 25% of your screen width...
Alas Android has no percentage in XML, to do that you must use a LinearLayout to split your screen
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:layout_gravity="center"
android:src="#drawable/rosezwei" />
<Space
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".5"/>
</LinearLayout>
use
android:layout_gravity="left|center_vertical"
Will work inside a LinearLayout view.
<?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" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_gravity="left|center_vertical"
android:src="#drawable/rosezwei" />
</LinearLayout >
Note that the LinearLayout is horizontal, so views can choose its VERTICAL position.
I don't know how to align 3 elements side by side. I would like to have :
One view with a thin width on the left
One linearLayout with text content on the middle
One imageView always on the right
Like this :
And today, i got this :
Here is my code :
<?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/gris_clair"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#color/blanc" >
<View
android:id="#+id/view1"
android:layout_width="7dp"
android:layout_height="90dp"
android:background="#color/green_normal" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
<ImageView
android:id="#+id/imageView1"
android:layout_width="80dp"
android:layout_height="90dp"
android:layout_gravity="right"
android:scaleType="centerCrop"
android:src="#drawable/test2" />
</LinearLayout>
</LinearLayout>
You can simplify your layout by setting the root LinearLayout to a horizontal orientation:
<?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="wrap_content"
android:background="#color/gris_clair"
android:layout_margin="5dp"
android:orientation="horizontal" >
<View
android:id="#+id/view1"
android:layout_width="7dp"
android:layout_height="match_parent"
android:background="#color/green_normal" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="TextView" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="80dp"
android:layout_height="90dp"
android:layout_gravity="right"
android:scaleType="centerCrop"
android:src="#drawable/test2" />
</LinearLayout>
You may want to tweak the colors or sizes to fit your desired end result.
I set the parent View's height to wrap the content, first two Views to match the parent view's height and the image to your size. This means that your image will decide the parent View's height.
If you want to evenly space/scale the views horizontally on your screen and use up all the space they have available you should look at the android:layout_weight attribute. You would set android:layout_width="0dp" for each View you want to scale with screen size and add android:layout_weight="x" where x is a number.
The number you choose will depend on how you want to divide up the available space each View will use. As an example if you wanted one View to use 1/3rd of the available space with a second using 2/3rds then set the first to 1 and the second to 2. 1+2=3 so 1 of a total 3 units and 2 of a total 3 units.
For your textview use weight to fill up space:
<TextView
android:id="#+id/textView1"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView" />
You can use relative layout for that. and for the image view add alignparentright rule.
<RelativeLayout >
<View />
<LinearLayout/>
</LinearLayout>
<ImageView
android:alignParentRight="true" />
</RelativeLayout>
or use the weight for linearlayout, put 1 for textview and rest 0.
You can easy solve this problem using weight in LinearLayout, or make your parent RelativeLayout and place middle layout toLeftOf your left view and toRightOf your right view.
You can use relative Layout instead of linear layout to design custom design of your page.
It might help you.
<?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/gris_clair"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#color/blanc" >
<View
android:id="#+id/view1"
android:layout_width="7dp"
android:layout_height="90dp"
android:background="#color/green_normal" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView1"
android:layout_width="80dp"
android:layout_height="90dp"
android:scaleType="centerCrop"
android:src="#drawable/test2"
android:layout_alignParentRight="true"
/>
</RelativeLayout>
</LinearLayout>
check this it might help you
I've used a relative layout and I want to set the button at bottom of the screen, However this puts it all the down to the bottom and I would like to have some margin so it there's some space between the end of the screen/view and the button. However whatever I do the button margin just doesn't do anything on 2.1+ for some reason. The relative layout contains a background so I cant but the margin on that.
Anyone know a fix for this?
<?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="match_parent"
android:layout_marginBottom="0dp"
android:background="#drawable/background" >
<Button
android:id="#+id/confirm_mobile_button_next"
android:layout_width="fill_parent"
android:layout_height="40dip"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="false"
android:layout_centerHorizontal="false"
android:layout_centerInParent="false"
android:layout_margin="15dp"
android:background="#drawable/button_shape_selector"
android:paddingLeft="10dip"
android:paddingRight="10dip"
android:text="#string/confirm_mobile_no_continue"
android:textColor="#color/white"
android:textStyle="bold" />
</RelativeLayout>
You can simply add a padding to the RelativeLayout instead of a margin to the Button, e.g. android:paddingBottom="15dp".
In general I'm always testing my layout in the Exclipse preview using API Level 8 setting. This gives quite accurate results for most devices, including ICS and JB.
The other thing you can do is put a View that's aligned to the bottom of the RelativeLayout, and set its height to the bottom margin you would want to use (or simply specify a value for layout_marginBottom) like so:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/some_image"
android:adjustViewBounds="true"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Some Overlay"
android:padding="3dip"
android:gravity="center_vertical|center_horizontal"
android:layout_above="#+id/empty_view"
android:layout_marginBottom="35dip"
/>
<View
android:id = "#+id/empty_view"
android:layout_height = "30dip"
android:layout_width = "match_parent"
android:visibility="invisible"
android:layout_alignParentBottom="true"
/>
</RelativeLayout>
This example fills the RelativeLayout with the ImageView, and positions a TextView over the ImageView.
Yu can use translateY attribute
translateY="-16dp"
Final code
<?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="match_parent"
android:layout_marginBottom="0dp"
android:background="#drawable/background">
<Button
android:id="#+id/confirm_mobile_button_next"
android:layout_width="fill_parent"
android:layout_height="40dip"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="false"
android:layout_centerHorizontal="false"
android:layout_centerInParent="false"
android:layout_margin="15dp"
android:background="#drawable/button_shape_selector"
android:paddingLeft="10dip"
android:paddingRight="10dip"
android:text="#string/confirm_mobile_no_continue"
android:textColor="#color/white"
android:textStyle="bold"
android:translateY="-16dp" />
</RelativeLayout>
only working solution suggested by #franny zhao is below.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<FrameLayout
android:id="#+id/fl_layout"
android:layout_alignParentBottom="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tv_layout"
android:text="hello world"
android:layout_marginBottom="50dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</FrameLayout>
</RelativeLayout>
If you add padding to the bottom aligned view as suggested by others, the view background will also extend. If you have colored background then the view will look like it is glued to the bottom. Padding and margin are entirely different, padding is part of view, but margin leaves space between views.
I think the best way is to set android:layout_alignParentBottom in XML
then in java code behind:
Button confirm_mobile_button_next = (Button)findViewById(R.id.confirm_mobile_button_next)
and
confirm_mobile_button_next.setTransitionY(-THE_VALUE) or setTransitionX(-THE_VALUE)
I think the best way is to set:
<...
android:layout_alignParentBottom="true" />
then in java code behind:
Button confirm_mobile_button_next = (Button)findViewById(R.id.confirm_mobile_button_next)
confirm_mobile_button_next.setTransitionY(-THE_VALUE) or setTransitionX(-THE_VALUE)
You can use a ViewGroup(for example, FrameLayout or LinearLayout) to wrap the view. Set alignParentBottom in the outside ViewGroup, then marginBottom can work in the inside View.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<FrameLayout
android:id="#+id/fl_layout"
android:layout_alignParentBottom="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tv_layout"
android:text="hello world"
android:layout_marginBottom="50dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</FrameLayout>
</RelativeLayout>
Since I stumbled upon this issue, and saw no answers fit to my situation I started thinking for half a second and resolved it by setting a negative margin on the view inside the RelativeLayout sample:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginTop="-8dp"
android:layout_marginStart="-8dp">
</RelativeLayout>
This should prove useful to some people.
Well this is 2022, but if you still are not using ConstraintLayout for some reason, like the one legacy project code I am fixing, use this property for a Bottom margin type visual.
android:translationY="-8dp"
and your code should look like this (in my case this a FAB in Relative Layout)
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:id="#+id/cart_check_out_btn"
style="#style/FABThemeDark"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginHorizontal="16dp"
android:layout_marginVertical="16dp"
android:text="#string/cart_check_out_btn"
android:textAllCaps="false"
android:translationY="-8dp" />
And it will work like this
Try in this way :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="17dp"
android:text="Button" />
Here is another alternative. If you want to set the child's margin instead of parent's padding, you should set the value of android:layout_marginTop to double of the desired margin and then set the android:layout_centerVertical to true. Top margin is given double the desired value to compensate the bottom margin. That way you will have an equal top and bottom margin around the child view.
<Button
android:id="#+id/confirm_mobile_button_next"
android:layout_width="fill_parent"
android:layout_height="40dip"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="false"
android:layout_centerVertical="true"
android:layout_centerInParent="false"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="30dp"
android:background="#drawable/button_shape_selector"
android:paddingLeft="10dip"
android:paddingRight="10dip"
android:text="#string/confirm_mobile_no_continue"
android:textColor="#color/white"
android:textStyle="bold" />
It will give you the same result.