How to align a nested LinearLayout to top - android

I have a RelativeLayout within a LinearLayout and for some reason I can not get rid off the padding between the text and divider line of the first row.
How is it possible to align the Text / LinearLayout to the top?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/file_row_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="top"
android:baselineAligned="false">
<ImageView
android:id="#+id/file_row_thumb"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_weight="0"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:scaleType="fitStart" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/file_row_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16dp" />
<TextView
android:id="#+id/file_row_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12dp" />
</LinearLayout>
<ImageButton
android:scaleType="fitStart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_weight="0"
android:background="?android:selectableItemBackground"
android:onClick="showFilePopup"
android:src="#drawable/ic_more_vert" />
Studio preview shows dotted line. Is it responsible for the padding?

Add these 2 lines to your TextView:
android:height="16dp"
android:gravity="bottom|clip_vertical"
That will push the text to the top of it's view. If you want to have it actually touching the view above, you can reduce height.
Here are a couple of screenshots:
1st with height=16
And an exaggerated one with height=14
And here's a link to give you other various XML attributes for TextView
developer.android.com/reference/android/widget/TextView.html

Related

Android Layout : Height of Linear layout not enough

I am trying to design a layout in android which looks like following:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linear"
android:layout_height="match_parent"
android:layout_width="match_parent" >
<LinearLayout
android:id="#+id/LinearLayout_bt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/sec_bluetooth_listview_background"
android:paddingTop="#*android:dimen/tw_preference_item_padding_top"
android:paddingBottom="#*android:dimen/tw_preference_item_padding_bottom"
android:orientation="vertical" >
<TextView
android:id="#+id/main_text"
android:textAppearance="?android:attr/textAppearanceListItem"
android:textColor="?android:attr/textColorPrimary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:singleLine="false"
android:text="#string/sec_bluetooth_no_devices_found"
android:ellipsize="none" />
<TextView
android:id="#+id/secondary_text"
style="#style/BluetoothNoItemHelpText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="start"
android:singleLine="false"
android:lineSpacingExtra="4sp"
android:ellipsize="none" />
</LinearLayout>
</LinearLayout>
But the problem is that it is not showing top padding but only bottom padding is working i.e. textview is showing in layout without top padding . I guess there is some problem in height of linear layout but I have set it to wrap-content. Is there any problem in my layout?
Try change your padding values for explicite dp. I changed it in your code and it works fine for me.
<LinearLayout
android:id="#+id/LinearLayout_bt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#color/textLight"
android:paddingTop="30dp"
android:paddingBottom="30dp"
android:orientation="vertical">
with top padding
and without

android nested LinearLayout sizing

I am trying to achieve the following layout for my expandable listview.
Layout
Problem:
On android previewer the layout looks as expected:
refer to first image in attachment below.
However, when I run it on an emulator or a device the second TextView is not displayed.
refer to second image in attachment below
I have to set the height of the second ImageView (ivGroupIndicator) to match parent in order for the second TextView to display. But this stretches the expandable arrow icon.
refer to last image in attachment below
Images
Here is my layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal">
<ImageView
android:layout_width="25dp"
android:layout_height="match_parent"
android:src="#drawable/ci_hand_cursor"
android:layout_gravity="center" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingLeft="5dp"
android:paddingTop="5dp"
android:layout_weight="0.8">
<TextView
android:id="#+id/route_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Dhelhi Belhi"
android:fontFamily="sans-serif"
android:textSize="16sp"
android:textStyle="bold"
android:textColor="#color/colorPrimaryText"
android:paddingBottom="2dp"/>
<TextView
android:id="#+id/route_schedule_date"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="20-September-2017"
android:fontFamily="sans-serif"
android:textSize="14sp"
android:textColor="#color/colorSecondaryText"
android:paddingBottom="5dp"/>
</LinearLayout>
<ImageView
android:id="#+id/ivGroupIndicator"
android:layout_width="25dp"
android:layout_height="match_parent"
android:background="#drawable/group_indicator"
android:layout_gravity="center"/>
</LinearLayout>
What am i missing here?
This should do the trick:
Use 0dp as height/width when using weights
Weight can just be 1 (not 0.8)
Use equal weights on the 2 text views so they share equal vertical space
Set gravity to center_vertical on text views so the text is centered.
set scale type on image so it doesn't stretch.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal">
<ImageView
android:layout_width="25dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:scaleType="centerInside"
android:src="#drawable/ci_hand_cursor" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:paddingLeft="5dp"
android:paddingTop="5dp">
<TextView
android:id="#+id/route_name"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:fontFamily="sans-serif"
android:gravity="center_vertical"
android:text="Dhelhi Belhi"
android:textColor="#color/colorPrimaryText"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/route_schedule_date"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:fontFamily="sans-serif"
android:gravity="center_vertical"
android:text="20-September-2017"
android:textColor="#color/colorSecondaryText"
android:textSize="14sp" />
</LinearLayout>
<ImageView
android:id="#+id/ivGroupIndicator"
android:layout_width="25dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="#drawable/group_indicator"
android:scaleType="centerInside" />
</LinearLayout>
The problem maybe is that you set the height of the parent layout to 50dp. Try to set it to wrap content, and use height=0dp and weight=1 for the vertical LinearLayout

Put a textview over Imageview in LinearLayout

I have stuck in some xml code and i hope you can help me out.
So here is what I need/what I have done by now.
I have 3 images of 650px width and I need them one below another while keeping aspect ratio.
I did that with the following code and it looks as it should. No problem here.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/ll"
android:orientation="vertical"
android:background="#3afa3f"
android:weightSum="3">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/krk_history"
android:layout_weight="1"
android:background="#drawable/povjestkrka_vintage_yellow600" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/krk_frankopan"
android:background="#drawable/frankopan2_vintage_sundown600" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/krk_turizam"
android:background="#drawable/krk_turizam_vintage"/>
The problem is. I need to put three textviews in a left bottom corner of each image. Imagine it like image menu with text description on each image.
So, I can not use relative or frame layout because images won't play nicely with each other :) There is always a gap between or not aspect ration etc. I need weightsum.
Second, I can't hardcode the text on each image in photoshop because the app will be translated and text needs to change for each language.
I can have different images for each language but I am trying to avoid that.
Ah yea, one more last thing.
I tried to put entire linearlayout in relative layout and put the text between but the text appears beneath the image and I can't bring it upfront.
Any suggestions?
Thanks a lot,
Xsonz
just copy 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="match_parent"
android:orientation="vertical">
<FrameLayout android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|bottom"
android:padding="5dp"
android:text="Text 1" />
</FrameLayout>
<FrameLayout android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|bottom"
android:padding="5dp"
android:text="Text 2" />
</FrameLayout>
<FrameLayout android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:id="#+id/imageView3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|bottom"
android:padding="5dp"
android:text="Text 3" />
</FrameLayout>
Take three FrameLayout inside your LinearLayout and inside FrameLayout keep the ImageView and TextView.
Or Else You can use RelativeLayout and give dependency to Views
You can use frame layout inside linear layout. create imageview inside the linear layout and create textview in another frame layout below it.
<FrameLayout
android:id="#+id/frameLayout_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/krk_history"
android:layout_weight="1"
android:background="#drawable/povjestkrka_vintage_yellow600" />
</FrameLayout>
<FrameLayout
android:id="#+id/frameLayout_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="-5dp" >
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="string" />
</FrameLayout>
Something like this might work for you.
//your layout -> LinearLayout>
....
<RelativeLayout android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/image1"
android:layout_weight="1"
android:background="#drawable/A1" />
<TextView android:id="#+id/textview1"
android:layout_margin="0dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My Text"
android:layout_below="#id/image1"
android:layout_alignLeft="#id/image1" />
</RelativeLayout>
// end your LinearLayout
You can play with these parameters using Relative Layout Parameters android.com. The relative layout allows you to control the "relative" positioning between your elements.
You can lay your images out side by side, or in whatever fashion you wish.
Then you can adjust the text dynamically.

How can I align a TextView to the far left and ImageView to the far right in an Actionbar Spinner?

I am trying to layout an actionbar spinner dropdown list. I have a textview and an imageview in each row. I want the textview to align to the far left of the dropdown (with the paddingLeft) and I want the imageview to align to the far right of the dropdown. The text in the textviews varies in length, so the icons end up being aligned to the immediate right of the textviews. This layout provides a two line item on the actionbar with the spinner title and selected item name.
Here is my current layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/spinner_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="14sp" />
<LinearLayout
android:id="#+id/item_row"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="-5dp"
android:orientation="horizontal" >
<TextView
android:id="#+id/item_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="5dp"
android:layout_weight="1"
android:gravity="left"
android:textSize="18sp" />
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"
android:contentDescription="icon" />
</LinearLayout>
</LinearLayout>
I've tried a relative layout like below, with similar results (see screen shot). The bluetooth icon is a stand in for the yet to be created icon (same size):
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/spinner_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="14sp" />
<RelativeLayout
android:id="#+id/item_row"
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<TextView
android:id="#+id/item_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:textSize="18sp" />
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/item_name"
android:contentDescription="icon" />
</RelativeLayout>
Use a RelativeLayout instead of a LinearLayout, and use the alignParentLeft/Right attributes on your children to place them correctly.

android listView minimize a gap between text and subtext

minimize the gap that I have between two TextViews (main text and subtext) that are in a linear layout and vertical. I tried to pad the subtext to the top, change the hight of the subtext and change the top margin but the gap remains, and I just get a row with an unnecessary hight. My XML is attached
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="10dp">
<ImageView
android:id="#+id/imgIcon"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:scaleType="fitStart"
android:layout_marginTop="5dp"
android:layout_marginRight= "10dp"
android:gravity="center_vertical" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/txtTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:textColor="#000000"
android:textSize="20sp"
/>
<TextView
android:id="#+id/subString"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
</LinearLayout>
this is a picture of what it should look like
but what I actually have is a big gap between IMDB and account
Your screenshot isn't showing up, but one thing you can try that's worked for me before is to set the bottom margin of your title and top margin of your subString to negative; i.e.
<TextView
android:id="#+id/txtTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginBottom="-10dp"
android:textColor="#000000"
android:textSize="20sp" />

Categories

Resources