Consider the Hotmail app for Android. When you check an e-mail item, three buttons appear at the bottom: [Mark Read] [Mark Unread] [Delete]
When you uncheck it, the buttons go away again.
What's the layout for this? I've tried this, but it yields scrolling problems at the bottom (can't see last item):
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/black" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#android:color/darker_gray"
android:orientation="horizontal"
android:paddingLeft="5dip"
android:paddingRight="5dip"
android:paddingTop="5dip" >
<Button
android:id="#+id/bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:enabled="false"
android:text="#string/mark_read" />
</LinearLayout>
Then, I also need to show/hide this stuff?
Changing the visibility of bottom linearlayout will show/hide it. You'll need to give it an id and then
LinearLayout bottomLayout = (LinearLayout)findViewById(R.id.someId);
bottomLayout.setVisibility(View.GONE)// or View.VISIBLE
As for the scrolling problem, that occurs because the RelativeLayout overlays view components, so you can either show/hide the button overlaying the bottom of the ListView or change the Relativelayout to a LinearLayout so that the ListView ends before the button and change the visibility.
Though I'm not sure this will look very good when you suddenly show the button and the ListView has to resize itself.
Note on visibility
setVisibility(View.GONE);
will remove the view from the layout and other component may resize due to this. However using
setVisibility(View.INVISIBLE);
keeps the space the view took up in the layout and simply makes the view invisible and no resizing will occur.
Related
Our app's main content is a RecylerView of CardView's. For signup we require more than just a username/password to create an account so we decided to make the signup flow out of CardView's to match the user experience once they sign up.
To do that I have a single Activity that animates fragments in from the bottom and existing fragments out the top to emulate scrolling. This fake scrolling occurs when the user enters data and hits next to advance. This works pretty well except for one case. When we have a EditText for input the keyboard comes up and covers the 'next' button on the bottom of the screen.
In our user testing we've noticed a high percentage of users trying to scroll the card up to get to the next button instead of dismissing the keyboard.
I've spent a lot of time unsuccessfully trying to get the CardView to scroll up to reveal the button and I'm out of ideas and looking for new ones.
The signup Activity layout only contains a FrameLayout that I load Fragments into. Each fragment that gets loaded has a CardView for the root layout.
In the manifest I have set the activity's windowsSoftInputMode to adjustResize, adjustPan with little success.
activity_signup.xml
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/signUpContent"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
simplified fragment_enter_code.xml
<android.support.v7.widget.CardView
style="#style/CardViewStyle.SignUp"
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"
app:cardCornerRadius="25dp"
app:cardElevation="2dp"
app:cardUseCompatPadding="true"
app:contentPadding="8dp">
<EditText
android:id="#+id/codeEditText"
style="#style/HintedEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Code"
android:inputType="text"/>
<Button
style="#style/NextButton"
android:id="#+id/nextButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:enabled="false"
android:text="#string/next"/>
</android.support.v7.widget.CardView>
When I tried putting the CardView in a ScrollView the cardview layout (with fillViewport true), I get a scrollbar but the card doesn't scroll and the cardview layout gets messed up.
Does anyone know the windowSoftInputMode's well enough to point me in the right direction? Or is the CardView just not going to scroll outside of a Container that is design to hold them?
It feels like the solution to this is in manipulating the activity's view not the fragments.
I ended up creating a new app to just play around with this issue and noticed that if I had a layout that didn't contain a CardView whose root layout was a ScrollView it didn't scroll unless the activities windowSoftInputMode is set to adjustResize and then it will scroll.
I then made a layout with a <ScrollView><CardView><content...></CardView></ScrollView> and the size of the CardView was always the default row size for a card and wouldn't match_parent. I solved that with fillViewPort="true" on the ScrollView but when the keyboard came up it wouldn't scroll.
Turns out the secret sauce was to put a FrameLayout (or anyother layout) in between the CardView and the ScrollView.
You still have to account for the resize of the Layout to prevent your view elements not stacking over each other but Once you do that you now get the view above the soft keyboard to scroll and the ability to reach the rest of the UI with a CardView.
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:fillViewport="true">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardCornerRadius="35dp"
app:cardElevation="2dp"
app:cardUseCompatPadding="true"
app:contentPadding="8dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="200dp"
android:src="#drawable/common_ic_googleplayservices"/>
<EditText
android:id="#+id/input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_below="#id/image"
android:hint="Input"
android:inputType="text"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/input"
android:orientation="vertical"
android:gravity="bottom|center_horizontal">
<Button
android:id="#+id/nextButton"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:enabled="false"
android:text="Next"/>
</LinearLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>
</FrameLayout>
</ScrollView>
I am fairly new to Android UI design. I'm attempting to mimic the UI design of the following Living Social screen shot:
What is the best way to structure the UI elements here? How can this be implemented in XML? I'm trying to use the Android Eclipse UI editor to drag and drop UI elements, but it seems that I'll need to dynamically program the UI. What is the recommended way to approaching a problem like this?
So far, I have the following:
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin">
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<ImageView
android:id="#+id/imageViewBackground"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:scaleType="fitXY"
android:src="#android:drawable/dialog_holo_dark_frame" />
<View
android:id="#+id/view1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<View
android:id="#+id/view2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<View
android:id="#+id/view3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</ScrollView>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:backgroundTint="#color/abc_search_url_text_normal"
android:gravity="bottom|end"
android:orientation="vertical" >
<Button
android:id="#+id/buttonBUY"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="BUY!" />
</LinearLayout>
</LinearLayout>
Questions:
I'm using a parent LinearLayout. Inside this, I have a ScrollView for the top and a LinearLayout on the bottom. The LinearLayout on the bottom has a child button for the BUY NOW button. Is this the correct parent layout scheme?
Inside the ScrollView is an ImageView which is aligned to the top of the ScrollView. Then, inside the scrollview are X number of white boxes. How can I place the inner white box view slightly on top of the ImageView? Will I need to do this programatically?
What is the recommended way to create the inner white box views? Do I need to create a separate .xml view file for each of these? Or would you recommend to use a Fragment for each of the white boxes? Or, do I need to implement a custom view class for each of the white boxes?
Thank you
Probably, you need Parallax effect and CardView controls inside linear layout control. In order to add bottom button you can use Relative layout. As for parallax, please, take a look at the following thread : How to do the new PlayStore parallax effect
I have a layout like:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1">
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:scrollbars="vertical"
android:layout_weight="1">
<-- A relative layout that contains a lot of edit text fields and a few text views at the bottom that cover up the screen-->
</ScrollView>
<Button
android:layout_width="match_parent"
android:layout_height="60dp"
android:text="something"
android:layout_weight="0"
android:visibility="gone"/>
</LinearLayout>
and what i want to do is just achieve the effect that when the keyboard pops up from tapping on any EditView inside the ScrollView, the button at the bottom should NOT cover up any text views, because it is in the gone state. but right now, whenever i tap on any of the EditText fields, it seems to be covering up some of the text views that i have.
why is the screen rendered such that it designates space for the gone button i have at the bottom?
Try adding the following to the activity tag in your manifest.
android:windowSoftInputMode="adjustNothing"
I have a layout similar to Foursquare (image), where a View (in their case, a map) is behind a ListView, but is visible because the first element is transparent.
I need the View behind the ListView to take touch and swipe events. Is there a way to make only that first invisible item of the ListView ignore these events and allow the events to propagate to the View behind it, but have the rest of the ListView items take the events as usual?
I'm just hoping I won't have to completely abandon the ListView and use a ScrollView instead, because I've already implemented a lot of ListView specific features.
ScrollView on the back will work normaly unless you click the button:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:id="#+id/bottom"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/text"
android:text="asdfasdfa Put more text for testing sdfasdfasdfasdfasdfff
afdasdfasdfasdfasdfasdf
asdfasdfa"/>
</ScrollView>
<LinearLayout
android:id="#+id/top"
android:layout_height="match_parent"
android:layout_width="match_parent">
<Button
android:id="#+id/butt"
android:layout_height="100dp"
android:layout_width="200dp"
android:text="Test"/>
</LinearLayout>
</FrameLayout>
Both of the layers/frames have height and width set to match_parent (full screen in this case). And you can basicaly put anything you want into both of this layers as you need it.
My layout is a ScrollView with some TextView and other controls and also an ExpandableListView.
What I want to do is When Expanding the ExpandableListView the controls which are below it move down and again upon collapsing, all the controls move up and only Group of Expendables become Visible.
The problem is when using wrap_content for expandView's Height the expanding of it shows nothing and just the indicator (little arrow) shows that it's expanded, and when explicitly use some numbers eg. 200dp, the lowest items of expandView not shown. (Because of using two Scrolling widget together).
Here's my simplified layout.
<ScrollView
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="HardcodedText" >
<LinearLayout>
//some controls
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ExpandableListView
android:id="#+id/lstDrugs"
android:layout_width="match_parent"
//HERE is the point that wrap_content only shows the groups header
android:layout_height=**"wrap_content"**
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:divider="#drawable/dividergradient"
android:dividerHeight="2dp" >
</ExpandableListView>
<Button
android:id="#+id/btnAddDrug"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/lstDrugs"
android:text="Add" />
</RelativeLayout>
</LinearLayout>
I've just found my answer in this thread.
The problem is with using List inside ScrollView. To handle it you should use a layout other than the ScrollView (eg. LinearLayout) and add other widgets as Header and Footer of the list. This would enable the scrolling of the view and also expanding of the List.