Develop Reference

Adding horizontal scrolling to chip group in Relative layout

I created few static chips in a group. I'm using this link (https://material.io/design/components/chips.html#) as reference. Code is as given below:
<RelativeLayout
android:id="#+id/inputLayout"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_alignParentBottom="true"
android:background="#android:color/white"
android:gravity="bottom"
android:paddingStart="8dp"
android:paddingTop="8dp"
android:paddingEnd="8dp"
android:paddingBottom="9dp">
<ImageView
android:id="#+id/sendBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:paddingTop="4dp"
app:srcCompat="#drawable/chatbot_send_btn" />
<EditText
android:id="#+id/queryEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_toStartOf="#+id/sendBtn"
android:imeOptions="actionSend"
android:inputType="text"
android:paddingTop="4dp"
android:textSize="18sp" />
<com.google.android.material.chip.ChipGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_above="#id/queryEditText">
<com.google.android.material.chip.Chip
style="#style/Widget.MaterialComponents.Chip.Choice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="wsfdsd" />
<com.google.android.material.chip.Chip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="wsfdsd"
style="#style/Widget.MaterialComponents.Chip.Choice"/>
<com.google.android.material.chip.Chip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="wsfdsd"
style="#style/Widget.MaterialComponents.Chip.Choice"/>
<com.google.android.material.chip.Chip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="wsfdsd"
style="#style/Widget.MaterialComponents.Chip.Choice"/>
<com.google.android.material.chip.Chip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="wsfdsd"
style="#style/Widget.MaterialComponents.Chip.Choice"/>
<com.google.android.material.chip.Chip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="wsfdsd" />
</com.google.android.material.chip.ChipGroup>
</RelativeLayout>
This doesn't display all chips, it displays only 1 chip. How can I add hoizontal scrolling? do I need to display chips dynamically so that I can add horizontal scrolling?

just put on horizontalScrollView and set android:scrollbars="none"
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="none">
<com.google.android.material.chip.ChipGroup
android:id="#+id/chipsPrograms"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:paddingStart="8dp"
android:paddingEnd="8dp"
app:chipSpacing="8dp"
app:singleSelection="true" />
</HorizontalScrollView>

You can put the ChipGroup inside an HorizontalScrollView

Scrollview Realigns textView

I have a blank activity which contains many text view so I want to use scrollview but whenever I use it the text views shift from their preassigned position to the top.Before adding ScrollView and
After adding ScrollView here's the xml code
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="OFF"
android:id="#+id/button"
android:onClick="torchToggle"
android:layout_below="#+id/textView"
android:layout_centerHorizontal="true"
android:layout_marginTop="71dp"
android:background="#cdc6c6" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Torch"
android:id="#+id/textView"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:textColor="#e8d9d9" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:id="#+id/textView2"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:textColor="#dacece"
android:text="#Error In display" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:id="#+id/textView3"
android:layout_below="#+id/textView2"
android:layout_centerHorizontal="true"
android:layout_marginTop="83dp"
android:textColor="#cdc0c0"
android:text="#Error in display" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:id="#+id/textView4"
android:textColor="#f3ef7a"
android:layout_below="#+id/textView3"
android:layout_centerHorizontal="true"
android:text="#Error in display" />
<ProgressBar
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/progressBar"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="next"
android:id="#+id/button2"
android:layout_alignTop="#+id/button"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:nestedScrollingEnabled="false"
android:onClick="nextActivity" />
</RelativeLayout>
</ScrollView>

The height of your RelativeLayout is falling back to wrap_content when inside the ScrollView as the virtual height of the ScrollView is infinite and match_parent doesn't make sense.
You could try adding android:fillViewport="true" to the ScrollView. This will give the RelativeLayout a minimum height of match_parent. You should change the RelativeLayout's layout_height to wrap_content.

LinearLayout put child at the right side

I m trying to have a textview and a button in linear layout with horizontal orientation. The textview should appear at the starting and the button should appear at the end. I thought giving gravity right to the button would do the trick but the buttons doesn't move to the right side. I m thinking if I should probably use relative layout?
<\LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/productPriceTextView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Rs 3579.0"
/>
<Button
android:id="#+id/buyNowButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="Buy Now" />
<\/LinearLayout>

My way (using a RelativeLayout):
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<TextView
android:id="#+id/productPriceTextView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="Rs 3579.0"
/>
<Button
android:id="#+id/buyNowButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Buy Now"
/>
</RelativeLayout>
See how I explicitly align the TextView to the Parent's left side and the Button to the Parent's right side
You can then center the TextView vertically in the RelativeLayout, by setting:
android:layout_centerVertical="true"
in the TextView itself
Newr OS versions may prefer this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<TextView
android:id="#+id/productPriceTextView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:text="Rs 3579.0"
/>
<Button
android:id="#+id/buyNowButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:text="Buy Now"
/>
</RelativeLayout>

Try below xml:
<?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:orientation="horizontal">
<TextView
android:id="#+id/productPriceTextView1"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:text="Rs 3579.0"
/>
<Button
android:id="#+id/buyNowButton1"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="Buy Now" />
</LinearLayout>

There is a cleaner way to do this, using LinearLayout : just give the left element a width of 0 and a weight of 1, and set the right one's width on wrap_content. And that's it!
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/productPriceTextView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Rs 3579.0"
/>
<Button
android:id="#+id/buyNowButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Buy Now" />
</LinearLayout>

There are two approach:
1) You can use RelativeLayout in which you can drag your Button where you want..
2) You can use weight property for LinearLayout.
<?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:orientation="horizontal">
<TextView
android:id="#+id/productPriceTextView1"
android:layout_width="0dp"
android:layout_weight="0.8"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:text="Rs 3579.0"
/>
<Button
android:id="#+id/buyNowButton1"
android:layout_width="0dp"
android:layout_weight="0.2"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="Buy Now" />
</LinearLayout>

Use this layout instead..
<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="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/productPriceTextView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Rs 3579.0"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<Button
android:id="#+id/buyNowButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Buy Now"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>

use android:layout_gravity="end" to your linear layout to move all the elements to the right

Another simple solution here that doesn't rely on using a RelativeLayout is having an empty view between both elements using layout_weight to make sure it fills the empty space.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/productPriceTextView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Rs 3579.0"/>
<view
android:layout_height="0dp"
android:layout_width="0dp"
android:layout_weight="1" />
<Button
android:id="#+id/buyNowButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="Buy Now" />
</LinearLayout>
That way you can achieve what you want by only using a LinearLayout, now, I am not sure if this is more efficient than using a RelativeLayout. But for me it always feels a bit like an overkill to go for a relative in such a simple layout.

Just add empty view with 0dp width and 1 weight
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/productPriceTextView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Rs 3579.0"
/>
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1"/>
<Button
android:id="#+id/buyNowButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Buy Now" />
</LinearLayout>

Position a LinearLayout (horizontal center)

I have a problem positioning a LinearLayout. See image for the problem. If I use wrap_content in the field specified, it is not centered. If I use match_parent, it is centered, but the components are spaced too far apart. How do I 'wrap' the contents, but center the layout horizontally? (vertical is not a consideration here)
<LinearLayout
android:layout_width="wrap_content" !!! (or match_parent)
android:layout_height="wrap_content"
android:layout_margin="25dip"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/game1CheckButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="4dp"
android:background="#null"
android:contentDescription="#string/checkbutton"
android:gravity="center"
android:onClick="clickCheck"
android:src="#drawable/checkbutton" />
</LinearLayout>
<TextView
android:id="#+id/game1Step"
android:layout_width="200dip"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:contentDescription="#string/game1step1"
android:gravity="center"
android:textColor="#FFFFFF"
android:textSize="50sp"
android:textStyle="bold" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/game1NextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="4dp"
android:background="#null"
android:clickable="false"
android:contentDescription="#string/nextbutton"
android:enabled="false"
android:gravity="center"
android:onClick="clickNext"
android:src="#drawable/nextbutton" />
</LinearLayout>

Try using android:layout_width="wrap_content" and android:layout_gravity="center_horizontal"

As far as I can understand, you want 3 obects all positioned in the horizontal center, no matter the vertical position.
So, I'd do that like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="25dip"
>
<!-- The center object -->
<TextView
android:id="#+id/game1Step"
android:layout_width="200dip"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:contentDescription="#string/game1step1"
android:gravity="center"
android:textColor="#FFFFFF"
android:textSize="50sp"
android:textStyle="bold"
/>
<!-- The left object -->
<ImageButton
android:id="#+id/game1CheckButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/game1Step"
android:layout_gravity="center"
android:layout_margin="4dp"
android:background="#null"
android:contentDescription="#string/checkbutton"
android:gravity="center"
android:onClick="clickCheck"
android:src="#drawable/checkbutton"
/>
<!-- The right object -->
<ImageButton
android:id="#+id/game1NextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/game1Step"
android:layout_gravity="center"
android:layout_margin="4dp"
android:background="#null"
android:clickable="false"
android:contentDescription="#string/nextbutton"
android:enabled="false"
android:gravity="center"
android:onClick="clickNext"
android:src="#drawable/nextbutton"
/>
</RelativeLayout>

center align imageview with above textview

I want to center align my imageview with the above textview here's an image of what I'm getting.
I need something like this in a relative layout
<TextView
android:id="#+id/strength"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/hero_class"
android:textColor="#0095FF"
android:text="Strength"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/agility"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/hero_class"
android:layout_centerHorizontal="true"
android:text="Agility"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#0095FF" />
<TextView
android:id="#+id/intl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/agility"
android:layout_alignBottom="#+id/agility"
android:layout_alignParentRight="true"
android:text="Intelligence"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#0095FF" />
<ImageView
android:id="#+id/img_int"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/img_str"
android:src="#drawable/intelligence" />
<ImageView
android:id="#+id/img_agi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/img_int"
android:layout_centerHorizontal="true"
android:src="#drawable/agility" />
<ImageView
android:id="#+id/img_str"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/strength"
android:layout_alignParentLeft="true"
android:src="#drawable/strength" />
This is what i have done but the problem is that i can have the middle imageview centered align but the left and right one are with align to the most right and most left not in the center of above textview

In layout.xml you can use this for each Text+Image:
<TextView ...
android:text="The Text"
android:drawableBottom="#drawable/icon1" />
You could repeat it into an LinearLayout with the horizontal orientation

You can make three Relative Views each containing a Textview and Imageview posited one below the other with the ImageView in the cater of the parent Relative View.
Finally put these three within an outer Relative View to position them as you like.

Try to create three linear layouts with orietation vertical,
Each linear layout will contain textview and imageview with gravity center

You can use LinearLayout as parent Layout having android:orientation="horizontal".
and then use three LinearLayout each contains TextView and ImageView having android:orientation="vertical".
See below code-
<?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="match_parent"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/strength"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/hero_class"
android:textColor="#0095FF"
android:text="Strength"
android:textAppearance="?android:attr/textAppearanceMedium" />
<ImageView
android:id="#+id/img_agi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/img_int"
android:layout_centerHorizontal="true"
android:src="#drawable/agility" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
TextView ImageView
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
TextView ImageView
</LinearLayout>
</LinearLayout>

Hope this helps:
<?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="#android:color/black" >
<RelativeLayout
android:id="#+id/reltive1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true" >
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="TEXT VIEW"
android:textColor="#android:color/white"
android:textSize="20sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/img1"
android:layout_width="60dp"
android:layout_height="80dp"
android:layout_below="#id/text1"
android:layout_centerHorizontal="true"
android:background="#android:color/white" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/reltive1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" >
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="TEXT VIEW"
android:textColor="#android:color/white"
android:textSize="20sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/img2"
android:layout_width="60dp"
android:layout_height="80dp"
android:layout_below="#id/text2"
android:layout_centerHorizontal="true"
android:background="#android:color/white" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/reltive1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true" >
<TextView
android:id="#+id/text3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="TEXT VIEW"
android:textColor="#android:color/white"
android:textSize="20sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/img3"
android:layout_width="60dp"
android:layout_height="80dp"
android:layout_below="#id/text3"
android:layout_centerHorizontal="true"
android:background="#android:color/white" />
</RelativeLayout>
</RelativeLayout>

This is what you want...
<LinearLayout
android:id="#+id/linear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="TextView" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="TextView" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="TextView" />
</LinearLayout>
<LinearLayout
android:id="#+id/linear2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imgView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imgView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imgView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
</LinearLayout>

Check if your ImageView is centered on your layout with this attribute:
android:layout_centerHorizontal="true"
For your TextView, it needs a reference to be aligned above it and also be centered.
So you need this:
android:layout_alignParentEnd="#+id/imageView"
android:layout_alignParentRight="#+id/imageView"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:gravity="center"
Create GridView adapter and your done.