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

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>

Related

Disabling scrolling after specific child

In my case, I have a HorizontalScrollView. What I need to achieve is that HorizontalScrollView should be scollable until a specific child. (By child I mean view lying inside HorizontalScrollView.) User should not be able to scroll the rest of it. My current minimum SDK is 21. So that I cannot use HorizontalScrollView.setOnScrollChange() method. It is available for API level 23+.
Searched the net for some time but could not find solutions suitable for my case.
How can I achieve this? Any suggestions would greatly help.
The reason for doing this is to achieve an affect where scrollbar stops from scrolling at a specified location. See the picture below.
You can kind of fake the sugested behaviour by adding a ScrollView which fills up half the screen and adding static elements right next to it.
below is a pseudo layout on how it can be done:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1">
<ScrollView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".5">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FF0000">
<!-- Scrollable Items here -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="item1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="item2"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="item3"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="item4"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="item5"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="item6"/>
</LinearLayout>
</ScrollView>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:orientation="horizontal"
android:background="#00FF00">
<!-- Unscrollable Items here -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="item1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="item2"/>
</LinearLayout>
</LinearLayout>
the important part is weightSum=1 and the layout_weights of .5 with a respective width of 0 . You can adjust them to your needs of course.

Android: Container XML Layout wrap weight and fill height

I have been battling for a couple of days trying to create a custom layout in Android divided in 3 parts, a "vote" counter container that displays the amount of people that voted a message, a text message container that will contain the text and the author of a message and a button container that will be used to vote up or down a message.
So far I have this code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/containerInner"
>
<!-- # VOTES CONTAINER -->
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/containerVotes"
android:layout_centerVertical="true"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/votesPost"
android:textStyle="bold"
android:textSize="16sp"
/>
</RelativeLayout>
<!-- MESSAGE CONTAINER -->
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/containerText"
android:layout_marginLeft="4dp"
android:layout_marginTop="4dp"
android:layout_toRightOf="#+id/containerVotes"
android:background="#color/gray"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:id="#+id/titleGlobus"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/AutorGlobus"
android:textColor="#000000"
android:textSize="12sp"
android:textStyle="italic"
android:maxWidth="180dp"
android:layout_weight="0.1"
android:layout_below="#+id/titleGlobus"
/>
</RelativeLayout>
<!-- VOTE UP/DOWN CONTAINER -->
<RelativeLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/containerButtons"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/containerText"
android:layout_toEndOf="#+id/containerText"
>
<RelativeLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/containerButtonUp"
>
<at.markushi.ui.CircleButton
android:layout_width="32dip"
android:layout_height="32dip"
android:src="#mipmap/ic_arrow_drop_up_black_24dp"
app:cb_color="#color/white"
app:cb_pressedRingWidth="8dip"
android:id="#+id/upvote_button"
/>
</RelativeLayout>
<RelativeLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/containerButtonDown"
android:layout_below="#+id/containerButtonUp"
>
<at.markushi.ui.CircleButton
android:layout_width="32dip"
android:layout_height="32dip"
app:cb_color="#color/white"
app:cb_pressedRingWidth="8dip"
android:src="#mipmap/ic_arrow_drop_down_black_24dp"
android:id="#+id/downvote_button"
/>
</RelativeLayout>
</RelativeLayout>
The Layout I am getting in the phone using the above code is this:
And I want to achieve this:
So there are two main things that I need to achieve here:
Make the RelativeLayout containerText fill the whole height of its superior container.
Alight the Author name to the right of the container, but aligned just at the end of the "message" TextView.
I have been trying to fix the fix issue changing the height of the containerText container to fill_parent without success, changing all the way up to the main container all the height properties to fill_parent.
If I try to align the author name to the right using alignParentRight=true , the RelativeLayout then takes the whole space of the screen, pushing out the buttons container. I have also tried changing the way I am positioning the different layouts respect others, changing the toLeftOf or toRightTo, with terrible results.
Any help would be highly appreciated as I am stuck with this issue.
Cheers!
Try this:
<!-- MESSAGE CONTAINER -->
<RelativeLayout
android:layout_width="wrap_content"
<!-- Set this height to match_parent -->
android:layout_height="match_parent"
android:id="#+id/containerText"
android:layout_marginLeft="4dp"
android:layout_marginTop="4dp"
android:layout_toRightOf="#+id/containerVotes"
android:background="#color/gray"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:id="#+id/titleGlobus"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/AutorGlobus"
android:textColor="#000000"
android:textSize="12sp"
android:textStyle="italic"
android:maxWidth="180dp"
android:layout_weight="0.1"
<!-- Removed below tag and added alignParentBottom and alignParentRight -->
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
/>
</RelativeLayout>

Android Layout: Comments activity similar to the Facebook app

I have been looking at Facebook comment activity:
I keep wondering how do they manage to make their edittext increase in size from one single line to a maximum of 4 lines, and at the same time, the recyclerview that contains the posts also adjust upwards and reduces in size. This happens automatically when you type in the text.
I'm trying to duplicate their layout myself by doing the following but I can not display more then 2 lines. It keeps on limiting itself to the size of the "Send" arrow, but the edittext never goes over the recyclerview in my example below.
The following is my xml layout code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
android:background="#color/white"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/like_box"
android:text="Number of Likes goes here"
android:maxLines="1"
android:minLines="1"
android:layout_margin="16dp"
/>
<View
android:layout_width="match_parent"
android:layout_height="0.2dp"
android:id="#+id/divider"
android:layout_below="#+id/like_box"
android:background="#color/half_black"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/my_recycler_view"
android:layout_below="#+id/divider"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/commenttext" />
<View
android:layout_width="match_parent"
android:layout_height="0.2dp"
android:id="#+id/divider2"
android:layout_below="#+id/my_recycler_view"
android:background="#color/half_black"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/commenttext"
android:layout_toLeftOf="#+id/send"
android:background="#null"
android:paddingLeft="16dp"
android:textSize="16sp"
android:hint="Add a comment here"
android:layout_alignTop="#+id/send"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true" />
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:id="#+id/send"
android:src="#drawable/ic_action_send_now"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
Does anyone know what the correct xml layout code is to ensure that both the edittext and recyclerview adjust upwards when text is entered? I thought it would just be something simple like setting "wrap_content" to my edittext which I have already done but it still does not adjust properly.
Anoop M's answer seems to be the closest to what I want to do but the recyclerview does not adjust properly - see image below. Imagine if the blue portion of the screen was filled with text, the edittext will end up hiding the text in the blue section when you enter more than 4 lines. The edittext just seems to go over the recyclerview. This does not happen on the facebook app, comments are fully shown as the recyclerview adjust upwards when the edittext size increases.
I suggest using a LinearLayout as the parent container. You can then achieve the desired result by applying layout_weights on all child views:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/like_box"
android:text="Number of Likes goes here"
android:maxLines="1"
android:minLines="1"
android:layout_margin="16dp"
android:layout_weight="0"/>
<View
android:layout_width="match_parent"
android:layout_height="0.2dp"
android:id="#+id/divider"
android:background="#color/half_black"
android:layout_weight="0"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/my_recycler_view"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<View
android:layout_width="match_parent"
android:layout_height="0.2dp"
android:id="#+id/divider2"
android:background="#color/half_black"
android:layout_weight="0"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:orientation="horizontal">
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/commenttext"
android:background="#null"
android:paddingLeft="16dp"
android:textSize="16sp"
android:maxLines="4"
android:inputType="textMultiLine"
android:hint="Add a comment here" />
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:id="#+id/send"
android:src="="#drawable/ic_action_send_now"
android:layout_weight="0" />
</LinearLayout>
</LinearLayout>
Notable changes:
parent container is now LinearLayout
all child views have layout_weights assigned
the EditText and the send button have been housed inside a horizontal LinearLayout.
maxLines attribute of the EditText has been set to 4 as per your requirements. this way, the EditText will keep growing in height until its 4 lines tall, after which it will start to scroll. The send button will remain aligned to the first line.
inputType="textMultiLine" has been added to the EditText to indicate that the content of this EditText can span multiple lines.
the RecyclerView will shrink when the EditText's line-count increases and vice-versa.
when you are defining your activity in manifest add code given below,
<activity
android:name="com.companyname.applicationname"
android:windowSoftInputMode="adjustResize|adjustPan">
And also you can use you edit text as given below.
<EditText
android:inputType="textMultiLine" <!-- Multiline input -->
android:lines="8" <!-- Total Lines prior display -->
android:minLines="6" <!-- Minimum lines -->
android:gravity="top|left" <!-- Cursor Position -->
android:maxLines="10" <!-- Maximum Lines -->
android:layout_height="wrap_content" <!-- Height determined by content -->
/>
You need to have singleLine = false attribute set for Edit Text
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/commenttext"
android:layout_toLeftOf="#+id/send"
android:background="#null"
android:paddingLeft="16dp"
android:textSize="16sp"
android:singleLine="false"
android:hint="Add a comment here"
android:layout_alignTop="#+id/send"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true" />
Try this out.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="65dp"
android:fadeScrollbars="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<LinearLayout
android:id="#+id/topedittext_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:orientation="vertical">
<!--Your Contents Goes Here-->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Your Contents Goes Here" />
</LinearLayout>
</RelativeLayout>
</ScrollView>
<RelativeLayout
android:id="#+id/tos_text_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="20dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#null"
android:gravity="center"
android:hint="Type message"
android:maxLines="4"
android:minHeight="60dp"
android:padding="7dp"
android:singleLine="false"
android:textColor="#88000000"
android:textColorHint="#bdbdbd"
android:textSize="15sp" />
</RelativeLayout>
</RelativeLayout>
For set the max and min lines in XML use.
android:maxlines="your choice" // in integer
android:minlines="your choice" // in integer
or if you want to show text in one line use:
android:ellipsize

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

Make a text view overlay another text view

I am trying to make a text view to overlay the above text view, I have tried the text align with no success; I can accomplish this by adding a large amount of padding but I do not want to use padding because I ran into other issues in android variety in screen sizes. I will post an image of what I'm trying to do and also post then XML code. Looking forward to some help here, thanks in advance.
Image(I am trying to make that black bar with the text android /Design overlay the above area that says busybusy Development as of right now the black text view is just pushing the above text view up were I would like it to just overlay but stays at the same position) http://imgur.com/ebgNTNk
<?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">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/org_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:gravity="center_horizontal"
android:paddingTop="42dp"
android:paddingBottom="42dp"
android:background="#drawable/dashboard_business_image"
android:textColor="#color/busy_black"
android:textStyle="bold"
android:textAppearance="?android:attr/textAppearanceMedium">
</TextView>
<TextView
android:id="#+id/project_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:layout_below="#id/org_name"
android:layout_marginRight="4dp"
android:gravity="center_horizontal"
android:layout_gravity="bottom"
android:paddingTop="2dp"
android:paddingBottom="2dp"
android:background="#color/busy_translucent_black"
android:textColor="#color/busy_white"
android:textStyle="normal"
android:textAppearance="?android:attr/textAppearanceSmall"
android:visibility="gone">
</TextView>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<include layout="#layout/dashboard_clock_in_button" />
<include layout="#layout/dashboard_clock_out_button" />
<include layout="#layout/dashboard_paused_button" />
<ListView
android:id="#+id/action_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:divider="#color/busy_divider_color"
android:dividerHeight="0dp">
</ListView>
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:layout_weight="0"
android:gravity="center_horizontal"
android:paddingTop="32dp"
android:paddingBottom="32dp"
android:background="#color/busy_white"
android:textColor="#color/busy_black"
android:textStyle="bold"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
Reading this, it appears you want the project_name view to overlay the org_name view. You can do this by aligning the bottom of the views.
Change this line:
android:layout_below="#id/org_name"
To this:
android:layout_alignBottom="#id/org_name"
That will align the bottom of the two views, effectively placing project_name on top of the org_name view.
The reason they aren't overlapping is the android:layout_below="#id/org_name" in the second TextView. If you remove that, I think it should work as you want it to. If not, you might want to try a FrameLayout instead of a RelativeLayout.

Categories

Resources