Android How to position Items in a Toolbar - android-layout

I understand the one of the advantages of the toolbar over the action bar is the ability to position and add items. However I cannot figure out how to position these items on the toolbar where I would like to. I have 6 items and i want three of the items aligned to the left a space in the middle and the other three aligned to the right.

Use a Space widget for this.
Add a LinearLayout inside your Toolbar. I am adding 6 TextViews inside this LinearLayout. You can, of course, change it according to your requirement.
Now to align 3 of the child views to the left and 3 to the right simply add a android.support.v4.widget.Space widget after the third child view and set it's layout_weight property to 1.
Here's the entire toolbar layout
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="item1"
android:padding="2dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="item2"
android:padding="2dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="item3"
android:padding="2dp"/>
<android.support.v4.widget.Space
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="item4"
android:padding="2dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="item5"
android:padding="2dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="item6"
android:padding="2dp"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
Hope this works as required for you.

Related

Balancing horizontally 2 TextViews and an ImageView between them according to text length

If Text1 is longer, than it should push everything to the right
If Text2 is longer, than it should push everything to the left
Otherwise, the arrow should be centered according to parent view
If any TextView exceeds, thus the whole view exceeds the parent view, then it should be trimmed (ellipsize)
You can achieve this using ConstraintLayout. Create a packed horizontal chain, and use wrap_content plus constrainedWidth on each text view:
<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="wrap_content">
<TextView
android:id="#+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"
android:ellipsize="end"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/image"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constrainedWidth="true" />
<TextView
android:id="#+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"
android:ellipsize="end"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#id/image"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constrainedWidth="true" />
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#id/left"
app:layout_constraintEnd_toStartOf="#id/right"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
If both text views have long text, you can control which one gets given space first by re-ordering the tags within the ConstraintLayout. This won't change how they're positioned; it will change only whether the left or right text stretches first.

Scrollview overlaps part of the text

I need help.
At work, I was given a task to figure out why ScrollView overlaps part of the text. The layout is multi-layered, and I think the problem lies in this. I'm new to android studio and it's still hard for me to understand the relationships of all objects.
all the XML is here https://docs.google.com/document/d/1PaGIWPn2w6ubZraVpQfq8Rrqo0uCWYOiIbxnCWaIKTQ/edit?usp=sharing
below is a part of the code
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center|left|center_vertical"
android:orientation="vertical">
<TextView
android:id="#+id/tvMessage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="2dp"
android:textColor="#color/mainBlackColor"
android:textSize="24dp"
tools:text="Сообщение" />
<TextView
android:id="#+id/tvDetails"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/red"
android:lines="3"
android:paddingStart="3dp"
android:paddingLeft="3dp"
android:paddingTop="2dp"
android:paddingEnd="3dp"
android:paddingRight="3dp"
android:paddingBottom="2dp"
android:textColor="#color/mainTextColor"
android:textSize="18dp"
android:visibility="gone"
app:autoSizeMaxTextSize="18dp"
app:autoSizeMinTextSize="10dp"
app:autoSizeStepGranularity="4dp"
app:autoSizeTextType="uniform"
tools:text="Детали"
tools:visibility="visible" />
</LinearLayout>
</ScrollView>
Add android:scrollbarStyle="outsideOverlay" and padding_horizontal to your scrollView. This should solve your issue.

How can I set my imageviews to fill linearlayout with equal spacing?

I have four image icons that I need to display with Imagebutton or Imageview. The problem is when I use the following code, they all are aligned left leaving an empty space to the right.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="4">
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:src="#drawable/sale"
android:layout_weight="1"/>
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:src="#drawable/shirt"
android:layout_weight="1"/>
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:src="#drawable/women"
android:layout_weight="1"/>
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:src="#drawable/technology"
android:layout_weight="1"/>
</LinearLayout>
How can I get them equally distributed on the linearlayout so that they fill the whole width?
I just managed to fix the issue. It seems I was needed to use android:layout_width"fill_parent" instead of android:layout_width="wrap_content". I tried this after #grwww suggested android:layout_gravity="fill" which was not the needed attribute. Then I got to learn about fill_parent

Custom spinner style

How can I style/customize spinner like shown below using xml?
I can make white background with border, but i can't set icon on the left and arrow on the right.
If your problem is with a layout that sets the icon to the left and arrow to the right, the following should work.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true" />
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/icon" />
<ImageView
android:id="#+id/arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true" />
</RelativeLayout>
I'm at work, so I can't test this out, but I think it should work.

Android DP toughts?

Can someone please give me directions on this:
I've got a ListView, the adapter got a LinearLayout and in this I got four more LinearLayouts.
Now I read about dp and it is relative to 160, but when I read different examples this number "160" seems to be different on different screens, so how do I work with dp?
I am used to work with % in this cases.
Now I want my four LinearLayouts to be:
55dp
35pd
35pd
35pd
Like if the dp was 160!
But as I mentioned above, this dosen't work on all screens.
Can someone tell me how I should work with this? Directions or a good tutorial or similar?
This is what I have tried, and come up with so far:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="15dip"
android:layout_marginBottom="15dip"
android:paddingTop="15dip"
android:paddingBottom="15dip" >
<LinearLayout
android:orientation="vertical"
android:layout_width="55dp"
android:layout_height="wrap_content"
android:gravity="center">
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="35dp"
android:layout_height="wrap_content"
android:gravity="center">
<Button
android:text="Woho"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:text="Woho"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<Button
android:text="Woho"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="35dp"
android:layout_height="wrap_content"
android:gravity="center">
<Button
android:text="Woho"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:text="Woho"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<Button
android:text="Woho"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
</LinearLayout>
As per the android documentation, 1 DP = 1 pixel on a 160 DPI screen. If the screen is 240 DPI, then 1.5pixel = 1 DP. the size of one DP is independent of underlying hardware resolution but a function of DPI of the screen.
To your layout question, if you assign a fixed width value to your layout, then it will not look good on larger screen sizes.
Better to use layoutweight to distribute the width between those layouts.

Resources