i have some imagebuttons and each one has a corresponding textview, i'd like to align those textview's to the center of their corresponding imageview, i mean, like is seen on the app drawer...
!-----!
!icon !
!_____!
app name
this is my code, i'm using a RelativeLayout
<ImageButton
android:id="#+id/blog_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/logo_img"
android:layout_marginLeft="50dp"
android:layout_marginTop="51dp"
android:background="#null"
android:contentDescription="#string/blog_desc"
android:src="#drawable/blog" />
<TextView
android:id="#+id/blog_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/blog_button"
android:layout_below="#+id/blog_button"
android:layout_marginTop="8dp"
android:text="#string/blog_desc" />
Wrap that in a LinearLayout and center the children, like so:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/logo_img"
android:gravity="center_horizontal"
android:orientation="vertical">
<ImageButton
android:id="#+id/blog_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#null"
android:contentDescription="#string/blog_desc"
android:src="#drawable/blog" />
<TextView
android:id="#+id/blog_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="#string/blog_desc" />
</LinearLayout>
Old post but if this can help I think it's not necessary to add an additional container.
<ImageButton
android:id="#+id/blog_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/logo_img"
android:layout_marginLeft="50dp"
android:layout_marginTop="51dp"
android:background="#null"
android:contentDescription="#string/blog_desc"
android:src="#drawable/blog" />
<TextView
android:id="#+id/blog_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/blog_button"
android:layout_alignRight="#+id/blog_button"
android:layout_below="#+id/blog_button"
android:gravity="center_horizontal"
android:layout_marginTop="8dp"
android:layout_marginLeft="-20dp"
android:layout_marginRight="-20dp"
android:text="#string/blog_desc" />
It's work for me.
If a the TextView can be transparent then this can be achieved with a single View
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Test string"
android:drawableTop="#android:drawable/btn_star"
android:background="#android:color/transparent"
android:textSize="10sp"
/>
If your views in RelativeLayout follow these steps:
1- wrap your view that wants to be aligned in the center of target view in Framelayout.
2- move all layout attributes to FrameLayout.
3- set layout_align_top and layout_align_bottom (or start and end if horizontal) to target view.
4- set layout_gravity to center_vertical (or horizontal) to child of Frame layout
Result:
<RelativeLayout
android:id="#+id/yourView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0">
<RatingBar
android:id="#+id/masseur_rating_bar"
android:layout_width="wrap_content"
android:layout_height="16dp"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:isIndicator="true"
android:progressDrawable="#drawable/ic_selector_rating_bar"
android:rating="#{masseurItem.rate}"
android:scaleX="0.8"
android:scaleY="0.8"
tools:rating="4.5" />
<TextView
android:id="#+id/rate_text_view"
style="#style/BodyTextViewStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="#id/masseur_rating_bar"
android:text="#{String.valueOf(masseurItem.rate)}"
android:textSize="12sp"
tools:text="4.5" />
</RelativeLayout>
Related
I have four TextView in LinearLayout with orientation="horizontal". Below in image, I want my fourth TextView to vertically center with respect to other views, In simple words, I want to move my fourth TextView a little bit up so it looks like in the center. I tried to add layout:gravity and margins but its not working.
Here is the code:
<LinearLayout
android:id="#+id/tv_amenities"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tv_main_feature_LL"
android:layout_marginStart="10dp"
android:layout_marginBottom="10dp"
android:orientation="horizontal"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/rating_background"
android:drawableTop="#drawable/ic_food_and_restaurant"
android:padding="3dp"
android:text="Resturant"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#android:color/white" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:background="#drawable/rating_background"
android:drawableTop="#drawable/ic_tv_black_24dp"
android:padding="3dp"
android:text="LCD Tv"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#android:color/white"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:background="#drawable/rating_background"
android:drawableTop="#drawable/ic_local_parking_black_24dp"
android:padding="3dp"
android:text="Parking"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#android:color/white"
/>
<TextView
android:id="#+id/tv_plus_amenities"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:layout_marginBottom="20dp"
android:background="#drawable/round_background"
android:text="+15"
android:textColor="#android:color/white" />
</LinearLayout>
You could easily do that by adding android:layout_gravity="center_vertical" and removing your margin bottom.
<TextView
android:id="#+id/tv_plus_amenities"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:layout_gravity="center_vertical"
android:background="#drawable/round_background"
android:text="+15"
android:textColor="#android:color/white" />
Add this prop to your #+id/tv_amenities LinearLayout
android:gravity="center_vertical"
Use android:layout_gravity="center_vertical" attribute in your TextView's
I checked your code inside a constraint layout and it's fine.
All I changed is in your last TextView:
android:layout_gravity="center"
Or
android:layout_gravity="center_vertical"
The layout_gravity=center looks the same as
layout_gravity=center_horizontal here because they are in a vertical
linear layout. You can't center vertically in this case, so
layout_gravity=center only centers horizontally.
This link can help you to fix your issue in LinearLayout or RelativeLayout.
You might find this link useful:What is the difference between gravity and layout_gravity in Android?
I am trying to create for Android a row layout I have in an iOS app, at least I need to make it very similar to the iOS layout.
Here you have the iOS screenshot and the Android layout scheme:
And this is the layout code I have so far:
<?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:orientation="vertical"
android:background="#5981b2">
<ImageView
android:id="#+id/imageLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="3dp"
android:layout_marginTop="3dp"
android:src="#drawable/facebook" />
<TextView
android:id="#+id/titleText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/imageLeft"
android:layout_toRightOf="#id/imageLeft"
android:layout_marginLeft="3dp"
android:text="Titulo"
android:textSize="22dp"/>
<TextView
android:id="#+id/subtitleText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/titleText"
android:layout_alignParentRight="true"
android:layout_marginRight="3dp"
android:text="Subtitle" />
<ImageView
android:id="#+id/icon1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/titleText"
android:layout_toRightOf="#+id/titleText"
android:src="#drawable/valoracion" />
<TextView
android:id="#+id/num"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/icon1"
android:layout_alignTop="#+id/icon1"
android:text="14"
android:textSize="12dp" />
<ImageView
android:id="#+id/icon2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/num"
android:layout_toRightOf="#+id/num"
android:src="#drawable/flecha" />
</RelativeLayout>
Of course, any help to make the layout similar to the iOS layout is welcome.
The other two answers explained pretty well what you were doing wrong. I created a VERY rough layout of how your view should look like just to give you an idea of all the parameters. This is in no way the best solution but it does replicate what you described in the picture. According to your requirements you can modify as needed. I have put in some comments that might be helpful.
<?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:orientation="vertical"
android:background="#5981b2">
<!--This will always be top left of parent-->
<ImageView
android:id="#+id/imageLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="3dp"
android:layout_marginTop="3dp"
android:src="#android:drawable/alert_light_frame" />
<!--The following two views should be wrapped in a linear a layout
if you always want them to take up same horizontal space
regardless of which one has more text-->
<!--This will always be above subtitle and right of
image left-->
<TextView
android:id="#+id/titleText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/imageLeft"
android:layout_toRightOf="#id/imageLeft"
android:layout_marginLeft="3dp"
android:text="titleText"
android:textSize="22dp"/>
<!--This will always be below title and right of
image Left, if you were to wrap this and above view
in a linear layout then you can just set that linear
layout to be right of right image-->
<TextView
android:id="#+id/tvSubtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/titleText"
android:layout_marginLeft="3dp"
android:textSize="22dp"
android:layout_toRightOf="#+id/imageLeft"
android:text="subtitleText"/>
<!--************************************-->
<!--Again you should wrap the following 2 views in
a linear layout if the icon and number always need
to take up same space-->
<!--As for now this image view will always
be to the right of subtitle-->
<ImageView
android:id="#+id/ivIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/tvSubtitle"
android:src="#android:drawable/ic_dialog_alert"/>
<!--This text view will always be to the left of
subtitle, wrapping the above view and this in a linear
layout will also allow you to center the num (text view)-->
<TextView
android:id="#+id/tvNum"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/ivIcon"
android:layout_marginLeft="3dp"
android:textSize="22dp"
android:layout_toRightOf="#+id/tvSubtitle"
android:text="num"/>
<!--************************************-->
<!--This final view can just be centered vertically
and as of now will always be to the right of Icon
but once you wrap the icon and num in a linear layout
then you can just align in to the right of that layout.-->
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#android:drawable/ic_dialog_dialer"
android:layout_marginTop="5dp"
android:layout_marginLeft="20dp"
android:layout_toRightOf="#id/ivIcon"/>
</RelativeLayout>
The two problems that I see are
<TextView
android:id="#+id/subtitleText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/titleText"
android:layout_alignParentRight="true"
android:layout_marginRight="3dp"
android:text="Subtitle" />
you have android:layout_alignParentRight="true" when I believe you want
android:layout_toRightOf="#id/imageLeft"
and
android:layout_below="#id/titleText"
Then for
<TextView
android:id="#+id/num"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/icon1"
android:layout_alignTop="#+id/icon1"
android:text="14"
android:textSize="12dp" />
you have
android:layout_alignLeft="#+id/icon1"
android:layout_alignTop="#+id/icon1"
I think you want
android:layout_toRightOf="#id/subtitleText"
and
android:layout_below="#id/icon1"
you also might want to use android:layout_centerInParent="vertical" for android:id="#+id/icon2" if you change the height of the parent RelativeLayout to wrap_content but I don't know if that is an option for you. If not then you may need to add some top padding to it.
This should get you as close as I can without a screenshot of how it currently looks. Try making those changes and see how it looks. You may have to adjust a few things still but try that.
<ImageView
android:id="#+id/imageLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="3dp"
android:layout_marginTop="3dp"
android:src="#drawable/facebook" />
<TextView
android:id="#+id/titleText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/imageLeft"
android:layout_toRightOf="#id/imageLeft"
android:layout_marginLeft="3dp"
android:text="Titulo"
android:textSize="22dp"/>
<TextView
android:id="#+id/subtitleText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/titleText"
android:layout_toRightOf="#id/imageLeft" <!-- add this -->
<!-- android:layout_alignParentRight="true" remove this -->
android:layout_marginRight="3dp"
android:text="Subtitle" />
<ImageView
android:id="#+id/icon1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/titleText"
android:layout_toRightOf="#id/titleText"
android:margin_top="10dp" <!-- add this, choose exact value -->
android:src="#drawable/valoracion" />
<TextView
android:id="#+id/num"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/icon1"
<!-- android:layout_alignTop="#+id/icon1" remove -->
android:layout_below="#id/icon1"
android:text="14"
android:textSize="12dp" />
<ImageView
android:id="#+id/icon2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/icon1" <!-- change to icon1 -->
android:layout_toRightOf="#id/icon1" <!-- also -->
android:src="#drawable/flecha" />
Somebody can please explain this?
Why the third TextView is weird?
The definitions for the 2 lines before are the same, and I haven't touched the style with java...
Edit: I've added the XML Layout file.
The XML:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rl"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="top" >
<TextView
android:id="#+id/quadEqu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="25dp"
android:text="#string/quadequ"
android:textSize="27sp" />
<Button
android:id="#+id/closeBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="30dp"
android:text="#string/close"
android:onClick="close" />
<TextView
android:id="#+id/stepOne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/quadEqu"
android:layout_centerHorizontal="true"
android:layout_marginTop="25dp"
android:text="#string/quadEquForm"
android:textSize="18sp" />
<TextView
android:id="#+id/stepTwo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/stepOne"
android:layout_below="#+id/stepOne"
android:text="#string/quadEquForm"
android:textSize="18sp" />
<TextView
android:id="#+id/stepThree"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/stepOne"
android:layout_below="#+id/stepTwo"
android:text="#string/quadEquForm"
android:textSize="18sp" />
</RelativeLayout>
It's a strange behaviour.
Try to set the content of the 'stepTwo' to the 'stepThree'.
If the same issue appeared, so the problem from the TextView.
You should check if you modify the padding of 'stepThree' textView programmatically.
In android Text View, when you try to render the subscript, the text gets clipped at the top and bottom. To avoid this, you can try to set the text from HTML.
Example.
stepThree.setText(Html.fromHtml("Some text<sup><small>1</small></sup>"));
stepThree.setText(Html.fromHtml(
"HCO<sub><small><small>3</small></small></sub>));
Refer this link for more details.
Android TextView's subscript being clipped off
Subscript and Superscript a String in Android
You need to change android:layout_height for the TextView (for all 3 is better).
<TextView
android:id="#+id/stepOne"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_below="#+id/quadEqu"
android:layout_centerHorizontal="true"
android:layout_marginTop="25dp"
android:text="#string/quadEquForm"
android:textSize="18sp" />
<TextView
android:id="#+id/stepTwo"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_alignLeft="#+id/stepOne"
android:layout_below="#+id/stepOne"
android:text="#string/quadEquForm"
android:textSize="18sp" />
<TextView
android:id="#+id/stepThree"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_alignLeft="#+id/stepOne"
android:layout_below="#+id/stepTwo"
android:text="#string/quadEquForm"
android:textSize="18sp" />
I'm trying to develop an android application, but I'm having some problems with the GUI design. The following part of screenshot is my problem (red and blue lines were generated by Android debug options).
This is the code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/caption"
android:layout_below="#+id/caption" >
<ImageButton
android:id="#+id/button_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:src="#drawable/content_edit"
style="?android:attr/borderlessButtonStyle" />
<TextView
android:id="#+id/myText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="#string/num_placeholder"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
As you can see, the TextView myText overlaps the ImageButton button_edit.
A simple solution would be to use a LinearLayout instead of a RelativeLayout. The problem is that:
I need the edit button on the right
I need the text to fill the rest of the layout (at the left of edit button obviously)
I also tried to set myText's layout_width to 'fill_parent', but it fill the entire rest of the screen at the left of the edit button.
The expected behavior would be myText to increase its height (becoming a two-lines TextView) instead of overlapping 'button_edit'
Can anyone help me? Thanks
use layout_toLeftOf in TextView layout
like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/caption"
android:layout_below="#+id/caption" >
<ImageButton
android:id="#+id/button_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:src="#drawable/content_edit"
style="?android:attr/borderlessButtonStyle" />
<TextView
android:id="#+id/myText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="#string/num_placeholder"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_toLeftOf="#+id/button_edit" />
Another way of doing is to use android:layout_toEndOf attribute
<ImageButton
android:id="#+id/button_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:src="#drawable/content_edit"
style="?android:attr/borderlessButtonStyle"
android:layout_toEndOf="#+id/myText" />
<TextView
android:id="#+id/myText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="#string/num_placeholder"
android:textAppearance="?android:attr/textAppearanceLarge" />
I have this layout inside of a RelativeLayout:
<LinearLayout
android:id="#+id/llWatchItemCommentButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/myMasterCat_Item"
style="#style/DropShadowEffect"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_weight="99"
android:shadowColor="#ffffff"
android:text="Item"
android:textColor="#515b61"
android:textSize="22sp" />
<ImageView
android:id="#+id/bFollowComment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/featured_button_selector"
android:padding="5dp"
android:src="#drawable/comment" />
</LinearLayout>
<TextView
android:id="#+id/myMastCat_Cat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/llWatchItemCommentButton"
android:layout_alignLeft="#+id/llWatchItemCommentButton"
android:layout_marginLeft="10dp"
android:text="MasterCat"
android:textColor="#666"
android:textSize="16sp" />
Essentially, if that TextView in the Layout becomes two lines, it will overlap with the TextView positioned below theLinearLayout`.
Is there an attribute perhaps that could correct this? As in, I want the bottom TextView to be below the entire LinearLayout at all times, even if it begins to grow. Right now, the position appears fixed.
Have you tried the following:
<TextView
android:id="#+id/myMastCat_Cat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/llWatchItemCommentButton" //add this line in
android:layout_alignBottom="#+id/llWatchItemCommentButton"
android:layout_alignLeft="#+id/llWatchItemCommentButton"
android:layout_marginLeft="10dp"
android:text="MasterCat"
android:textColor="#666"
android:textSize="16sp" />