I am trying to position my bookImageTo the left by 15dp but when I add paddings to it nothing happens it remains unchanged. My textviews are responsive to changes when paddings are added to it, but I am not sure why my image view is not. Some help would be greatly appreciated.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/colorPrimaryDark">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/colorPrimaryDark"
android:orientation="vertical">
<ImageView
android:id="#+id/bookImage"
android:layout_width="170dp"
android:paddingLeft="#dimen/album_title_padding(this is equal to 15dp)"
android:paddingTop="#dimen/album_title_padding"
android:paddingRight="#dimen/album_title_padding"
android:layout_height="170dp" />
<TextView
android:id="#+id/bookTitleTv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/bookImage"
android:paddingLeft="#dimen/album_title_padding"
android:paddingTop="#dimen/album_title_padding"
android:paddingRight="#dimen/album_title_padding"
android:textColor="#424242"
android:textSize="#dimen/album_title" />
<TextView
android:id="#+id/bookAuthorTv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/bookTitleTv"
android:paddingLeft="#dimen/album_title_padding"
android:paddingRight="#dimen/album_title_padding"
android:paddingBottom="#dimen/songs_count_padding_bottom"
android:textSize="#dimen/songs_count"
android:textStyle="italic" />
<TextView
android:id="#+id/overflow"
android:layout_width="#dimen/ic_album_overflow_width"
android:layout_height="#dimen/ic_album_overflow_height"
android:layout_below="#+id/bookAuthorTv"
android:layout_alignBottom="#+id/bookAuthorTv"
android:layout_alignParentEnd="true"
android:textSize="15sp"
android:layout_alignParentRight="true"
android:layout_marginTop="-29dp"
android:layout_marginEnd="1dp"
android:layout_marginRight="1dp"
android:layout_marginBottom="0dp"
android:text="#string/vertical_ellipsis"
android:textColor="#color/colorPrimary" />
</LinearLayout>
</LinearLayout>
Based on my understanding about your concern, you only want to put a space on the left specifically for the ImageView only inside the LinearLayout? I tried your code and this is the preview:
Use android:layout_marginLeft="15dp" instead of using paddingLeft. After applying this code, preview looks like this:
Try using
android:layout_marginLeft="#dimen/album_title_padding"
android:layout_marginTop="#dimen/album_title_padding"
android:layout_marginRight="#dimen/album_title_padding"
This is discussed here Padding in ImageView is not Working
Instead of wrap_content for both the linear layout. Do match_parent.
Related
I'm designing an app in Android Studio. In the preview it looks like I want but when building the application there is a LinearLayout that contains two TextViews that looks smaller and I do not understand why
This is the Recycler View Item:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/friend_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_picture"
android:layout_width="44dp"
android:layout_height="44dp"
android:src="#drawable/head" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="1dp"
android:gravity="left"
android:paddingLeft="2dp"
android:paddingRight="2dp"
android:textColor="#color/white"
android:textSize="16sp"
android:textStyle="bold"
tools:text="Guillermo Rodriguez" />
<TextView
android:id="#+id/friend_position"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left"
android:text="delantero"
android:textColor="#color/white"
android:textSize="13sp" />
</LinearLayout>
This is how it looks: https://photos.app.goo.gl/BgNQhgpNKbgEGCCR6 and I need to the text fill the entirety width
I expect to see both TextView until the end of the screen but they end before the middle. Any ideas?
If I understood your question correctly, you must want the two TextViews to fill the entirety of the height, is that it?
In that case, in both your TextViews, change your layout_height attribute to 0dp and add android:layout_weigth=0.5 to them. This will make them fill the entire height of your LinearLayout, whichever height that might be, and they will be dividing the space right in the middle.
I recommend you utilize LinearLayout's weight attribute. set your root LinearLayout's to match_parent. and your nested LinearLayout and both TextView's layout_height to 0dp and their weight to 1
here's the edited code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/friend_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_picture"
android:layout_width="44dp"
android:layout_height="44dp"
android:src="#drawable/head" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginStart="1dp"
android:gravity="left"
android:paddingLeft="2dp"
android:paddingRight="2dp"
android:textColor="#color/white"
android:textSize="16sp"
android:textStyle="bold"
tools:text="Guillermo Rodriguez" />
<TextView
android:id="#+id/friend_position"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left"
android:text="delantero"
android:textColor="#color/white"
android:textSize="13sp" />
</LinearLayout>
</LinearLayout>
Please check if your RecycleView has the proper width set (e.g. match_parent) and it can stretch to the whole width. Could you provide the xml code with the RecycleView?
i think you set the recyclerview to specific width. try to cahngethe width into match parent.
I recommend to user constraintlayout to avoid nested viewgroup. like this:
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/friend_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/profile_picture"
android:layout_width="44dp"
android:layout_height="44dp"
android:src="#drawable/patient"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
<TextView
android:id="#+id/name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="1dp"
android:gravity="left"
android:paddingLeft="2dp"
android:paddingRight="2dp"
android:textColor="#android:color/white"
android:textSize="16sp"
android:textStyle="bold"
tools:text="Guillermo Rodriguez"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/profile_picture"/>
<TextView
android:id="#+id/friend_position"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="left"
android:text="delantero"
android:textColor="#android:color/white"
android:textSize="13sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/profile_picture"
app:layout_constraintTop_toBottomOf="#+id/name"/>
I solved it! Someone configured it whit GridLayoutManager and it had to be with LinearLayoutManager.. I changed it and it was fixed
I am trying to set left and right padding of the text block using constraint layout guidelines. I want 11% padding with the following code on both sides. However, when I try to set the paddings it is not reflecting. When I only use either left or right then it is showing, but using both left and right guidelines on text view the padding is not reflecting.
Here is the code
<android.support.constraint.ConstraintLayout
android:id="#+id/contentLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/centredIconLayout"
android:layout_centerHorizontal="true"
android:orientation="vertical">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:fontFamily="#font/gothamggm_bold"
android:layout_height="wrap_content"
android:layout_marginBottom="25dp"
android:text="#string/title_long"
android:textSize="17sp"
android:lineSpacingExtra="9sp"
android:textColor="#android:color/black"
app:layout_constraintLeft_toLeftOf="#+id/left_guideline"
app:layout_constraintRight_toLeftOf="#+id/right_guideline"
/>
<TextView
android:id="#+id/body"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginTop="13dp"
android:fontFamily="#font/gothamssm_book"
android:lineSpacingExtra="9sp"
android:text="#string/content_large"
android:textColor="#color/body_grey"
android:textSize="12sp"
app:layout_constraintTop_toBottomOf="#+id/title"
app:layout_constraintLeft_toLeftOf="#+id/left_guideline"
app:layout_constraintRight_toLeftOf="#+id/right_guideline"
/>
<android.support.constraint.Guideline
android:id="#+id/left_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.11" />
<android.support.constraint.Guideline
android:id="#+id/right_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.89" />
</android.support.constraint.ConstraintLayout>
Here is the blue print where both text views (included in #+id/contentLayout) are below image view
The problem is in width of textview. You have set it to wrap_content. This is creating the problem. just change it to match_constraints in layout editor or set width to 0dp in xml code manually and all will work fine.
In my app I'm trying to adjust this layout so it's readable when the user scales the system wide font size in Android System settings -> Display -> Font size (or in accessibility settings on some devices). Doing some digging I found out this adjusts the device configuration font scale (getResources().getConfiguration.fontScale) from 1.0 to 1.15.
I'm getting some weird behavior in a LinearLayout where one of the TextViews width gets crushed, when it's set to wrap_content, and also doesn't reflect a set minWidth.
What it looks like normally
What it looks like when font is scaled
Here is the LinearLayout in question (comments added for context in screenshot)
<LinearLayout
android:id="#+id/sectionPaintStatus"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<!-- () 6 Paint Items -->
<LinearLayout
android:id="#+id/sectionPaintItemToggle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingBottom="5dp">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabExpandPaintItems"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:rotation="180"
android:src="#drawable/ic_collapse"
app:elevation="2dp"
app:fabSize="mini"/>
<TextView
android:id="#+id/tvPaintItemCount"
style="#style/Label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:text="0 Paint Items"
android:textSize="16sp"/>
<ImageView
android:id="#+id/imgPaintAreaWarning"
android:layout_width="20dp"
android:layout_height="match_parent"
android:layout_marginStart="10dp"
android:scaleType="centerInside"
android:src="#drawable/ic_edit_warning2"
android:visibility="invisible"/>
</LinearLayout>
<!-- Inner layout to consume middle width and right align the rest -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="end"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/layoutPaintItemCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="end"
android:orientation="vertical"
android:visibility="invisible">
<TextView
android:id="#+id/tvPaintItemCountStatus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2"
android:textSize="16sp"
android:textStyle="bold"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Paint Items"
android:textSize="16sp"/>
</LinearLayout>
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="30dp"
android:scaleType="centerInside"
android:src="#drawable/ic_time"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="end"
android:orientation="vertical">
<TextView
android:id="#+id/tvPaintTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2.5h"
android:textSize="16sp"
android:textStyle="bold"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Time"
android:textSize="16sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_marginEnd="30dp"
android:minWidth="70dp"
android:gravity="end"
android:orientation="vertical">
<TextView
android:id="#+id/tvPaintTotal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$123.22"
android:textSize="16sp"
android:textStyle="bold"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Total"
android:textSize="16sp"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Why is that last LinearLayout containing 2 TextViews not properly wrapping content? I tried removing the minWidth incase that was causing any issues and got the same result. I don't understand why all the other layouts wrap their content properly but the last one doesn't.
And is it possible to add a resource folder for scaled system wide font?
Edit It appears removing margins allow the TextView to wrap the proper width but obviously I need the margins.
Can anyone explain this strange behavior?
Edit Solved
It turns out I completely forgot about an invisible element in the layout between the "Paint Items" label and the time icon. It was causing me to run out of horizontal space.
You appear to have used layout_width="match_parent" and gravity="end" to align your elements.
I assume on small devices (or with large text) you'd like the "0 Paint Items" to ellipsize when not enough space, and have the 'Time' and 'Total' fields to show at full width.
To do this, we make the following changes:
First, make the sectionPaintItemToggle have 0dp width and layout_weight="1" - this tells Android "this should fill as much space is available".
<LinearLayout
android:id="#+id/sectionPaintItemToggle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
... >
I removed all the gravity="end" settings.
I changed the "inner layout" (as per the comment) to be have wrap_content width.
I deleted the entire layoutPaintItemCount layout - I feel like you were trying a different way to do the "N paint items" layout.
In the end, we have something like this (I swapped in an ImageView for the FAB and just used resources I already had - I think I changed some margins too):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="#+id/sectionPaintStatus"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:gravity="center_vertical"
>
<!-- () 6 Paint Items -->
<LinearLayout
android:id="#+id/sectionPaintItemToggle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:clipToPadding="false"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingBottom="5dp">
<ImageView
android:id="#+id/fabExpandPaintItems"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_margin="5dp"
android:rotation="180"
android:src="#drawable/ic_edit_black_24dp"/>
<TextView
android:id="#+id/tvPaintItemCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:text="0 Paint Items"
android:textSize="16sp"/>
<ImageView
android:id="#+id/imgPaintAreaWarning"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginStart="10dp"
android:scaleType="centerInside"
android:src="#drawable/ic_edit_black_24dp"
android:visibility="invisible"/>
</LinearLayout>
<!-- Inner layout to consume middle width and right align the rest -->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:scaleType="centerInside"
android:src="#drawable/ic_edit_black_24dp"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/tvPaintTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2.5h"
android:textSize="16sp"
android:textStyle="bold"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Time"
android:textSize="16sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="30dp"
android:layout_marginStart="30dp"
android:orientation="vertical">
<TextView
android:id="#+id/tvPaintTotal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$123.22"
android:textSize="16sp"
android:textStyle="bold"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Total"
android:textSize="16sp"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
The key part was to convince Android that the "N Paint Items" view was the one you wanted to shrink.
I made a custom row layout xml file for a ListView so I could design each row to look how I want, but I'm having trouble actually designing the UI in this xml file. I'm trying to make the the activity ultimately look like this:
As you can see there is a listView with rows, each consisting of a game with a textView as a title, two buttons, and an imageView as the background. I've been doing a lot of research through Google's UI documentation but I can't figure out how to get the elements to appear on top of each other like this while have the row scale perfectly to different screen sizes. The furthest I've gotten is using a FrameLayout to place the different views on top of each other, but from here I cannot place the views in the correct position relative to each other. Any advice on how to do this or where I can find out how to do this?
XML so far (terrible I know):
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|center_horizontal">
<ImageView
android:id="#+id/gameImageID"
android:layout_width="340dp"
android:layout_height="160dp"
android:scaleType="centerCrop"
app:srcCompat="#drawable/overwatch" />
<TextView
android:id="#+id/gameNameID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:layout_marginTop="15dp"
android:text="TextView" />
<Button
android:id="#+id/btnJoinLobby"
android:layout_width="88dp"
android:layout_height="wrap_content"
android:onClick="myClickHandlerJoin"
android:text="Join Lobby"
android:layout_gravity="center_horizontal"
android:layout_marginTop="15dp" />
<Button
android:id="#+id/btnCreateLobby"
android:layout_width="102dp"
android:layout_height="wrap_content"
android:onClick="myClickHandlerCreate"
android:text="Create Lobby"
android:layout_gravity="center_horizontal"
android:layout_marginTop="15dp"
android:layout_toEndOf="#+id/gameNameID" />
</RelativeLayout>
Sure that is no problem. Just use weight to handle spacing and you don't need the frame layout just use relative as a root.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|center_horizontal">
<ImageView
android:id="#+id/gameImageID"
android:layout_width="match_parent"
android:layout_height="160dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:scaleType="centerCrop"
app:srcCompat="#drawable/overwatch" />
<TextView
android:id="#+id/gameNameID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:layout_marginTop="15dp"
android:text="TextView" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:weightSum="2">
<RelativeLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content">
<Button
android:id="#+id/btnJoinLobby"
android:layout_width="102dp"
android:layout_height="wrap_content"
android:onClick="myClickHandlerJoin"
android:text="Join Lobby"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content">
<Button
android:id="#+id/btnCreateLobby"
android:layout_width="102dp"
android:layout_height="wrap_content"
android:onClick="myClickHandlerCreate"
android:text="Create Lobby"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
You could also just use two nested Relative Layouts with gravity bottom left and bottom right and hold your buttons in there and align buttons to right with margins from side. Also don't use the "endOF" aligning as that will force a left alignment and make larger gaps on the right side of the screen even if you make it look good for one phone it will look bad on another. Aesthetics matter.
Or you could just float your buttons to the bottom left and bottom right with margins from side and make both set to match_parent so they fill the space but use padding to shrink the button look inside the space, but this can get messy. So I prefer the implementation above although some people won't like the extra layouts. It's just a matter of opinion though as the performance diff of using extra nested layouts is so tiny that no one can actually argue performance with a straight face haha.
<RelativeLayout
android:layout_width="340dp"
android:layout_height="160dp"
android:scaleType="centerCrop"
android:background="#drawable/overwatch" >
<TextView
android:id="#+id/gameNameID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:layout_marginTop="15dp"
android:text="TextView" />
<Button
android:id="#+id/btnJoinLobby"
android:layout_width="88dp"
android:layout_height="wrap_content"
android:onClick="myClickHandlerJoin"
android:text="Join Lobby"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="15dp" />
<Button
android:id="#+id/btnCreateLobby"
android:layout_width="102dp"
android:layout_height="wrap_content"
android:onClick="myClickHandlerCreate"
android:text="Create Lobby"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="15dp"
android:layout_toEndOf="#+id/btnJoinLobby" />
</RelativeLayout>
Try this. And let me know if that helps.
I have a RelativeLayout with three views. Both TextViews should be to right of the ImageView and the seconds one should be below the first TextView.
Code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#bdbdbd"
android:paddingBottom="15dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="15dp" >
<ImageView
android:id="#+id/avatar"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_centerVertical="true"
android:src="#drawable/default_avatar" />
<TextView
android:id="#+id/username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#id/avatar"
android:text="Chris"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/university"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/username"
android:layout_toRightOf="#id/avatar"
android:text="Oxford"
android:textSize="13sp" />
</RelativeLayout>
Result:
After removing android:layout_centerVertical="true" from the first TextView, everything works as expected (except that it's not vertical).
Why is this and how can I make the first TextView vertical centered?
For some reason the RelativeLayout's height param is giving the problem. Try setting it to 94dp (64 of the image + 15 of bottom padding + 15 of top padding). This should solve the problem
#f. de is right. The problem is android:layout_height="wrap_content", as the height of relative layout is determined my it's content setting it's content to vertically center based on it's height wont work. You need to set this to match_parent or to a fixed value.
You also could wrap your data, in your case Name and University inside another RelativeLayout or any other ViewGroup and make it to align center.
Like that
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#bdbdbd"
android:paddingBottom="15dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="15dp">
<ImageView
android:id="#+id/avatar"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_centerVertical="true"
android:src="#drawable/default_avatar" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="5dp"
android:layout_marginStart="5dp"
android:layout_toEndOf="#id/avatar"
android:layout_toRightOf="#id/avatar">
<TextView
android:id="#+id/username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Chris"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/university"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/username"
android:text="Oxford"
android:textSize="13sp" />
</RelativeLayout>
</RelativeLayout>
This makes sense in order to group related views (TextViews) and also it produces better result because whole container is aligned center, in your initial example Name view is centered vertically but other view is below it and it makes it to look not as good as it will in case of container where baseline is vetical center of container.
Since trying to place both TextViews center vertical, they overlap. Use the padding attribute for the advantage.
So to align them as required, use this code.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#bdbdbd"
android:paddingBottom="15dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="15dp" >
<ImageView
android:id="#+id/avatar"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_centerVertical="true"
android:src="#drawable/default_avatar" />
<TextView
android:id="#+id/username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#id/avatar"
android:text="Chris"
android:paddingBottom="7dp"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/university"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/username"
android:layout_toRightOf="#id/avatar"
android:paddingTop="7dp"
android:text="Oxford"
android:textSize="13sp" />
</RelativeLayout>
I wish this solves your problem...
The problem is with your RelativeLayout's height attribute,
if you change it to "match_parent" then it will work the way you wanted.
Or
you can make another Relativelayout in your main RelativeLayout who's height is "match_parent". After doing so you can place everything at any place without any problem.