Center TextViews/ImageViews vertically in unknown height - Android - java

Screenshot is posted below. In each row, the last 3 columns are not centered in their row vertically. The height of each row is unknown until after the screen is displayed. I am not sure but I am guessing I need to find the height of the row dynamically after everything is displayed and then center everything. Is that the correct route?
Below is a snipper of XML code for this class.
<ScrollView
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="65"
android:fillViewport="true" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/q1Image"
android:layout_width="10dp"
android:layout_height="10dp" />
<TextView
android:id="#+id/q1Question"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="10sp"
android:layout_weight="48"
android:paddingLeft="5dp"
android:paddingBottom="6dp" />
<TextView
android:id="#+id/q1Answer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="10sp"
android:layout_weight="27"
android:paddingBottom="6dp" />
<TextView
android:id="#+id/q1Verse"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="10sp"
android:layout_weight="25"
android:paddingBottom="6dp" />
</LinearLayout>
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#C2BEBF" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/q2Image"
android:layout_width="10dp"
android:layout_height="10dp" />
<TextView
android:id="#+id/q2Question"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="10sp"
android:layout_weight="48"
android:paddingLeft="5dp"
android:paddingBottom="6dp"
android:paddingTop="6dp" />
<TextView
android:id="#+id/q2Answer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="10sp"
android:layout_weight="27"
android:paddingBottom="6dp"
android:paddingTop="6dp" />
<TextView
android:id="#+id/q2Verse"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="10sp"
android:layout_weight="25"
android:paddingBottom="6dp"
android:paddingTop="6dp" />
</LinearLayout>
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#C2BEBF" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/q3Image"
android:layout_width="10dp"
android:layout_height="10dp" />
<TextView
android:id="#+id/q3Question"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="10sp"
android:layout_weight="48"
android:paddingLeft="5dp"
android:paddingBottom="6dp"
android:paddingTop="6dp" />
<TextView
android:id="#+id/q3Answer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="10sp"
android:layout_weight="27"
android:paddingBottom="6dp"
android:paddingTop="6dp" />
<TextView
android:id="#+id/q3Verse"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="10sp"
android:layout_weight="25"
android:paddingBottom="6dp"
android:paddingTop="6dp" />
</LinearLayout>
//Rows 4-10 code excluded because of repetition.

Set android:layout_gravity to center_vertical on your text views.
Basically, since your layout_height is set to wrap content, your text views look like this:
-------
content
-------
The text view aligns with its parent like so:
-------
-------
content
-------
-------
Your goal is to get the view to center itself within the parent vertically. The attribute "layout_gravity" tells the view how to adjust itself within its parent. Therefore, setting layout_gravity to center_vertical will tell the view to be centered within its parent, like so:
-------
-------
content
-------
-------
Another way this can be accomplished is with the "gravity" attribute. The "gravity" attribute tells a parent how to layout its content (as opposed to "layout_gravity", which defines tells the view how to sit within its parent). So another possible solution would be to tell the list view to align all of its content centered vertically. This is done by specifying android:gravity="center_vertical" on the ViewGroup (in your case the LinearLayout).

Related

Can't set margin left userName

i have 2 items in a relative layout that i want to put side by side,the User icon and the username, at the moment i have the user icon where i want but the username is always right at the side with no margin, i need some margin left so i can have a litle space between each other, and i tried with margin left but it didn't work.
here is the xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="142dp"
android:layout_gravity="center"
android:layout_margin="#dimen/card_margin"
android:elevation="3dp"
card_view:cardCornerRadius="#dimen/card_specie_radius">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.example.afcosta.inesctec.pt.android.Helpers.NexusBoldTextView
android:id="#+id/Avaliation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/plantName"
android:layout_marginStart="92dp"
android:layout_marginTop="15dp"
android:layout_toEndOf="#+id/dateTxt"
android:text="Avalie a fotografia" />
<com.example.afcosta.inesctec.pt.android.Helpers.NexusBoldTextView
android:id="#+id/dateTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_marginEnd="29dp"
android:text="TextView" />
<ImageView
android:id="#+id/reportImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/color_cursor_white" />
<ImageView
android:id="#+id/plantPhoto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginRight="16dp" />
<ImageView
android:id="#+id/userIcon"
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_alignParentBottom="true"
android:layout_below="#id/plantPhoto"
android:src="#drawable/ic_user"
/>
<com.example.afcosta.inesctec.pt.android.Helpers.NexusBoldTextView
android:id="#+id/plantName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/plantPhoto"
android:textColor="#color/nephritis"
android:textSize="20sp" />
<com.example.afcosta.inesctec.pt.android.Helpers.NexusBoldTextView
android:id="#+id/username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/plantPhoto"
android:textColor="#color/base"
android:layout_marginEnd="29dp"
android:layout_toEndOf="#+id/userIcon"
android:layout_toLeftOf="#+id/userIcon"
android:layout_marginLeft="20dp"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
I have found too issues with your code:
You have both android:layout_toEndOf="#+id/userIcon" and android:layout_toLeftOf="#+id/userIcon" attributes set in your username view, which makes no sense. You should replace android:layout_toLeftOf with android:layout_toRightOf if you want it to be to the right of the userIcon view.
You are setting the left position of the username view with the android:layout_toEndOf="#+id/userIcon" attribute, that's why android:layout_marginLeft="20dp" has no effect. You can use android:paddingLeft="20dp" instead.
Let me know if it helps.

How to set columnWeight with Java

The title explains what I need. I want to set columnWeight of Button (Because is inside GridLayout) but from code.
Something like that with code:
<Button android:layout_column="0"
android:layout_row="0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_rowWeight="1"
android:layout_columnWeight="1" />
You need to use LinearLayout subviews. Like the user Price says:
There are limitations when using the GridLayout, the following quote is taken from the documentation.
"GridLayout does not provide support for the principle of weight, as
defined in weight. In general, it is not therefore possible to
configure a GridLayout to distribute excess space in non-trivial
proportions between multiple rows or columns ... For complete control
over excess space distribution in a row or column; use a LinearLayout
subview to hold the components in the associated cell group."
Here is a small example that uses LinearLayout subviews. (I used Space Views that takes up unused area and pushes the buttons into desired position.)
<GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:columnCount="1"
>
<TextView
android:text="2x2 button grid"
android:textSize="32dip"
android:layout_gravity="center_horizontal" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1" />
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:text="Button 2" />
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 3" />
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:text="Button 4" />
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
</GridLayout>
Check Price's response for more information.
Try it: ((GridLayout.LayoutParams) button.getLayoutParams()).columnSpec =
GridLayout.spec(GridLayout.UNDEFINED, 1f);
You can use spec() method to define the columnWeight from java code.
GridLayout.LayoutParams param = new LayoutParams(GridLayout.spec(GridLayout.UNDEFINED, 1f), GridLayout.spec(GridLayout.UNDEFINED, 1f));
button.setLayoutParams(param);

Center button in a LinearLayout

I just want to center "CenterButton" (center of the root LinearLayout) but Androids just not cooperating..
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_gravity="center_horizontal"
android:layout_weight="0.00"
android:padding="5dp"
android:background="#zegerg"
android:id="#+id/LinearLayout1">
<ImageView
android:id="#+id/ImageView1"
android:layout_height="match_parent"
android:layout_width="151dp"
android:src="#mipmap/image_1"
android:contentDescription="#string/abcdef"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:id="#+id/CenterButton"
android:layout_gravity="center_horizontal|center_vertical|center"/>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="20dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text !"
android:id="#+id/TextView"
android:paddingBottom="30dp"
android:textColor="#37a52c" />
<ProgressBar
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/ProgressBar"
android:paddingBottom="30dp"
android:progressTint="#37a52c" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text_text"
android:id="#+id/Button2"
android:layout_gravity="center_horizontal" />
</LinearLayout>
</LinearLayout>
Tried putting it at the end of the XML but doesn't work because the other elements push it aside.. not really sure what's happening.
if you want to have all three first level children to be in equally-sized columns, then you need to add to all of them the followings attribute:
android:layout_width="0dp"
android:layout_weight="1"
(don't forget the dimension "dp" to the width parameter, otherwise the IDE will complain).
...
<ImageView
android:id="#+id/ImageView1"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
android:src="#mipmap/image_1"
android:contentDescription="#string/abcdef"/>
<Button
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Button"
android:id="#+id/CenterButton"
android:layout_gravity="center_horizontal|center_vertical|center"/>
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:padding="20dp">
....
EDITED:
If you want your CenterButton to overlap all the other views, then what you have to do is:
wrap everything in a relative layout with height equal to 200dp, as its first child
remove the button CenterButton from the current position and add it at the bottom of everything, still inside the relative layout, but below the linear layout
add those properties to the button to make it center in the parent
android:layout_centerInParent="true"
So finally you will have something like this (I have changed some resources):
<?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="200dp">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_gravity="center_horizontal"
android:layout_weight="0.00"
android:padding="5dp"
android:background="#android:color/holo_orange_dark"
android:id="#+id/LinearLayout1">
<ImageView
android:id="#+id/ImageView1"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
android:src="#drawable/plus"
android:contentDescription="abcdef"/>
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:padding="20dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text !"
android:id="#+id/TextView"
android:paddingBottom="30dp"
android:textColor="#37a52c" />
<ProgressBar
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/ProgressBar"
android:paddingBottom="30dp"
android:progressTint="#37a52c" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text"
android:id="#+id/Button2"
android:layout_gravity="center_horizontal" />
</LinearLayout>
</LinearLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Button"
android:id="#+id/CenterButton"
android:layout_gravity="center_horizontal|center_vertical|center"/>
</RelativeLayout>
You can use weight for such purposes for child items. Make layout_width for all of them as 0dp and set layout_weight as 1.
Give the three children in the topmost linear layout a gravity of 1 and a width of 0.
It's not clear what exactly is your problem. However, here are some general notes :
To center a View or a Layout inside RelativeView use layout_centerInParent="true"
To make a Layout on top of other layouts use FrameLayout
The order of the views/layouts in your xml file is important. The one you write the last will be on the top (in our example : the FrameLayout or just the CenterButton should be written after the other views and layouts in your xml file)
To distribute the available space inside LinearLayout among its views use android:layout_weight="1" (change the value according to your needs)
you can play aground with this example :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="200dp">
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="#fff"
android:orientation="horizontal"
android:padding="5dp">
<ImageView
android:id="#+id/ImageView1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:src="#mipmap/ic_launcher" />
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:orientation="vertical">
<TextView
android:id="#+id/TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="30dp"
android:text="Text !"
android:textColor="#37a52c" />
<ProgressBar
android:id="#+id/ProgressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="30dp"
android:progressTint="#37a52c" />
<Button
android:id="#+id/Button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text_text" />
</LinearLayout>
</LinearLayout>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
<Button
android:id="#+id/CenterButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical|center"
android:text="Button" />
</FrameLayout>
</RelativeLayout>

Disable width inherit?

I'm working on developing a basic Android app for school and am having some issues with the layout. I am using a table layout with several rows.
The problem I'm having is with the width of items. When I add buttons to the top or bottom of the page, the text views in the other rows seem to inherit the button width. I need these text views to be narrow, about the size of a single character. It seems that the items width is set to the widest item in the table. I've tried several properties but have had no luck.
Any guidance would be appreciated.
Here's a screenshot -
Here's my code -
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="fill"
android:padding="20dp"
android:shrinkColumns="1" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Start" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:height="50dp"
android:width="50dp" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:width="50dp"
android:height="50dp" />
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:width="50dp"
android:height="50dp" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:width="50dp"
android:height="50dp" />
</TableRow>
Just add layout_span to your views according to how many columns you want the particular view to span.
For example, in your code:
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Start"
android:layout_span="2" />
</TableRow>
Then for each TextView give a layout_span of 1.

I can't get an image on the left side of my Android XML Layout to appear properly. What am I doing wrong here?

Here is what is looks like and here is my XML code.
Can someone please post the fixed XML layout code for me and explain what I am doing wrong? I want the - symbol on the left to be all of the way left, just like the > symbol on the right side. The black text should be just to the right of the - symbol.
<?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="wrap_content">
<TableLayout
android:id="#+id/tableLayout1"
android:layout_width="fill_parent"
android:layout_height="44dip"
android:stretchColumns="0"
android:divider="#null"
>
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/infocells"
android:divider="#null" >
<ImageView
android:id="#+id/imgDelete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/minus" />
<TextView
android:id="#+id/txtKey"
android:text="Some text"
android:textSize="16dip"
android:textStyle="bold"
android:layout_marginLeft="8dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left|center_vertical"
android:layout_weight="1.0"
android:layout_marginTop="11dp"
android:layout_marginBottom="6dp"
android:textColor="#color/black"
/>
<TextView
android:id="#+id/txtValue"
android:text="Some text"
android:textSize="16dip"
android:layout_marginRight="8dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right|center_vertical"
android:layout_weight="1.0"
android:layout_marginTop="11dp"
android:layout_marginBottom="6dp"
android:textColor="#color/darkblue"
/>
<ImageView
android:id="#+id/imageView1"
android:layout_marginTop="7dp"
android:layout_marginRight="7dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/arrow" />
</TableRow>
</TableLayout>
</LinearLayout>
Why don't you make use of RelativeLayout and using various property of it you can align your TextView and ImageView according to your other views.If u want to set a - to the left then make use android:layout_alignParentLeft="true" and android:layout_alignParentLeft="true" for you > to set it to the right of the layout
In your ImageView you can set your X position using translationX like something below:
<ImageView
android:id="#+id/imgDelete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:translationX="-25"
android:src="#drawable/minus" />
Just try it. This is a quick solution only.
Here's an idea on how you can do it. Give it a try.
<RelativeLayout>
<ImageView
android:id="#+id/imgDelete"
android:layout_alignParentLeft="true" />
<TextView
android:id="#+id/txtKey"
android:layout_toRightOf="#+id/imgDelete" />
<TextView
android:id="#+id/txtValue"
android:layout_toRightOf="#+id/txtKey" />
<ImageView
android:id="#+id/imageView1"
android:layout_alignParentRight="true" />
</RelativeLayout>

Categories

Resources