I am trying to create a UI using relative layout where in the UI should look as such:
In the top of the screen i have a TextView
followed by another TextView
followed by scroll view where in i have to display the text in the
scrollable format
in the end i have a imageview.
How can i achieve this.
I have tried using the combination of Relative and Linear Layout but the elements gets overlapped. Anyone have any suggestions on how to proceed?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:background="#drawable/background_main" android:id="#+id/g_description">
<TextView android:id="#+id/titleBar" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:background="#drawable/header"
android:layout_alignParentTop="true" android:gravity="center"
android:text="#string/aboutus" android:textAppearance="? android:attr/textAppearanceLarge"
android:textStyle="bold" />
<TextView android:id="#+id/wd_name"
android:layout_width="fill_parent" android:layout_below="#id/titleBar"
android:layout_height="wrap_content" android:textStyle="bold"
android:textColor="#FFFFFF" android:textSize="18dip"
android:background="#drawable/background_main" android:gravity="center" />
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrolltext" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_below="#id/wd_name"
android:padding="5dip">
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/wd_description"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:textSize="14dip" android:textColor="#FFFFFF">
</TextView>
</LinearLayout>
</ScrollView>
<ImageView android:id="#+id/bottomBar" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:src="#drawable/bottom_bar"
android:layout_alignParentBottom="true" />
you can achieve it like this:
Take relative layout and put textview in it.
Take another textview and add this to it android:layout_below="id of the 1st textview".
Take scrollview and add this to it android:layout_below="id of the 2nd textview".
Take linear layout inside scrollview.
Put textview inside linear layout.
Take imageview and add this to it android:layout_below="id of the scrollview".
Now your layout is ready and if you get any error then let me know with your code....
If you have a series of elements that you want to flow down the screen, then it sounds like you just need a LinearLayout.
It goes as below. Placing a TextView inside scrollview will make it scrollable. Reset is selfexplanary.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView android:layout_height="wrap_content" android:layout_width="fill_parent" android:text="Below TOP TextView" android:id="#+id/TextView01" android:layout_alignParentTop="true"></TextView>
<TextView android:layout_height="wrap_content" android:layout_width="fill_parent" android:text="TOP TextView" android:id="#+id/TextView02" android:layout_below="#id/TextView01"></TextView>
<ScrollView android:layout_height="wrap_content" android:layout_width="fill_parent" android:fillViewport="true" android:layout_below="#id/TextView02">
<TextView android:id="#+id/textView1" android:layout_height="wrap_content" android:text="Scrollable textViewafkasjf;laksjflaskjf;lasjf;alsfjal;sfj;aslfj;aslfja;slfj;aslkfj;asldfj;aslkfjasl;dfj;a asfj aslfj asldfjk as;lfjk asfjka;sldf jl;asj df;asdfjasfj aslfj asljf asjfl;asfasj fasj f;asj flas jf;lasjf;asjkf;las f;asj df;as jf;lasjf ;asjf;asjf;asjf;asjf;asjf;jasf;asfja s;dfa;sf asf jf asf a; sldfja;slfj;asldfjk" android:layout_width="fill_parent"></TextView>
</ScrollView>
<ImageView android:src="#drawable/icon" android:layout_height="wrap_content" android:id="#+id/imageView1" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_width="fill_parent"></ImageView>
</RelativeLayout>
It works fine with setting android:orientation="vertical" for each text view.
Related
I'm new in the world of Android development, and I'm trying to learn how to getting started from here.
Now I've followed all steps until to put the Zip Code and the Number on the same line. I don't understand how can I manage this, if I drag and drop the Number control beside the TextView the IDE put the Number above the control or to the bottom. I don't know how to explain correctly, anyway, this is an image:
and this is the source code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/relativeLayout1" />
<EditText
android:inputType="number"
android:layout_height="wrap_content"
android:id="#+id/ZipCodeEdit"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:textSize="20sp"
android:layout_width="100sp"
android:textColor="#9933FF" />
<TextView
android:text="Zip Code: "
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/ZipCodeLabel"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:textSize="20sp" />
</LinearLayout>
from the site should be like this:
what is wrong? Sorry if something is not clear, or if the category tag is wrong.
Try 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" >
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="25px"
android:minWidth="25px" >
<EditText
android:id="#+id/ZipCodeEdit"
android:layout_width="100sp"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:inputType="number"
android:textColor="#9933FF"
android:textSize="20sp" />
<TextView
android:id="#+id/ZipCodeLabel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:layout_toRightOf="#+id/ZipCodeEdit"
android:text="Zip Code: "
android:textSize="20sp" />
</RelativeLayout>
</LinearLayout>
You should make proper use of LinearLayout, RelativeLayout, FrameLayout and TableLayout for the desired alignments.
Here is your solution.:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/relativeLayout1" >
<EditText
android:inputType="number"
android:layout_height="wrap_content"
android:id="#+id/ZipCodeEdit"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:textSize="20sp"
android:layout_width="100sp"
android:textColor="#9933FF" />
<TextView
android:text="Zip Code: "
android:layout_width="match_parent"
android:layout_toRightOf="#+id/ZipCodeEdit"
android:layout_height="wrap_content"
android:id="#+id/ZipCodeLabel"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:textSize="20sp" />
</RelativeLayout>
</LinearLayout>
What you were doing Wrong :
You are trying to align EditText and TextView one beside another inside RelativeLayout but you've closed the relative layiut right where it started.
that makes the EditText and TextView the child view of the LinearLayout(Vertical)
As the text views are behaving as the children of Linear vertical layout there is no use of RelativeLayout hence aligning both views one below another.
One more thing when you fix that and put both the text view within RelativeLayout you have to align one view in relation with the another.
In this case:
android:layout_toRightOf="#+id/ZipCodeEdit"
Let me know if any problem.
Happy Coding
You are using a vertical LinearLayout as the parent layout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
Change android:orientation="vertical" to android:orientation="horizontal".
You can also remove the RelativeLayout as it's not really being used(nothing inside it).
<?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">
<EditText
android:inputType="number"
android:layout_height="wrap_content"
android:id="#+id/ZipCodeEdit"
android:layout_marginLeft="10dp"
android:textSize="20sp"
android:layout_width="100dp"
android:textColor="#9933FF" />
<TextView
android:text="Zip Code: "
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/ZipCodeLabel"
android:layout_marginLeft="10dp"
android:textSize="20sp" />
</LinearLayout>
This should fix your problem. I will explain if this works for you.
I have a LinearLayout with a custom button and then another LinearLayout with two TextViews, which is always partly cut off on the edge of the screen. I have tried tons of different combinations of fill_parents, match_parents, and wrap_contents, as well as trying to add layout_weights, but nothing solved it, nor did any answer to any similar questions on this site. Here is my XML code, thanks for any help!
<?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="horizontal" >
<com.goldtrimdevelopment.sites.google.com.interesthub.SquareButton
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1" >
<Button
android:id="#+id/list_article_like_button"
style="?android:attr/borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:background="#drawable/custom_like_button"
android:contentDescription="#string/like_button"
android:padding="5dip" />
</com.goldtrimdevelopment.sites.google.com.interesthub.SquareButton>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/article_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="3"
android:textSize="16sp" />
<TextView
android:id="#+id/article_link"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="3"
android:singleLine="true"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
I figured from your xml file that you want the layout to be a custom button and to its right 2 textviews which are vertically linear, while the buttons and the textviews are horizontall linear. Try the following values in your layout. I think it must solve the issue.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" or "wrap content"
android:orientation="horizontal" >
and the next linear layout as
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
and for both textviews set
android:layout_width="150dp"
try it and let me know.
I have the below layout which contain mainly:
Relative layout, which act as header with Textview and button.
and Listview.
I would like to make the "header" which is the above relative layout to be transparent and show the listview as user scroll down the list view.
I know how to make the layout transparent, but I dont know how to show the listview as background for the "header".
<?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" >
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/buttonlayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#FFDBE2ED"
android:paddingBottom="0dp"
android:paddingTop="0dp"
>
<TextView
android:id="#+id/txtTest"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center_vertical"
android:layout_centerVertical="true"
android:paddingLeft="0dp"
android:text="#string/list_header"
android:textColor="#000000"
android:textSize="25sp"
android:textStyle="bold">
</TextView>
<Button
android:id="#+id/btnClear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="0px"
android:layout_marginLeft="10px"
android:layout_marginRight="3px"
android:layout_marginTop="6px"
android:height="0dp"
android:text="Clear"
android:textSize="15sp"
android:width="70dp"
android:layout_alignParentRight="true"
>
</Button>
</RelativeLayout>
<ListView
android:id="#+id/mylist1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/form"
android:layout_alignParentTop="true" >
</ListView>
</LinearLayout>
You are using a LinearLayout as the root container and in linear layout the views are placed one over the other so you cannot overlap one view over the other. If you want an overlapping effect you can use either the FrameLayout or the RelativeLayout as the root container.
Using RelativeLayout is a better option.
Here is sample code for this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ListView
android:id="#+id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
</ListView>
<Button
android:id="#+id/view"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:background="#00cc0000"
android:layout_alignParentTop="true" />
</RelativeLayout>
Here the button is overlapping the list view.
I hope this will help :)
Try moving the ListView inside of your RelativeLayout, as the first element (this ensures that it's in the back). This way, the other views are just on top of the ListView, and if you make them transparent you should get the desired effect!
Oh, and you should make the ListView then fill the RelativeLayout:
<ListView
android:id="#+id/mylist1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true" >
</ListView>
, and make the RelativeLayout fill the screen:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/buttonlayout2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
...
I have a header for a list that contains two image buttons. I want one of those image buttons to be on the left, and the other to be on the right. This is what my xml file looks like right now but it does not work, it just puts the two image buttons on the left together. I have also tried without the additional LinearLayouts but no luck.
<?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="horizontal"
android:gravity="fill_horizontal"
android:background="#drawable/list_header_background">
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:gravity="left"
android:background="#drawable/list_header_background">
<ImageButton
android:id="#+id/refreshBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="4dp"
android:src="#drawable/ic_refresh"
android:background="#drawable/list_header_background"
/>
</LinearLayout>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:gravity="right"
android:background="#drawable/list_header_background">
<ImageButton
android:id="#+id/battleBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="4dp"
android:src="#drawable/ic_battle"
android:background="#drawable/list_header_background"
/>
</LinearLayout>
</LinearLayout>
As kabuko wrote, the RelativeLayout width is equal to the parent width. When we have a child view inside that RelativeLayout, we can use the android:layout_alignParentXXXXXX="true" parameter in order to align it (the child) accordingly to the parent.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:background="#drawable/list_header_background">
<ImageButton
android:id="#+id/refreshBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="4dp"
android:src="#drawable/ic_refresh"
android:layout_alignParentLeft="true"
android:background="#drawable/list_header_background"
/>
<ImageButton
android:id="#+id/battleBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="4dp"
android:src="#drawable/ic_battle"
android:layout_alignParentRight="true"
android:background="#drawable/list_header_background"
/>
</RelativeLayout>
You probably want to use a RelativeLayout with layout_alignParentLeft and layout_alignParentRight on the buttons.
I am pretty sure that a parameter will do the trick but I can't find the one I am looking for.
I am trying to display one TextView -file_type- below the file_title TextView.
What would be the parameter that I should add to the file_type TevxtView block to come under the file_title TextView block ?
There is what I am doing :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView android:id="#+id/file_type_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="25px"
android:paddingTop="25px" />
<TextView android:id="#+id/file_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="30px"
android:textSize="22sp"
android:background="#FF0000"
android:textColor="#FFFFFF" />
<TextView android:id="#+id/file_type"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="30px"
android:paddingTop="10px"
android:layout_gravity="bottom"
android:textSize="22sp"
android:background="#FF0000"
android:textColor="#FFFFFF" />
</LinearLayout>
Thank you ,
By default linearlayout wraps things horizontally. If you want the imageview to be at the left of the both textviews (that are wrapped vertically), use following:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView .../>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:orientation="vertical">
<TextView1..../>
<TextView2..../>
</LinearLayout>
</LinearLayout>
Or you can just pass the parameter android:orientation="vertical" to the top level LinearLayout. Have a look at RelativeLayout definition as well.