In my application I have a header (at the top) and a footer(at the bottom) and a CustomListView inside. I have made the HEADER & FOOTER stationary and they won't scroll. But the ListView which is placed between them, has some components which are overlapping the FOOTER. I somehow want those components in my CustomListView not to overlap the footer. Is there any way this can be done?
The code for my layout is given below-
<?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" >
<!-- Title Bar -->
<include
android:id="#+id/title_bar"
android:layout_alignParentTop="true"
layout="#layout/title_bar" />
<!-- Settings Components list -->
<ListView
android:id="#+id/custom_items_list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/title_bar"
android:layout_weight="1" >
</ListView>
<!-- Options Bar -->
<include
android:id="#+id/options_bar"
style="#style/btn_options_bar"
android:layout_alignParentBottom="true"
layout="#layout/options_bar" />
</RelativeLayout>
Have you tried adding android:layout_above="#id/options_bar" to the ListView? To do so you would also have to move the declaration of the footer to be above the ListView in the layout file so that you are not referencing an id that hasn't been declared yet. But even though the options bar would be listed in the layout before the ListView, it would still get displayed below it because of the options_bar layout_alignParentBottom="true".
I finally found the problem. The problem was, (I don't know why but) I needed to set the layout_height and layout_weight again after <include>
For those who are interested, updated xml is-
<?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="wrap_content"
android:orientation="vertical" >
<!-- Title Bar -->
<include
android:id="#+id/title_bar"
android:layout_alignParentTop="true"
layout="#layout/title_bar" />
<!-- Options Bar -->
<include
android:id="#+id/options_bar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
style="#style/btn_options_bar"
android:layout_alignParentBottom="true"
layout="#layout/options_bar" />
<!-- Settings components' list -->
<ListView
android:id="#+id/custom_items_list"
android:layout_above="#id/options_bar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/title_bar">
</ListView>
</RelativeLayout>
Related
I am creating a calculator app in android.Just like a modern calculator you see in your android device. I have created a TextViewand below that, all my buttons are present.I also want to include the trignometric functions so when buttons layout is swipped, i want to show trignometric function and when it is swiped back it show numeric buttons.The TextView should remain constant at the top.Can you somebody please guide me how to do that?
Yes u can do it.
here is an example how to do it
Layout Example
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- Static content -->
<LinearLayout
android:id="#+id/ll_bottom"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_alignParentBottom="true"
android:background="#color/holo_blue_light"
android:orientation="vertical" />
<!-- ViewPager Indicator -->
<com.viewpagerindicator.LinePageIndicator
android:id="#+id/view_pager_indicator"
android:layout_width="fill_parent"
android:layout_height="20dp"
android:layout_above="#id/ll_bottom"
android:background="#color/holo_orange_light"
app:lineWidth="10dp"
app:selectedColor="#fff"
app:strokeWidth="10dp"
app:unselectedColor="#888888" />
<!-- ViewPager containing fragments with different views -->
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/view_pager_indicator"
android:layout_alignParentTop="true"
android:background="#color/holo_red_light" />
</RelativeLayout>
In the blue region you place your static content which doesn't change like the
The orange region is used by the
ViewPagerIndicator and finally the red region is the one of the ViewPager. this area is swipeable.
I want to design a toolbar like:.
I have done most of it but having some problem.
I don't know how to make a divider between the toolbars items and also having no idea how to set a counter variable attached to the action button that increment as order takes place like given in the picture.
Any suggestions?
You can place your layout like below:
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="#+id/..."
android:showAsAction="always."
android:icon="#drawable/..."
android:title="#string/..."
android:actionLayout="#layout/your_layout_here"/>
or
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="#+id/..."
android:showAsAction="always."
android:icon="#drawable/..."
android:title="#string/..."
android:actionViewClass="your_class"/>
where "your_class" - class which inflate and implement your view with separator
Try to create a custom toolbar. Add your views between the toolbar's opening and closing tags.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="56dip"
android:background="#ff0000">
<!-- the back button -->
<ImageView
android:id="#+id/backButton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="left"
android:clickable="true"
android:onClick="onBackButtonClick"
android:paddingLeft="16dip"
android:paddingRight="16dip"
android:src="#drawable/ic_back" />
...
<!-- the devider -->
<View
android:layout_width="1dip"
android:layout_height="match_parent"
android:background="#ffffff" />
<ImageView .../>
</android.support.v7.widget.Toolbar>
I am trying to set the card size smaller in my activity but not sure how because how it references it(card:card_layout_resourceID="#layout/card_thumbnail_layout").
So my question is how do I use this library but change the height of the below card?
Here is a card
<it.gmariotti.cardslib.library.view.CardView
android:id="#+id/carddemo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card:card_layout_resourceID="#layout/card_thumbnail_layout"
android:layout_below="#+id/currentTerm"
/>
#layout/card_thumbnail_layout:(cant edit this because its in the build folder)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- Card visible layout -->
<LinearLayout
android:id="#+id/card_main_layout"
style="#style/card.main_layout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<!-- Compound view for Header Card
If you want to customize this element use attr card:card_header_layout_resourceID
You can also use your CardHeader subclass-->
<it.gmariotti.cardslib.library.view.component.CardHeaderView
style="#style/card.header_outer_layout"
android:id="#+id/card_header_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<LinearLayout
android:id="#+id/card_thumb_and_content_layout"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<it.gmariotti.cardslib.library.view.component.CardThumbnailView
style="#style/card_thumbnail_outer_layout"
android:id="#+id/card_thumbnail_layout"
android:layout_width="wrap_content"
android:layout_height="match_parent"/>
<!-- Main Content View -->
<FrameLayout
android:id="#+id/card_main_content_layout"
style="#style/card.content_outer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
</LinearLayout>
<!-- Compound view for Shadow
If you want to customize this element use attr card:card_shadow_layout_resourceID -->
<it.gmariotti.cardslib.library.view.component.CardShadowView
style="#style/card.shadow_outer_layout"
android:id="#+id/card_shadow_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<!-- Expand layout. You can customize this element with your CardExpand class -->
<FrameLayout
android:id="#+id/card_content_expand_layout"
style="#style/card.main_contentExpand"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
</FrameLayout>
</LinearLayout>
The default card has a minimum height, as specified in the documentation.
Therefore you need to add:
<item name="android:minHeight">your_value_in_dp</item>
in
style name="card.content_outer_layout"
This approach ends in setting the minHeight of all cards. However, if you want to set a height to a specific card you could first build a custom card-layout and set android:adjustViewBounds="true" in your ImageView. For more details and other solutions, see this question.
I'm using ViewPagerIndicator Library by Jake Wharton and I'm trying to have the same browsing as Tinder and a lot of recent android apps(Talking about the starting screen)...I mean only the top part of the layout is swipeable, and a smaller part at the bottom shows Fb/Twitter/G+ login buttons.
here is a screenshot of what I wish to have : http://i.imgur.com/QK91rBW.png
I already read this Question, but I think it does not answer my need.
Can you guys help me please ?
Well since you'll be using a ViewPager you don't have to think about the region which is swipeable since the height / width of the ViewPager determines this.
Layout example:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- Static content -->
<LinearLayout
android:id="#+id/ll_bottom"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_alignParentBottom="true"
android:background="#color/holo_blue_light"
android:orientation="vertical" />
<!-- ViewPager Indicator -->
<com.viewpagerindicator.LinePageIndicator
android:id="#+id/view_pager_indicator"
android:layout_width="fill_parent"
android:layout_height="20dp"
android:layout_above="#id/ll_bottom"
android:background="#color/holo_orange_light"
app:lineWidth="10dp"
app:selectedColor="#fff"
app:strokeWidth="10dp"
app:unselectedColor="#888888" />
<!-- ViewPager containing fragments with different views -->
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/view_pager_indicator"
android:layout_alignParentTop="true"
android:background="#color/holo_red_light" />
</RelativeLayout>
Result:
Explanation: In the blue region you place your static content which doesn't change like the Facebook-Button in your example. The orange region is used by the ViewPagerIndicator and finally the red region is the one of the ViewPager. As previously said only this area is swipeable.
How can I put an image on top of navigation drawer like Google Play Store or Left sidebar on Google+?
Actually I have my own adapter for the navigation drawer, it put an icon for each element of the list view, and this is the current XML:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<FrameLayout
android:id="#+id/frame_content"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</FrameLayout>
<ListView
android:id="#+id/left_menu"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/menuBackground"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp" />
</android.support.v4.widget.DrawerLayout>
I think I must add ImageView in this XML but I'm not sure if this is the correct way.
I've just found out how to implement this today (if you have not already solved this problem).
Took me hours to ask the right question
I think you're looking something like this
If so, you need to create a xml files to act as a header and add to the top of the listview.
so just create a header.xml
header.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/img_first"
android:layout_width="fill_parent"
android:layout_height="200dp"
android:scaleType="fitXY"
android:src="#drawable/hatsune" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text Name"
android:background="#88f3f3f3"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="20dp"
android:background="#88f3f3f3"
android:text="Text Point"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
Back to your activity lets say Activity.java
//Header of the listview, go to header.xml to customize
View header = getLayoutInflater().inflate(R.layout.header, null);
//addHeaderView is to add custom content into first row
yourListView.addHeaderView(header);
yourListView.setAdapter(yourAdapter);
I think I must add ImageView in this XML but I'm not sure if this is the correct way.
No, at least in my personal opinion that is not the correct way to implement it. Try to follow a approach like this.
Create a layout you want to add to the top of Navigation Drawer.
Add that layout as a header in your list using getListView().addHeaderView(headerView);
Hope this helps.. :)