Make only a part of ListView element change when clicked - java

I find it very difficult to explain my problem to a search engine, or to anyone for that matter. I'll do my best to explain it. I have a ListView and I made custom views for elements in the ListView. This is the XML:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/text1"
android:layout_width="match_parent"
android:layout_height="#dimen/list_item_height"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:singleLine="true"
android:ellipsize="marquee"
android:textColor="#color/black"
android:gravity="center"
android:background="#drawable/spinner_dropdown_style"/>
<View
android:id="#+id/divider"
android:layout_width="fill_parent"
android:layout_height="5dp"
android:layout_alignParentLeft="true"
android:layout_below="#+id/text1"
android:background="#drawable/shadow" />
</RelativeLayout>
And this is how the ListView looks like:
As you you can see, the divider is always grey but when ListView element is clicked, the divider turns blue. This is the problem. I only want the white part of the element to turn green and the grey divider to stay grey.
This is the spinner_dropdown_style (selector):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false"
android:drawable="#android:color/transparent" />
<item android:state_pressed="true"
android:drawable="#color/button_color_pressed" />
</selector>
How do I make it so that selector will only work on the white area and the grey divider stays grey even when element is clicked?

add android:divider="#layout/id of layout" this line in your list view
make another layout for
<View android:id="#+id/divider"
android:layout_width="fill_parent"
android:layout_height="5dp"
android:layout_alignParentLeft="true"
android:layout_below="#+id/text1"
android:background="#drawable/shadow" />
add remove element.
hope this will help out

add to your list view in xml:
android:drawSelectorOnTop="false"
android:cacheColorHint="#00000000"

The ListView has its own selector that it applies to selected items. You are just toggling the background of the TextView, not the entire selected item. To do that, you can try adding this to your listview:
android:drawSelectorOnTop="true"
android:listSelector="#color/button_color_pressed"

Related

How to display an image in navigation drawer

I am trying to make my first hamburger menu with some images, but they are displayed in grey scale, not the real image. Here is a photo of how it looks:
And here is the code for the XML file:
<item
android:id="#+id/desp_mercedes"
android:icon="#drawable/mercedes"
android:title="Mercedes" />
<item
android:id="#+id/desp_audi"
android:icon="#drawable/audi"
android:title="Audi" />
<item
android:id="#+id/desp_bmw"
android:icon="#drawable/bmw"
android:title="BMW" />
I want to know how to display the original images. I have both SVG and PNG files for better quality.
In your nav_header_main.xml layout resource file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/nav_header"
android:layout_width="match_parent"
android:layout_height="160dp"
android:background="#color/colorAccent"
android:clickable="true"
android:focusable="true"
android:foreground="?attr/selectableItemBackgroundBorderless"
android:gravity="bottom"
android:orientation="vertical"
android:padding="16dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
//here you can add your image src
<ImageView
android:id="#+id/nav_header_imageView"
android:layout_width="64dp"
android:layout_height="64dp"
android:src="#drawable/ic_imageview" />
<TextView
android:id="#+id/nav_header_textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="16dp"
android:text="Chike Mgbemena"
android:textAppearance="#style/TextAppearance.AppCompat.Body1" />
</LinearLayout>
You can maybe try this out: How do I customize the navigation drawer in Android Studios?
TL;DR: Create a ListView in your DrawerLayout with the appropriate implementation, Adapter, item.xml and such.
I found the way to display the original images, here is the fragment of code:
navigationView.setItemIconTintList(null);
"navigationView" is the name for my drawer, change it to yours on your MainActivity

bottom tool bar border not matching the height of the toolbar android studio

I am trying to get my buttons to fit within the border of the bottom toolbar. Right now my bottom toolbar looks like this.
and the following xml files for the bottom toolbar.
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:background="#drawable/white_grey_border_bottom"
android:gravity="bottom"
android:minHeight="?attr/actionBarSize"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingEnd="16dp"
android:paddingStart="16dp">
<Button
android:id="#+id/homeIcon"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginBottom="8dp"
android:background="#drawable/home" />
<Button
android:id="#+id/calendarIcon"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginBottom="8dp"
android:layout_marginStart="32dp"
android:background="#drawable/calendar_alt" />
<Button
android:id="#+id/heartIcon"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginStart="124dp"
android:background="#drawable/oval_84" />
<Button
android:id="#+id/userIcon"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="32dp"
android:background="#drawable/user" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
<Button
android:id="#+id/floatingActionButton"
android:layout_width="58dp"
android:layout_height="58dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="24dp"
android:background="#drawable/group" />
the floating action button is intended to protrude out of the toolbar however the rest of my icons should be within the border. I used this drawable resource to set my border.
white_grey_border xml:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="1dp">
<item
android:bottom="-1dp"
android:right="-1dp"
android:left="-1dp"
android:top="11dp">
<shape
android:shape="rectangle">
<stroke android:width="0.5dp"
android:color="#color/colorGrey"/>
<solid android:color="#color/colorWhite"/>
</shape>
</item>
Previously my buttons were within the toolbar and linear layout height, but after adding the border it doesnt fit the toolbar's height and hence why the grey icons protrusion. Thank you in advance :)
you can use a component "View" instead of drawable background with "1dp" height.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<View android:layout_height="1dp" android:layout_width="match_parent"/>
<Toolbar />
...
</LinearLayout>
I think bottom tool bar border not matching the height of the toolbar, because u set layout_height="1dp" for your drawable-layout and it's override "layout_height" of toolbar component.
p.s. u need to use bottom-navigation component instead of toolbar
Oops i think i resolved it already i can just change the top in white grey border xml from 11dp to 1 dp or sth . Thanks for the answers.

Animation slide a Button to the top of the screen when The User Clicks a Button

I have relative Layout that has Three Buttons, 1 anchored at the top(TopButton), One at The Bottom(BottomButton, and One that will either be placed directly below the top button or above the bottom button(MiddleButton) according to users touching my buttons.
Under Each of these buttons I have placed a ScrollView and then in there a textView. I am trying to make a set of Listeners so that when the User clicks on one of the buttons, the other two buttons ScrollViews (and their textViews) are set to View.GONE, and the button that was pushed will have their ScrollView set to View.Visible.
In addition to Setting the ScrollViews Visibility I wanted to Change the location of the buttons via a simple sliding animation (all on screen) to one of three set-ups according to the button pushed:
TopButton pushed - (Opening the Activity, what it is set to now) The scrollView for this button is visible, other two are set to gone, and both buttons are at the bottom of the screen.
MiddleButton pushed - ScrollView 1 and 3 will be set to gone and ScrollView 2 will be visible, and the MiddleButton will slide up just below the TopButton. So the order will be TopButton, MiddleButton, Scroll/TextView2, BottomButton.
BottomButton pushed - ScrollViews of 1 and 2 will be set to Gone and 3 will be set to Visible and the BottomButton will Slide up to reveal maximum space for the ScrollView. So the order in this one will be TopButton, MiddleButton, BottomButton, Scroll/TextView3
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/OverallLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
tools:context="${relativePackage}.${activityClass}" >
<Button
android:id="#+id/TopButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" />
<Button
android:id="#+id/BottomButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" />
<Button
android:id="#+id/MiddleButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/BottomButton" />
<ScrollView
android:id="#+id/Scroll1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/MiddleButton"
android:layout_below="#id/TopButton"
android:visibility="visible" >
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center" />
</ScrollView>
<ScrollView
android:id="#+id/Scroll2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/BottomButton"
android:layout_below="#id/MiddleButton"
android:visibility="gone" >
<TextView
android:id="#+id/textView2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center" />
</ScrollView>
<ScrollView
android:id="#+id/Scroll3"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#id/BottomButton"
android:visibility="gone" >
<TextView
android:id="#+id/textView3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center" />
</ScrollView>
</RelativeLayout>
I need help figuring out the fromY and toY values for this moving animation to work. What are these set to?
here's a translation animation I use. It's called "pull_in_from_top.xml"
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="500"
android:fromYDelta="-100%"
android:interpolator="#android:anim/accelerate_interpolator"
android:toYDelta="0%" />
This one does the opposite "push_out_to_top.xml"
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="500"
android:fromYDelta="0%"
android:interpolator="#android:anim/accelerate_interpolator"
android:toYDelta="-100%" />

Multiple Screen Support

I have some problem with multiple screen support, I work with dp(dpi) for specify the layout_heigth and layout_width and I hope that is the better way to support multiple screen, but when I tried with two smartphone I meet two different result.
I give an example, this is a layout I use:
<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/cities_main_layout"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:id="#+id/citieslist"
android:layout_width="wrap_content"
android:layout_height="320dip"
android:layout_gravity="center_vertical"
android:layout_below="#id/cities_main_layout"
/>
<LinearLayout
android:id="#+id/cities_button_layout"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/citieslist"
android:layout_gravity="center_vertical">
<Button
android:id="#+id/bycountry"
android:layout_height="50dip"
android:layout_width="105dip"
android:background="#drawable/buttonmarket"
android:text="#string/button_bycountry"
/>
<Button
android:id="#+id/top10"
android:layout_height="50dip"
android:layout_width="105dip"
android:background="#drawable/buttonmarket"
android:text="#string/button_top10"
/>
<Button
android:id="#+id/recommended"
android:layout_height="50dip"
android:layout_width="105dip"
android:background="#drawable/buttonmarket"
android:text="#string/button_recommended"
/>
</LinearLayout>
</RelativeLayout>
The button are at the bottom of the layout, and I see two different result:
http://img600.imageshack.us/img600/5513/htcmagicg2.png http://img600.imageshack.us/img600/5513/htcmagicg2.png
http://img441.imageshack.us/img441/6440/samsunggalaxys.png http://img441.imageshack.us/img441/6440/samsunggalaxys.png
In the last smartphone I can see the buttons, instead in the first I cannot...what's wrong?
I have to write a layout for any set of screen??!!!
Your ListView has
android:layout_height="320dip"
Now if the phone screen is smaller, it will not fit.
Try doing this instead: (Edited due to comments. This is displayed correcty in eclipse)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relative"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:id="#+id/listview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FF0000"
android:layout_above="#+id/linlay">
</ListView>
<LinearLayout
android:id="#+id/linlay"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="30dip"
android:background="#00FF00"
android:layout_alignParentBottom="true">
</LinearLayout>
</RelativeLayout>
Thant should fix it I think.
Cheers
As others have indicated, your problem is that you hardwired in a size for the ListView. If you want a business rule of "have the buttons at the bottom and have the ListView fill up the rest", you actually need to write code that implements "have the buttons at the bottom and have the ListView fill up the rest".
There are two main approaches here:
Use a LinearLayout parent for the buttons and the ListView. Use
android:layout_height="0px" and android:layout_weight="1" for the
ListView. Use a regular android:layout_height for the buttons (presumably in their own LinearLayout) and no
android:layout_weight for for them
Use a RelativeLayout parent for the buttons and the ListView.
Define the buttons as having android:layout_alignParentBottom="true".
Define the ListView as having android:layout_alignParentTop="true"
and android:layout_above="...", where the ... is the ID of the buttons' LinearLayout.
I would say it's because you are specifically declaring a height for your ListView and then laying the LinearLayout that holds your buttons at the bottom. Try changing it instead of being at the bottom of the ListView to something like
<LinearLayout
android:id="#+id/cities_button_layout"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:alignparentbottom="true"
android:layout_gravity="center_vertical">
I'm not entirely sure if align_parent_bottom is the 100% correct spelling of that.
Well, others have beaten me to it while I was typing, haha, but yeah, you're hardwiring a lot of things that shouldn't be, both the ListView and the Buttons. Take a look at this:
<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/cities_main_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:id="#+id/cities_button_layout"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
>
<Button
android:id="#+id/bycountry"
android:layout_height="50dip"
android:layout_width="fill_parent"
android:layout_weight="1"
android:background="#drawable/buttonmarket"
android:text="#string/button_bycountry"
/>
<Button
android:id="#+id/top10"
android:layout_height="50dip"
android:layout_width="fill_parent"
android:layout_weight="1"
android:background="#drawable/buttonmarket"
android:text="#string/button_top10"
/>
<Button
android:id="#+id/recommended"
android:layout_height="50dip"
android:layout_width="fill_parent"
android:layout_weight="1"
android:background="#drawable/buttonmarket"
android:text="#string/button_recommended"
/>
</LinearLayout>
<ListView
android:id="#+id/citieslist"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/cities_button_layout"
/>
</RelativeLayout>
You have android:orientation on your RelativeLayout, which isn't actually an attribute that RelativeLayout contains.
You should use the layout_weight attribute rather than hardwiring sizes for the Buttons. In my example, all buttons have a width of fill_parent, and a weight of 1. This makes them distribute the space evenly.
List the fixed button layout first, setting it to alignParentBottom="true". Then set the ListView to fill_parent, and layout_above your button layout. This keeps the button layout at the bottom, and makes the ListView take all the space above your buttons.
Tada!

Android Layout with ListView and Buttons

Alright, this specific layout is just annoying me. And can't seem to find a way to have a listView, with a row of buttons at the bottom so that the listview doesn't extend over top of the buttons, and so the buttons are always snapped to the bottom of the screen. Here's what I want:
removed dead ImageShack link
It seems like it should be so easy, but everything I've tried has failed. Any help?
Here's my current code:
RelativeLayout container = new RelativeLayout(this);
container.setLayoutParams(new RelativeLayout.LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));
//** Add LinearLayout with button(s)
LinearLayout buttons = new LinearLayout(this);
RelativeLayout.LayoutParams bottomNavParams = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
bottomNavParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
bottomNavParams.addRule(RelativeLayout.CENTER_HORIZONTAL);
buttons.setLayoutParams(bottomNavParams);
ImageButton newLayer = new ImageButton(this);
newLayer.setImageResource(R.drawable.newlayer);
newLayer.setLayoutParams(new LinearLayout.LayoutParams(45, LayoutParams.FILL_PARENT));
buttons.addView(newLayer);
container.addView(buttons);
//** Add ListView
layerview = new ListView(this);
RelativeLayout.LayoutParams listParams = new RelativeLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);
listParams.addRule(RelativeLayout.ABOVE, buttons.getId());
layerview.setLayoutParams(listParams);
container.addView(layerview);
I think this is what you are looking for.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<Button android:layout_width="fill_parent"
android:layout_height="wrap_content" android:id="#+id/testbutton"
android:text="#string/hello" android:layout_alignParentBottom="true" />
<ListView android:layout_width="fill_parent"
android:layout_height="fill_parent" android:id="#+id/list"
android:layout_alignParentTop="true" android:layout_above="#id/testbutton" />
</RelativeLayout>
I had the same problem for ages.
The solution to keeping the ListView above the buttons, but preventing it from covering them up when the list is long, is to set android:layout_weight="1.0" on the ListView. Leave the layout_weight on the buttons unset so that they remain at their natural size, otherwise the buttons will get scaled. This works with LinearLayout.
There's an example in the Android ApiDemos:
ApiDemos/res/layout/linear_layout_9.xml
I was just searching for an answer to this question and this was one of the first results. I feel as if all of the answers, including the one that is currently chosen as the "best answer" is not addressing the issue being asked about. The problem that is being stated is that there is an overlap of the two components Button and ListView in that the ListView is taking up the entire screen, and the Button is visually floating above (in front of) the ListView (blocking view/access of the last item in the ListView)
Based on the answers I've seen here and on other forums, I finally came to a conclusion on how to resolve this.
Originally, I had:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FF394952">
<ListView
android:id="#+id/game_list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
style="#android:style/ButtonBar">
<Button
android:id="#+id/new_game"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/new_game"
android:textColor="#FFFFFFFF"
android:background="#drawable/button_background" />
</LinearLayout>
</RelativeLayout>
Note the use of RelativeLayout as the root node.
This is the final, working version in which the Button does not overlap the ListView:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FF394952">
<ListView
android:id="#+id/game_list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_weight="1.0" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
style="#android:style/ButtonBar">
<Button
android:id="#+id/new_game"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/new_game"
android:textColor="#FFFFFFFF"
android:background="#drawable/button_background" />
</LinearLayout>
</LinearLayout>
There are only two differences. First, I've switched to using a LinearLayout. This will help with the next bit, which was adding android:layout_weight to my ListView
I hope this helps.
The best way is a relative layout that sets the buttons below the listview. In this example the buttons are also in a linear layout because it is easier to put them side by side at an equal size.
<RelativeLayout android:id="#+id/RelativeLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView android:id="#+id/ListView01"
android:layout_alignParentTop="true"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
</ListView>
<LinearLayout android:id="#+id/LinearLayout01"
android:layout_below="#+id/ListView01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<Button android:id="#+id/ButtonJoin"
android:text="Join"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_alignParentBottom="true">
</Button>
<Button android:id="#+id/ButtonJoin"
android:layout_alignRight="#id/ButtonCancel"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Cancel"
android:layout_alignParentBottom="true">
</Button>
</LinearLayout>
</RelativeLayout>
I know this post is rather old, but, to answer the original poster's question, the reason the code did not work was buttons.getId() returns -1. If you are going to do this, you need to set do something like call buttons.setId(10). If you do that, the code works just fine.
the easiest solution would be to create two linear layouts, one with the button and the other with the list view(Wrap content on the button height and match parent on the list layout height). then only make a scroll view over the layout with the list view and the button layout will be ignored. hope it helps, sorry i didn't feel like writing out the code.
this should work. to have buttons above the listview too, put the buttons inside another linear layout.
<LinearLayout> main container // vertical
<LinearLayout> scrollview must be contained in a linear layout //vertical - height to fill parent
<ScrollView> set the height of this to fill parent
<ListView> will be contained in the scrollview
</ListView>
</ScrollView>
</LinearLayout>
<LinearLayout> //horizontal - height to wrap content
<Button>
</Button>
</LinearLayout>
</LinearLayout>

Categories