Custom Drawable As CardView Background
I am trying to make the following screen. I am using CardView and I am facing difficulty in creating custom CardView. Following is the image:
Thank you Screen
I have used the following code. This is what I have tried so far.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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"
android:layout_gravity="center"
android:paddingTop="20dp">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:id="@+id/card6"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginRight="8dp"
app:cardCornerRadius="10dp"
app:cardElevation="4dp"
app:cardMaxElevation="8dp"
app:layout_constraintRight_toRightOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/micro_xml"
android:orientation="vertical"
android:padding="10dp">
<TextView
android:id="@+id/card6Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:padding="5dp"
android:text="Daily Check In"
android:textColor="#080808"
android:textSize="15sp" />
<TextView
android:id="@+id/card6Description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:padding="5dp"
android:text="Just Check in Daily and Earn Credits"
android:textColor="#000000"
android:textSize="10sp" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="12dp"
>
<ImageView
android:id="@+id/card6Image"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="center_horizontal"
android:src="@mipmap/ic_launcher_round" />
</android.support.v7.widget.CardView>
</FrameLayout>
</android.support.constraint.ConstraintLayout>If the above-given code isn't good enough for this to be achieved, I think I should:
Use an image as a background to CardView which already has this thumb and shape.
How can I do that?
android xml 
android-layout edited 3 hours ago
Rakesh Kumar
205110
asked 3 hours ago
Fazal Jarral
53
add a comment |
I am trying to make the following screen. I am using CardView and I am facing difficulty in creating custom CardView. Following is the image:
Thank you Screen
I have used the following code. This is what I have tried so far.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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"
android:layout_gravity="center"
android:paddingTop="20dp">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:id="@+id/card6"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginRight="8dp"
app:cardCornerRadius="10dp"
app:cardElevation="4dp"
app:cardMaxElevation="8dp"
app:layout_constraintRight_toRightOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/micro_xml"
android:orientation="vertical"
android:padding="10dp">
<TextView
android:id="@+id/card6Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:padding="5dp"
android:text="Daily Check In"
android:textColor="#080808"
android:textSize="15sp" />
<TextView
android:id="@+id/card6Description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:padding="5dp"
android:text="Just Check in Daily and Earn Credits"
android:textColor="#000000"
android:textSize="10sp" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="12dp"
>
<ImageView
android:id="@+id/card6Image"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="center_horizontal"
android:src="@mipmap/ic_launcher_round" />
</android.support.v7.widget.CardView>
</FrameLayout>
</android.support.constraint.ConstraintLayout>If the above-given code isn't good enough for this to be achieved, I think I should:
Use an image as a background to CardView which already has this thumb and shape.
How can I do that?
android xml android-layout edited 3 hours ago
Rakesh Kumar
205110
asked 3 hours ago
Fazal Jarral
53
add a comment |
I am trying to make the following screen. I am using CardView and I am facing difficulty in creating custom CardView. Following is the image:
Thank you Screen
I have used the following code. This is what I have tried so far.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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"
android:layout_gravity="center"
android:paddingTop="20dp">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:id="@+id/card6"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginRight="8dp"
app:cardCornerRadius="10dp"
app:cardElevation="4dp"
app:cardMaxElevation="8dp"
app:layout_constraintRight_toRightOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/micro_xml"
android:orientation="vertical"
android:padding="10dp">
<TextView
android:id="@+id/card6Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:padding="5dp"
android:text="Daily Check In"
android:textColor="#080808"
android:textSize="15sp" />
<TextView
android:id="@+id/card6Description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:padding="5dp"
android:text="Just Check in Daily and Earn Credits"
android:textColor="#000000"
android:textSize="10sp" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="12dp"
>
<ImageView
android:id="@+id/card6Image"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="center_horizontal"
android:src="@mipmap/ic_launcher_round" />
</android.support.v7.widget.CardView>
</FrameLayout>
</android.support.constraint.ConstraintLayout>If the above-given code isn't good enough for this to be achieved, I think I should:
Use an image as a background to CardView which already has this thumb and shape.
How can I do that?
android xml android-layout edited 3 hours ago
Rakesh Kumar
205110
asked 3 hours ago
Fazal Jarral
53
I am trying to make the following screen. I am using CardView and I am facing difficulty in creating custom CardView. Following is the image:
Thank you Screen
I have used the following code. This is what I have tried so far.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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"
android:layout_gravity="center"
android:paddingTop="20dp">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:id="@+id/card6"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginRight="8dp"
app:cardCornerRadius="10dp"
app:cardElevation="4dp"
app:cardMaxElevation="8dp"
app:layout_constraintRight_toRightOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/micro_xml"
android:orientation="vertical"
android:padding="10dp">
<TextView
android:id="@+id/card6Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:padding="5dp"
android:text="Daily Check In"
android:textColor="#080808"
android:textSize="15sp" />
<TextView
android:id="@+id/card6Description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:padding="5dp"
android:text="Just Check in Daily and Earn Credits"
android:textColor="#000000"
android:textSize="10sp" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="12dp"
>
<ImageView
android:id="@+id/card6Image"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="center_horizontal"
android:src="@mipmap/ic_launcher_round" />
</android.support.v7.widget.CardView>
</FrameLayout>
</android.support.constraint.ConstraintLayout>If the above-given code isn't good enough for this to be achieved, I think I should:
Use an image as a background to CardView which already has this thumb and shape.
How can I do that?
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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"
android:layout_gravity="center"
android:paddingTop="20dp">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:id="@+id/card6"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginRight="8dp"
app:cardCornerRadius="10dp"
app:cardElevation="4dp"
app:cardMaxElevation="8dp"
app:layout_constraintRight_toRightOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/micro_xml"
android:orientation="vertical"
android:padding="10dp">
<TextView
android:id="@+id/card6Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:padding="5dp"
android:text="Daily Check In"
android:textColor="#080808"
android:textSize="15sp" />
<TextView
android:id="@+id/card6Description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:padding="5dp"
android:text="Just Check in Daily and Earn Credits"
android:textColor="#000000"
android:textSize="10sp" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="12dp"
>
<ImageView
android:id="@+id/card6Image"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="center_horizontal"
android:src="@mipmap/ic_launcher_round" />
</android.support.v7.widget.CardView>
</FrameLayout>
</android.support.constraint.ConstraintLayout> <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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"
android:layout_gravity="center"
android:paddingTop="20dp">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:id="@+id/card6"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginRight="8dp"
app:cardCornerRadius="10dp"
app:cardElevation="4dp"
app:cardMaxElevation="8dp"
app:layout_constraintRight_toRightOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/micro_xml"
android:orientation="vertical"
android:padding="10dp">
<TextView
android:id="@+id/card6Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:padding="5dp"
android:text="Daily Check In"
android:textColor="#080808"
android:textSize="15sp" />
<TextView
android:id="@+id/card6Description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:padding="5dp"
android:text="Just Check in Daily and Earn Credits"
android:textColor="#000000"
android:textSize="10sp" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="12dp"
>
<ImageView
android:id="@+id/card6Image"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="center_horizontal"
android:src="@mipmap/ic_launcher_round" />
</android.support.v7.widget.CardView>
</FrameLayout>
</android.support.constraint.ConstraintLayout>edited 3 hours ago
Rakesh Kumar
205110
asked 3 hours ago
Fazal Jarral
53
edited 3 hours ago
Rakesh Kumar
205110
asked 3 hours ago
Fazal Jarral
53
edited 3 hours ago
Rakesh Kumar
205110
edited 3 hours ago
Rakesh Kumar
205110
edited 3 hours ago
Rakesh Kumar
205110
205110
asked 3 hours ago
Fazal Jarral
53
asked 3 hours ago
Fazal Jarral
53
asked 3 hours ago
Fazal Jarral
53
53
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
AFIK, you could not create this kind of layout using CardView. You could try to use the custom layout and set the android:elevation parameter.
answered 2 hours ago
Juanje
367212
add a comment |
You can achieve this using custom AlertDialog.
Sorry, I can't provide you code snippet right now just the way you need (cause I don't have access to IDE atm). But the idea is to use a Relative layout to design the way you want your dialog to be. Use imageview with shape drawable to make it round shape and place that relative to the Textviews.
Set the layout as the view for your alertdialog.
Before you call .show() on your alertdialog, use
"alertdialog".getWindow().setBackgroundDrawableResource(android.R.color.transparent);
//replace the "alertdialog" with your alerdialog name.//
This would make the background of the dialog transparent and only the parts you want to show can be seen.
edited 1 hour ago
bunbun
2,03532346
answered 1 hour ago
Faysal Ahmed
11
New contributor
Faysal Ahmed is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53941143%2fcustom-drawable-as-cardview-background%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
AFIK, you could not create this kind of layout using CardView. You could try to use the custom layout and set the android:elevation parameter.
answered 2 hours ago
Juanje
367212
add a comment |
AFIK, you could not create this kind of layout using CardView. You could try to use the custom layout and set the android:elevation parameter.
answered 2 hours ago
Juanje
367212
add a comment |
AFIK, you could not create this kind of layout using CardView. You could try to use the custom layout and set the android:elevation parameter.
answered 2 hours ago
Juanje
367212
AFIK, you could not create this kind of layout using CardView. You could try to use the custom layout and set the android:elevation parameter.
answered 2 hours ago
Juanje
367212
answered 2 hours ago
Juanje
367212
answered 2 hours ago
Juanje
367212
answered 2 hours ago
Juanje
367212
367212
add a comment |
add a comment |
You can achieve this using custom AlertDialog.
Sorry, I can't provide you code snippet right now just the way you need (cause I don't have access to IDE atm). But the idea is to use a Relative layout to design the way you want your dialog to be. Use imageview with shape drawable to make it round shape and place that relative to the Textviews.
Set the layout as the view for your alertdialog.
Before you call .show() on your alertdialog, use
"alertdialog".getWindow().setBackgroundDrawableResource(android.R.color.transparent);
//replace the "alertdialog" with your alerdialog name.//
This would make the background of the dialog transparent and only the parts you want to show can be seen.
edited 1 hour ago
bunbun
2,03532346
answered 1 hour ago
Faysal Ahmed
11
New contributor
Faysal Ahmed is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
You can achieve this using custom AlertDialog.
Sorry, I can't provide you code snippet right now just the way you need (cause I don't have access to IDE atm). But the idea is to use a Relative layout to design the way you want your dialog to be. Use imageview with shape drawable to make it round shape and place that relative to the Textviews.
Set the layout as the view for your alertdialog.
Before you call .show() on your alertdialog, use
"alertdialog".getWindow().setBackgroundDrawableResource(android.R.color.transparent);
//replace the "alertdialog" with your alerdialog name.//
This would make the background of the dialog transparent and only the parts you want to show can be seen.
edited 1 hour ago
bunbun
2,03532346
answered 1 hour ago
Faysal Ahmed
11
New contributor
Faysal Ahmed is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
You can achieve this using custom AlertDialog.
Sorry, I can't provide you code snippet right now just the way you need (cause I don't have access to IDE atm). But the idea is to use a Relative layout to design the way you want your dialog to be. Use imageview with shape drawable to make it round shape and place that relative to the Textviews.
Set the layout as the view for your alertdialog.
Before you call .show() on your alertdialog, use
"alertdialog".getWindow().setBackgroundDrawableResource(android.R.color.transparent);
//replace the "alertdialog" with your alerdialog name.//
This would make the background of the dialog transparent and only the parts you want to show can be seen.
edited 1 hour ago
bunbun
2,03532346
answered 1 hour ago
Faysal Ahmed
11
New contributor
Faysal Ahmed is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
You can achieve this using custom AlertDialog.
Sorry, I can't provide you code snippet right now just the way you need (cause I don't have access to IDE atm). But the idea is to use a Relative layout to design the way you want your dialog to be. Use imageview with shape drawable to make it round shape and place that relative to the Textviews.
Set the layout as the view for your alertdialog.
Before you call .show() on your alertdialog, use
"alertdialog".getWindow().setBackgroundDrawableResource(android.R.color.transparent);
//replace the "alertdialog" with your alerdialog name.//
This would make the background of the dialog transparent and only the parts you want to show can be seen.
edited 1 hour ago
bunbun
2,03532346
answered 1 hour ago
Faysal Ahmed
11
New contributor
Faysal Ahmed is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
edited 1 hour ago
bunbun
2,03532346
edited 1 hour ago
bunbun
2,03532346
edited 1 hour ago
bunbun
2,03532346
2,03532346
answered 1 hour ago
Faysal Ahmed
11
New contributor
Faysal Ahmed is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered 1 hour ago
Faysal Ahmed
11
answered 1 hour ago
Faysal Ahmed
11
11
New contributor
Faysal Ahmed is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
Faysal Ahmed is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Faysal Ahmed is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53941143%2fcustom-drawable-as-cardview-background%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown