Develop Reference

Text View surrounded by Rectangular Shape has extra space in layout

This is the question I asked earlier today:
Recreate shape as in xml file by using code and set width programmatically
Using the above solution provided, I was able to get the desired result but there is a small issue which I can't figure out. Please help me.
The rectangle box should wrap the text view whatever its text length may be. But when the content is long than other text in the same view, gaps are shown.
Here is the layout code which is loaded in the recycler view:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/lin1"
android:weightSum="2">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/rel1"
android:layout_marginLeft="5dp"
android:layout_weight="1.50">
<TextView
android:id="#+id/list"
android:textSize="#dimen/grid_row_text_size"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minWidth="100dp"
android:textColor="#color/orange"
android:textAlignment="center"
android:singleLine="true"
android:layout_marginRight="3dp"
android:gravity="center">
</TextView>
</RelativeLayout>
<ImageView
android:id="#+id/info_icn"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_alignParentBottom="true"
android:src="#drawable/eye"
android:visibility="gone"
android:layout_weight="0.50"
android:layout_gravity="bottom"
/>
</LinearLayout>
This is the result which I am getting now
For more clearance on the issue, another pic of the above
This is the result I get after changing the top Linear Layout (android:layout_width="match_parent")
If more code needed, I can post here. Please help me on this issue. Thanks a lot!

The rectangle box should wrap the text view whatever its text length
may be. But when the content is long than other text in the same view,
gaps are shown.
To make TextView wraps to its content you have to make some changes on your RecyclerView Item layout:
The RelativeLayout (#+id/rel1) has android:layout_width="match_parent" and must be wrap_content.
The TextView (#+id/list) has android:layout_width="match_parent" and must be wrap_content.
The TextView (#+id/list) has android:minWidth="100dp" which affects the TextView to wrap to its content when the content is too small.
I have modified your xml layout to Wrap to its content like in the below sample:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/lin1"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:background="#android:color/transparent"
android:orientation="horizontal">
<RelativeLayout
android:id="#+id/rel1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:layout_gravity="center"
android:layout_marginStart="5dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp">
<TextView
android:id="#+id/list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/grid_row_text_size"
android:text="Test text"
android:gravity="center"
android:layout_centerInParent="true"
android:textColor="#android:color/holo_orange_dark"
android:background="#android:color/transparent"
android:textAlignment="center"
android:singleLine="true"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:paddingStart="5dp"
android:paddingEnd="5dp"/>
</RelativeLayout>
<ImageView
android:id="#+id/info_icn"
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/eye"
android:visibility="gone"
android:layout_gravity="bottom" />
</LinearLayout>
According to your question the TextView has a Rectangular Shape as a background with a Cut TopRightCorner. After adding programmatically the TextView Background using a ShapeAppearanceModel you should get the result you want like below:

How to align a nested LinearLayout to top

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

XML Margins not what I expect, all on same "line", not stacked

I'm following this tutorial and have the program working technically, only the Button and Image are inline with the display and text entry box.
I want it to look like the image below, but instead it has all of those elements on one horizontal line.
Image: How I want it to look like:
Here's the activity_main.xml
<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"
tools:context=".MainActivity">
<TextView
android:id="#+id/main_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:text="#string/textView"/>
<!-- Displays keyboard when touched -->
<EditText
android:id="#+id/main_edittext"
android:inputType="textCapSentences"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:hint="#string/hint"/>
<!-- List whose dataset is defined in code with an adapter -->
<ListView
android:id="#+id/main_listview"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_marginTop="20dp"/>
<!-- Set OnClickListener to trigger results when pressed -->
<Button
android:id="#+id/main_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:text="#string/button" />
<!-- Shows an image from your drawable resources -->
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:src="#drawable/ic_launcher" />
<!-- Closing tag for the horizontal nested layout -->
</LinearLayout>
Do you need the MainActivity.java? If so, I'll post it. That part works, I can get input from keyboard, and it displays - and if the string is long enough, will fill to the right, pushing everything else over.
I understand that's from the wrap_content property, right?
Final thought: The tutorial says
Add the EditText XML to activity_main.xml as a sibling to the TextView
and the horizontal LinearLayout.
I wasn't sure what it means to make it a sibling, so I just put it after TextView, as you may see. Does that have anything to do with it?
Thanks for any ideas or advice! (Sorry if the title is a little convoluted.)
edit: There was a comment basically saying to add android:orientation="vertical" to the top <LinearLayout xmlns:android... > part. That worked! Only now the button and image are pushed down to the bottom of the screen, while the text entry box and display are up top...so lots of white space. I thought that I had set them to all be 20dp separate from eachother?
Edit2: I fixed, kind of, that spacing issue by setting <textWidth>, <EditText>, and <Button> to have android:layout_width="match_parent"
android:layout_height="wrap_content". ...but now they are horizontal (yay!) but not like the screenshot. How do I get them lined up like that?

try 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=".MainActivity">
<TextView
android:id="#+id/main_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:text="textView"/>
<!-- Displays keyboard when touched -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/main_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:text="button" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<EditText
android:id="#+id/main_edittext"
android:inputType="textCapSentences"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:hint="hint"/>
<!-- List whose dataset is defined in code with an adapter -->
<ListView
android:id="#+id/main_listview"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_marginTop="20dp"/>
<!-- Closing tag for the horizontal nested layout -->
</LinearLayout>

view sliding over layout

I have relative layout. Within which I have many views like edit text, text views and so on. I do lots of animations in that. Everything was perfectly fine. But at one point, I have a requirement.
It is the password page. Create and confirm password. Two edittexts one after another. If the password doesnt meet the requirement, a plain orange view should slide up with error message "Invalid password".
So I put create and confirm password in linear layout. The linear layout will slide up, letting user type in passwords. After validation, if there is an error, the linear layout should slide down and the plain view will slide up. I kept the view invisible and when required I made it visible and wrote the code to slide up. The same code works when I just use single edit text instead of linear layout. But it is not working when using linear layout. Am I doing something wrong?
Adding code to it. The code specific to this issue starts with till the end of coding
I declared linear layout as view and NOT VIEWGROUP.
EDIT: After doing analysis, I found that the view I am trying to slide up after sliding down the layout is hidden somewhere in the view hierarchy.
view.bringToFront() helps to bring the error view to the front and slides up.
But after that the problem is, after my linear layout slide down, the error view is not sliding up straight away. Because I am using bringToFront(), it displays the view first on the whole screen (with background color as orange) and then the sliding starts.
I am not sure whether it is correct but I fixed this issue like this.
no background color has been given to the view
I used errorView.bringToFront () and errorView.setVisibility(true) in the animationEnd() of a Layout slidingdown animation listener.
I defined sliding up animation for the errorView in the same animationEnd() of layout sliding down listener
In the animationStart() of errorView sliding up animation listener, I defined the background color of the errorView. Now its working as expected.
But let me know better way of doing this.
//Declaration
View greyView, orangeView, yellowView, blueView, orangeErrorView, letsGetStartedView, welcomeBckView, passwordMasterLayout, orangePwdErrorView;
TextView welcomeText,errorTextView, letsGetStartedTextView, welcomeBckTxtView, errorPwdMsg;
//Password Error Handling
orangePwdErrorView = v.findViewById(R.id.orangePasswordErrorView);
errorPwdMsg = (TextView) v.findViewById(R.id.errorPasswordMessage);
//Layout code
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/sample_main_layout">
<FrameLayout
android:id="#+id/sample_content_fragment"
android:layout_weight="76.4"
android:layout_width="match_parent"
android:layout_height="0px" />
<FrameLayout
android:id="#+id/bottomPanel"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="23.6">
</FrameLayout>
</LinearLayout>
sample_content_fragment framelayout takes the below code
<RelativeLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<View
android:id="#+id/grey"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#58595B" />
<View
android:id="#+id/orange"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F26724"
android:visibility="invisible" />
<View
android:id="#+id/yellow"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FDB518"
android:visibility="invisible" />
<View
android:id="#+id/blue"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#1893D2"
android:visibility="invisible" />
<TextView
android:layout_width="260dp"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="#string/welcome"
android:id="#+id/welcomeTextView"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="51dp"
android:textColor="#ffffff"
android:textSize="20dp"
android:textStyle="bold"
android:visibility="invisible"
/>
<ImageView
android:layout_height="60dp"
android:layout_width="60dp"
android:id="#+id/clinicloud_logo"
android:clickable="true"
android:src="#drawable/clinicloud_icon"
android:layout_marginRight="50dp"
android:layout_alignParentStart="true"
android:layout_marginStart="35dp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="40dp" />
<View
android:id="#+id/orangeErrorView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F26724"
android:visibility="invisible" />
<EditText
android:layout_width="match_parent"
android:layout_height="90dp"
android:inputType="textEmailAddress"
android:ems="10"
android:id="#+id/emailEditText"
android:text="#string/enter_email"
android:layout_gravity="center"
android:background="#f4f4f4"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:visibility="invisible"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:id="#+id/errorMessage"
android:layout_alignTop="#+id/welcomeTextView"
android:layout_centerHorizontal="true"
android:textColor="#ffffff"
android:visibility="invisible"/>
<!--UI components for welcome back page-->
<View
android:id="#+id/welcomeBackView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#134F9F"
android:visibility="invisible" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/welcome_back"
android:id="#+id/welcomeBackTxtView"
android:textColor="#ffffff"
android:layout_alignTop="#+id/welcomeTextView"
android:layout_alignStart="#+id/clinicloud_logo"
android:textSize="20dp"
android:textStyle="bold"
android:visibility="invisible"/>
<EditText
android:layout_width="wrap_content"
android:layout_height="90dp"
android:ems="10"
android:id="#+id/password"
android:layout_alignTop="#+id/emailEditText"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:text="Password"
android:visibility="invisible"
android:background="#d2d1d1"
/>
<!--UI components for Let's get started page-->
<View
android:id="#+id/letsGetStartedView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#5C3A91"
android:visibility="invisible" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Let&apos;s get started"
android:id="#+id/letsGetStartedTxtView"
android:textColor="#ffffff"
android:layout_alignTop="#+id/welcomeTextView"
android:layout_alignStart="#+id/clinicloud_logo"
android:textSize="20dp"
android:textStyle="bold"
android:visibility="invisible"/>
<!--Linear layout to show the create and confirm password-->
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="180dp"
android:gravity="bottom"
android:layout_alignBottom="#+id/emailEditText"
android:layout_alignParentStart="true"
android:weightSum="1"
android:id="#+id/passwordMasterView"
android:visibility="invisible">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"
android:id="#+id/createPwd"
android:layout_weight="0.50"
android:background="#F4F4F4"
android:text="#string/create_password"
/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"
android:id="#+id/confirmPwd"
android:layout_weight="0.50"
android:background="#E3E3E3"
android:text="#string/confirm_password" />
</LinearLayout>
<!-- To show password errors-->
<LinearLayout
android:id="#+id/orangePasswordErrorView"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F26724"
android:visibility="invisible" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:id="#+id/errorPasswordMessage"
android:layout_alignTop="#+id/welcomeTextView"
android:layout_centerHorizontal="true"
android:textColor="#ffffff"
android:visibility="invisible"
/>
<!-- To show password errors-->
</RelativeLayout>
The java logic is in https://stackoverflow.com/questions/30523599/sliding-up-and-down-android
Please direct for any incorrect codings

I kept the view invisible and when required I made it visible and wrote the code to slide up.
I think you must do it in DialogFragment or custom AlertDialog that will be shown above your layout, if dont want to do this try envelop your RelativeLayout in FrameLayout and adding in it LinearLayout for example but visout your code difficult to say in what problem it is

You should consider using a library for the sliding panel, one that I've had excellent experiences with (and supports the functionality that your after) is umano's AndroidSlidingUpPanel. https://github.com/umano/AndroidSlidingUpPanel

Align android text and images in listview to be the same

I need some help with alignment of custom list view with image and text.
I'm trying with this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical|center"
android:paddingTop="20dp"
android:layout_weight="2"
android:text="TextView" />
</LinearLayout>
And I thought that weight is keeping the ratio of element, not the content of the element, but apparently it takes care about things inside the text view, so my list looks messy.
How to align it to be the same, no matter how long the text is in text view?
So the green line should be straight vertical line, no matter of text on right hand side.
Tnx

Basically, your layout should be this:
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical|center"
android:paddingTop="20dp"
android:layout_weight="2"
android:drawableLeft="#drawable/ic_launcher"
android:text="TextView" />
The android:drawableLeft="#drawable/ic_launcher" defines the leftmost compound drawable, and it will align nicely.

Remove android:layout_weight.
This will align you images since you define the width.
If you want to align the text too, remove android:gravity or set it to left.
You can add android:marginRight to the imageView for better readability.

use
android:layout_height="0dp"
in your textView. it will give fixed size to all your elements. here, the size shared by the weight param is variable as it depends on the amount of text.

Try this instead:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="2"
android:text="TextView" />
</LinearLayout>