I would like to achieve following result with a layout:
1) most of the view is empty;
2) first element is at the bottom of what is visible of the screen
3) there are following elements below the first one available through scrolling down.
Is it possible to achieve that?
Maybe I can achieve it through some empty placeholder at the top? How I make it fill all the space available on the screen, but not to go over the first element?
Following xml will show first element at the bottom of the page and on scroll next elements can be accessed.
<?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" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_alignParentBottom="true"
android:background="#android:color/darker_gray" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="30dp"
android:text="TEXT1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="30dp"
android:text="TEXT1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="30dp"
android:text="TEXT1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="30dp"
android:text="TEXT1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="30dp"
android:text="TEXT1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="30dp"
android:text="TEXT1" />
</LinearLayout>
</ScrollView>
</RelativeLayout>
Let me know this solves your problem :-)
I managed to achieve this using padding on the first element and moving it the bottom of the screen. I had to set up the padding programmatically after the initial layout is drawn and sizes of all views are known.
Related
I have a linear layout which contains a set of child views (mixture of text, images and other layouts).
I want to grey out the linear layout and all the child views so they look disabled (similar to how a button works).
Is this possible to achieve? I know i can set a colour filter when painting on the canvas, is there something similar for layouts?
Another way is to call setEnabled() on each child (for example if you want to do some extra check on child before disabling), check out this answer:
https://stackoverflow.com/a/7069377/4840812
You can use Frame-layout
Using TEST ONE you can achieve above text view like disabled. You can set root layout clickable false for actually disable views inside layout.
TEST TWO is for understanding purpose. Like you need to manage order of view to show effect.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--THIS IS TEST ONE-->
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginTop="150dp"
android:background="#000000"
android:gravity="center"
android:text="TEST DATA"
android:textColor="#android:color/white"
android:textSize="30sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#DAD6D6D6"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Data"
android:textColor="#color/colorAccent"
android:textSize="30sp" />
</LinearLayout>
<!--THIS IS TEST TWO-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="300dp"
android:background="#DAD6D6D6"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Data"
android:textColor="#color/colorAccent"
android:textSize="30sp" />
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginTop="400dp"
android:background="#000000"
android:gravity="center"
android:text="TEST DATA"
android:textColor="#android:color/white"
android:textSize="30dp" />
</FrameLayout>
To achieve your layout you can use the RelativeLayout. In RelativeLayout you can use the 2 different views or LinearLayout. In first layout you can add views according to your need, and In second layout you can set the alpha colorcode for disable the layout.
Please try below code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/demo_img_1" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/demo_img_1"
android:layout_marginLeft="20dp"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/trans"/>
</RelativeLayout>
Here is output for code:
I'm searching for a solution to set up multiple rows in a scrollview.
I have 15 buttons (3*5) and want to scroll to the right so there are another 15 buttons.
What I already got: all buttons are in one huge row ( at least, scrolling iself worked ).
Then I tried to set the HorizontalScrollView on the highest layer (line #1 in XML) and after that a LinearLayout that contains 3 further LinearLayouts so the tree looks like this:
<HorizontalScrollView
<LinearLayout
<LinearLayout
(buttonABCDEF)
</LinearLayout>
<LinearLayout
(button01234)
</LinearLayout>
<LinearLayout
(button56789)
</LinearLayout>
</LinearLayout>
</HorizontalScrollView>
What I get then is a (~80x80) rectangle (the linear layout in the ScrollView) that shows a text (the first view in my layout) and a button (buttonA - the first one) that is so stemmed (by whatever) that every character is written into a new line. (The amount of letters= amount of lines= button height). This isn't scrollable at all.
I'm trying to post only the code that is relevant. Note: that android:layout stuff is not important for you since it is not working in a linear layout:
<HorizontalScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads"
android:screenOrientation="landscape"
android:theme="#android:style/Theme.NoTitleBar.Fullscreen"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/horizontalScrollView1"
tools:context=".MainActivity"
android:background="#android:color/black"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation='vertical' >
android:layout_width="9dp"
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
android:layout_width="9dp"
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="0dp"
android:textColor="#android:color/white"
android:text="text"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Button
android:id="#+id/buttonA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/buttonB"
android:layout_toRightOf="#+id/textView1"
android:width="70dp"
android:text="A" />
<Button
android:id="#+id/buttonE"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/buttonD"
android:layout_alignBottom="#+id/buttonD"
android:layout_toRightOf="#+id/buttonD"
android:width="70dp"
android:text="B" />
<Button
android:id="#+id/buttonF"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/buttonE"
android:layout_alignBottom="#+id/buttonE"
android:layout_toRightOf="#+id/buttonE"
android:text="C" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<Button
android:id="#+id/button0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:background="#drawable/eins"
android:text="0" />
/LinearLayout>
/LinearLayout>
</HorizontalScrollView>
Thanks a lot for you help.
I fixed it making the layout completely new. Even that of course not the best way, it seemed faster than searching for errors
I have been facing a strange problem with layout. The problem is that the main layout have a background i.e. gray color (#DCDCDC). It consists of a child which is ScrollView with vertical LinearLayout. It contains 2 views: one is TextView with black background and next is google map.
Now the problem is: when the TextView becomes visible it is ok. But when ScrollView is scrolled to make the map visible whole screen gets dimmer which is not desirable from the consistency point of view.
And the surprising thing is that the problem is only in case of 4.x versions of Android.
Following is the layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/grey"
android:orientation="vertical"
android:padding="5dp" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp" >
<Button
android:id="#+id/back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|center_vertical"
android:background="#drawable/_btn_back"
android:onClick="clickHandler"
android:paddingLeft="15dp"
android:paddingRight="10dp"
android:text="#string/terms_and_condition_terug"
android:textColor="#color/white"
android:textStyle="normal" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<ImageView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<ImageView
android:id="#+id/info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|center_vertical"
android:layout_marginRight="10dp"
android:clickable="true"
android:onClick="clickHandler"
android:src="#drawable/_info" />
</LinearLayout>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="700dp"
android:background="#drawable/itemlistbackground" />
<com.readystatesoftware.maps.TapControlledMapView
android:id="#+id/mapview"
android:layout_width="fill_parent"
android:layout_height="700dp"
android:layout_weight="1"
android:apiKey="#string/mapApiKey"
android:clickable="true" />
</LinearLayout>
</ScrollView>
</LinearLayout>
And following is the screenshot when the TextView is visible
and following screenshot was taken when map was visible
If you look carefully at those screen second image is dimmer than the first which is not desired. I don't want the dimmer screen while showing map in it. Please help me out.
I cut out pieces of the grey border to compare them next to each other, they look the same to me. There is also a gradient in the first screenshot which gives it a glossier feel as well.
I have a relative layout, and inside it i place 3 items, 2 imageviews and one scrollview.
My layout is like this...
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:gravity="center"
android:orientation="horizontal"
android:baselineAligned="true"
android:background="#drawable/background">
<RelativeLayout
android:id="#+id/logosLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="1"
android:layout_margin="16dp"
android:gravity="center">
<!-- An image will be placed here -->
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_weight="1"
android:background="#33ffffff"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:src="#drawable/up" />
<ScrollView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_margin="8dp"
android:fadingEdgeLength="32dp"
android:scrollbars="none" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical" >
<ImageButton
android:id="#+id/hotelBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:background="#drawable/button_background"
android:contentDescription="#string/hotelBtnDesc"
android:gravity="center"
android:src="#drawable/icon1" />
<TextView
android:id="#+id/hotelBtnDescTxtVw"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:gravity="center"
android:text="#string/hotelBtnDesc"
android:textColor="#ffffff"
android:textSize="14sp" />
<!-- more scrollview items -->
</LinearLayout>
</ScrollView>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:src="#drawable/down" />
</RelativeLayout>
</LinearLayout>
The above code produces the view shown here:
You may note that the arrows are not aligned in the center, but are slightly moved to the right. Why is that, and how can I fix it ? Note that i have already used android:layout_centerHorizontal="true" to my imageviews.
Thank you in advance
Its problem with your
android:layout_margin="8dp"
remove it from both scrollview and imageView
and pass it to RelativeLayout direct.
or add
android:layout_marginTop="8dip"
android:layout_marginBottom="8dip"
in your RelativeLayout.
and pass
android:layout_centerHorizontal="true"
to your scrollview
they are aligned to the center if you put the marginRight into consideration, try adding android:layout_margin="8dp" to the arrows.
u need to set image view that is under the Relative layout set this image view width fill parent.
Try removing android:layout_weight="1" from your RelativeLayout and see if it works.
In your LinearLayout, the attribute android:orientation="horizontal" causing your display to be aligned horizontaly. Therefore your RelativeLayout is in center but since its shared with another layout thats why you cant note the difference. If you completely remove the first RelativeLayout (the one with id logosLayout) then i hope you'll see the second layout in center.
So, first you need to define the hierarchy of layout you require and then adjust your views accordingly.
It seems problem with your android:layout_margin="8dp" for your scrollview only and pass it to RelativeLayout direct but instead of using margin use padding = "8dp".
I'm very new to Android development and I'm trying to figure out how to use the RelativeLayout tag to position my Views. My goal is to have a large TextView on the left, with two ButtonViews to the right of it, stacked on top of each other. Here's the XML code I'm using:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/wood_tile">
<TextView
android:id="#+id/life_counter"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="00" />
<Button android:text="#string/button_up"
android:id="#+id/button_up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/life_counter"/>
<Button android:text="#string/button_down"
android:id="#+id/button_down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/button_up"/>
</RelativeLayout>
I feel that I must not be using the tag properly. Can someone explain how it works? Thanks in advance.
You have the left side TextView's width set to fill_parent, this will make it consume the entire screen. Anything placed to the right of it will be off screen. Use wrap_content or a specific width for the elements within the relative layout.
Your approach is also a bit off. If you want the two buttons aligned to the right of the screen, use this:
<RelativeLayout
android:id="#+id/main_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="#+id/life_counter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="00" />
<Button android:text="Button Up"
android:id="#+id/button_up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"/>
<Button android:text="Button Down"
android:id="#+id/button_down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/button_up"/>
</RelativeLayout>