i have designed a layout where data will come from recyclerview. Problem i am facing is i am unable to align items.
Below is the snippet image.
this is my 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="wrap_content">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<LinearLayout
android:background="#color/white"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="40dp">
<TextView
android:gravity="center"
android:text="prnce"
android:textColor="#color/black"
android:backgroundTint="#color/white"
android:id="#+id/groupname"
android:layout_weight="1"
android:textAlignment="center"
android:layout_width="wrap_content"
android:layout_height="match_parent">
</TextView>
<TextView
android:gravity="center"
android:text="1"
android:textColor="#color/black"
android:backgroundTint="#color/white"
android:id="#+id/groupCount"
android:textAlignment="center"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</TextView>
<ImageButton
android:backgroundTint="#color/white"
android:src="#drawable/myhomegrey"
android:id="#+id/homeWindow"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="match_parent">
</ImageButton>
<ImageButton
android:backgroundTint="#color/white"
android:src="#drawable/stargrey"
android:id="#+id/favorite"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="match_parent">
</ImageButton>
</LinearLayout>
</androidx.cardview.widget.CardView>
</RelativeLayout>
How can i align every item at center so they can come in line so that if textview text size increase or decrease it should not affect the alignment of other layouts
The weights you are assigning are causing the excess space to be distributed evenly among the widgets. Specify a weight for the text field "groupName" and remove the weights for the other fields. This will assign all excess space to the "groupName" text view. This will also push all the other widgets to the right. You can assign margins or padding to space those widgets out.
You may also want to consider assigning a specific size to the text view "groupCount".
An alternative to this would be to use ConstraintLayout.
Related
i have an interface with two ImageButtons and a TextView among them. The TextView contains a number and the two ImageButtons control that number, adding or removing 1.
The problem is when the number becomes two digits: the TextView width increase and one of two ImageButtons moves.
As you can see when the number is one digit there isn't any type of problem, but when it becomes two digits the ImageButton moves from his place. I already tried with android:layout_gravity and with android:gravity but they doesn't function. There is a way to keep the TextView "centered" and make sure the ImageButton doesn't move?
<?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:autofit="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingStart="5dp">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical"
android:orientation="vertical">
<TextView
android:id="#+id/foodName"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginEnd="10dp"
android:gravity="center_vertical"
android:hint="food_name"
android:maxLines="2"
android:textAllCaps="false"
android:textColor="#android:color/black"
android:textSize="18sp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:gravity="end"
android:orientation="horizontal"
android:padding="5dp">
<ImageButton
android:id="#+id/addFood"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#null"
app:srcCompat="#drawable/ic_add_black_40dp" />
<TextView
android:id="#+id/foodQuantity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center|center_horizontal"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:gravity="center|center_horizontal"
android:maxLength="2"
android:text="0"
android:textColor="#707070"
android:textSize="20sp"
android:textStyle="bold" />
<ImageButton
android:id="#+id/removeFood"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#null"
app:srcCompat="#drawable/ic_remove_black_40dp" />
</LinearLayout>
</LinearLayout>
This is my code and this is the layout of a RecyclerView member, because I created a personalized element.
Thanks a lot.
Since you have wrap_content on your foodQuantity TextView, addFood is going to move to accommodate for the extra spacing required to add multiple digits. If you want to keep the position of the button fixed, and make sure the buttons don't move, then you are going to have to give your TextView a fixed width to accommodate for the maximum number of characters you can expect.
I would suggest you to use android:layout_weight so you can define which element is filling the remaining space if necessary. So when setting the TextView a layout_weight of 1 and the ImageButtons a layout_weight of 0 you can afterwards set the android:gravity of the TextView that is defining the gravity inside of the TextView to center and it will always be centered.
BUT: you need to set the width of the LinearLayout to match_parent so it fills the parent. Without that the LinearLayout will never get some remaining space since it always shrinks to the size that all elements need together
...
...
<LinearLayout
android:id="#+id/layout_count"
android:layout_width="200dp"
or android:layout_width="match_parent
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_complete" />
<TextView
android:layout_width="match_parent"
android:layout_weight="1"
android:gravity="center"
android:layout_height="wrap_content"
android:text="1" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_complete" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_complete" />
<TextView
android:layout_width="match_parent"
android:layout_weight="1"
android:gravity="center"
android:layout_height="wrap_content"
android:text="1" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_complete" />
</LinearLayout>
</LinearLayout>
I'm trying to work with TextView's default auto sizing functionality but it doesn't work. I want my TextViews' texts to decrease in size if they move onto the next line and despite setting android:autoSizeStepGranularity="15dp", I barely see any difference. The 2 TextViews are on top of an ImageView
This is my XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".TopImageFragment">
<ImageView
android:id="#+id/meme_image_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/click"
android:scaleType="fitXY"
android:tag="img1"
/>
<TextView
android:id="#+id/top_text_view"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_alignTop="#id/meme_image_view"
android:layout_centerHorizontal="true"
android:autoSizeTextType="uniform"
android:autoSizeStepGranularity="15dp"
android:shadowColor="#000"
android:shadowDx="2"
android:shadowDy="2"
android:shadowRadius="2"
android:textAllCaps="true"
android:textColor="#android:color/white"
android:textAlignment="center"
android:fontFamily="#font/impact"
android:gravity="center"
android:textSize="50sp" />
<TextView
android:id="#+id/bottom_text_view"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/meme_image_view"
android:layout_centerHorizontal="true"
android:autoSizeTextType="uniform"
android:autoSizeStepGranularity="15dp"
android:shadowColor="#000"
android:shadowDx="1.5"
android:shadowDy="1.3"
android:shadowRadius="1.6"
android:textAllCaps="true"
android:textColor="#android:color/white"
android:textAlignment="center"
android:fontFamily="#font/impact"
android:gravity="center"
android:textSize="50sp" />
</RelativeLayout>
And here is an example of what I'm talking about:
Your text views have height set to wrap_content. They will grow automatically to accommodate all the text before changing text size.
Pick one of these depending on your use case (with your own values, of course):
android:layout_height="100dp"
or
android:layout_height="wrap_content"
android:maxHeight="100dp"
I have an android layout I'd like to split down the middle vertically and then add gravity so I can center items within the left and the right halves of the layout.
Can someone explain or post an example of how this might be accomplished?
Thus far I've created a layout and a horizontal layout. My problem is the horizontal layout needs balance so I'd like to figure out a way to change my current layout (show below) to include a way of centering the objects within the left and right halves of the screen.
SOURCE:
<?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/background"
android:orientation="vertical" >
<ImageView
android:id="#+id/emblem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="24dp"
android:gravity="center"
android:scaleType="fitStart"
android:src="#drawable/apn_app_logo" />
<Button
android:id="#+id/go_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/emblem"
android:layout_alignParentRight="true"
android:layout_marginBottom="23dp"
android:layout_marginRight="22dp"
android:background="#drawable/apn_app_go_button" />
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/go_button"
android:gravity="center"
android:text="#string/start_text2"
android:textColor="#000000"
android:textSize="18sp" />
</RelativeLayout>
First of all android:orientation attribute will not work in Relative Layout.If you want to split the screen half into two equal layout your parent layout will be a linear layout with android:orientation= horizontal. Then inside that have 2 LinearLayout with each android:orientation= vertical. Inside 1st Linear layout you can have the ImageView , Button and TextView with each of their layout_gravity=center.
Hope this helps. If you want to do something in the 2nd half of teh screen , do all teh stuffs in the 2nd LinearLayout.
Happy Coding.
Here's some code which should be self-explanotory:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#00dd00"
android:gravity="center"
>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#dd0000"
android:gravity="center_horizontal"
>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
</LinearLayout>
and here's what you'll achieve:
I'm trying to make horizontally design that divides screen into 4x 50% pieces within scrollable view.
I'm having linear layout that divides the screen into two 50% parts. That's okay. How to add another two 50% "under the screen" - note this root linear layout in enclosed within scroll view...
This is what I want to achieve: http://s7.postimg.org/9qyy3y1h7/image.jpg
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="#+id/as_30d"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="14dp"
android:background="#dddddd"
android:paddingBottom="5dp"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:paddingTop="5dp"
android:singleLine="true"
android:text="Your activity - kilometers"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textSize="15sp"
android:textStyle="bold" />
<LinearLayout
android:id="#+id/chart"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="#+id/as_30d"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#dddddd"
android:paddingBottom="5dp"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:paddingTop="5dp"
android:singleLine="true"
android:text="Your activity - kilometers"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textSize="15sp"
android:textStyle="bold" />
<LinearLayout
android:id="#+id/chart"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
</LinearLayout>
</LinearLayout>
Any ideas will are appreciated. I am able to figure out it myself if you give my some tips :) Thanks!
I don't think that what you want is possible just within the XML.
A solution is to at runtime get the screen height and set the height of the two nested LinearLayouts to that.
Alternatively you can use a vertical ViewPager implementation with separate fragments if that suits your needs.
I have two textviews. I want one of them to be left aligned and the other to be right aligned. Pretty much so that it looks like a 2 column table.
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:id="#+id/profileLayout" android:orientation="vertical">
<LinearLayout android:layout_width="wrap_content" android:layout_height="match_parent" android:id="#+id/experience" android:orientation="horizontal">
<TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/experienceLabel" android:textStyle="bold" android:layout_weight="0" android:text="Experience"></TextView>
<LinearLayout android:id="#+id/linearLayout4" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_weight="1"></LinearLayout>
<TextView android:text="TextView" android:layout_height="wrap_content" android:id="#+id/experienceTextView" android:layout_gravity="right" android:layout_weight="0" android:layout_width="wrap_content"></TextView>
</LinearLayout>
</LinearLayout>
<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal">
<TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_weight="1"/>
<TextView android:layout_height="wrap_content" android:layout_weight="0" android:layout_width="wrap_content"/>
</LinearLayout>
Set the weight of the first one to 1 so it will eat up all of the extra space. Set the 2nd oen to wrap content, so it only takes up as much space as it needs.
But why do you have an extra LinearLayout around them? If you have nested LinearLayouts, you should probably be using a RelativeLayout instead.
<TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/experienceLabel" android:textStyle="bold" android:layout_weight="1" android:text="Experience"></TextView>
<TextView android:text="TextView" android:layout_height="wrap_content" android:id="#+id/experienceTextView" android:layout_weight="1" android:layout_width="wrap_content"></TextView>
</LinearLayout>
Use Relative Layout. About Relative Layout Link Example link
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content" android:id="#+id/experienceLabel"
android:textStyle="bold" android:layout_weight="0" android:text="Experience"
android:layout_alignParentLeft="true"/>
<TextView android:text="TextView" android:layout_height="wrap_content"
android:id="#+id/experienceTextView" android:layout_gravity="right"
android:layout_weight="0" android:layout_width="wrap_content"
android:layout_alignParentRight="true" />
Benefit of using RelativeLayout: it reduces your number of layout. Which will optimize your ui too.
I'm not entirely sure of the exactly layout you want, but you can try 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"
android:id="#+id/profileLayout"
android:orientation="vertical">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:weightSum="2"
android:id="#+id/experience"
android:orientation="horizontal">
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/experienceLabel"
android:textStyle="bold"
android:layout_weight="1"
android:text="Experience"/>
<TextView
android:text="TextView"
android:layout_height="wrap_content"
android:id="#+id/experienceTextView"
android:gravity="right"
android:layout_weight="1"
android:layout_width="wrap_content"/>
</LinearLayout>
</LinearLayout>
You were using layout_gravity rather than gravity also. layout_gravity tells the parent how you want to be laid out, gravity tells content how to be laid out.
Notice how I have a weightSum in the parent layout to 2 and then set the two children to a weight of 1 each. I also set the parent to fill_parent
You had and extra layout in there too - if you want spacing, set a margin on the second textview or use a view (a simpler object than a LinearLayout)