ConstraintLayout 1.1.0 views cannot reference each other on the same edge? - android-constraintlayout

The following code used to work fine in 1.0.2, but does not work in 1.1.0 stable - literally removes the effect of every other constraint in all views in the layout. Is there a reason or is it just a quirk? Took a while to hunt it down.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:app1="http://schemas.android.com/apk/res-auto">
<TextView
android:id="#+id/viewOne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#+id/viewTwo" <-- culprit
tools:text="View one"/>
<TextView
android:id="#+id/viewTwo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app1:layout_constraintTop_toBottomOf="#+id/viewOne" <-- culprit
tools:text="View two"/>
</android.support.constraint.ConstraintLayout>
Removing one of the culprit constraints brings everything back to normal in 1.1.0.

Add app:layout_constraintTop_toTopOf="parent" to viewOne and it will work again. You can also remove app:layout_constraintBottom_toTopOf="#+id/viewTwo" and nothing will change since it is not needed.
Although the two views are vertically constrained, they are constrained to one another and nothing ties them to the container. The group will slide to the top by default if not otherwise constrained. It look like both will slide to the top in 1.1.0 and line up one below the other in 1.0.2. This may be just a side effect of how the views are defined.
In any case, the XML is not well-formed and the views should all be constrained either directly or indirectly to the containing ConstraintLayout. Make the changes above and all will be well.

Just remove
app:layout_constraintBottom_toTopOf="#+id/viewTwo"
from the above xml code and you are good to go.
Below given is the code that works perfectly well.
<?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:app1="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/viewOne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="View one" />
<TextView
android:id="#+id/viewTwo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app1:layout_constraintTop_toBottomOf="#+id/viewOne"
tools:text="View two" />
</android.support.constraint.ConstraintLayout>
So in your case only
app:layout_constraintBottom_toTopOf="#+id/viewTwo" this is the culprit.

Related

Horizontally aligning two TextViews in Constraintlayout

Helllo!
I am currently learning the basics os JAVA and I can't quite figure a little thing out...
What I want to do: Horizontally align two TextViews in a CardView, while keeping them contrained to eachother
What I have tried:
Constraining them separately, this creates space between those two TextViews which I do not want.
Also I have played around with Chains, but couldn't quite get it to work (doing it wrong probably).
Lastly I tried searching this forum but could only find very big problems where mine did not fit into (relative layouts and others)
Image of the Android Editor: https://imgur.com/ICLPv8v
The pink circle is where Im having trouble with (too much space in between)
This is the code so far I've come up with :-)
FYI: I'm following the Android Basics: User Interface and it's been fun, this just seemed a bit too advanced for them, but I'm eager to learn!
<androidx.constraintlayout.widget.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=".MainActivity">
<androidx.cardview.widget.CardView
android:id="#+id/materialcard"
android:layout_width="200dp"
android:layout_height="200dp"
android:backgroundTint="#color/Gray200"
app:cardCornerRadius="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/Hi"
style="#style/Headline1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="2dp"
android:text="Hi"
android:textColor="#color/Gray900"
android:textStyle="bold"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="#+id/materialcard"
app:layout_constraintTop_toTopOf="#+id/materialcard" />
<TextView
android:id="#+id/ExclamationMark"
style="#style/Headline_bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="2dp"
android:text="!"
android:textAlignment="center"
android:textColor="#color/colorAccent"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="#+id/materialcard"
app:layout_constraintLeft_toLeftOf="#+id/materialcard"
app:layout_constraintStart_toEndOf="#+id/Hi"
app:layout_constraintTop_toTopOf="#+id/materialcard" />
</androidx.constraintlayout.widget.ConstraintLayout>```
[1]: https://i.stack.imgur.com/Fd8Jf.png
You can use this layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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"
android:background="#color/cardview_dark_background">
<androidx.cardview.widget.CardView
android:id="#+id/materialcard"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintWidth_percent="0.7"
app:layout_constraintHeight_percent="0.4"
app:cardCornerRadius="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/Hi"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/colorPrimary"
app:layout_constraintWidth_percent="0.34"
app:layout_constraintHeight_percent="0.4"
android:elevation="2dp"
android:text="Hi"
android:textStyle="bold"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="#+id/materialcard"
app:layout_constraintTop_toTopOf="#+id/materialcard" />
<TextView
android:id="#+id/ExclamationMark"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/colorAccent"
app:layout_constraintWidth_percent="0.34"
app:layout_constraintHeight_percent="0.4"
android:elevation="2dp"
android:text="!"
android:textAlignment="center"
android:textColor="#color/colorAccent"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="#+id/materialcard"
app:layout_constraintLeft_toLeftOf="#+id/materialcard"
app:layout_constraintStart_toEndOf="#+id/Hi"
app:layout_constraintTop_toTopOf="#+id/materialcard" />
</androidx.constraintlayout.widget.ConstraintLayout>
The important thing are those attributes:
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintWidth_percent="0.7"
app:layout_constraintHeight_percent="0.4"
By doing that, now your cardView will be be exactly 70% of the screen with and 40% of the screen hegiht.
And now if you look at the layout I have done that for the other views, allowing myself to control the space inside the cardView.

TextView blocking ListView onItemClickListener

I have simple list view with list items defined by following layout:
<?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="#drawable/list_item_selector" >
<TextView
android:id="#+id/menuItemTextView"
android:clickable="false"
android:focusable="false"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#00000000"
android:padding="20dp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/blue"
android:textIsSelectable="true" />
<ImageView
android:id="#+id/arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:paddingRight="10dp"
android:src="#drawable/arrow" />
> </RelativeLayout>
When I click TextView the listView.onItemClickListener is not called. The problem occurs on Android 4. Android 2.x is OK. Is there any trick to pass an event from TextView to its ListView without defining onClickListner on the TextView?
In your main activity just make you listview as focusable true. This worked for me. If you are using a custom list view the focus is passed to its childs and not the list so to get the focus back to listview use
listView.focusable(true);
and the other things as textview just set their focus as false.
It was the android:textIsSelectable="true" attribute. Don't follow lint hints blindly.
android:inputType="textMultiLine" can also cause this problem. If you've included that attribute in your TextView xml, try removing it.

How to change TabWidget's background color from XML in Android

I have come across this problem. I have a tab widget on top of the view, with four tabs in it. I have been asked to change the background color of the whole tab view area. Not for any tab, but the whole area of that tab view.
I also been asked for not changing any source code for some branding reason. So I could only do it through xml file. I searched around but seems all solution is by using java code. So I wonder if there is a way that I could change the widget background color (just color, not images) by using only resources files?
Here is my layout file for the tab layout:
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp"
>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/tabbackgroundcolor" />
<FrameLayout
android:layout_below="#android:id/tabs"
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp"
/>
</RelativeLayout>
</TabHost>
You could see that I added "android:background="#color/tabbackgroundcolor"" in the TabWidget part, however it not work..
Thank you!

Get view from Resource Layout in xamarin or monodroid

I try to get MapView from Resource Layout but it returns null:
var map_view = FindViewById<MapView>(Resource.Id.emap);
mylayout.xml like :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/etklmap"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:id="#+id/zoomOutButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Zoom Out" />
<com.google.android.maps.MapView
android:id="#+id/emap"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:apiKey="apikey" />
</LinearLayout>
So is there any way to get view without calling SetContentView(Resource.Layout.mylayout);
The resource file is just XML - it doesn't become a collection of viewgroups and widgets until it's "inflated"
One way to inflate XML is to use SetContentView.
Another way is to use the inflaterservice - see this monodroid question (and answers) for an example: Android: Getting the View added with LayoutInflator
Note that - under the covers - all setcontentview does is to inflate the XML using exactly the same inflaterservice, passing in the activity as the parent frame for the inflation.
The official android docs on this are http://developer.android.com/reference/android/view/LayoutInflater.html

Can any one point me to this "Take a picture" widget in google plus android app. Want to know how to create a UI of that type

Can any one help me out how how this widget can be developed as in attached.The widget in the attached is of "Take a photo" or select photo" UI. Just want to know how can we create this UI widget. Any tutorials/and discussions/reference would help.Thank You.
Use hierarchyviewer tool from Android SDK. I tried.
You can learn that this menu is a custom baked dialog or activity, created from FrameLayout, ScrollView, LinearLayout and Buttons.
So to make one, you'll have to roll your own in similar style.
Here is how the xml would look like. You'd have to have a background for the FrameLayout and also 2 for the buttons. One with a full rectangle and the other without the top line. Then some margins/paddings tweaking and you should be fine.
<?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"
android:orientation="vertical" >
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" android:layout_gravity="center_vertical|center_horizontal">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" android:background="#444" android:textColor="#fff" android:layout_marginBottom="1dp"/>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" android:background="#444" android:textColor="#fff"/>
</LinearLayout>
</ScrollView>
</FrameLayout>
Note: this is based on Mice's answer.
I don't think its native android widget. May be you can find it on github try searching over there.
Use GreenDroid library, it has what you are looking for. It is a nice library with host of features. To test it download this sample application