Android - Aligning button to editview slightly off - java

I am wanting a button to be aligned to the the bottom and right of a EditText box.
My code is below:
<RelativeLayout
android:id="#+id/global_only_available_home_delivery_postcode_check_layout"
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_marginTop="5dp"
android:layout_gravity="right"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/global_only_available_home_delivery_postcode_check_text_phone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="#string/delivery_edit_hint"
android:layout_marginLeft="#dimen/pdp_status_delivery_margin_5"
android:layout_marginTop="#dimen/pdp_status_delivery_margin_10"
android:textSize="14sp"
android:inputType="text" />
<Button
android:id="#+id/fragment_pdp_deliverygo"
style="#style/alternatesmallbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="35dp"
android:minHeight="35dp"
android:layout_marginLeft="10dp"
android:text="#string/pdp_delivery_go"
android:layout_gravity="right"
android:layout_margin="5dp"
android:layout_toRightOf="#+id/global_only_available_home_delivery_postcode_check_text_phone"
android:layout_alignBottom="#+id/global_only_available_home_delivery_postcode_check_text_phone"
android:visibility="visible" />
</RelativeLayout>
and here is what I get button alignment
As you can see from the image, the button doesn't seem to be aligned to the bottom of the textview.
Can anyone help?

This is because you have android:layout_margin="5dp" for the button. This assigns a margin of 5dp to the bottom of the button and it appears as if it is not aligned to the bottom. You should remove it and assign margins individually to other sides if you want eg:
android:layout_marginRight="5dp"
android:layout_marginTop="5dp" // etc (optional)

Try this..
Use android:layout_alignParentRight="true" and android:layout_centerVertical="true"
<Button
android:id="#+id/fragment_pdp_deliverygo"
style="#style/alternatesmallbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="35dp"
android:minHeight="35dp"
android:layout_marginLeft="10dp"
android:text="#string/pdp_delivery_go"
android:layout_gravity="right"
android:layout_margin="5dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/global_only_available_home_delivery_postcode_check_text_phone"
android:layout_alignBottom="#+id/global_only_available_home_delivery_postcode_check_text_phone"
android:visibility="visible" />

Try using layout_below instead of layout_alignBottom

Related

How to make value to be fixed and highlight in center while scrolling

I have a requirement to create UI like below
You can see here the number is the highlighted part and it is in center always.
And we scroll it from left to right or vice versa.
I want to achieve this So, I wrote some code like below. But I don't have any Idea on how to add scroll effect to it and bring highlighted text to center
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
app:layout_constraintBottom_toTopOf="#+id/idCameraControlBottom"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<TextView
android:id="#+id/idZoom1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="50dp"
android:text="."
android:textAlignment="textEnd"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:id="#+id/idZoom2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="50dp"
android:background="#drawable/circle_shade"
android:gravity="center"
android:text="1X"
android:textSize="16sp" />
<TextView
android:id="#+id/idZoom3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="."
android:textAlignment="viewStart"
android:textSize="20sp"
android:textStyle="bold" />
</LinearLayout>
Any Idea/Help is greatly appreciated.
You can create it like so:
<RelativeLayout
android:layout_centerInParent="true"
android:layout_width="100dp"
android:layout_height="wrap_content">
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"/>
</LinearLayout>
</HorizontalScrollView>
<TextView
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#000"
android:textColor="#fff"
android:text="1"/>
</RelativeLayout>
Change it as you see fit, basically, the relative layout parent holds within the horizonal scrollable scrollview, within it you have your needed-to-be-scrolled views. After if you define your number view, being inside a relative layout it will simply be ordered above it. You can then center it to appear above your scrollable scrollView.
Do note the following 2 this:
The scroll will only be performed if the user touched the scrollable view. As in, if the user tries to swipe from pressing on the number it self, it will not scroll.
The content behind the number will be hidden behind it, it won't "skip" from 1 side to the other so you can have "invisible" content that way.

Listview Item layout pushes the linearlayout off the screen

I am new to android and am trying to create a list view row item as follows:
On the far left of the listview item I need two stacked text views
In the center of the listview item I need an additional two stacked text view
On the far right I need a checkbox
I want to make the width of the center textviews a constant size, irrespective to the length of text.
Every time I adjust the middle linear layout, it pushes the checkbox off the screen unless I manually give it a width (which will not work for multiple screen sizes). Can someone please help?
I've tried using weights and all but I can't figure it out.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:gravity="left"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/starttime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_marginTop="5dp"
android:padding="2dp"
android:singleLine="true"
android:text="10:35am"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#929692"
android:textSize="12sp" />
<TextView
android:id="#+id/endtime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:singleLine="true"
android:text="11:55am"
android:textColor="#929692"
android:textSize="12sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/middle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_toRightOf="#id/left"
android:orientation="vertical">
<TextView
android:id="#+id/sessionname"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp"
android:ellipsize="end"
android:padding="2dp"
android:singleLine="true"
android:text="ok this is where my text goes it is very long
and it will push stuff off"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#000000"
android:textSize="14sp" />
<TextView
android:id="#+id/location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:ellipsize="end"
android:singleLine="true"
android:text="#android:string/ok"
android:textColor="#929692" />
</LinearLayout>
<LinearLayout
android:id="#+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_toRightOf="#id/middle"
android:orientation="vertical">
<CheckBox
android:id="#+id/list_checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:checked="false" />
</LinearLayout>
</RelativeLayout>
Used constraintlayout and it worked!

Fit TextView under ImageView

I have 2 rows of "buttons" which are composed of a vertical LinearLayout of an ImageView and a TextView. The problem I'm having right now is trying to set the ImageView aspect ratio without hardcoding its dimensions.
I have already tried playing with the layout weights but it still forces the TextView to be partially cut off.
The xml structure I have is 2 horizontal LinearLayouts and each button is described above.
I've included a picture of my problem. You can see the first button is forcing the TextView out of the bounds. The rest of the buttons you see are hardcoded dimensions, but I don't want to do that because smaller screen sizes won't work.
Here is my layout for one button:
<LinearLayout
android:gravity="center_horizontal"
android:layout_weight="1"
android:padding="5dp"
android:orientation="vertical"
android:layout_width="0dip"
android:layout_height="match_parent">
<ImageView
android:id="#+id/setting_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:background="#null"
android:clickable="true"
android:onClick="openSettings"
android:src="#drawable/menu" />
<TextView
android:id="#+id/setting_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Settings"
android:textAlignment="center"
android:textColor="#android:color/white"
android:autoSizeTextType="uniform" />
</LinearLayout>
Try using images with lower dimensions.
Try using a RelativeLayout and setting the TextView as anchor for the image:
<RelativeLayout
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1"
android:padding="5dp">
<TextView
android:id="#+id/setting_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:text="Settings"
android:textAlignment="center"
android:textColor="#android:color/white"
android:autoSizeTextType="uniform" />
<ImageView
android:id="#+id/setting_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_above="#id/setting_text"
android:scaleType="centerInside"
android:adjustViewBounds="true"
android:background="#null"
android:clickable="true"
android:onClick="openSettings"
android:src="#drawable/menu" />
</RelativeLayout>

Aligning two TextViews in Android

I have two TextViews aligned in the "row", using the following layout:
<RelativeLayout
android:id="#+id/wrapper"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp">
<TextView
android:id="#+id/big_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:textSize="21sp"/>
<TextView
android:id="#+id/small_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14sp"
android:layout_alignParentRight="true"/>
</RelativeLayout>
But, what happens is that since the left one is larger than the right one, the result looks like this (picture is just for illustration):
Instead, this is what I'm looking for:
Tried adding gravity="bottom" to the small TextView but it didn't work.
Also tried to wrap the small TextView in another layout, set it's layout height to match_parent (so it would take the height of the big TextView) and then set the small TextView gravity to bottom, but it also didn't work.
Edit:
plot twist: how to align it to the CENTER of the big TextView?
Add this line to your smaller textview
android:layout_alignBaseline="#+id/big_text"
or
android:layout_alignBottom="#+id/big_text"
like this:
<RelativeLayout
android:id="#+id/wrapper"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp">
<TextView
android:id="#+id/big_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:textSize="21sp"/>
<TextView
android:id="#+id/small_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14sp"
android:layout_alignBaseline="#+id/big_text"
android:layout_alignParentRight="true"/>
</RelativeLayout>
Try it in the second textview
<TextView
android:id="#+id/small_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/big_text"
android:layout_alignTop="#+id/big_text"
android:gravity="bottom"
android:textSize="14sp"
android:layout_alignParentRight="true"/>
Try this
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="40sp"
android:text="BIG"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="small"
android:textSize="15sp"/>
</LinearLayout>

Scrolling single line, long text, in TextView

Please have a look at the following simple code.
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="John Jonathan Samuwell Abbruzzi"
android:singleLine="true"
android:scrollHorizontally="true"
android:textSize="50sp" />
The text in TextView is larger than the width of the screen and should be in single line. I added android:scrollHorizontally="true", so the user can scroll it to see the rest of the text. But, it is not happening. What have I done wrong?
Put your textview inside the HorizontalScrollView its working i am tested..
<HorizontalScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="John Jonathan Samuwell Abbruzzi"
android:singleLine="true"
android:scrollHorizontally="true"
android:textSize="50sp" />
</HorizontalScrollView>
You need to use HorizontalScrollView with single line. If you want horizontal scrollbar for multiple views then you can create layout in HorizontalScrollView and scroll complete. HorizontalScrollView can only hold one direct child.
<HorizontalScrollView
android:id="#+id/horizontalScrollView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="40dp" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="91dp"
android:singleLine="true"
android:text="my view" />
</HorizontalScrollView>

Categories