When I'm using the layout editor in Android Studio and I try to make a chain (bidirectional constraint) between a EditText View and a Button View using the constraint anchors, it doesn't make the chain.
It only makes a constraint if I try to constrain one View to the other.
I am trying to chain the right side of the EditText to the left side of the Button.
This is what my Layout Editor looks like:
I was trying to figure this out too. I've discovered that one way to do it is to select both views, then right click and select Center Horizontally. This creates the chain, but then you have to adjust any other constraints accordingly. I'm new to Android, so I'm sure there will be other ways....
I had the same issue. Solved it by going in into the XML as instructed by the tutorial:
https://developer.android.com/training/basics/firstapp/building-ui.html
On the tutorial, click "See the final layout XML" and compare. My XML was missing:
app:layout_constraintLeft_toRightOf="#+id/editText"
In Android Studio 3.0.1, choose the two objects (on the xml design tab) and right click on one of them and you will have under "chain" option two options: one to chain horizontally and second to chain vertically.
I got a solution, probably will not be the best one until someone really answer properly, but works.
I hope this helps others guys who stuck in the same place as me, so you can continuous the work.
Looks like the interface of android studio is not working properly when came to create chains. Some options from people here work for like 2 or 3 elements, but I has 5 elements.
So the answer is solve this in the code XML.
My steps are for Horizontal arrangement, if you wanna vertical just change Right/Left for Top/Bottom
I put all the elements in the place that I want and remove all connections. (Than in my case I connect the top and bottom so they can be in the middle.)
Then I connect the first element in the left and the last element in the right.
And connect the right of each element in the left side of the next element.
app:layout_constraintRight_toLeftOf="#id/right_element"
Image of elements connect normal, no chain yet
After that I go inside the code and put manually the connection to the left element.
app:layout_constraintLeft_toRightOf="#+id/left_element"
And the chain was created.
Image of elements connect with chain
I hope this help, sorry for don't post the pictures, I don't have reputation enough yet XD.
i think android studio ui editor need more improvement for creating chain currently i am using Android Studio Preview 3.0 Canary 3
Sometime from editor it works perfectly but sometime it not, when linking not happen from ui editor we need to add constraint manually as per requirement Vertical or horizontal chain following are constraints
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf
and also we declare chain style manually in XML as follow
layout_constraintHorizontal_chainStyle or layout_constraintVertical_chainStyle
CHAIN_SPREAD -- the elements will be spread out (default style)
Weighted chain -- in CHAIN_SPREAD mode, if some widgets are set to MATCH_CONSTRAINT, they will split the available space
CHAIN_SPREAD_INSIDE -- similar, but the endpoints of the chain will not be spread out
CHAIN_PACKED -- the elements of the chain will be packed together. The horizontal or vertical bias attribute of the child will then affect the positioning of the packed elements
hope android studio editor will improve this
I worked out that in Android Studio 3.2.2 you have to click on the views in the component tree, so left click first component and then holding shift click the second component and then right click and in the menu you will see chains as in my screenshot below.
Android Studio 3.2.2
Resolved by adding constraints in both edit text (app:layout_constraintRight_toLeftOf="#+id/button") and button (app:layout_constraintBaseline_toBaselineOf="#+id/editText")
Complete example as below
<EditText
android:id="#+id/editText"
android:layout_width="245dp"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:ems="10"
app:layout_constraintRight_toLeftOf="#+id/button"
android:hint="#string/edit_message"
android:inputType="textPersonName"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginTop="16dp"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_marginRight="16dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBaseline_toBaselineOf="#+id/editText"
app:layout_constraintLeft_toRightOf="#+id/editText"
android:layout_marginLeft="16dp" />
The way I have been able to create a chain view in the blueprint layout is by drag click, select the objects to be linked. Then while they are selected right click and select "center horizontally" After doing this I can then create the other constraint and chain
This can specifically be resolved by holding the shift button and pressing both of the widgets. After this process, you can then right-click one of the widgets to be able to chain the views. Use this for the EditText View as well as the button particularly.
I solved this by creating the chain in blueprint mode. The tutorial never says you have to go back to it but if you do you can create the chain.
Just a tip when following the tutorial is to make sure that the Android Studio is upto date. I was wondering where certain buttons are when following the tutorials but found i was using an older version.
In terms of the question, the best is given by James # 6/6/17.
Add three buttons into the view
Select them all and right click
Select "Center Horizontally"
This does the trick to create the chain
I disobeyed the tutorial by turning on Autoconnect (because I was trying everything).
I selected both widgets, then selected Center Horizontally. The chain was created, I turned Autoconnect back off, then continued the tutorial.
The DESIGN tab is very prone to bugs!
Just do what you'd want to do in the design but write it via XML. No need for tutorials it's self-explanatory, connect all the lefts and rights!
I had the same problem before, and from what I can I tell, we have the same problem.
The tutorial expects you to use android studio 3 version. When I got this problem, I realized that my android studio still 2.2.3. After installing the update for the version 3 and sdk etc to the latest version it worked.
Hope this helps.
what caused the problem for me-
i duplicated one of my views in my layout (to speed things up- or so i thought).
by doing so - i caused the problem - several views had the same android:id value.
which is a big no-no.
a unique value to all my view (by changing the android:id ) helped fix this problem
I was having the same issue as well and what worked for me was selecting both views while holding the CMD button instead of the SHIFT button.
As a reference, I'm using the macOS version of Android Studio and was selecting both views using the SHIFT button which resulted in Chains being grayed-out.
I hope that helps somebody!
I'm looking at Youtube examples and I see the instructor has Widgets I don't have, Like different size Text Fields and an analogue clock.
Is there somewhere I can get more Widgets?
I obtained a text size same as to the "tutorial" using:
android:textAppearance="#style/TextAppearance.AppCompat.Large"
Looks like AndroidStudio has undergone some change. Best option is to enter the "Text" mode and type the style yourself. For ex. if you need an equivalent of LargeText view, then add a TextView and move onto the Text mode and add this line:
android:textAppearance="#style/?android:attr/textAppearanceLarge"
Or you could also edit the properties of TextView too.
You should add this line android:textAppearance="#android:style/TextAppearance.Large"
inside the TextView after clicking on the Text tab near Design tab located in the middle left to the right of design tab.
but you have to consider that first of all you need to drag and drop TextView from Widgets into the user interface or Design section.
Click into the Text tab located middle left to the right of the Design tab, find the TextView element and within it simply enter this line of code:
style="/?android:attr/textAppearanceLarge"
Remember this line of code has to be within the element in order for it to work.
Go to properties and then select text appearance and select app.
combat.large
Use this:
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge"
Add it inside your Textview tag.
Okay, so I'm really trying to do a lab for a class thing and I don't get why I can't have a textbox that takes up the width of the phone and a button that takes up the width of the phone on the bottom, but I don't know why that is? Here's a picture of what I have.
I know this is a noob question but it hasn't been addressed yet on the online course I'm taking and I really need an answer because I wanted android development to be as easy as .NET on windows.
Well anyway here is one picture:
Also here is the other picture:
Notice if I try to make one element bigger, it leads to it pushing the other one out of the activity, I want to have one activity with both elements taking up the entire width of the phone.
Does anyone know what I'm doing wrong?
EDIT: I'm using Ubuntu 14.04 not Mac OS X.
Your controls are children of a LinearLayout with android:orientation="horizontal". This means that the parent ViewGroup is aligning them horizontally; you cannot get the children aligned vertically in this configuration.
If you change the attribute to android:orientation="vertical", you will achieve the result you're looking for.
I strongly suggest getting yourself familiar with the default set of layouts available in the Android SDK by reading this official guide.
Edit : Please refer to this answer for placing views at bottom of the screen.
When you use a android:orientation=horizontal orientation in the layout, the views are stacked/placed in a single row. Since both your views have their width set to fill the screen, only the first one is shown/seen.
What you want is the vertical orientation. This places the views in a single column, one below the other. The width set to fill-parent will allow you the view to occupy all available space.
Official documentation on views : Layouts : Android Dev Docs
Understanding Android Layouts : Techtopia
Android Layout Tutorials : Learn-Android
Can somebody please help me out in designing vertical tabs like in the given pic(taken from hello sms app)
I'm not asking for a code snippet , so please don't ditch this question as a homework type. What I would want to know is the approach that I should take. Do I have extend the stock TabLayout or an existing tablayout with a few styles and UI customizations? Your pointers to the right resource would be of great help. Thanks
you can achieve this using multipane layout in android. on your right side create the listview fragment and right side implement details screen using fragment. if you wants to slide the left side listview use slidepanelayout.
<android.support.v4.widget.SlidingPaneLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/slide"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<fragment android:id="#+id/leftpane"
android:name="com.example.package.left"
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_gravity="left" />
<fragment android:id="#+id/rightpane"
android:name="com.example.package.right"
android:layout_width="350dp"
android:layout_height="match_parent"
android:layout_gravity="right"
android:layout_weight="1"
/>
</android.support.v4.widget.SlidingPaneLayout>
I think this will not be achieved by TabLayout as it only supports Horizontal Orientation.
But you can go with SlidingPanel with NavigationDrawer where you can design DrawerItemLayout as per your requirement and get the exact layout you want.
Please check links #1. & #2.
I think this can reduce your efforts and you can get your task done easily.
No, you dont have to custom any view. You can just
Use RecyclerView for avatars list. If an avatar is selected, just changed background of the selected item to black U shape as in your design.
Use a detail view to display your avatar information.
You cannot use TabLayout here as it would not be appropriate for your purposes. What you could do is to have two layouts - maybe linear (or relative) to basically split the screen into the top part with a layout_weight of maybe 2 and the bottom layout with a layout_weight of 8 (for a 20/80) split.
From here, it's just a matter of designing your layouts. It looks like your top layout holds something like a spinner widget. You could either use this or a list view object. Your bottom layout definitely holds something like a list view. You could implement your own list view widget with some kind of a design in each row or you could have an xml layout file and reference this in your ArrayAdapter. Really, your choices are endless. For the left part of your bottom layout, you could probably use a vertical LinearLayout to hold the images of the people in the conversation.
And also don't forget to hide the ActionBar - if you want that.
what I would do is to split screen in a given ratio into two parts. Insert a list view with an adapter into left hand side and use fragments for the right hand side. But using tables is not a good idea. Using Fragments will make the things way easier. Check this link for an overview. Look at 2.2 and 2.3 sections.
And for the right hand side, inside fragment, you can use another list view with images and text.
You can achieve this by using a NavigationDrawer and a listview inside this navigation drawer.
this listview will be using a seperate xml layout for its row. which will have that image views inside as shown in the screenshot.
This is not a listview, its just a sliding menu. Learn about the sliding menu and you can achieve the design that you want. This will help u. https://github.com/jfeinstein10/SlidingMenu