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.
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 remove the shadow(scrollbartrack) shown below scrollbarthumb.
But unable to do it. I tried to set android:scrollbarTrackVertical="#null"
Please ignore the black part.
You can do it using XML or code.
In XML:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/yourScroll"
android:scrollbars="none" <!-- add this -->
>
or in your code:
yourScrollView.setVerticalScrollBarEnabled(false);
yourScrollView.setHorizontalScrollBarEnabled(false);
Edit
You have changed the question with your new image , for that task add drawable image as your requirement to android:scrollbarThumbVertical
<ScrollView
android:scrollbarThumbVertical="#drawable/line" <--like this-->
android:id="#+id/my_scroll"
android:layout_width="match_parent"
android:layout_height="500dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="300dp">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="400dp">
</LinearLayout>
</LinearLayout>
</ScrollView>
Note : My drawble image contain transparent area(in left and right sides) ,thats why its bit right from the edge
As of now, with the official bottom sheet component from the Android design library implemented the top edge doesn't show a shadow. But for what I've seen in various mockups and in the Material Design specs, the bottom sheet include a discrete shadow of some sort.
I think the shadow would help distant the bottom sheet from the main layout, especially if there's a peek value set and/or the bottom sheet is always visible. Otherwise it just will blend together with the main layout and its items.
I've tried both ViewCompat.setElevation(bottomSheet, 5); and setting android:elevation="5dp" to the view in the XML, without success.
I know that a shadow shape doesn't have the same appearance as an elevation - but at least give it a try. The trick is to use app:layout_anchor to clip the shadow to the bottom sheet.
activity_main.xml
<android.support.design.widget.CoordinatorLayout 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">
<MapView
android:id="#+id/map"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<View
android:id="#+id/shadow"
android:layout_width="match_parent"
android:layout_height="16dp"
android:background="#drawable/shape_gradient_top_shadow"
app:layout_anchor="#id/bottom_sheet" />
<FrameLayout
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="200dp"
android:clipToPadding="false"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior" />
</android.support.design.widget.CoordinatorLayout>
shape_gradient_top_shadow.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="90"
android:endColor="#android:color/transparent"
android:startColor="#64000000"/>
</shape>
Looks like this:
EDIT
Get an even better result with a custom ShadowView:
Post from Roman Nurik on this topic: https://plus.google.com/+RomanNurik/posts/2QvHVFWrHZf
Gist of the ShadowView based on Roman Nurik's solution: https://gist.github.com/MariusBoepple/bf869e02541cd4750550e88fa07b5ddd
Then you can do the following:
<ShadowView
android:id="#+id/shadow"
android:layout_width="match_parent"
android:layout_height="16dp"
android:gravity="bottom"
app:layout_anchor="#id/bottom_sheet" />
For API Level 21 and higher, set the following in the parent view. You can also try in the rootview of the bottomsheet (I have not tried it in the root view)
android:background="#android:color/white"
android:elevation="16dp"
If no background then can use
android:outlineProvider="bounds"
For example, I have my sheet inside a nested scroll view
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
android:elevation="16dp"
android:outlineProvider="bounds"
>
<include layout="#layout/bottomsheet_1" />
</android.support.v4.widget.NestedScrollView>
The trick is to use a CardView as parent and set the elevation in the CardView
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:background="#fff"
android:clickable="true"
android:focusable="true"
app:behavior_hideable="true"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
android:layout_height="140dp"
app:cardElevation="8sp"
card_view:cardCornerRadius="0dp">
<!--The content of your Bottom sheet-->
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
.
.
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
EDIT
This technique is not the best solution if you are supporting Kitkat and below. It's due to the extra margin added by the Cardview.
I think this will help you
first create bottom sheet like bellow then include in your main activity
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:behavior_hideable="true"
app:behavior_peekHeight="56dp"
android:layout_marginTop="0.5dp" // this margin depend on shadow area
android:background="set you color"
android:elevation="20dp" // chose your custom elevation
app:layout_behavior="#string/bottom_sheet_behavior">
<LinearLayout
android:layout_marginTop="1dp" // this margin depend on max elevation
android:layout_width="match_parent"
android:layout_height="200dp">
</LinearLayout>
</LinearLayout>
I have problem with SlidingPaneLayout.
When I open menu (made with spl), all views (textviews, imageviews, etc.) look like these textviews on screenshot (they have strange color around text, 25th is ok - this one is green when visible):
How to fix this issue?
You just have to add the following line to your code:
mSlidingPane.setSliderFadeColor(getResources().getColor(android.R.color.transparent));
For more info see the docs
In addition to 'reVerse' answer:
set your custom color:
mSlidingPane.setSliderFadeColor(getResources().getColor(R.color.mycolor));
Important: Make sure that your slided layout has a background color (any color is okey).
This works:
<android.support.v4.widget.SlidingPaneLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/tools"
android:id="#+id/SlidingPanel"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="left">
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:id = "#+id/drawerContainer"
android:orientation="vertical">
</LinearLayout>
</ScrollView>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_gravity="right"
android:layout_height="match_parent"
android:background="#color/grey_light">
<!--- your content here -->
</RelativeLayout>
</android.support.v4.widget.SlidingPaneLayout>
To mimic the general grey background you can use:
<color name="grey_light">#fffafafa</color>
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>