I've seen those CardViews (I'm not sure they're even CardViews) with dividers used in a lot of apps, so I'm guessing there is an easy way to create them.
I wanted to ask how is it exactly done? are those even CardViews?
I couldn't find out more about them because I didn't know the name of the View exactly, so If someone could direct me to an example with code I'd be grateful.
Image example:
You can use this code this may help
<android.support.v7.widget.CardView
android:id="#+id/cardview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/margin_large"
android:layout_marginRight="#dimen/margin_large"
android:elevation="100dp"
card_view:cardBackgroundColor="#android:color/white"
card_view:cardCornerRadius="8dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="center_vertical"
android:paddingLeft="25dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Conversations" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#android:color/darker_gray" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="30dp"
android:paddingTop="20dp"
android:paddingBottom="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="game" />
...
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
The shown screenshot shows a normal CardView with views as divider in-between.
There is no DividerView or something similar if you searching for something like this. Just use a simple View with a height and a background.
I've something similar in a library of mine. I use this to create the divider:
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/stroke"/>
card_library.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="8dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:id="#+id/libraryname"
style="#style/CardTitle"
android:fontFamily="sans-serif-condensed"
android:textStyle="normal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"/>
<TextView
android:id="#+id/libraryversion"
style="#style/CardTitle"
android:fontFamily="sans-serif-condensed"
android:textStyle="normal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:layout_marginTop="4dp"
android:gravity="left|bottom"
android:maxLines="1"
android:textSize="12sp"/>
<TextView
android:id="#+id/librarycreator"
style="#style/CardTitle"
android:fontFamily="sans-serif-condensed"
android:textStyle="normal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:gravity="right"
android:maxLines="2"
android:textSize="14sp"/>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="4dp"
android:background="#color/stroke"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:padding="4dp">
<TextView
android:id="#+id/description"
style="#style/CardText"
android:fontFamily="sans-serif-condensed"
android:textStyle="normal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:maxLines="20">
</TextView>
</LinearLayout>
</LinearLayout>
It will then look like this:
Set app:cardElevation="0dp" then use a View - see below
<android.support.v7.widget.CardView
android:id="#+id/cv"
xmlns:android="http://schemas.android.com/apk/res/android"
app:cardElevation="0dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto">
<!-- Insert UI elements -->
<View
android:layout_width="fill_parent"
android:background="#android:color/darker_gray"
android:layout_height="2dp"/>
</android.support.v7.widget.CardView>
Related
in my app, the TextView specified as R.id.text3 does cut off its content with half of a line being shown sometimes. Additionally, ellipsize is not working either. From the layout, do you see what I have to add so the Text is letting out the cut off line and (in the best case) ellipsizing at the end too?
If you might need my CursorAdapter code, please feel free to ask for it! I am by the way also defining a padding on the "linearLayout" to match the navigation bar.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:airbnb="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="?android:attr/windowBackground"
android:foreground="?android:attr/selectableItemBackground"
android:id="#+id/baseRelativeLayout"
android:focusable="true"
android:clickable="true"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:id="#+id/linearLayout"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/relative_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="false"
android:clickable="false"
android:layout_marginTop="5dp"
android:minHeight="80dp">
<ImageView
android:id="#+id/main_icon"
android:layout_width="#dimen/entry_img_size"
android:layout_height="#dimen/entry_img_size"
android:layout_centerVertical="true"
app:shapeAppearance="#style/ShapeAppearance.Daily.MediumComponent"
android:layout_marginLeft="16dp"
android:clickable="true"
android:scaleType="centerCrop"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="15dp"
android:layout_marginTop="10dp"
android:id="#+id/titleLinearLayout"
android:layout_toRightOf="#+id/main_icon"
android:orientation="vertical">
<TextView
android:id="#android:id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawablePadding="3dp"
android:ellipsize="end"
android:gravity="top"
android:maxLines="3"
android:textSize="28sp"
android:textColor="?attr/contentColor"
android:clickable="true"
android:textStyle="bold"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textIsSelectable="false"/>
<TextView
android:id="#android:id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:alpha="0.7"
android:textColor="?attr/contentColor"
android:drawablePadding="3dp"
android:singleLine="true"
android:clickable="true"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textIsSelectable="false"/>
</LinearLayout>
<com.airbnb.lottie.LottieAnimationView
android:id="#+id/favorite_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingTop="10dp"
airbnb:lottie_fileName="star.json"
airbnb:lottie_scale="0.3"
airbnb:lottie_autoPlay="false"
airbnb:lottie_loop="false"
android:layout_alignParentEnd="true" />
</RelativeLayout>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:visibility="gone"
android:clickable="true"
android:layout_gravity="center_horizontal"
android:scaleType="fitStart"
android:adjustViewBounds="true"
android:layout_marginBottom="5dp"
android:maxHeight="500dp"
android:layout_marginTop="5dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:focusable="true" />
<TextView
android:id="#+id/text3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="1dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:ellipsize="end"
android:textColor="?attr/contentColor"
android:textSize="18sp"
android:focusable="false"
android:clickable="false"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textIsSelectable="false"/>
</LinearLayout>
You have to put your LinearLayout(linearLayout) inside a ScrollView
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:id="#+id/linearLayout"
android:layout_height="match_parent">
<....
....>
</LinearLayout>
</ScrollView>
for ellipsize, try to add android:maxlines.
for the cut line, you need to use a scrollview i think.
How to add this Layout to my CardView ?
I want to have a TextView, a divider and another TextView like in the "after" picture.
Before:
After:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/post_year"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="1" />
<TextView
android:id="#+id/post_title"
style="#style/TextAppearance.AppCompat.Medium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:textStyle="bold"
tools:text="My First Post" />
</LinearLayout>
Thanks!!
#Ajay Shrestha solution works perfectly, just adding another possible solution.
If you do not want to fix the height of cardview as there can be some text in multiple lines, then follow below code. Otherwise, #Ajay Shrestha solution is much simpler. Just remove the padding of the Textviews and fix the height of CardView
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentPadding="10dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/post_year"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="1"
android:paddingTop="10dp"
android:paddingBottom="10dp"/>
<View
android:id="#+id/line"
android:layout_width="1dp"
android:layout_height="wrap_content"
android:background="#color/colorLightGray"
android:layout_alignTop="#id/post_year"
android:layout_alignBottom="#+id/post_title"
android:layout_toRightOf="#id/post_year"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"/>
<TextView
android:id="#+id/post_title"
style="#style/TextAppearance.AppCompat.Medium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:textStyle="bold"
tools:text="My First Post"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:layout_toRightOf="#id/line"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
Change android:orientation to horizontal. For the divider, the answer is in this: https://stackoverflow.com/a/2659038/433804
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#FF0000FF" />
Do Like this
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_gravity="center"
card_view:cardCornerRadius="4dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:text="4" />
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_margin="15dp"
android:background="#color/black" />
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:text="Okay I am here" />
</LinearLayout>
</android.support.v7.widget.CardView>
I want to create card like -
,
I try to use margin, but not win with this idea. I try create for all element personal view and use padding or margin but I not have result.
I have code like that
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/tools"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/rlCardBlock"
style="#style/Widget.CardContent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:maxLines="2"
android:textStyle="bold"
android:text="title"/>
<TextView
android:id="#+id/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/title"
android:maxLines="5"
android:text="content" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_below="#id/content"
android:layout_marginBottom="8dp"
android:background="#null"
android:src="#drawable/ic_more_vert_black_36dp" />
</RelativeLayout>
</android.support.v7.widget.CardView>
Thank you for your attentions.
Android already have pre defined widgets for card and recycler view. You may use the android cardview and recycler view for your problem, it quiet easy for you to implement.
For this
You first add dependencies if you are using android studio as IDE
compile 'com.android.support:cardview-v7:21.0.+'
compile 'com.android.support:recyclerview-v7:21.0.+'
then in your above metioned code change it into
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:padding="16dp"
>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/cv"
>
<LinearLayout
android:id="#+id/rlCardBlock"
style="#style/Widget.CardContent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:maxLines="2"
android:textStyle="bold"
android:text="title"/>
<TextView
android:id="#+id/content"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/title"
android:layout_marginTop="12dp"
android:maxLines="5"
android:text="content" />
<TextView
android:id="#+id/content"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/description"
android:layout_marginTop="16dp"
android:maxLines="5"
android:text="content" />
<LinearLayout
android:id="#+id/rlCardBlock"
style="#style/Widget.CardContent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Action 1"
android:id="#+id/button1"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Action 2"
android:id="#+id/button2"
/>
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
here is the tutorial : link
On title use android:layout_marginTop="22dp"
On subtitle use android:layout_marginTop="12dp"
On text use android:layout_margin="16dp"
But, you may choose other ways, either padding or margin
I am currently working on an android project that uses AdapterViewFlipper. The animation is working but the problem is that the texts in the textviews from previous and present views are intermixed as shown in the image.
Also I have been trying the whole day to make its width half the parent and its height to accommodate the whole content but no luck. I have googled a lot and could not find any concrete solutions.
Here is the declaration of AdapterViewFlipper:
<AdapterViewFlipper
android:id="#+id/dataFlipper"
android:layout_above="#+id/btnReport"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dp"
android:clipChildren="false"
android:isScrollContainer="false"
android:background="#drawable/rounded_background"/>
and here is the layoutof AdapterViewFlipper item
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="2dp">
<TextView
android:id="#+id/txtEventName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text=""
android:textAppearance="?android:attr/textAppearanceLarge"
android:textAlignment="center"/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/primary_dark_material_light"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="1.0">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_gravity="left"
android:layout_weight="0.5">
<TextView
android:id="#+id/txtTotalIncidents"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAlignment="center"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text=""/>
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="#color/primary_dark_material_light"/>
<TextView
android:id="#+id/txtTotalInjured"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAlignment="center"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text=""/>
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="#color/primary_dark_material_light"/>
<TextView
android:id="#+id/txtTotalFamily"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAlignment="center"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text=""/>
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="#color/primary_dark_material_light"/>
<TextView
android:id="#+id/txtTotalComplete"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAlignment="center"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text=""/>
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="#color/primary_dark_material_light"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="0.5">
<TextView
android:id="#+id/txtTotalDeath"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAlignment="center"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text=""/>
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="#color/primary_dark_material_light"/>
<TextView
android:id="#+id/txtTotalMissing"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAlignment="center"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text=""/>
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="#color/primary_dark_material_light"/>
<TextView
android:id="#+id/txtTotalEconomy"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAlignment="center"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text=""/>
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="#color/primary_dark_material_light"/>
<TextView
android:id="#+id/txtTotalPartial"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAlignment="center"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text=""/>
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="#color/primary_dark_material_light"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Any help to resolve these problem would be appreciated. Thanks in advance
Ok I have already found solution to my problem but forgot to mention here. In case someone faces the same problem, the solution is a single line code. It was in fact not the problem with adapter but with the fragments. Just adding the following line of code in the onCreateView method of the fragments solves the issue for me.
container.removeAllViews()
I was trying to make an interface that allows horizontal texts to be equally space, using layout_weight for responsiveness
So, I tried the code below
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:background="#android:color/darker_gray">
<TextView
android:gravity="center"
android:text="Guest List"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="24sp"
android:background="#android:color/holo_blue_bright"/>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white">
<TextView
android:text="Kunal"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="24sp"/>
<TextView
android:text="Darling"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="24sp"/>
<TextView
android:text="Shocker"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="24sp"/>
</LinearLayout>
However, all the texts disappear.
So, could anyone please kindly explain to me what happened and how to fix this problem?
Try this,
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/darker_gray"
android:gravity="center_vertical"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/holo_blue_bright"
android:gravity="center"
android:text="Guest List"
android:textSize="24sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Kunal"
android:textSize="24sp" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Darling"
android:textSize="24sp" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Shocker"
android:textSize="24sp" />
</LinearLayout>
</LinearLayout>
Using a white background color in the second LinearLayout, you may be trying to see white on white text.
I'd try to add to the TextViews something along:
android:textColor="#android:color/black"