I may be being an idiot, but it seems like adding a Button to a horizontal LinearLayout breaks layout_gravity="top"
<?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">
<TextView
android:id="#+id/text"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="top"
android:text="TextView"
android:background="#f00" />
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="200dp"
android:layout_weight="0"
android:text="Button" />
</LinearLayout>
This looks like this (in the layout editor):
Note that the text view is in the centre, not the top! If *all I do is remove the <button>, then it looks like this:
See, now it is at the top like it should be. A workaround I will use is to have layout_gravity="start" which does result in the correct behaviour:
But anyway, what's going on? Also see this related question. That might actually be the same problem; I'm not sure. No real answers there anyway.
Aha, I found the answer! You have to set android:baselineAligned="false". Never heard of that before, and kind of annoying that it is on by default!
<?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:baselineAligned="false"
android:orientation="horizontal">
...
Related
Im new to Xamarin, i'm seeing tutorials like the ones here:
https://learn.microsoft.com/en-us/xamarin/android/get-started/hello-android/hello-android-quickstart?tabs=vswin
and the axml designer is supposed to "snap" controls to the border of the other controls you have listed, but mine isn't working this way. It's just piling them all on top of each other. Any clue how to remedy this? I've searched for a while but it seems like no one else is having this issue.
For example, they're all just being placed at the top left corner of the pane and even when placed 'correctly' at the bottom of another control, they're just snapping up to the top left corner.
Edit: Sharing XML
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minWidth="25px"
android:minHeight="25px"
tools:gridSpec="1|8|#0093eeff|K:#ee8700ff:16,l:72,l:16,r|S:#83ee00ff:16,0,l:16,56,l:16,0,r">
<TextView
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="25px"
android:minHeight="25px"
android:id="#+id/textView1"
android:layout_toLeftOf="#id/textView1"
android:layout_toRightOf="#id/editText1" />
<TextView
android:text="Text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/PhoneNumberText"
android:id="#+id/textView2" />
<Button
android:text="Translate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/PhoneNumberText"
android:id="#+id/TranslateButton"
android:layout_above="#id/PhoneNumberText" />
<EditText
android:layout_height="wrap_content"
android:layout_below="#id/PhoneNumberText"
android:id="#+id/PhoneNumberText"
android:layout_toLeftOf="#id/textView1"
android:layout_marginTop="0.0dp"
android:layout_marginBottom="0.0dp"
android:text="1-855-xamarin"
android:layout_width="wrap_content" />
</RelativeLayout>
Xamarin Controls piling on top of each other
Your .axml has several errors.
In your textView2:
<TextView
...
android:id="#+id/textView1"
android:layout_toLeftOf="#id/textView1"
android:layout_toRightOf="#id/editText1" />
//I didn't find where you define the id -- editText1
And please note: Circular dependencies cannot exist in RelativeLayout
What is the layout you want to achieve?
Something like the image you post in the above link?
If so, you could modify your layout file to:
<?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">
<TextView
android:text="Enter a Phoneword:"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/textView1" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/PhoneNumberText"
android:text="1-855-XAMARIN" />
<Button
android:text="Translate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/TranslateButton" />
<TextView
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/TranslatedPhoneWord" />
</LinearLayout>
I had the same issue and resolved reading the notes in the tutorial:
Newer releases of Visual Studio contain a slightly different app
template.
Instead of activity_main.axml, the layout is in content_main.axml.
The default layout will be a RelativeLayout. For the rest of the steps on this page to work you should change the <RelativeLayout> tag
to and add another attribute
android:orientation="vertical" to the LinearLayout opening tag.
Making those changes fixed my problem
I want to create a vertical dynamic timeline that has the time it happened on the left, what happened on the right, a line in between, with a bubble in the line at each event. Times, events, and number of events will be dynamic.
What I was thinking here was possibly a RecyclerView over a static image of a vertical line. The list item would contain the time, a bubble image, and then the event view. Before writing this out I'm thinking I'm gonna have issues with lining up the bubble with the vertical line. Is there a better way to approach this or maybe someone can point out a way to guarantee the bubble will be over the center of my line on different screen densities and sizes?
I have been looking to implement a similar view in my app.
Personally, I'm not a fan of a static line. My thinking was along the lines of having a layout with 3 columns - for your example; one with the time, one with an image of the dot and vertical lines (or just the top line on the last item) and the third column with a cardview.
The layout I've posted is pretty rough but I just knocked it together in a few minutes and you should get the idea. It would need tweaking to make sure the vertical line on the icon goes to the edge of the layout (there would be a gap between them in my example)
<?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"
android:weightSum="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="10dp"
android:layout_weight="0.06">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:layout_gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1:45 PM" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:layout_gravity="center">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="#drawable/ic_test" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Hello there"
android:padding="10dp"/>
</android.support.v7.widget.CardView>
</LinearLayout>
</LinearLayout>
</LinearLayout>
With the result looking like so;
I did also find a library which looks okay - the icons could do with some work but I guess a lot of the legwork is already done.
I have also since just found out this layout type is officially (according to Matrial Design Guidelines) a stepper. Although I can't actually find any reference to them in the 'Develop' documentation it may assist you when searching for an appropriate library.
after editing Jonny Wright answer.I first created a card_item as this;
<?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="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
>
<LinearLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="horizontal"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:layout_gravity="top">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1:45 PM" />
</LinearLayout>
<android.support.design.widget.CoordinatorLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center">
<View
android:id="#+id/first"
android:layout_gravity="center"
android:background="#color/material_green_500"
android:layout_width="2dp"
android:layout_height="wrap_content"/>
<ImageView
app:layout_anchor="#id/first"
app:layout_anchorGravity="top"
android:layout_gravity="top"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/ic_test" />
</android.support.design.widget.CoordinatorLayout>
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<LinearLayout
android:background="#drawable/chat_bubble"
android:layout_marginRight="114dp"
android:layout_marginEnd="114dp"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Hello there, how are you doing. Hello there, how are you doing. Hello there, how are you doing. Hello there, how are you doingHello there, how are you doing"
android:padding="12dp"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Then add two additional files in the drawable folder. a 9 patch image for the chat bubble background and a circle.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:useLevel="false"
android:innerRadius="0dp"
>
<size android:width="100dp"
android:height="100dp"/>
<solid android:color="#color/material_green_500"/>
</shape>
This is the results.
Example usage
Dont forget to add the bubble.png
I am trying to design a layout ( basically a splash screen ) which shows the App logo in almost middle of the screen and the company tagline under the logo on the start of the App. While working in Android Studio the design of layout looks like this. I positioned it 200dp downwards from the top.
As you can see, logo is right in the middle of the screen.
But when i run the app on my emulator the screen appears like this.The logo is not at the exact position where i wanted it.
I want my logo at the same relative position, no matter how big the screen size is.
Assume if logo is positioned at 200dp at 1000dp long screen. i want it at 400dp position on a 2000dp screen size.
Simulator : 5.0.0 API-21 768 X 1280
What are the possible solutions ??
Following image contains both outputs.
Follow this Link for the image
Here is the XML 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"
android:background="#f84343"
android:weightSum="1">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/AppIcon"
android:src="#drawable/unnamed"
android:layout_marginTop="200dp"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/simpler_better_faster"
android:id="#+id/textView"
android:layout_gravity="center_horizontal"
android:layout_below="#+id/AppIcon"
android:layout_centerInParent="true"
android:layout_marginTop="50dp"
android:textColor="#ffffff"
android:textSize="20dp" />
</RelativeLayout>
You don't need to use a <RelativeLayout> to achieve that. Below is the code using a <LinearLayout>. The key here is android:gravity="center" in the <LinearLayout> element:
<?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:background="#f84343"
android:orientation="vertical"
android:gravity="center">
<ImageView
android:id="#+id/AppIcon"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/unnamed"/>
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="#string/simpler_better_faster"
android:textColor="#ffffff"
android:textSize="20dp"/>
</LinearLayout>
[EDIT]
OP - But if i go on using more widgets to the screen i might need to
position them relative to each other. how to overcome that with
Relative layout
Well, technically you can still add more widgets in their required order. But, if you really want to use a <RelativeLayout>, you can use something like:
<?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"
android:background="#f84343"
android:gravity="center_vertical">
<ImageView
android:id="#+id/AppIcon"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:src="#drawable/unnamed"/>
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_below="#id/AppIcon"
android:text="#string/simpler_better_faster"
android:textColor="#ffffff"
android:layout_centerHorizontal="true"
android:textSize="20dp"/>
</RelativeLayout>
It looks like you've mixed up some RelativeLayout/LinearLayout attributes.
If you want to use RelativeLayout remove and modify some attributes.
Something like this instead
<?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"
android:background="#f84343">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/AppIcon"
android:src="#drawable/unnamed"
android:layout_centerInParent="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/simpler_better_faster"
android:layout_below="#id/AppIcon"
android:id="#+id/textView"
android:layout_marginTop="50dp"
android:textColor="#ffffff"
android:textSize="20dp" />
</RelativeLayout>
Simplify it all down into a TextView if you ask me
<?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"
android:background="#f84343" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="#string/simpler_better_faster"
android:drawableTop="#drawable/arrow_right_fill_dark" />
</RelativeLayout>
This gets rid of the ImageView all together, the change being the drawableTop attribute that provides a drawable, centered above the text.
I cannot get my LinearLayout to "match_parent" properly. As you can see on the screenshot, the white space at the bottom should not be. If I try to apply this background color directly to the style i get a weird result where every view on the Card itself is filled with the background color.
It worked before I implemented FadingActionBar:
My Layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
style="#style/AppBaseThemeCardBG"
android:padding="#dimen/activity_standard_padding"
android:orientation="vertical">
<LinearLayout
android:id="#+id/eventCard"
style="#style/nowCardStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<com.mikebdev.douala.widget.RobotoTextView
android:id="#+id/eventDate"
android:textColor="#color/gray"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:typeface="roboto_condensed_light"
android:textSize="#dimen/textSizeNormal" />
<com.mikebdev.douala.widget.RobotoTextView
android:id="#+id/eventHead"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="2"
app:typeface="roboto_condensed_light"
android:textSize="#dimen/textSizeVeryLarge" />
<com.mikebdev.douala.widget.RobotoTextView
android:id="#+id/eventBody"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:typeface="roboto_condensed_light" />
</LinearLayout>
<LinearLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
</LinearLayout>
</LinearLayout>
That's definitely an issue in the library, I never tested it with content that didn't fill the entire viewport.
I've just pushed to Maven Central a new version (3.1.2) of the library that should solve the issue, please let me know how it works for you.
I 'm having problems with my android UI. My buttons dont align properly. Even though i have my button aligned to right, but still wont line up correctly?
I was wondering is there any document that would explain how to layout things correctly and how would widgets behave when they are inside a tablerow? Or in other terms how does hierarchy affect the way things are aligned??
Thanks
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
style="?screenBackground">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">
<TableLayout android:id="#+id/TableLayout02"
android:layout_width="match_parent" android:layout_height="match_parent"
style="?pageBackground">
<TableRow>
<ImageView android:layout_height="wrap_content"
android:layout_width="wrap_content" android:src="#drawable/camera_icon"
android:id="#+id/img" android:layout_gravity="left"></ImageView>
<Button android:id="#+id/button1" android:text="#string/button1"
style="?button"></Button>
</TableRow>
</TableLayout>
</LinearLayout>
</ScrollView>
You might have better luck using a RelativeLayout instead of LinearLayout.
For example, you could align your ImageView and Button like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_height="60dip"
android:layout_width="60dip"
android:layout_alignParentLeft="true"/>
<Button
android:text="Button"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
To get a feel for what is possible, the starter docs on RelativeLayout are here and here.