CODEWITHSUNDEEP
androidandroid-layoutandroid-gridlayout
Gaurav
Gaurav

Reputation: 780

GridLayout - Aligning Element

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"/>

output image

Upvotes: 1

Views: 7886

Answers (5)

Diti
Diti

Reputation: 1564

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).

Result of using the below-mentioned code

<?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.

Upvotes: 2

Raanan
Raanan

Reputation: 4785

I suggest implementing the entire view using a RelativeLayout, should be the best solution for the entire view.

Upvotes: 2

Ravi
Ravi

Reputation: 3772

I think you should change usedefaultMargins to false and give your own margins to the elements.

android:useDefaultMargins="false";

Upvotes: 0

Mbt925
Mbt925

Reputation: 1346

try this:

enter image description here

<?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>

Upvotes: 0

Jschools
Jschools

Reputation: 2767

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.

Upvotes: 1

Related Questions