I have tried to move the button using graphical interface and android:layout_alignParentLeft in XML file, anyway it does not work. My Android Studio version is 2.2.3. Have you ever had this problem?
You need RelativeLayout or other simlilar layout as parent container because FrameLayout just draw the views one over another plus you should check the properties section to see the attibute properties that you can apply on your layout.
To read further about ViewGroups and it's sub-types with their behaviours
If you forced to use FrameLayout(e.g in Toolbar or so) and you have only one element(or small amount) to operate with(button) you can use android:layout_gravity="" attribute to align element in the FrameLayout.
<FrameLayout
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="#string/app_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
</FrameLayout>
If you have have few elements in your layout, you can: 1) Change FrameLayout to RelativeLayout or 2)Wrap all items into Relative layout and set parameters to match_parent
<FrameLayout
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="#string/app_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"/>
</RelativeLayout>
</FrameLayout>
Related
I am in the process of writing my first full Android app, and I want to center a linear layout so that the layout itself is centered, not just the content inside of the layout. I have seen through old posts that android:layout_gravity is used to do this, but as I enter that into my activity's XML, there are no suggestions, and nothing happens when fully entered.
Am I not supposed to use a linear layout to achieve this? Am I supposed to make its size match_parent and just constrain the sizes of all of its children? My idea for the layout was to constrain the size of the linear layout, center it, and have all of its children's horizontal size match_parent.
Here is my activity's XML for reference:
<?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.frc5113.combustiblescouting.MainActivity">
<LinearLayout
android:layout_width="140dp"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Team Number" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="Color" />
</LinearLayout>
Your root layout is a ConstraintLayout. I don't think that supports the attribute layout_gravity. You should either use LinearLayout or use constraints relative to your root view as described here.
Try this, it makes your containt horizontal & vertical center simultaneously:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.frc5113.combustiblescouting.MainActivity"
android:orientation="vertical"
android:gravity="center">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Team Number" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="Color" />
</LinearLayout>
using android:gravity="center" on the LinearLayout will center it's childs not itself.
There would be the android:layout_gravity attribute which is telling the parent how this child wants to be layed out. But this needs to be supported by the Containers' LayoutParams (which is true for e.g. FrameLayout, LinearLayout...)
But Constraintlayout does not support this kind of child gravity.
Here you need to set Constraints on the child (in your case the LinearLayout) in order to place it properly.
Therefore if you want to center the LinearLayout (which would somehow be obsolete as you could center it's childs directly in the ConstraintLayout)
you can achieve this like the following:
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="140dp"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<!-- content -->
</LinearLayout>
</android.support.constraint.ConstraintLayout>
I have a blueprint which looks as thus:
I have the tablayout widget specified in xml like this:
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
style="#style/AppTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#color/tabBg"
android:minHeight="?attr/actionBarSize"
app:tabTextColor="#color/grey"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
I set it up with a ViewPager scrolling to swipe views for each tab. Now in one of the views - Tab 3, I need to arrange my components below the #id/tabLayout
This is the content of tab3.xml:
<?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:orientation="vertical">
<TextView
android:id="#+id/secondtext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/tabLayout"
android:background="#android:color/white"
android:text="second"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/thirdtext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/secondtext"
android:background="#android:color/white"
android:text="third"
android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout>
Both the second and third textviews are displayed behind the tabLayout, they are covered/hidden by the tabLayout. How do i specify the textviews to display right under the tabLayout so the text is visible?
A RelativeLayout, like any other layout, is only responsible for laying out it's direct children. Therefore, the android:layout_below and similar attributes, can only work for two views within the same RelativeLayout parent.
In this case, you'd have to add it to the ViewPager. Then the TextViews can be just at the top of their container, as that is now below the TabBar.
If this is no good for your other tabs. You can do one of:
- Have the TabBar be a fixed height and set that as margin to the textviews
- Query the height of TabBar at runtime an apply it as padding or margin in tab3.
Define an id to RelativeLayout in tab3.xml and use it.
Use linear layout with vertical orientation .. It will work :)
I have needed to create view like and this view will be placed like
I am trying to create this using frame layout but finish with failure. How can i do this?
Either use a FrameLayout and add this as an imageview last with specified right and top layout margins for this view and some slightly larger right margins for the underlying layout.
Or a RelativeLayout and you align this view to the parent right using (layout_alignParentRight="true") and with margins as with previous example.
Example trying to mimic your layout a bit, tweak the margins and image to your needs:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#bbbb00"
android:layout_marginRight="2dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#888899"
android:layout_margin="20dp">
</LinearLayout>
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginTop="80dp"
android:src="#drawable/test"/>
</FrameLayout>
I want to create a custom height toolbar and it works fine until I add content to it. Then my content is adjusted to be between the back arrow and the actionbar buttons.
How can I make my content take the entire width so I can create a layout like below? I guess the "+" icon needs to be in a parent layout of the toolbar?
The docs say:
The application may add arbitrary child views to the Toolbar. They will appear at this position within the layout. If a child view's Toolbar.LayoutParams indicates a Gravity value of CENTER_HORIZONTAL the view will attempt to center within the available space remaining in the Toolbar after all other elements have been measured.
But I don't have the gravity set to CENTER_HORIZONTAL...
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:iosched="http://schemas.android.com/apk/res-auto"
iosched:theme="#style/ActionBarThemeOverlay"
iosched:popupTheme="#style/ActionBarPopupThemeOverlay"
android:id="#+id/toolbar_actionbar"
android:background="#color/theme_primary"
iosched:titleTextAppearance="#style/ActionBar.TitleText"
iosched:contentInsetStart="16dp"
iosched:contentInsetEnd="16dp"
android:layout_width="match_parent"
android:layout_height="128dp" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
... My Content
Currently my layout ends up like this when running with left margin set to 168:
I'm not sure if you still need help with this, but it has the most votes for an unanswered question in not only the android-5.0-lollipop tag, but also the android-toolbar tag right now. So, I thought I'd give it one.
This layout is pretty easy to achieve, especially with the new Design Support Library.
Implementation
The root of your hierarchy will need to be the CoordinatorLayout.
As per the docs:
Children of a CoordinatorLayout may have an anchor. This view id must
correspond to an arbitrary descendant of the CoordinatorLayout, but it
may not be the anchored child itself or a descendant of the anchored
child. This can be used to place floating views relative to other
arbitrary content panes.
So, we'll use this to position the FloatingActionButton where it needs to go.
The rest is pretty straightforward. We're going to use a vertical LinearLayout to position the Toolbar, text container, tab container, and then a ViewPager. So, the full layout looks like:
<android.support.design.widget.CoordinatorLayout
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:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#181E80"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="48dp"
android:paddingTop="8dp">
<ImageView
android:id="#android:id/icon"
android:layout_width="54dp"
android:layout_height="54dp"
android:layout_alignParentStart="true"
android:layout_marginStart="16dp"
android:importantForAccessibility="no"
android:src="#drawable/logo" />
<TextView
android:id="#android:id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#android:id/icon"
android:layout_marginStart="14dp"
android:layout_toEndOf="#android:id/icon"
android:text="Chelsea"
android:textColor="#android:color/white"
android:textSize="24sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignStart="#android:id/text1"
android:layout_below="#android:id/text1"
android:text="England - Premier League"
android:textColor="#android:color/white"
android:textSize="12sp" />
</RelativeLayout>
<FrameLayout
android:id="#+id/tab_container"
android:layout_width="match_parent"
android:layout_height="90dp"
android:background="#272F93">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:tabContentStart="70dp"
app:tabGravity="center"
app:tabIndicatorColor="#F1514A"
app:tabMode="scrollable"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#99ffffff" />
</FrameLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_margin="16dp"
android:src="#drawable/ic_star_white_24dp"
app:backgroundTint="#F1514A"
app:borderWidth="0dp"
app:elevation="8dp"
app:layout_anchor="#id/tab_container"
app:layout_anchorGravity="top|right|end" />
</android.support.design.widget.CoordinatorLayout>
There's not a whole lot more to add, the only other thing I'd mention is how to use the TabLayout. If you're using a ViewPager like we are, you'd probably call one of the two:
TabLayout.setTabsFromPagerAdapter
TabLayout.setupWithViewPager
Notes
I just kind of eyeballed the dimensions, trying to match the picture as much as possible.
Results
I have a RelativeLayout with a match_parent main LinearLayout view and a secondary wrap_content LinearLayout which is initially not visible (gone).
The secondary one has to be shown at the top of the screen but declaring it at the beginning of the xml file, it is not shown even when set to visible because it's behind the main one.
That's why it's declared after the main LinearLayout.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/main_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- FULL SCREEN CONTENT -->
</LinearLayout>
<LinearLayout
android:id="#+id/secondary_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/f_white_transparent"
android:gravity="center"
android:visibility="gone">
<TextView
android:id="#+id/myText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp" />
</LinearLayout>
</RelativeLayout>
I would like to create a custom RelativeLayout to be used in all the xml files where I can obtain the same behavior and I can be able to put whatever content under the main layout.
Is there any way to do it still using xml?
You are using a RelativeLayout but do not use the benefits of it. You can declare the wrap_content-Layout in first place and add the parameter android:layout_alignParentBottom="true" to it.
In your match_parent-LinearLayout you can add the parameter android:layout_above="#+id/secondary_layout" to make sure it will give space to the secondary Layout. This way gone will work, too.