how can I center a TextView below an ImageView in a TableLayout? I see that I have to use center_horizontal with a specified layout_width in dp:
android:layout_width="90dp"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
...but my text value is not always the same, I set it programmatically and if it's too long:
So I set android:singleLine to true:
android:layout_width="90dp"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:singleLine="true"
So I set layout_width to wrap_content but in this way center_horizontal is not working :(
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:singleLine="true"
This is my TableRow layout:
<?xml version="1.0" encoding="utf-8"?>
<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/table_row_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp">
<RelativeLayout
android:id="#+id/relative_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1">
<!-- Left column -->
<ImageView
android:id="#+id/left_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="30dp"
android:layout_marginStart="30dp"
android:src="#drawable/item_image" />
<TextView
android:id="#+id/left_name"
android:layout_width="90dp"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/left_image"
android:layout_alignStart="#+id/left_image"
android:layout_below="#+id/left_image"
android:gravity="center_horizontal"
android:text="ITEM TEXT VIEW"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#android:color/black" />
<!-- Right column -->
<ImageView
android:id="#+id/right_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/left_name"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginEnd="60dp"
android:layout_marginRight="60dp"
android:src="#drawable/item_image"
android:textColor="#android:color/black" />
<TextView
android:id="#+id/right_name"
android:layout_width="90dp"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/right_image"
android:layout_alignStart="#+id/right_image"
android:layout_below="#+id/right_image"
android:gravity="center_horizontal"
android:text="ITEM TEXT VIEW" />
</RelativeLayout>
</TableRow>
Anyone can help me?
UPDATE: This my real layout element:
You can use two RelativeLayouts instead of one. Check this XML,
<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/table_row_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp">
<RelativeLayout
android:id="#+id/relative_layout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:weightSum="0.5">
<!-- Left column -->
<ImageView
android:id="#+id/left_image"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentTop="true"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:src="#drawable/item_image" />
<TextView
android:id="#+id/left_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/left_image"
android:gravity="center_horizontal"
android:layout_centerHorizontal="true"
android:text="ITEM TEXT VIEW"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#android:color/black" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/relative_layout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:weightSum="0.5">
<!-- Right column -->
<ImageView
android:id="#+id/right_image"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentTop="true"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:src="#drawable/item_image" />
<TextView
android:id="#+id/right_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/right_image"
android:gravity="center_horizontal"
android:layout_centerHorizontal="true"
android:text="ITEM TEXT VIEW"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#android:color/black" />
</RelativeLayout>
</TableRow>
RelativeLayout is not a best suit for this scenario.It's better to replace with two LinearLayouts. The advantage is, you can avoid most of the magic numbers like margins and paddings. Try this layout,
<?xml version="1.0" encoding="utf-8"?>
<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/table_row_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<!-- Left column -->
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="#+id/left_image"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/circle" />
<TextView
android:id="#+id/left_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="ITEM TEXT VIEW" />
</LinearLayout>
<!-- Right column -->
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="#+id/right_image"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/circle"
android:textColor="#android:color/black" />
<TextView
android:id="#+id/right_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="ITEM TEXT VIEW" />
</LinearLayout>
</TableRow>
Related
I'm trying to center the editText which you can see in this screen (the one on the black buttons):
This is my code. I set the android:gravity="center_horizontal" tag, but as you can see it doesn't works. I do not understand if I need to set it at the center of its linear layout or if I need to pay attention to the external linear layout:
<LinearLayout 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:background="#FCFCFC"
android:orientation="vertical"
android:layout_marginTop="8dp"
tools:context=".PaintingActivity" >
<!-- Top Buttons -->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_gravity="center"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/draw_btn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="50dp"
android:contentDescription="#string/brush"
android:background="#drawable/rounded_corners"
android:padding="16dp"
android:layout_marginTop="5dp"
android:src="#drawable/brush" />
<ImageButton
android:id="#+id/erase_btn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="50dp"
android:contentDescription="#string/erase"
android:background="#drawable/rounded_corners"
android:padding="16dp"
android:layout_marginTop="5dp"
android:src="#drawable/eraser" />
<ImageButton
android:id="#+id/undo_btn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:contentDescription="Undo"
android:layout_marginRight="50dp"
android:background="#drawable/rounded_corners"
android:padding="16dp"
android:layout_marginTop="5dp"
android:src="#drawable/undo" />
<ImageButton
android:id="#+id/colorPicker"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginTop="5dp"
android:background="#drawable/rounded_corners"
android:contentDescription="colorPicker"
android:padding="16dp"
android:src="#drawable/palette" />
</LinearLayout>
<!-- Custom View -->
<com.example.williamstest.DrawingView
android:id="#+id/drawing"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_marginBottom="3dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="3dp"
android:layout_weight="1"
android:background="#FFFFFFFF" />
<!-- Menu in basso -->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical" >
<!-- Top Row -->
<LinearLayout
android:id="#+id/toprow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/_70sdp"
android:orientation="horizontal">
<EditText
android:id="#+id/edittitle"
android:layout_width="400dp"
android:layout_height="wrap_content"
android:layout_marginTop="15dip"
android:layout_marginBottom="25dip"
android:ems="10"
android:hint="Inserisci qui il titolo"
android:gravity="center_horizontal"
android:inputType="textNoSuggestions"
android:singleLine="true"/>
</LinearLayout>
<!-- Bottom Row -->
<LinearLayout
android:id="#+id/bottomrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="120dp"
android:orientation="horizontal">
<Button
android:id="#+id/bb_3"
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_marginLeft="120dp"
android:layout_marginBottom="10dp"
android:background="#drawable/button_bg"
android:text="Indietro"
android:textColor="#FFFFFF" />
<Button
android:id="#+id/bb_2"
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_marginLeft="120dp"
android:layout_marginBottom="10dp"
android:layout_weight="1"
android:background="#drawable/button_bg"
android:text="Avanti"
android:textColor="#FFFFFF" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
You have a redundant left margin
Remove android:layout_marginLeft="#dimen/_70sdp"from thetoprowlayout
or add an equal right margin
No need to use layout_marginLeft to align it center_horizontal, remove it. Just add android:gravity to center_horizontal in your LinearLayout enclosing EditText.
<LinearLayout
android:id="#+id/toprow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal">
<EditText
android:id="#+id/edittitle"
android:layout_width="400dp"
android:layout_height="wrap_content"
android:layout_marginTop="15dip"
android:layout_marginBottom="25dip"
android:ems="10"
android:hint="Inserisci qui il titolo"
android:gravity="center_horizontal"
android:inputType="textNoSuggestions"
android:singleLine="true"/>
</LinearLayout>
I want to set the text field above the black image and i want the width of text field should be equal to image.
I dont want to put hardcoded dimensions. Also both the blocks should qually cover the screen horizontally.
Here is my code `
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/RL_childLeft1"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<com.ism.eshita.incentivemanagmentsystem.Speedometer.Speedometer
android:id="#+id/Speedometer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#000000"
custom:currentSpeed="100"
custom:maxSpeed="300" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical">
<TextView
android:id="#+id/tv_bg1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/PrimaryDark2"
android:gravity="center"
android:text="BG"
android:textColor="#color/white"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:id="#+id/tv_performance1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/PrimaryDark2"
android:gravity="center"
android:paddingBottom="5dp"
android:text="Performance"
android:textColor="#color/white" />
</LinearLayout>
</RelativeLayout>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
>
<com.ism.eshita.incentivemanagmentsystem.Speedometer.Speedometer
android:id="#+id/Speedometer2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#000000"
custom:currentSpeed="100"
custom:maxSpeed="300" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical">
<TextView
android:id="#+id/tv_bg2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/PrimaryDark2"
android:gravity="center"
android:text="BG"
android:textColor="#color/white"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:id="#+id/tv_performance2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/PrimaryDark2"
android:gravity="center"
android:paddingBottom="5dp"
android:text="Performance"
android:textColor="#color/white" />
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
Im trying to make a text view to align to the left border of another imageview in a RelativeLayout, but I'm having trouble and I cannot achieve this. Can anyone tell me how can I achieve this?
Here is my current XML 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:layout_marginBottom="15dp"
android:orientation="vertical" >
<ImageView
android:id="#+id/main_item_bg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:contentDescription="#string/app_name"
android:scaleType="fitXY" />
<RelativeLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#drawable/blackalha"
android:gravity="center_vertical"
android:orientation="horizontal"
android:weightSum="100" >
<TextView
android:id="#+id/main_item_cont"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/main_item_nmb"
android:paddingLeft="5dp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#android:color/white" />
<ImageView
android:id="#+id/main_item_ic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#color/app_purple"
android:src="#drawable/bacal" />
<TextView
android:id="#+id/main_item_nmb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/main_item_ic"
android:background="#drawable/saric"
android:gravity="center"
android:textColor="#333333" />
</RelativeLayout>
<TextView
android:id="#+id/main_item_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignTop="#+id/main_item_bg"
android:layout_margin="5dp"
android:maxWidth="200dp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#android:color/white" />
</RelativeLayout>
Try this
<?xml version="1.0" encoding="utf-8"?>
<ImageView
android:id="#+id/main_item_bg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:contentDescription="#string/app_name"
android:scaleType="fitXY" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="80dip"
android:gravity="center"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >
<TextView
android:id="#+id/main_item_cont"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:gravity="center"
android:paddingLeft="5dp"
android:text="dsgffdufsdfdfsdfdsfsdfsdfdsfdf"
android:inputType="textMultiLine"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#android:color/white" />
<ImageView
android:id="#+id/main_item_ic"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="5dip"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/main_item_cont"
android:background="#android:color/black"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/main_item_nmb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/main_item_cont"
android:layout_toRightOf="#+id/main_item_cont"
android:background="#android:color/white"
android:text="10"
android:textColor="#android:color/white" />
</RelativeLayout>
<TextView
android:id="#+id/main_item_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignTop="#+id/main_item_bg"
android:layout_margin="5dp"
android:maxWidth="200dp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#android:color/white" />
As #Salauyou mentioned, try with android:layout_alignLeft because it "Makes the left edge of this view match the left edge of the given anchor view ID"
and android:layout_toLeftOf means "Positions the right edge of this view to the left of the given anchor view ID."
Now, this is what I achieved:
I used this picture in drawable-mdpi (as the badge) - note the trick of the dual background:
and the standard launcher icon, since I didn't have a wine glass icon handy.
This is my layout:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:layout_margin="0dp"
android:padding="0dp"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="0dp"
android:padding="4dp"
>
<TextView
android:id="#+id/txtIcon"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_alignParentRight="true"
android:gravity="center"
android:padding="4dp"
android:background="#6b2339"
android:drawableRight="#drawable/ic_launcher"
/>
<TextView
android:id="#+id/txtBadge"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_toLeftOf="#id/txtIcon"
android:gravity="center"
android:padding="4dp"
android:background="#drawable/wines_crossing_badge"
android:text="8"
android:textColor="#312c23"
android:textSize="16sp"
/>
<TextView
android:id="#+id/txtDesc"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#id/txtBadge"
android:background="#312c23"
android:gravity="left|center_vertical"
android:padding="4dp"
android:text="Available Androids in stock for rental"
android:textColor="#fff"
android:textSize="16sp"
/>
</RelativeLayout>
</RelativeLayout>
I want to center align my imageview with the above textview here's an image of what I'm getting.
I need something like this in a relative layout
<TextView
android:id="#+id/strength"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/hero_class"
android:textColor="#0095FF"
android:text="Strength"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/agility"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/hero_class"
android:layout_centerHorizontal="true"
android:text="Agility"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#0095FF" />
<TextView
android:id="#+id/intl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/agility"
android:layout_alignBottom="#+id/agility"
android:layout_alignParentRight="true"
android:text="Intelligence"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#0095FF" />
<ImageView
android:id="#+id/img_int"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/img_str"
android:src="#drawable/intelligence" />
<ImageView
android:id="#+id/img_agi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/img_int"
android:layout_centerHorizontal="true"
android:src="#drawable/agility" />
<ImageView
android:id="#+id/img_str"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/strength"
android:layout_alignParentLeft="true"
android:src="#drawable/strength" />
This is what i have done but the problem is that i can have the middle imageview centered align but the left and right one are with align to the most right and most left not in the center of above textview
In layout.xml you can use this for each Text+Image:
<TextView ...
android:text="The Text"
android:drawableBottom="#drawable/icon1" />
You could repeat it into an LinearLayout with the horizontal orientation
You can make three Relative Views each containing a Textview and Imageview posited one below the other with the ImageView in the cater of the parent Relative View.
Finally put these three within an outer Relative View to position them as you like.
Try to create three linear layouts with orietation vertical,
Each linear layout will contain textview and imageview with gravity center
You can use LinearLayout as parent Layout having android:orientation="horizontal".
and then use three LinearLayout each contains TextView and ImageView having android:orientation="vertical".
See below 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="match_parent"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/strength"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/hero_class"
android:textColor="#0095FF"
android:text="Strength"
android:textAppearance="?android:attr/textAppearanceMedium" />
<ImageView
android:id="#+id/img_agi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/img_int"
android:layout_centerHorizontal="true"
android:src="#drawable/agility" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
TextView ImageView
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
TextView ImageView
</LinearLayout>
</LinearLayout>
Hope this helps:
<?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:background="#android:color/black" >
<RelativeLayout
android:id="#+id/reltive1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true" >
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="TEXT VIEW"
android:textColor="#android:color/white"
android:textSize="20sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/img1"
android:layout_width="60dp"
android:layout_height="80dp"
android:layout_below="#id/text1"
android:layout_centerHorizontal="true"
android:background="#android:color/white" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/reltive1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" >
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="TEXT VIEW"
android:textColor="#android:color/white"
android:textSize="20sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/img2"
android:layout_width="60dp"
android:layout_height="80dp"
android:layout_below="#id/text2"
android:layout_centerHorizontal="true"
android:background="#android:color/white" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/reltive1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true" >
<TextView
android:id="#+id/text3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="TEXT VIEW"
android:textColor="#android:color/white"
android:textSize="20sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/img3"
android:layout_width="60dp"
android:layout_height="80dp"
android:layout_below="#id/text3"
android:layout_centerHorizontal="true"
android:background="#android:color/white" />
</RelativeLayout>
</RelativeLayout>
This is what you want...
<LinearLayout
android:id="#+id/linear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="TextView" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="TextView" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="TextView" />
</LinearLayout>
<LinearLayout
android:id="#+id/linear2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imgView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imgView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imgView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
</LinearLayout>
Check if your ImageView is centered on your layout with this attribute:
android:layout_centerHorizontal="true"
For your TextView, it needs a reference to be aligned above it and also be centered.
So you need this:
android:layout_alignParentEnd="#+id/imageView"
android:layout_alignParentRight="#+id/imageView"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:gravity="center"
Create GridView adapter and your done.
I am trying to reduce the space between 2 columns, have tried using negative margins, but did not work. Is there a way to bring the 2 elements in the image closer ?
<?xml version="1.0" encoding="utf-8"?>
<GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:useDefaultMargins="true"
android:alignmentMode="alignBounds"
android:columnOrderPreserved="false"
android:layout_gravity="center"
android:orientation="horizontal"
android:stretchMode="columnWidth"
android:background="#color/orange"
android:textSize="12sp"
android:columnCount="8">
<ImageButton
android:id="#+id/settings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnSpan="1"
android:layout_gravity="left"
android:src="#drawable/settings" />
<TextView
android:id="#+id/currentCityName"
android:layout_column="2"
android:textSize="22sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="City name"
android:layout_columnSpan="4"
android:layout_gravity="center_horizontal"
/>
<ImageButton
android:id="#+id/refresh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="7"
android:layout_columnSpan="1"
android:layout_gravity="right"
android:src="#drawable/reload" />
<ImageView
android:id="#+id/currentWeatherImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnSpan="8"
android:layout_rowSpan="3"
android:layout_gravity="center_horizontal"
android:src="#drawable/cloud" />
<ImageView
android:id="#+id/humidityIcon"
android:layout_width="20dp"
android:paddingTop="10dp"
android:paddingLeft="0dp"
android:paddingRight="0dp"
android:layout_marginRight="0dp"
android:layout_gravity="left"
android:background="#000000"
android:src="#drawable/humidity" />
<TextView
android:id="#+id/humidity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="13sp"
android:paddingTop="10dp"
android:paddingLeft="0dp"
android:layout_marginLeft="0dp"
android:layout_gravity="left"
android:background="#FFFFFF"
/>
<TextView
android:id="#+id/temperature"
android:layout_columnSpan="4"
android:layout_rowSpan="2"
android:textSize="49sp"
android:layout_marginLeft="10dp"
android:layout_marginRight="5dp"
android:layout_gravity="center_horizontal"/>
<ImageView
android:id="#+id/windSpeedIcon"
android:layout_width="30dp"
android:layout_marginRight="1dp"
android:paddingRight="1dp"
android:layout_gravity="right"
android:src="#drawable/wind" />
<TextView
android:id="#+id/windSpeed"
android:textSize="12sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
/>
<!-- android:layout_width="40dp" -->
<TextView
android:id="#+id/precipitationIcon"
android:textSize="28sp"
android:layout_width="40dp"
/>
<TextView
android:id="#+id/precipitation"
android:layout_column="0"
android:textSize="13sp"
android:layout_width="40dp"
/>
<TextView
android:id="#+id/windDirection16Point"
android:textSize="13sp"
android:layout_width="80dp"
android:layout_columnSpan="2"
/>
<TextView
android:id="#+id/weatherDescription"
android:layout_gravity="center_horizontal"
android:layout_row="7"
android:layout_columnSpan="8"/>
<TextView
android:id="#+id/section_label"
android:layout_margin="5dp"
android:layout_columnSpan="8" />
<EditText
android:minLines="4"
android:maxLines="4"
android:id="#+id/edit"
android:layout_columnSpan="8"/>
I suggest implementing the entire view using a RelativeLayout, should be the best solution for the entire view.
You are tackling the wrong problem – you are asking how to reduce the space between columns in a grid layout, but maybe you should’t have used such a layout in the first place!
What you should have been using for your specific layout, is a combination of relative positioning and compound drawables (here, with android:drawableStart).
<?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="80dp"
android:background="#d89018"
android:paddingBottom="4dp"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:paddingTop="4dp"
>
<TextView
android:id="#+id/temperature"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:text="25 ℃"
android:textColor="#fff"
android:textSize="49sp"
/>
<TextView
android:id="#+id/humidity"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:drawableStart="#drawable/humidity"
android:gravity="center_vertical"
android:text="83 %"
android:textColor="#fff"
/>
<TextView
android:id="#+id/windSpeed"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:drawableStart="#drawable/wind"
android:gravity="center_vertical"
android:text="19 km/h"
android:textColor="#fff"
/>
<TextView
android:id="#+id/precipitation"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:drawableStart="#drawable/precipitation"
android:gravity="center_vertical"
android:text="0.1 mm"
android:textColor="#fff"
/>
<TextView
android:id="#+id/windDirection16Point"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignLeft="#id/windSpeed"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:drawableStart="#drawable/windDirection"
android:gravity="center_vertical"
android:text="NNW"
android:textColor="#fff"
/>
</RelativeLayout>
Not only this layout is simpler, you also let Android take care of all the spacing for you. To change the spacing between the compound drawable and the text, use android:drawablePadding in the layout’s code above; in Java code, that would be TextView.setCompoundDrawablePadding).
Icons used for the sample: water, windsock, rainy-weather and wind-rose.
I think what's happening is that your Views are being stretched because they are trying to match the width of another view in their columns.
Try decreasing the columnSpan of your Views or separate your layout into two separate GridLayouts.
Or, consider using a different layout altogether. I would recommend RelativeLayout here instead of GridLayout, but I don't know how this fits into a larger window.
try this:
<?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="100dp">
<LinearLayout
android:id="#+id/col1"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="2.4"
>
<LinearLayout
android:id="#+id/col1_row1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="83%"/>
</LinearLayout>
<LinearLayout
android:id="#+id/col1_row2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1.0mm"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/col2"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="2.0"
android:gravity="center"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="25'"
android:textSize="50dp"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/col3"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="2.4"
>
<LinearLayout
android:id="#+id/col3_row1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="19Km"/>
</LinearLayout>
<LinearLayout
android:id="#+id/col3_row2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="NNW"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
I think you should change usedefaultMargins to false and give your own margins to the elements.
android:useDefaultMargins="false";