Place a image view and a Text view in same line

Place a image view and a Text view in same line - android

I have several logos and i want to set a Textview right next to it so that they are in the same line. I can't place them in the same line.please help me. I want my textview right next to my image.
my layout
<?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="vertical" >
<!--
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
-->
<TextView
android:id="#+id/filmhall_contactdetails"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/cinema_filmhall_contactdet"
android:textColor="#000000"
android:layout_margin="4dp"
android:toRightof="#+id/pointer"
android:textStyle="bold" />
<TextView
android:id="#+id/filmhall_address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="32dp"
android:layout_marginTop="2dp"
android:text="#string/cinema_filmhall_address"
android:textColor="#000000"
android:textSize="12sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/pointer"
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_marginLeft="4dp"
android:src="#drawable/pointer" />
<TextView
android:id="#+id/filmhall_telephone1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/cinema_filmhall_tp1"
android:textColor="#000000"
android:layout_marginTop="2dp"
android:layout_marginLeft="32dp"
android:textSize="12sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/telephone"
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_marginLeft="4dp"
android:src="#drawable/call" />
<TextView
android:id="#+id/filmhall_telephone2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/cinema_filmhall_tp2"
android:textColor="#000000"
android:layout_marginTop="2dp"
android:layout_marginLeft="32dp"
android:textSize="12sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/fax"
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_marginLeft="4dp"
android:src="#drawable/fax" />
<TextView
android:id="#+id/filmhall_email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/cinema_filmhall_email"
android:textColor="#000000"
android:layout_marginTop="2dp"
android:layout_marginLeft="32dp"
android:textSize="12sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/message"
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_marginLeft="4dp"
android:src="#drawable/message" />
<TextView
android:id="#+id/filmhall_facility"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:layout_marginTop="10dp"
android:text="#string/cinema_filmhall_facility"
android:textColor="#000000"
android:textStyle="bold" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:id="#+id/fac1"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginLeft="4dp"
android:src="#drawable/fac1" />
<ImageView
android:id="#+id/fac3"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginLeft="4dp"
android:src="#drawable/fac3" />
<ImageView
android:id="#+id/fac2"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginLeft="4dp"
android:src="#drawable/fac2" />
</LinearLayout>
</LinearLayout>

Method 1:
Like others have suggested, you can have a nested LinearLayoutwith horizontal orientation. It will contain both TextView and ImageView with weights set according to your need.
See How to set ImageView and the textView in a single line inside a LinearLayout
Eg:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
...
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_weight="0.5"
android:text="Test2" />
</LinearLayout>
Method 2 [ Easier ]:
Since you mentioned that you've several logos and want to set the drawable/ImageView right next to it, there is an easier alternate way. Supposing you want something like this:
You can use android:drawableLeft or similar in the TextView. You can also set the padding between the drawable and the text of the TextView using android:drawablePadding. Using this way you don't need the extra ImageView. But it depends at the end what you are looking for.
See Programmatically set left drawable in a TextView
Hope this helps.

You can use TableRow as well. Here you don't need to specify the android:orientation="horizontal".
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/TextView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<ImageView
android:layout_width="33dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_marginRight="15dp"
android:src="#drawable/nextarrow" />
</TableRow>
</LinearLayout>

You can simply use android:layout_centerVertical="true" for all the views in Relative Layout to make them in a single vertical line.
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:layout_centerVertical="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_weight="0.5"
android:text="Test2"
android:layout_centerVertical="true" />

Related

relativelayout align issue about text and image overlap

I have the circle icon , it build up by one text view and one image view .
I want text and image can overlap , so i use relativeLayout.
When i run the app , i found it's align out of my control from different screen size.
Is there any better way to design the layout ?
I set the layout like this:
<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:orientation="vertical"
tools:context=".PageFragment.ActivityHomePage">
<LinearLayout
android:layout_width="300dp"
android:layout_height="wrap_content"
android:padding="15dp"
android:orientation="vertical">
<TextView
android:id="#+id/activityHpEduin"
android:textSize="15dp"
android:textColor="#66CDAA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="test" />
<TextView
android:id="#+id/activityHpTitle"
android:layout_marginTop="5dp"
android:textSize="20dp"
android:textColor="#android:color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="test" />
<TextView
android:textSize="18dp"
android:layout_marginTop="5dp"
android:textColor="#6666ff"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="7.16.2016-2/12.2017"
android:id="#+id/activityHpDate" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:paddingTop="20dp"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/circleNews"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="#drawable/btn_news" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="24dp"
android:layout_marginTop="70dp"
android:textColor="#android:color/white"
android:gravity="center"
android:text="#string/circleNews" />
<ImageView
android:id="#+id/circleActivityContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_toRightOf="#+id/circleNews"
android:src="#drawable/btn_content" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="140dp"
android:layout_marginTop="70dp"
android:gravity="center"
android:textColor="#android:color/white"
android:text="#string/circleActivityContent" />
<ImageView
android:id="#+id/circleSignUp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginLeft="5dp"
android:layout_toRightOf="#+id/circleActivityContent"
android:src="#drawable/btn_apply" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="252dp"
android:layout_marginTop="70dp"
android:gravity="center"
android:textColor="#android:color/white"
android:text="#string/circleSignUp" />
</RelativeLayout>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="20dp"
android:paddingLeft="15dp"
android:paddingRight="15dp">
<ImageView
android:id="#+id/circlePresenter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="#drawable/btn_speakers" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginTop="70dp"
android:gravity="center"
android:textColor="#android:color/white"
android:text="#string/circlePresenter" />
<ImageView
android:id="#+id/circleHotel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_toRightOf="#+id/circlePresenter"
android:src="#drawable/btn_accommodation" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="138dp"
android:layout_marginTop="70dp"
android:gravity="center"
android:textColor="#android:color/white"
android:text="#string/circleHotel" />
<ImageView
android:id="#+id/circleTransportation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginLeft="5dp"
android:layout_toRightOf="#+id/circleHotel"
android:src="#drawable/btn_traffic" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="252dp"
android:layout_marginTop="70dp"
android:gravity="center"
android:textColor="#android:color/white"
android:text="#string/circleTransportation" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="20dp"
android:paddingLeft="15dp"
android:paddingRight="15dp">
<ImageView
android:id="#+id/circleSponsor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="117dp"
android:src="#drawable/btn_sponsors" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="146dp"
android:layout_marginTop="70dp"
android:textColor="#android:color/white"
android:gravity="center"
android:text="#string/circleSponsor" />
</RelativeLayout>
</LinearLayout>

Try this sample code it is similar to what you want.
First here is the xml file code here i have a imageview and below it a text together they are in relative layout.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageView3"
android:layout_width="110dp"
android:layout_height="110dp"
android:layout_gravity="center"
android:layout_marginTop="40dp"
android:layout_weight="1"
android:src="#drawable/user_icon" />
<TextView
android:id="#+id/tv_email"
android:layout_width="200dp"
android:layout_height="45dp"
android:layout_alignStart="#+id/imageView3"
android:layout_below="#+id/imageView3"
android:layout_gravity="center_horizontal"
android:textColor="#color/White"
android:textSize="18sp" />
</RelativeLayout>
The output is like below:
another answer with new requirement:
xml code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="119dp"
android:layout_marginTop="50dp">
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:background="#drawable/banner_bg" />
<TextView
android:id="#+id/textView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fontFamily="#string/font_family_universal"
android:gravity="center"
android:padding="20dp"
android:text="hello world"
android:textAlignment="center"
android:textColor="#color/white"
android:textSize="25dp"
android:textStyle="normal"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
screenshot of above code:
Remember its a sample code change background path accordingly and other properties.Here there is image and above it there is textview as required.

try to bring your textview on front like this
tv_shimmer_tv_gooffline.bringToFront();

Use SDP. It help me more for such designing to support multiple screen sizes.
SDP - a scalable size unit.
An android SDK that provides a new size unit - sdp (scalable dp). This size unit scales with the screen size. It can help Android developers with supporting multiple screens.
for text views please refer to ssp which is based on the sp size unit for texts.
https://github.com/intuit/sdp

Center a TextView below an ImageView in a TableLayout

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>

Setting ImageViews side by side inside LinearLayout

I was trying to get two images side by side inside my LinearLayout. I tried setting my layout weight to 1 as suggested by many other posts I saw here for both views but to no avail. The imageViews in question are the ones with the ID rainfall and wind. What am I doing wrong here? I even tried wrapping them inside a relative layout and it did not work. This is what they look like with the code below: I just want the umbrellas to be side by side instead of one being slightly below the other one? Any ideas?
<Button
android:layout_width="wrap_content"
android:id="#+id/city"
android:layout_gravity="center"
android:gravity="center"
android:layout_height="wrap_content"
android:background="#null"
android:onClick="location"/>
<ImageButton
android:id="#+id/condition"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#null"
android:onClick="sendMessage"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/txtCondition"
android:gravity="center"
android:layout_gravity="center" />
<TextView
android:layout_width="wrap_content"
android:id="#+id/temp"
android:layout_gravity="center"
android:gravity="center"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/maxMin"
android:gravity="center"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/highTemp"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/wind"
android:src="#drawable/ic_umbrella"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="start" />
<ImageView
android:id="#+id/rainfall"
android:src="#drawable/ic_umbrella"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="end" />
<TextView
android:id="#+id/secDay"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/weekHigh"
android:layout_gravity="bottom|center"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>

Try to put them inside a LinearLayout :
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/wind"
android:src="#drawable/ic_umbrella"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start" />
<ImageView
android:id="#+id/rainfall"
android:src="#drawable/ic_umbrella"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="end" />
</LinearLayout>

Android button height is different

I have two buttons inside a linear layout which have same properties defined. But to my surprise, both have different height. Please see the xml code below
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingTop="5dp" >
<ImageView
android:id="#+id/imgUser"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="5dp"
android:layout_marginTop="10dp"
android:adjustViewBounds="true"
android:src="#drawable/default_people_thumb" />
<TextView
android:id="#+id/tvUploadHeader"
style="#style/Text.Quaternary.Small.Bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/choose_a_profile_photo" />
<TextView
android:id="#+id/tvDescription"
style="#style/Text.Quaternary.ExtraSmall.Bold"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:gravity="center"
android:text="#string/photo_upload_initial" />
<Button
android:id="#+id/btnChoosePhoto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#drawable/login_button_selector"
android:text="#string/choose_photo_from_gallery" />
<Button
android:id="#+id/btnSkip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#drawable/login_button_selector"
android:text="#string/choose_photo_from_gallery" />
</LinearLayout>
Can you please help me to have the same height. I am wondering as to how both behaves differently. Also added includeFontPadding for the button. But no hope :(.

Your background drawables have different padding or height. check #drawable/btn_large_gray and #drawable/login_button_selector

put both the button inside linear layout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingTop="5dp" >
<ImageView
android:id="#+id/imgUser"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="5dp"
android:layout_marginTop="10dp"
android:adjustViewBounds="true"
android:src="#drawable/default_people_thumb" />
<TextView
android:id="#+id/tvUploadHeader"
style="#style/Text.Quaternary.Small.Bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/choose_a_profile_photo" />
<TextView
android:id="#+id/tvDescription"
style="#style/Text.Quaternary.ExtraSmall.Bold"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:gravity="center"
android:text="#string/photo_upload_initial" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingTop="5dp" >
<Button
android:id="#+id/btnChoosePhoto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#drawable/login_button_selector"
android:text="#string/choose_photo_from_gallery" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingTop="5dp" >
<Button
android:id="#+id/btnSkip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#drawable/btn_large_gray"
android:text="#string/skip" />
</LinearLayout>
</LinearLayout>
and adjust both linear layouts as you like it

Try defining property android:layout_weight for each element in your LinearLayout, so they can have the same height.
For example :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingTop="5dp" >
<ImageView
android:id="#+id/imgUser"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_weight="1"
android:layout_margin="5dp"
android:layout_marginTop="10dp"
android:adjustViewBounds="true"
android:src="#drawable/default_people_thumb" />
<TextView
android:id="#+id/tvUploadHeader"
style="#style/Text.Quaternary.Small.Bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/choose_a_profile_photo" />
<TextView
android:id="#+id/tvDescription"
style="#style/Text.Quaternary.ExtraSmall.Bold"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:gravity="center"
android:text="#string/photo_upload_initial" />
<Button
android:id="#+id/btnChoosePhoto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="5dp"
android:background="#drawable/login_button_selector"
android:text="#string/choose_photo_from_gallery" />
<Button
android:id="#+id/btnSkip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="5dp"
android:background="#drawable/login_button_selector"
android:text="#string/choose_photo_from_gallery" />
</LinearLayout>
The idea is to give as much space to each element. Your LinearLayout contains different elements so by choosing wrap_content in the android:layout_height and android:layout_width, space available will be allocated for each element added. And as you TextViews and Buttons are not the same...
Hope it'll help

You are using different style for both the buttons,
i.e. "#style/Text.Quaternary.Small.Bold" and "#style/Text.Quaternary.ExtraSmall.Bold" you should use only one style for both buttons

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

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

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

Place a image view and a Text view in same line - android

Related

relativelayout align issue about text and image overlap

Center a TextView below an ImageView in a TableLayout

Setting ImageViews side by side inside LinearLayout

Android button height is different

GridLayout - Aligning Element

Categories

Resources