TextViews overlapping using a RelativeLayout - android

I know I can use a LinearLayout to do this, but I have to use a RelativeLayout because I have another RelativeLayout that I need to anchor to the bottom of the overall layout, as sort of a "status" bar, and I want the title and text to be above the status bar, aligned to the top. Using a RelativeLayout was the only way I could get the status bar to work. The only problem is the title and text TextViews overlap each other and I need the text to be immediately below the title:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:paddingTop="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
>
<RelativeLayout
android:id="#+id/status"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:paddingTop="10dp"
>
<TextView
android:id="#+id/status"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
/>
</RelativeLayout>
<TextView
android:id="#+id/title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#id/status"
android:layout_alignParentTop="true"
/>
<TextView
android:id="#+id/text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/title"
android:layout_alignParentTop="true"
/>
</RelativeLayout>
</FrameLayout>

You can use LinearLayout as a children of RelativeLayout.
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentTop="true">
<TextView
android:id="#+id/title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<TextView
android:id="#+id/text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>

XML layouts are rendered in the order they are "read" in. So you would want to do something like this:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:paddingTop="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
>
<TextView
android:id="#+id/title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#id/status"
android:layout_alignParentTop="true"
/>
<TextView
android:id="#+id/text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/title"
android:layout_alignParentTop="true"
/>
<RelativeLayout
android:id="#+id/status"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:paddingTop="10dp"
>
<TextView
android:id="#+id/status"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
/>
</RelativeLayout>
</RelativeLayout>
</FrameLayout>
I'd also wrap the two textViews in a linearLayout like someone else had mentioned. This will help you a lot.
Hope that helps.

Remove the android:layout_alignParentTop="true" from your text TextView. That'll solve your problem!

Related

How to make a text center top and other text center of screen in LinearLayout?

I have two textviews. I want to make a textview center of top which can be used as title of application. And the second textview is center of screen which used to show detail. I am use ScrollView and LinearLayout as below setting. However, it does not work for second textview. Could you see my layout file and give me the way to solve it? I need to use ScrollView and LinearLayout, because I don't want to modify the java code.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
</LinearLayout>
<TextView
android:id="#+id/title_app"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:text="Main title-Center-top"
android:layout_gravity="center"
android:gravity="center_horizontal"
android:textSize="20sp"
android:layout_marginTop="20dp"
/>
<TextView
android:id="#+id/display"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:textSize="20sp"
android:gravity="center"
android:text="I want to center of screen"
/>
</LinearLayout>
</ScrollView>
You can do like this
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:orientation="horizontal">
<TextView
android:id="#+id/title_app"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:text="Main title-Center-top"
android:layout_gravity="center"
android:gravity="center_horizontal"
android:textSize="20sp"
android:layout_marginTop="20dp"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal">
<TextView
android:id="#+id/display"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:textSize="20sp"
android:gravity="center"
android:text="I want to center of screen"
/>
</LinearLayout>
</LinearLayout>
</ScrollView>
This is the full xml code that should do what you want, I just tested it and works:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/title_app"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="Main title-Center-top"
android:layout_gravity="center"
android:gravity="center_horizontal"
android:textSize="20sp"
android:layout_marginTop="20dp"
/>
<TextView
android:id="#+id/display"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="20sp"
android:gravity="center"
android:text="I want to center of screen"
/>
</LinearLayout>
Your code looks okay to me.
Just put android:fillViewport="true" on the ScrollView
Your problem seems like ScrollView is not stretching to its full height.

Android textview on imageview

I am trying to place an TextView on a ImageView in the bottom center of the RelativeLayout.
I am able to place the TextViewin the center but not able to place it in the bottom .
Can anyone guide me.
here is my XML
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/back"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/eventimage"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:background="#000000">
</ImageView>
<TextView
android:id="#+id/text98"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_centerVertical="true"
android:singleLine="true"
android:textColor="#color/white"
android:text="LAST"
android:textStyle="bold"
android:textSize="18sp"/>
</RelativeLayout>
on the textView use the following attributes android:layout_centerHorizontal="true" instead of android:layout_centerVertical="true" and add android:alignParentBottom=true". Also look at the relative layout options to understand how to work with it.
try
<TextView
android:layout_alignParentBottom="true"
...
You could try using something like
android:layout_alignBaseline (#id/eventimage);
and add some padding on the bottom later
You can use this
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/back"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/eventimage"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:background="#000000">
</ImageView>
<TextView
android:id="#+id/text98"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal"
android:singleLine="true"
android:textColor="#color/white"
android:text="LAST"
android:layout_alignParentBottom="true"
android:textStyle="bold"
android:textSize="18sp"/>
</RelativeLayout>
Add this to your TextView:
android:layout_alignBottom="#id/eventimage"
Use this code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/back"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/eventimage"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:background="#000000">
</ImageView>
<TextView
android:id="#+id/text98"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_alignParentBottom="true"
android:alignBottom="#+id/eventimage"
android:singleLine="true"
android:textColor="#color/white"
android:text="LAST"
android:textStyle="bold"
android:textSize="18sp"/>
</RelativeLayout>
Hope it will help you.
Try the following:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/back"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/eventimage"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:background="#000000">
</ImageView>
<TextView
android:id="#+id/text98"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:singleLine="true"
android:textColor="#color/white"
android:text="LAST"
android:textStyle="bold"
android:textSize="18sp"/>
</RelativeLayout>
This layout works according to your requirement .by setting the gravity bottom of the linear layout ,its chilld view is automatically aligned at center- bottom position
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/back"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/ic_launcher"
android:gravity="bottom">
<TextView
android:id="#+id/text98"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:gravity="center"
android:singleLine="true"
android:text="LAST"
android:textSize="18sp"
android:textStyle="bold"
android:textColor="#android:color/white"/
>
</LinearLayout>
android:layout_alignParentBottom to move the control to the bottom of the screen.

Align a layout to the top of another layout in order to make a status bar

I have a layout like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/parent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#e4e8ed"
android:gravity="top" >
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/app"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0px"
android:orientation="vertical"
android:padding="0px" >
<include
android:id="#+id/tabBar"
layout="#layout/tab" />
<Button
android:id="#+id/nist"
android:layout_width="match_parent"
android:layout_height="67dp"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="3dp"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:layout_marginTop="3dp"
android:background="#drawable/ready"
android:textColor="#FFFFFF" />
<ListView
android:id="#+id/lastCases"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="2.08"
android:longClickable="true" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="7dp"
android:layout_below="#id/app"
android:background="#drawable/dropshadow_custom" >
<TextView
android:id="#+id/error"
style="#style/AudioFileInfoOverlayText"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="120dp"
android:gravity="center"
android:text="No Cases"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#D6D8D9"
android:textSize="40dp" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/app"
android:background="#000000"
android:gravity="bottom"
android:orientation="vertical" >
</LinearLayout>
</RelativeLayout>
I try to align the last LinearLayout on top of the layout which holds the ListView by using this tag: android:layout_alignTop="#+id/app" But it doesn't seem to work. How can accomplish this?
Many Thanks!
Without any content a Layout with layout_width="wrap_content" and layout_height="wrap_content" is not shown as its width and height have a value of 0! Even if you have set some background color nothing will appear! You either have to add some content to the layout or you have to define another layout dimension. The position of your layout with android:layout_alignTop="#+id/app" should be correct. Hope that helps.
You can set "layout_below" on the first layout targeting to the last layout.
The code is that, I put a button inside the top layout as an exemple (Obs: In your listview you should use 0dp in layout_weight cause you already use layout_weight ^^) :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/parent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#e4e8ed"
android:gravity="top" >
<LinearLayout
android:id="#+id/app"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0px"
android:orientation="vertical"
android:layout_below="#+id/top"
android:padding="0px" >
<Button
android:id="#+id/nist"
android:layout_width="match_parent"
android:layout_height="67dp"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="3dp"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:layout_marginTop="3dp"
android:textColor="#FFFFFF" />
<ListView
android:id="#+id/lastCases"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2.08"
android:longClickable="true" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="7dp"
android:layout_below="#+id/app" >
<TextView
android:id="#+id/error"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="120dp"
android:gravity="center"
android:text="No Cases"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#D6D8D9"
android:textSize="40dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/top"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:background="#000000"
android:gravity="bottom"
android:orientation="vertical" >
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Top"
/>

issue with a android linear layout

i have a problem with the linear layout of android.
i have something like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/myimg"
android:contentDescription="#string/desc" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/a" />
<EditText
android:id="#+id/editText1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:inputType="number" />
</LinearLayout>
the problem is, that on some bigger devices everything is good. but on smaler devices i just see the image and the textview and edittext is not visible. and its not possible to scroll down.
how to avoid this?
Put the whole thing into a ScrollView. Nothing easier than that!
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/myimg"
android:contentDescription="#string/desc" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/a" />
<EditText
android:id="#+id/editText1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:inputType="number" />
</LinearLayout>
</ScrollView>
It is because LinearLayout is not supposed to scroll down automatically. If you want to make your views scroll, you should place the layout inside a ScrollView:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/myimg"
android:contentDescription="#string/desc" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/a" />
<EditText
android:id="#+id/editText1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:inputType="number" />
</LinearLayout>
</ScrollView>

Android widgets layout setup

In my app i have a custom dialog whose layout is like the following:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical"
android:scrollbars = "vertical"
android:scrollbarAlwaysDrawVerticalTrack = "true"
android:padding="10dp" >
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal" >
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="blablabla...."/>
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="10dp" android:src="#drawable/book1"/>
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal" >
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="blablablablablablablablabla..."/>
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="10dp" android:src="#drawable/book2"/>
</LinearLayout>
</LinearLayout>
</ScrollView>
That is, i show a list of two horizontally placed widgets: a TextView showing some text and an, adjacent to the text, an ImageView widget showing an image.
What i would like to do is to show the ImageView widgets in such a way that they are aligned, that is, the image 1 start at the same column of image 2.
How can i do that?
Thx!
I'm not exactly sure what you are hoping for, but I would do the following:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dp"
android:scrollbarAlwaysDrawVerticalTrack="true"
android:scrollbars="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="blablabla...." />
<ImageView
android:id="#+id/image1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_alignParentRight="true"
android:src="#drawable/book1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/image1"
android:text="blablablablablablablablabla..." />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_below="#+id/image1"
android:layout_alignParentRight="true"
android:src="#drawable/book2" />
</RelativeLayout>
</ScrollView>
I changed it to a relative layout and used some attributes such as android:layout_below
and android:layout_alignParentRight="true to get these changes. I hope this helps.

Categories

Resources