How to let a TextView overlap over an ImageButton - android

I have a RelativeLayout and want to that my textfield will overlap over the given ImageButton. Currently the textfield is behind the imagebutton. I tried several options but did not find the correct one, any idea?
Thanks
<TextView
android:id="#+id/qrCode_hint"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/qrCode_hint"
android:textSize="20dp"
android:layout_alignBottom="#+id/btn_start_barcode"
android:layout_marginBottom="53dp"
/>
<ImageButton
android:id="#+id/btn_start_barcode"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/select_form"
android:layout_centerInParent="true"
android:layout_marginTop="10dp"
android:background="#ffffffff"
android:onClick="startBarcodeAction"
android:src="#drawable/barcode_bg" />

The RelativeLayout sets the Z-Index based on ordering of children.
So when you add a view below the others it will set Z-Index of that child higher than the last child.

Use a FrameLayout and put in the following order:
ImageButton
TextView
This will ensure that the TextView will be on top of the ImageButton.

Related

Change button alignment of buttonA when buttonB is GONE

I have placed two buttons prev and next in a RelativeLayout. When I reach the last page of my app, I am disabling the next button using :
next.setVisibility(View.GONE);
The alignment of prev button is disrupted. I want it to be aligned to the centre of the RelativeLayout, as if there was only one button.
Here is my code :
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_below="#+id/radgroup"
>
<Button
android:layout_marginTop="14dp"
android:layout_marginLeft="20dp"
android:text="#string/previous"
android:textAllCaps="false"
android:textSize="23dp"
android:layout_width="150dp"
android:layout_height="70dp"
android:id="#+id/prev"
android:onClick="viewPreviousQuestion"
/>
<Button
android:layout_marginTop="14dp"
android:layout_marginLeft="20dp"
android:text="#string/previous"
android:textAllCaps="false"
android:textSize="23dp"
android:layout_width="150dp"
android:layout_height="70dp"
android:layout_toRightOf="#+id/prev"
android:id="#+id/nxt"
android:onClick="viewNextQuestion"
/>
</RelativeLayout>
and the onClick event is
public void viewNextQuestion(View view) {
if(currqstn==lastqstn){
next.setVisibility(View.GONE);
}
}
Don't use a Relative Layout here,Use a Linear Layout Instead.
Since in a Relative layout Views are positioned with respect to one another, when you remove one view,it might disrupt other views that were positioned with respect to the deleted view.
EDIT
Use can use the following attributes for your views: weightSum, weight and padding.
Use Linear Layout to cover both the buttons Inside YOur main Relative Layout and and set
android:layout_weight="1"
android:layout_gravity="center_horizontal|center"
to your prev button.
When you using View.Gone its remove view place and other views are disturb
AND
when you using View.Invisible its always there just view is hidden and others views are not disturb.
use this...........
next.setVisibility(View.Invisible);
enjoy coding .....

Android: Properly horizontally centering two views for multiple screen sizes

I know this is a question that is asked quite a lot, but none of the answers that have been provided so far have helped me resolve my problem. It's best described with pictures. I unfortunately don't have enough reputation to embed them here, but here's an imgur with three screen sizes demonstrating my issue: http://imgur.com/a/D5uAu
I'm looking for a way to have the "Retrumpets" ImageButton and TextView properly centered for all screen sizes. Right now, they're currently centered using layout_centerHorizontal on the retrumpetTextView, with the retrumpetButton attached to the left of the TextView with layout_toLeftOf, like so:
<ImageButton
android:layout_width="35dp"
android:layout_height="30dp"
android:id="#+id/retrumpetButton"
android:src="#drawable/retrumpet"
android:scaleType="centerInside"
android:adjustViewBounds="true"
android:background="#00FFFFFF"
android:layout_above="#+id/detailedTrumpetSeparationLine"
android:layout_toLeftOf="#+id/retrumpetCountTextView"/>
<TextView
tools:text="30 Retrumpets"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:id="#+id/retrumpetCountTextView"
android:textColor="#FFFFFF"
android:paddingBottom="6dp"
android:paddingLeft="2dp"
android:textSize="14sp"
android:layout_centerHorizontal="true"
android:layout_below="#+id/trumpetTextView"/>
This would work perfectly, if not for the fact that what I truly want to center is a combination of BOTH of these views, so that one view or the other isn't too far to the left or right.
My question is: what is the best way to go about doing this? Can I somehow provide an adjustment value to shift both of these views a bit to the right? layout_marginStart and layout_marginLeft don't seem to work when a view is centered.
Thank you very much!
EDIT: Thanks very much all! Combining the two into a horizontally centered LinearLayout did the job perfectly.
You can use a LinearLayout to contain them.
<LinearLayout
android:layout_centerHorizontal="true"
android:layout_below="#+id/trumpetTextView"
android:orientation = "horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageButton
android:layout_width="35dp"
android:layout_height="30dp"
android:id="#+id/retrumpetButton"
android:src="#drawable/retrumpet"
android:scaleType="centerInside"
android:adjustViewBounds="true"
android:background="#00FFFFFF"
android:layout_above="#+id/detailedTrumpetSeparationLine"
android:layout_toLeftOf="#+id/retrumpetCountTextView"/>
<TextView
tools:text="30 Retrumpets"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:id="#+id/retrumpetCountTextView"
android:textColor="#FFFFFF"
android:paddingBottom="6dp"
android:paddingLeft="2dp"
android:textSize="14sp"
/>
</LinearLayout>
Or just use drawableLeft
<TextView
tools:text="30 Retrumpets"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:id="#+id/retrumpetCountTextView"
android:textColor="#FFFFFF"
android:paddingBottom="6dp"
android:paddingLeft="2dp"
android:textSize="14sp"
android:drawableLeft="#drawable/retrumpet"
android:layout_centerHorizontal="true"
android:layout_below="#+id/trumpetTextView"/>
You should put all those components i.e the "Retrumpets" ImageButton and TextView all in 1 Layout. LinearLayout. Then you can put layour gravity to this LinearLayout to be centered.
You might want to consider putting the ImageButton and TextViews in a horizontal linear layout and use the weights to adjust them correctly. Try setting the layout_weight of each ImageButton to 0 and the TextViews each to 1.

How to change a TextView width Dynamically

I have a TextView1, buttons1 and buttons2 Horizontally.
When Button2 click Button1 is invisible.
When Button1 is invisible, I need to increase the width of the textview to cover the space created when button1 is invisible and vice versa.
Can Please anybody help How can I change the Textview width dynamically.
NB: Textview tv.setWidth(pix) is not working. when I tried to find the value of tv.getWidth() gives always zero.
`
<TextView
android:layout_width="odp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/hello" />
<Button
android:id="#+id/btn1"
android:layout_width="odp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/hello"
android:visibility="visible" />
<Button
android:id="#+id/btn2"
android:layout_width="odp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/hello" />
</LinearLayout>`you can use weight for three element and button1.setVisibility(View.GONE)
Please try to use GONE instead of using INVISIBLE. When using INVISIBLE even though you can't see it, it still takes a space.
Wrap your widgets in a RelativeLayout and then check. You will be able to bring your textview on top of your button if it is invisble. You cant do this if you are using LinearLayout because it sets widgets horizontaly or verticaly and does not overlap.

Android ImageButton not aligned with EditText and Button

I currently have this in my layout.xml
<EditText android:id="#+id/body" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_weight="1"
android:hint="Type to compose" />
<ImageButton android:id="#+id/attach"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:src="#drawable/attach_photo" />
<Button android:id="#+id/send" android:text="#string/send"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
</LinearLayout>
Problem I'm facing is the top of the ImageButton is not aligned like the Button and EditText. The other 2 fill up the height nicely but the ImageButton seems to be sticking out upwards. Any ideas?
Try using a RelativeLayout. You can align views to the sides, top and bottom of the parent or any other view.
Using android:layout_alignParentTop="true" or similar.
There are loads of xml commands you can use in RelativeLayout.
You can also set the layout weight property on the children of your linear layout. You can set the weight of edittext, imagebutton and button which will align your components on screen.

Android: Align button to bottom-right of screen using FrameLayout?

I am trying to put the zoom controls of the map on the bottom right corner of screen. I could do it with RelativeLayout using both alignParentBottom="true" and alignParentRight="true", but with Framelayout I did not find any such attributes. How do I align it to the bottom-right of screen?
Actually it's possible, despite what's being said in other answers. If you have a FrameLayout, and want to position a child item to the bottom, you can use android:layout_gravity="bottom" and that is going to align that child to the bottom of the FrameLayout.
I know it works because I'm using it. I know is late, but it might come handy to others since this ranks in the top positions on google
I also ran into this situation and figured out how to do it using FrameLayout.
The following output is produced by the code given below.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/contactbook_icon"
android:layout_gravity="center" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="140"
android:textSize="12dp"
android:textColor="#FFFFFF"
android:layout_gravity="bottom|right"
android:layout_margin="15dp" />
</FrameLayout>
Change the margin value to adjust the text position over the image. Removing margin might make the text to go out of the view sometimes.
It can be achieved using RelativeLayout
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:src="#drawable/icon"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true" />
</RelativeLayout>
Setting android:layout_gravity="bottom|right" worked for me
Two ways to do this:
1) Using a Frame Layout
android:layout_gravity="bottom|right"
2) Using a Relative Layout
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
If you want to try with java code. Here you go -
final LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT);
yourView.setLayoutParams(params);
params.gravity = Gravity.BOTTOM; // set gravity
Use bottom|right as the layout_gravity value of the element which you wish to align in the bottom right position of the parent layout.
android:layout_gravity="bottom|right"
you can add an invisible TextView to the FrameLayout.
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:visibility="invisible"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal">
<Button
android:id="#+id/daily_delete_btn"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_weight="1"
android:text="DELETE"
android:layout_gravity="center"/>
<Button
android:id="#+id/daily_save_btn"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_weight="1"
android:text="SAVE"
android:layout_gravity="center"/>
</LinearLayout>
There are many methods to do this using constraint widget of the activity.xml page of android studio.
Two most common methods are:
Select your button view and adjust it's margins.
Go to "All attributes",then to "layout_constraints",then select
layout_constraintBottom_toBottomOf_parent
layout_constraintRight_toRightOf_parent
You can't do it with FrameLayout.
From spec:
http://developer.android.com/reference/android/widget/FrameLayout.html
"FrameLayout is designed to block out an area on the screen to display a single item. You can add multiple children to a FrameLayout, but all children are pegged to the top left of the screen."
Why not to use RelativeLayout?

Categories

Resources