I can't for the life of me figure out how to get my box centered on BOTH the horizontal and vertical.
Heres my 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="match_parent"
android:background="#drawable/dragon"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/playerinfosquare"
android:orientation="vertical">
<TextView
android:id="#+id/spellinfotitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="10px"
android:text="Spellventory"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/spell1info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="10px"
android:text="No Spell Equipped"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/spell2info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="10px"
android:text="No Spell Equipped"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/spell3info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="10px"
android:text="No Spell Equipped"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
</LinearLayout>
Help?
Are you kidding me? Stack overflow thinks it knows better than me and says that I don't have enough content to explain my code sections. Well, here you go! This is what you get for having arbitrary rules that don't always make sense.
Put your second LinearLayout into a RelativeLayout. You can then center it much easier by setting
android:layout_centerInParent="true"
on the second LinearLayout
You need to set android:gravity="center" on your first LinearLayout.
Related
I am trying to get the TextView, "tv_amount" to stay on the right side of the screen. I have tried using android:gravity="right" but that hasn't been working for me. Anyone have any suggestions?
Image of emulator running this 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="45dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:id="#+id/iv_icon"
android:layout_width="40sp"
android:layout_height="40sp"
android:background="#drawable/circle_border"
android:padding="6sp"
android:layout_marginLeft="6dp"
android:src="#drawable/food"/>
<TextView
android:id="#+id/tv_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginStart="12dp"
android:text="Yummy Pizza"
android:textSize="20sp" />
<TextView
android:id="#+id/tv_amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="12dp"
android:gravity="end"
android:text="$25"
android:textSize="25sp" />
</LinearLayout>
I am expecting the transaction or "tv_amount" to stay be right justified so that end of the number is staying towards the right side of the screen.
I tried using :
android:layout_weight="0"
android:layout_gravity="end"
android:gravity="right"
but these don't seem to work obviously. I am a beginner when it comes to android development and can't seem to find any answers that have helped anywhere else. They all say to use android:gravity or some other alternative. Maybe there is something in my code that doesn't allow that.
Try it like this:
Splitting the content into left and right will result in the weight and gravity properties working. Check out this layout below.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/tv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Title"
android:textSize="20sp" />
<!--Separate layout aligned to the left, containing an image and a yummy pizza label. -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal">
<ImageView
android:id="#+id/iv_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:id="#+id/tv_text_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text Left"
android:textSize="16sp" />
</LinearLayout>
<!--Display the pizza price on a separate label aligned to the right -->
<TextView
android:id="#+id/tv_text_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:text="Text Right"
android:layout_weight="1"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
I am dumb. The issue wasn't with the code in my individual recycler view layout code. It was with my activity_main.xml. I set the recycler_view width to "wrap_content" when it should have been "match_parent." Rookie mistake.
I have the xml code shown below. Everything is working as it should except the final textView( id locationTextView) which won't stay right. I want it to stay as right as possible, but I can't do that(it still appears straight after the linear Layout).Should I set a left margin?. And for the textView1 how can I make it to show only a certain part of the whole text, because I have texts of different lengths and they ruin the layout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/product_list_item_bg"
android:descendantFocusability="blocksDescendants">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:id="#+id/icon"
android:layout_width="72dip"
android:layout_height="72dip"
android:layout_margin="3dip"
android:adjustViewBounds="true"
android:contentDescription="#string/descr_image"
android:scaleType="centerCrop" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp"
android:padding="2dp"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#33CC33" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="TextView" />
</LinearLayout>
<TextView
android:gravity="right"
android:layout_width="72dip"
android:layout_height="72dip"
android:layout_marginTop="0dp"
android:textAppearance="?android:attr/textAppearanceLarge"
android:id="#+id/locationTextView"
android:layout_gravity="right" />
</LinearLayout>
</RelativeLayout>
Try android:layout_weight="1" or some other value for your locationTextView. You can also try out android:weightSum="3" (or that is appropriate instead of 3) on your root LinearLayout. Assign proper weights to your different child views. You can get help here
For showing text in a presentable way, you could use android:ellipsize="marquee" or other options available.
I have the following layout for a ListView item:
<?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:padding="5dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/item_icon_image"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:src="#drawable/m" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Business Name"
android:id="#+id/item_title_text"
android:layout_toRightOf="#+id/item_icon_image"
android:layout_marginLeft="3dp"
android:textStyle="bold"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_alignTop="#+id/item_icon_image" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Distance"
android:id="#+id/item_distance_text"
android:layout_alignLeft="#+id/item_title_text"
android:layout_alignBottom="#+id/item_icon_image" />
</RelativeLayout>
And this is the rendered result:
As you can see there is a gap between the real text and the bottom of the image... I was expecting to have the bottom of the text matching exactly with the bottom of the image...so question is: How can I align the text to the bottom of the image?
(this also happens for the top text, but in the top instead)
EDIT:
For now I am using:
android:layout_marginBottom="-10dp"
But I wanted something more automatic, some solution that won't depend on dp or screen....but as commented, this might be impossible, because the View needs to make space for letter such as 'y', 'g' and 'j'....but I wish there could be something that will align it based on it's contents, so if there wasn't a 'g', it won't be saving this space.
You should add android:gravity="top" to your top text view and android:gravity="bottom" to your bottom text view to get the desired result.
Try this way,hope this will help you to solve your problem.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp">
<ImageView
android:id="#+id/item_icon_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/item_title_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Business Name"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textStyle="bold" />
<View
android:layout_width="1dp"
android:layout_height="odp"
android:layout_weight="1"/>
<TextView
android:id="#+id/item_distance_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Distance"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
</LinearLayout>
Do it like this to acheive the desired result:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Distance"
android:id="#+id/item_distance_text"
android:layout_alignLeft="#+id/item_title_text"
android:layout_alignBottom="#+id/item_icon_image"
android:gravity="bottom" />
I´m developing an instant message application for an university course, similar to Whatsapp as you could guess seeing the icon in the attached screenshot :).
I have a ListFragment being populated with a custom CursorAdapter. It gives two type of views, sent messages (aligned to right) and received messages (aligned to left).
The layout for sent messages works nicely, but I cannot say the same for received messages.
Here is a screenshot:
Sent message layout:
<?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" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#FFCCCCCC"
android:padding="5dp" >
<TextView
android:id="#+id/ceo_timestamp"
android:layout_width="60sp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:background="#FFBBBBBB"
android:gravity="center"
android:textSize="10sp" />
<TextView
android:id="#+id/ceo_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/ceo_timestamp"
android:background="#FFAAAAAA"
android:gravity="right"
android:textSize="16sp" />
</RelativeLayout>
</RelativeLayout>
Received message layout:
<?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:gravity="left" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:background="#FF999999"
android:padding="5dp" >
<TextView
android:id="#+id/cei_timestamp"
android:layout_width="60sp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#FF888888"
android:gravity="center"
android:textSize="10sp" />
<TextView
android:id="#+id/cei_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/cei_timestamp"
android:background="#FF777777"
android:gravity="right"
android:textSize="16sp" />
</RelativeLayout>
</RelativeLayout>
Those ugly background colors are added just to see the space taken for each view and layout. As you can see in the screenshot, send messages (right-aligned) work great. Received messages (left-aligned) aren't aligning well, because RelativeLayout takes all horizontal space available, insted of just wrapping content.
Anyone knows how to fix it, or maybe a better layout design to accomplish what I need?
Thanks a lot.
In Sent message layout replace android:layout_alignParentRight="true" parameter with the android:layout_alignParentLeft="true".
When RelativeLayout's child is alignParentRight, it's width will be auto changed to match_parent. TextView cei_timestamp 's android:layout_alignParentRight="true" make it's parent's width change from wrap_content to match_parent silently.
U have two ways to correct:
do not use 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">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:background="#FF999999"
android:padding="5dp" >
<TextView
android:id="#+id/cei_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FF777777"
android:gravity="right"
android:textSize="16sp" />
<TextView
android:id="#+id/cei_timestamp"
android:layout_width="60sp"
android:layout_height="wrap_content"
android:background="#FF888888"
android:gravity="center"
android:textSize="10sp" />
</LinearLayout>
</RelativeLayout>
do not use wrap_content, both use specific width like 60dp.
I know it is late but I am posting it for someone looking for the solution of same problem.
To align the received message to the left just remove this line from second TextView in xml for received messages.
android:layout_toLeftOf="#+id/cei_timestamp"
I tried it with a simple example and it worked.
Here is the code and screen shot
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.example.android.myapplication1.MainActivity">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FF4081">
<TextView
android:id="#+id/textView"
android:layout_width="60sp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:gravity="center"
android:text="Hello"
android:textSize="23sp" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/textView"
android:gravity="right"
android:text="New Text"
android:textColor="#FFF"
android:textSize="23sp" />
</RelativeLayout>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout centerHorizontal="true"
android:layout marginTop = "104dp"
android:text="New Button" /></RelativeLayout>`
I am currently working on my first android app. In a listview, I need to have the following organisation in each row:
On the left: one main icon on which takes the whole height of the row
On the middle: 2 texts, one below the other
On the right: 2 icons, one below the other
I end up with a row.xml file like this, but that does not work as I expect.
Do you know if something obvious is missing in this file ?
Thanks a lot,
Luc
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:padding="6dip">
<ImageView
android:id="#+id/icon"
android:layout_width="48px"
android:layout_height="48px"
android:layout_marginRight="0dip"
android:src="#drawable/icon" />
<LinearLayout
android:orientation="vertical"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="wrap_content">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="16dp"
android:textStyle="bold"
android:text="TITLE"
android:paddingLeft="5dp"
/>
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textSize="14dp"
android:text="DESCRIPTION"
android:paddingLeft="5dp"
/>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="right">
<ImageButton
android:id="#+id/button_modify"
android:layout_width="16px"
android:layout_height="16px"
android:src="#drawable/deleteicon"
/>
<ImageButton
android:id="#+id/button_delete"
android:layout_width="16px"
android:layout_height="16px"
android:src="#drawable/modifyicon"
/>
</LinearLayout>
In the right-hand-column LinearLayout, add
android:layout_width="wrap_content"
android:gravity="right"
That should make the icons should fall to the right (because of the gravity setting.)
Consider switching to RelativeLayout for a rule set like you describe. Using LinearLayouts may not work in all cases and will be less efficient than the RelativeLayout in terms of stack consumption.