i used nested LinearLayouts for the purpose of putting the EditTexts and Buttons in the center of the screen like this:
I want to change the background of this. So I inserted another LinearLayout on the top of everything else. But its not working. All I can see is black which indicates that I have covered the Editext and Buttons.
I think have to arrange the layouts properly.
any suggestions on how i may put a background(i.e. color, as of now)?
I am posting my xml.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#+id/OceanBlue">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="right" >
<EditText
android:id="#+id/et_username"
android:layout_width="170px"
android:layout_height="wrap_content"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/et_password"
android:password="true"
android:layout_width="170px"
android:layout_height="wrap_content"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/button_ok"
android:text="Login"
android:layout_width="86px"
android:layout_height="wrap_content">
</Button>
<Button
android:id="#+id/button_cancel"
android:text="Cancel">
</Button>
</LinearLayout>
</LinearLayout>
I dont know how you are getting this without specifying any layout_height or layout_width
Use
android:layout_width="fill_parent"
android:layout_height="fill_parent"
in your main parent linear layout.I think it will solve your issue.
Are you able to see the layout, thats unexpected? You did not specify the height or width for parent layout so i think that is the problem.
In case of having these kinds of designs its better to use relative layout which provides main features to deign the layout as our wish
Related
I am in the process of designing my first Android application and I am trying to get the hang of creating an XML layout. (I have a great deal of experience with Java)
Essentially what I wanna do:
Where the outlines describes:
Blue: A basic View (where i can set a text)
Red: A ButtonView (Used so the user can synchronize data)
Green: A nested RelativeLayout (Where i am going to add a lot of other stuff)
More specifically what i wanna do:
So my question is this: How can i set up the different layouts? I am having the must trouble with setting up the blue and red views because i want the red view to fill up around 25% of the screen width(and the blue to fill up the last 75%).
Thank you in advance.
Use layout_weight property to specify the percentage of screen space a view takes.
Like here, for e.g:
<LinearLayout android:layout_height="match_parent" android:layout_width="match_parent"
android:orientation="vertical" .........>
<LinearLayout android:layout_height="wrap_content" android:layout_width="match_parent"
android:orientation="horizontal">
<EditText android:layout_height="wrap_content" android:layout_width="0dip"
android:layout_weight="3"/>
<Button android:layout_height="wrap_content" android:layout_width="0dip"
android:layout_weight="1"/>
</LinearLayout>
//Other view
</LinearLayout>
Use following xml, this is specially designed for you.
<?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"
android:layout_alignParentLeft="true"
android:layout_weight="0.75">
<TextView
android:id="#+id/headingTextView"
style="#android:style/TextAppearance.WindowTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Cafe Vigeos"
android:textColor="#android:color/white"
android:textSize="30sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_weight="0.25">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/nested_relative_layout"
android:layout_width="match_parent"
android:layout_height="fill_parent" >
</RelativeLayout>
</LinearLayout>
I wish to keep a button at the bottom of my Activity screen. It has to be fixed irrespective of the size of scrollview above it. The problem is that once the textviews of the scrollview take up some place, the height of my button keeps decreasing and it eventually gets pushed out of the activity screen. This is the layout I am using.
<?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">
<TextView android:id="#+id/tvBanner" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" android:gravity="center"
android:text="Practice Exam" />
<ScrollView android:id="#+id/Scroll" android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout android:id="#+id/LinearLayout1"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:orientation="vertical">
<TextView android:id="#+id/tvDesc" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_margin="10dp"
android:gravity="center" android:paddingTop="40dp" android:text="#string/welcom"
android:textSize="20sp" />
<TextView android:id="#+id/tvURL" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_marginBottom="30dp"
android:paddingTop="10dp" android:layout_gravity="center"
android:text="hello" android:textColor="#android:color/white"
android:typeface="sans" />
</LinearLayout>
</ScrollView>
<RelativeLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:gravity="bottom">
<Button android:id="#+id/btBottom" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_weight="1"
android:text="Enter" />
</RelativeLayout>
</LinearLayout>
I have also tried using android:weight=1 and android:layout_height=0dp in the Scrollview. But this removes the entire Scrollview portion from my activity and I can't see anything.
I do know that there are many similar questions asked about this and believe me, I have tried many of these. However, none of the tricks have worked for me. I have spent almost half a day fixing this. Kindly help.
For a case like this always use RelativeLayouts. A LinearLayout is not intended for such a usage.
Try this:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true">
<Button android:id="#+id/btBottom"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Enter"
android:layout_alignParentBottom="true"/>
<ScrollView
...
android:layout_above="#id/btnGetMoreResults"/>
</RelativeLayour>
You should try using RealativeLayout instead of Linear, and then you could use
android:layout_above="#+id/btBottom"
android:layout_alignParentBottom="true"
That should solve your problem.
looks like you need 'alignParentBottom' in your button like this
<Button android:id="#+id/btBottom"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Enter" />
Do not wrap Button to RelativeLayout
Set layout_height of ScrollView to 0dp
Add layout_weight of ScrollView to 1
For this it would probably be a good idea if you used RelativeLayout for the outer wrapper layout. Then you could just set the layout with the button inside to LinearLayout and set layout_alignParentButtom="true" while you set your #+id/Scroll to layout_alignParentTop="true"
Also, you should probably set the layout with the button inside´s height to wrap_content instead of fill_parent
Why do you use a LinearLayout at top level at all ?
Choose a RelativeLayout with fill/fill and the following three childern (no further nesting !):
1) TextView with android:layout_alignParentTop="true" and android:layout_centerHorizontal="true"
2) Button with android:layout_alignParentBottom="true" and android:layout_centerHorizontal="true"
3) ScrollView with android:layout_below=#id/textview_id and android:layout_above="#id/button_id"
I didn't test it though, but give it a try.
I want to implement this: A ScrollView that contains many elements (ImageViews, TextViews, EditTexts etc) and then after the ScrollView some buttons (which are custom ImageViews) that appear always exactly at the bottom of the screen.
If I use the android:fillViewport="true" attribute, then if the elements of the ScrollView are too big to fit in the screen size the buttons get invisible . If I use the android:Weight=1 attribute then the ScrollView gets only 50% of the Screen when the screen is big and it can fit (I want the buttons to take a small percentage, about 10%). If I set the android:Weight to bigger values then the buttons appear very small.
Please help! Maybe it is something simple that I overlooked but I’ve been banging my head for hours!
Just created and tested it. Looks like you want.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
android:layout_alignParentBottom="true">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Custom Button1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Custom Button2"/>
</LinearLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/buttons">
<!--Scrollable content here-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="test text"
android:textSize="40dp"/>
</LinearLayout>
</ScrollView>
</RelativeLayout>
<?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">
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hallo Welt"
/>
</LinearLayout>
</ScrollView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Go next page"
android:layout_alignParentRight="true" />
</RelativeLayout>
</LinearLayout>
This worked for me. Give the scroll view a weight of 1. Put all the other widgets following the scroll view in a layout. The scroll view will grow enough to not block the rest.
Widgets in scroll view and rest at bottom
scrollview cannot fit the screen because you put it on a linear layout, so linear layout fit in the screen,
just try to make scrollview as root elemen on xml layout
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<!-- Here you can put some XML stuff and BOOM! your screen fit to scrollview -->
</LinearLayout>
</ScrollView>
If you do not want to use RelativeLayout, it is better to use LinearLayout. This method is better in my opinion.
Just set the layout_weight to one
I know that it is impossible to set percentages and that you can set a weight of certain images to scale their heights. What I am trying to do though is specify the height of a layout relative to the layout it is within. Basicly I have something like this
<LinearLayout android:layout_height="fill_parent">
<LinearLayout>
</LinearLayout>
</LinearLayout>
Of course this is a very simplified version, just so you can understand my gibberish. Basicly I want to set the inner linearlayout to be around 50% of the main linearlayout.
What is the best way to do this?
There is an attribute called android:weightSum.
You can set android:weightSum="2" in the parent linear_layout and android:weight="1" in the inner linear_layout.
Remember to set the inner linear_layout to fill_parent so weight attribute can work as expected.
Btw, I don't think its necesary to add a second view, altough I haven't tried. :)
<LinearLayout
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:weightSum="2">
<LinearLayout
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:layout_weight="1">
</LinearLayout>
</LinearLayout>
You could add another empty layout below that one and set them both to have the same layout weight. They should get 50% of the space each.
android:layout_weight=".YOURVALUE" is best way to implement in percentage
<?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" >
<TextView
android:id="#+id/logTextBox"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight=".20"
android:maxLines="500"
android:scrollbars="vertical"
android:singleLine="false"
android:text="#string/logText" >
</TextView>
</LinearLayout>
Just as you said, I'd recommend weights. Percentages would be incredibly useful (don't know why they aren't supported), but one way you could do it is like so:
<LinearLayout
android:layout_height="fill_parent"
android:layout_width="fill_parent"
>
<LinearLayout
android:layout_height="0dp"
android:layout_width="fill_parent"
android:layout_weight="1"
>
</LinearLayout>
<View
android:layout_height="0dp"
android:layout_width="fill_parent"
android:layout_weight="1"
/>
</LinearLayout>
The takeaway being that you have an empty View that will take up the remaining space. Not ideal, but it does what you're looking for.
With introduction of ContraintLayout, it's possible to implement with Guidelines:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.eugene.test1.MainActivity">
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#AAA"
android:text="TextView"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="#+id/guideline" />
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
</android.support.constraint.ConstraintLayout>
You can read more in this article Building interfaces with ConstraintLayout.
You can add Constraint Layout 1.1 using this line in your android projects:
implementation 'com.android.support.constraint:constraint-layout:1.1.0'
In Constraint Layout 1.1 it’s been made simpler by allowing you to easily constrain any view to a percentage width or height.
If you want to set the height of the linearlayout to be around 50% of the main linearlayout , you can do it like this:
<LinearLayout android:layout_height="fill_parent">
<LinearLayout
app:layout_constraintHeight_percent="0.5">
</LinearLayout>
</LinearLayout>
The code is at the very bottom. I can change the color of the text [android:id="#+id/vonage_login_status"] by running
vonage_login_status.setTextColor(this.getResources().getColor(R.color.light_grey));
However, I want a different colored background, so I added the line android:background="#color/background
But after I added the line, the setTextColor method is being ignored. Any ideas how do I fix it?
Thanks for reading....
<?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="#color/background"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1"
android:gravity="center_vertical">
<LinearLayout
android:id="#+id/vonage_login_status_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:clickable="true">
<TextView
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_gravity="center"
android:id="#+id/vonage_login_status"
android:layout_weight="1"
android:gravity="left"
android:singleLine="true"
android:ellipsize="end"
android:padding="0px">
</TextView>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
I'm somewhat new to Android but I sometimes use these questions as a learning exercise, what you say you want to do seems to work for me and I learnt along the way. However, if that xml is all of the layout file it seems to have a lot of layouts stacked on top of one another and does not seem to nest properly, perhaps simplifying it would help.