How to display TextView in front of more Buttons? - android

I have 4 Buttons and 1 TextView with dimensions 240x200 and i want this textview to display over all 4 buttons. I tried placing in xml code Text View after buttons and i tried with FrameLayout but it doesn't work in both cases still buttons are over TextView.
xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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.example.user.probalayout.MainActivity">
<Button
android:id="#+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="23dp"
android:text="Button"
android:layout_alignTop="#+id/textView"
android:layout_alignLeft="#+id/textView"
android:layout_alignStart="#+id/textView" />
<Button
android:id="#+id/button10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="#+id/textView"
android:layout_alignRight="#+id/textView"
android:layout_alignTop="#+id/button9"
android:text="Button" />
<Button
android:id="#+id/button11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_alignBottom="#+id/textView"
android:layout_alignLeft="#+id/textView"
android:layout_alignStart="#+id/textView"
android:layout_marginBottom="37dp" />
<Button
android:id="#+id/button12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/button10"
android:layout_alignStart="#+id/button10"
android:layout_alignTop="#+id/button11"
android:text="Button" />
<TextView
android:id="#+id/textView"
android:layout_width="220dp"
android:layout_height="200dp"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginEnd="70dp"
android:layout_marginRight="70dp"
android:layout_marginTop="129dp"
android:background="#906090"
android:gravity="center"
android:text="TextView"
android:textSize="24sp" />
</RelativeLayout>

Try to use Linear Layout and specify the layout direction with the android:orientation attribute.

Related

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.

Android layout - How to make the controls appear to the left/right without padding?

I have defined 3 controls on my screen, placed in the following order:
button
- textView
- button
I want to place the first button on the left side and place the textView in the middle. The second button should be on the right side.
However, I cannot find a way to force the buttons to stick to the left/right side and for the textView too stick to the middle.
This is the code:
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="<<"
android:id="#+id/button2" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/TodayDataTextView"
android:text="Today Data"
android:textAlignment="center"
android:textColor="#0000ff"
android:background="#00000000"
android:layout_margin="5dp"
android:textSize="20dp"
android:textStyle="bold|italic" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=">>"
android:id="#+id/button" />
</LinearLayout>
And this is the screenshot:
And this is what I want to have (without the padding):
Try this code :
<RelativeLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="<<"
android:id="#+id/button2"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/TodayDataTextView"
android:gravity="center_vertical"
android:text="Today Data"
android:textAlignment="center"
android:textColor="#0000ff"
android:background="#00000000"
android:textSize="20dp"
android:textStyle="bold|italic"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=">>"
android:id="#+id/button"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
Output :
set layoutgravity and gravity as left, center and right respectively for all the three widgets
You can try a RelativeLayout. Like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="<<"
android:layout_alignParentLeft="true"
android:id="#+id/button2" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/TodayDataTextView"
android:text="Today Data"
android:textAlignment="center"
android:layout_centerHorizontal="true"
android:textColor="#0000ff"
android:background="#00000000"
android:layout_margin="5dp"
android:textSize="20dp"
android:textStyle="bold|italic" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=">>"
android:layout_alignParentRight="true"
android:id="#+id/button" />
</RelativeLayout>
Please use a Relative Layout instead of a LinearLayout.
Add to Button
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
Add to TextView
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
Add to the Right Button
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
You could use layout weights to get exactly what you are looking for:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="<<"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Today Data"
android:textAlignment="center"
android:textStyle="bold|italic"
/>
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="<<"
android:id="#+id/button"
/>
Remember that Android makes two passes when determining the size and position of the components in a layout. The first pass uses the layout_width and layout_height settings. In this case it is wrap_content for most of the widgets which will make them their "natural" size to fit their content. The second pass uses the layout_weight attribute to allocate any remaining pixels. Given that this is a horizontal linear layout, those pixels will be allocate to the horizontal size of the widgets. Only the TextView specifies a weight attribute, so it will get 100% of the remaining pixels.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.20"
android:gravity="left">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="<<" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="0.60"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="data"
android:textSize="18sp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.20"
android:gravity="right">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="<<" />
</LinearLayout>
</LinearLayout>
This is also working
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="5">
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="0sp"
android:layout_weight="1"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:text="<<"
android:id="#+id/button2" />
<TextView
android:layout_width="0sp"
android:layout_weight="3"
android:layout_height="wrap_content"
android:id="#+id/TodayDataTextView"
android:text="Today Data"
android:textAlignment="center"
android:layout_gravity="center"
android:gravity="center"
android:textColor="#0000ff"
android:background="#00000000"
android:layout_margin="5dp"
android:textSize="20dp"
android:textStyle="bold|italic" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="0sp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginRight="15dp"
android:text=">>"
android:id="#+id/button" />
</LinearLayout>

Eclipse Layout: static instead of relative values?

I have a layout with two Buttons. One button is in the Center of the left half, and the other button is in the Center of the right side. But I use relative values (left="60dp" etc.). How can I have the same result with static values? Because I don't want to create an extra layout for every screen size...
<Button
android:id="#+id/button1"
android:layout_width="150dp"
android:layout_height="75dp"
android:layout_alignParentLeft="true"
android:layout_centerInParent="true"
android:layout_marginBottom="42dp"
android:layout_marginLeft="60dp"
android:text="Button" />
<Button
android:id="#+id/Button02"
android:layout_width="150dp"
android:layout_height="75dp"
android:layout_alignBaseline="#+id/button1"
android:layout_alignBottom="#+id/button1"
android:layout_alignParentRight="true"
android:layout_marginRight="60dp"
android:text="Button" />
<LinearLayout
android:orientation=horizontal
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation=horizontal
android:layout_width="0"
android:weight="50"
android:layout_height="match_parent">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:gravity="center"
android:text="Button" />
</LinearLayout>
<LinearLayout
android:orientation=horizontal
android:layout_width="0"
android:weight="50"
android:layout_height="match_parent">
<Button
android:id="#+id/Button02"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:gravity="center"
android:text="Button" />
</LinearLayout>
</LinearLayout>

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>

Best way to force ListView to bottom of the screen

I have a layout where I want the ListView to be at the bottom of the screen on every device. On the Android Studio preview it looks fine, but on my device it looks like this:
When it should look like this:
Code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/imageView"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="65dp"
android:src="#drawable/test"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Full Name"
android:id="#+id/textView"
android:layout_below="#+id/imageView"
android:layout_centerHorizontal="true"
android:paddingTop="7dp"
android:textStyle="bold"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="University"
android:id="#+id/textView2"
android:layout_below="#+id/textView"
android:layout_centerHorizontal="true" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/textView2" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button2"
android:layout_alignTop="#+id/button"
android:layout_toRightOf="#+id/textView" />
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/customList"
android:layout_below="#+id/textView"
android:layout_centerHorizontal="true"
android:layout_marginTop="95dp" />
</RelativeLayout>
You should add android:layout_alignParentBottom to your ListView.
Well take your three button in one layout say yourButtonContainer and you can have listview with property
android:layout_alignParentBottom="true"
along with the property
android:layout_below="#+id/yourButtonContainer"

Categories

Resources