multiple hexagon shape buttons - android

I'm trying to create a design with multiple hexagon shape buttons.I'm able to create a single hexagon button, but in my case i have a list of items which need to be shown in a design pattern like below.
if such list design is possible through RecyclerView that would be much better.

A bit tricky but here is how i solved it.
Have a recyclerView like below
<android.support.v7.widget.RecyclerView
android:id="#+id/hexa_rcv"
android:layout_margin=""#dimen/hexa_dp""
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
make 2 folders inside res "values-sw360dp" and "values-sw400dp". create dimens.xml in both the folders. dimens.xml inside values-sw360dp should have
<resources>
<dimen name="margin_16_dp">16dp</dimen>
<dimen name="hexa_dp">25dp</dimen>
</resources>
dimens.xml inside values-sw400dp should have
<resources>
<dimen name="margin_16_dp">16dp</dimen>
<dimen name="hexa_dp">55dp</dimen>
</resources>
And one item for the recyclerView like below
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tv_1"
android:layout_width="100dp"
android:layout_height="100dp"
android:gravity="center"
android:textColor="#color/white"
android:textSize="18sp"
android:text="ICU_HDW"
android:background="#drawable/hexagon"/>
Next have a get the reference of recyclerView and set GridaLayoutManager with column size as 3. make every 5th item's span size as 2(so that 4th item will have span size 1 and 5th item will have size 2 hence both together will complete the row and next item will be placed in next row)
I have used kotlin here you can convert to java
RecyclerView hexaRcv = (RecyclerView) findViewById(R.id.hexa_rcv);
GridLayoutManager manager = new GridLayoutManager(this, 3);
manager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
#Override
public int getSpanSize(int position) {
int size = 1;
if ((position + 1) % 5 == 0){
size = 2;
}
return size;
}
});
hexaRcv.setLayoutManager(manager);
hexaRcv.setAdapter(new GridAdapter());
Below is the GridAdapter ()
public class GridAdapter extends RecyclerView.Adapter<GridAdapter.HexagonHolder> {
#Override
public GridAdapter.HexagonHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.hexa_tv, parent, false);
return new HexagonHolder(view);
}
#Override
public void onBindViewHolder(GridAdapter.HexagonHolder holder, int position) {
int pos = position + 1;
int topMargin = pxFromDp(holder.textView.getContext(), -17);
int leftMargin = pxFromDp(holder.textView.getContext(), 51); //3 times of 17
GridLayoutManager.LayoutParams param = (GridLayoutManager.LayoutParams) holder.textView.getLayoutParams();
if (pos < 4) {
param.setMargins(0, 0, 0, 0);
} else if ((pos + 1) % 5 == 0 || pos % 5 == 0) {
param.setMargins(leftMargin, topMargin, 0, 0);
} else {
param.setMargins(0, topMargin, 0, 0);
}
holder.textView.setLayoutParams(param);
}
#Override
public int getItemCount() {
return 17;
}
static class HexagonHolder extends RecyclerView.ViewHolder {
TextView textView;
HexagonHolder(View v) {
super(v);
textView = v.findViewById(R.id.tv_1);
}
}
private int pxFromDp(final Context context, final float dp) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, context.getResources().getDisplayMetrics());
}
}
for first 3 items no margin. After that all item will have a negative top margin of 75 (i.e. -75px). every 4th and 5th item will not only have top margin of -75 but will also have a left margin of 165.
You can use constant or actually calculate them based on screen width or use dip.
Below is the result
Below is the hexagon.xml save it in drawable folder
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="512dp"
android:height="512dp"
android:viewportWidth="512"
android:viewportHeight="512">
<path
android:fillColor="#148275"
android:pathData="M485.291,129.408l-224-128c-3.285-1.877-7.296-1.877-10.581,0l-224,128c-3.328,1.899-5.376,5.44-5.376,9.259v234.667
c0,3.819,2.048,7.36,5.376,9.259l224,128c1.643,0.939,3.456,1.408,5.291,1.408s3.648-0.469,5.291-1.408l224-128
c3.328-1.899,5.376-5.44,5.376-9.259V138.667C490.667,134.848,488.619,131.307,485.291,129.408z" />
</vector>

You can try something like that. It needs to be improved as the gap between the two lines is not constant depending on the screen size:
activity_main.xml
<?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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin">
<include
layout="#layout/partial_squared"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
</RelativeLayout>
partial_squared.xml
<?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="wrap_content">
<include
layout="#layout/partial_first_row"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<include
layout="#layout/partial_second_row"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/line_height_80" />
</RelativeLayout>
partial_first_row.xml
<?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="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView style="#style/InlinedImageView" />
<ImageView style="#style/InlinedImageView" />
<ImageView style="#style/InlinedImageView" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="horizontal">
<TextView
style="#style/InlinedTextView"
android:text="case 1" />
<TextView
style="#style/InlinedTextView"
android:text="case 2" />
<TextView
style="#style/InlinedTextView"
android:text="case 3" />
</LinearLayout>
</RelativeLayout>
partial_second_row.xml
<?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="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3">
<Space
android:layout_width="0dp"
android:layout_height="15dp"
android:layout_weight=".5" />
<ImageView style="#style/InlinedImageView" />
<ImageView style="#style/InlinedImageView" />
<Space
android:layout_width="0dp"
android:layout_height="15dp"
android:layout_weight=".5" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="horizontal">
<Space
android:layout_width="0dp"
android:layout_height="15dp"
android:layout_weight=".5" />
<TextView
style="#style/InlinedTextView"
android:text="case 1" />
<TextView
style="#style/InlinedTextView"
android:text="case 2" />
<Space
android:layout_width="0dp"
android:layout_height="15dp"
android:layout_weight=".5" />
</LinearLayout>
</RelativeLayout>
dimens.xml
<resources>
<!-- Default screen margins, per the Android Design guidelines. -->
<dimen name="activity_horizontal_margin">16dp</dimen>
<dimen name="activity_vertical_margin">16dp</dimen>
<dimen name="line_height">110dp</dimen>
<dimen name="line_height_80">72dp</dimen>
<dimen name="margin_in_between">2dp</dimen>
</resources>
styles.xml
<style name="InlinedImageView">
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">#dimen/line_height</item>
<item name="android:layout_weight">1</item>
<item name="android:src">#drawable/triangle</item>
<item name="android:paddingLeft">#dimen/margin_in_between</item>
<item name="android:paddingRight">#dimen/margin_in_between</item>
</style>
<style name="InlinedTextView">
<item name="android:gravity">center</item>
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_weight">1</item>
</style>
Result

Related

How to set random background for cardview?

I currently have an Android recyclerview and a list item for it. In the list item is a cardview for my views. I want to have random backgrounds for each card list this one:
my cards now have a solid background and I search every where and used any code but couldn't find an example for view like example.
My list item:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
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:id="#+id/card_view_lead"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
app:cardCornerRadius="10dp"
app:cardPreventCornerOverlap="false">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/style_lead"
android:padding="7dp">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#android:color/transparent"
android:contentDescription="#string/option"
android:src="#drawable/ic_option"
android:tint="#android:color/white" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/large_margin"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.makeramen.roundedimageview.RoundedImageView
android:id="#+id/lead_img"
android:layout_width="40dp"
android:layout_height="40dp"
android:contentDescription="#string/test_pic"
app:riv_border_color="#color/colorPrimary"
app:riv_border_width="0.1dp"
app:riv_corner_radius="100dp"
tools:src="#drawable/pic_1" />
<TextView
android:id="#+id/lead_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginLeft="#dimen/standard_margin"
android:layout_toRightOf="#id/lead_img"
android:textColor="#android:color/white"
android:textSize="#dimen/large_font_size"
tools:text="#string/test_name" />
</RelativeLayout>
<TextView
android:id="#+id/lead_city"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/standard_margin"
android:layout_marginTop="16dp"
android:textColor="#android:color/white"
android:textSize="#dimen/large_font_size"
tools:text="#string/test_city" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/standard_margin">
<TextView
android:id="#+id/lead_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:textColor="#android:color/white"
android:textSize="#dimen/large_font_size"
tools:text="30$" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/large_margin"
android:layout_marginTop="16dp"
android:layout_toRightOf="#id/lead_price"
android:text="#string/per_hour"
android:textColor="#android:color/white"
android:textSize="#dimen/large_font_size" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="20dp"
android:layout_marginTop="16dp">
<TextView
android:id="#+id/with"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/standard_margin"
android:text="#string/with"
android:textColor="#android:color/white"
android:textSize="#dimen/large_font_size" />
<TextView
android:id="#+id/lead_vehicle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="6dp"
android:layout_toRightOf="#id/with"
android:textColor="#android:color/white"
android:textSize="#dimen/large_font_size"
tools:text="#string/car" />
<ImageView
android:id="#+id/lead_vehicle_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_toRightOf="#id/lead_vehicle"
android:contentDescription="#string/car_img"
tools:src="#drawable/ic_car" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>
You can generate random colors each time you put a new item in the adapter list
See this
Since you only provided the xml part, I am assuming you have a model where you store the information to display. You can add another property "color" where you can store the random color for each item, and set in on your onBindViewHolder method
CardView cardView = (CardView)findViewById(R.id.card_view_lead);
cardView.setCardBackgroundColor(getRandomColorCode());
public int getRandomColorCode(){
Random random = new Random();
return Color.argb(255, random.nextInt(256), random.nextInt(256), random.nextInt(256));
}
CardView card = (CardView)findViewById(R.id.card_view_lead);
in your onbindview holder
Random rnd = new Random();
currentColor = Color.argb(255, rnd.nextInt(256), rnd.nextInt(256), rnd.nextInt(256));
holder.card.setCardBackgroundColor(currentColor);
Create Array in res/values/colour like this
<array name="note_neutral_colors">
<item>#9E9E9E</item>
<item>#455A64</item>
<item>#607D8B</item>
</array>
<array name="note_accent_colors">
<item>#039BE5</item>
<item>#3D51B3</item>
<item>#689f38</item>
<item>#FD7044</item>
</array>
In Your Adapter Class
holder.cardView.setCardBackgroundColor(noticeModel.getColor());
Model Class
//Variable
int color;
//Cunstructor
this.color=color;
///and generate Getter Setter
Do this Your Main Class.java
private static int getRandomColor(Context context) {
int[] colors;
if (Math.random() >= 0.6) {
colors = context.getResources().getIntArray(R.array.note_accent_colors);
} else {
colors = context.getResources().getIntArray(R.array.note_neutral_colors);
}
return colors[((int) (Math.random() * colors.length))];
}
call this method with string request like this
yourModel = new Your_Model(data1,data2,data3,getRandomColor(YourActivity.this));
You need to write some logic to produce random colors and then use it like
CardView card = (CardView)findViewById(R.id.card);
card.setCardBackgroundColor(color);
To produce random colors, solutions are already available on Stack Overflow, please have a look at this link.
Normally we can do like this,
Colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<item name="blue" type="color">#FF33B5E5</item>
<item name="purple" type="color">#FFAA66CC</item>
<item name="green" type="color">#FF99CC00</item>
<item name="orange" type="color">#FFFFBB33</item>
<item name="red" type="color">#FFFF4444</item>
<item name="darkblue" type="color">#FF0099CC</item>
<item name="darkpurple" type="color">#FF9933CC</item>
<item name="darkgreen" type="color">#FF669900</item>
<item name="darkorange" type="color">#FFFF8800</item>
<item name="darkred" type="color">#FFCC0000</item>
<integer-array name="androidcolors">
<item>#color/blue</item>
<item>#color/purple</item>
<item>#color/green</item>
<item>#color/orange</item>
<item>#color/red</item>
<item>#color/darkblue</item>
<item>#color/darkpurple</item>
<item>#color/darkgreen</item>
<item>#color/darkorange</item>
<item>#color/darkred</item>
</integer-array>
</resources>
And do this in your onCreateView(),
CardView card_view_lead;
card_view_lead= (CardView) findViewById(R.id.card_view_lead);
int[] androidColors = getResources().getIntArray(R.array.androidcolors);
int randomAndroidColor = androidColors[new Random().nextInt(androidColors.length)];
card_view_lead.setBackgroundColor(randomAndroidColor);
If you don't want to use color array then you can use like this in your onCreateView() or onCreate(),
mCardViewTop.setCardBackgroundColor(getRandomColor());
public static int getRandomColor() {
Random rnd = new Random();
return Color.argb(255, rnd.nextInt(256), rnd.nextInt(256), rnd.nextInt(256));
}

Android layout scaling (for elements of a given size in dp)

Three FrameLayout's of different background colors to form a strip.
Each FrameLayout has the size specified in dp.
[
The strip is long and does not fit on the screen.
How to scale the strip to maintain the aspect ratio and without changing the dimensions dp?
[
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:measureAllChildren="true">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layoutDirection="ltr"
android:rotation="0">
<FrameLayout
android:layout_width="200dp"
android:layout_height="42dp"
android:background="#508da6"
/>
<FrameLayout
android:layout_width="400dp"
android:layout_height="42dp"
android:background="#494949"
/>
<FrameLayout
android:layout_width="240dp"
android:layout_height="42dp"
android:background="#ff0000"
/>
</LinearLayout>
</FrameLayout>
There is no need to inflate three whole FrameLayout just for that.View will do just fine. Also you should not give fixed widths since there is no way to make it work for all screen sizes.
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:measureAllChildren="true">
<LinearLayout
android:id="#+id/strip"
android:layout_width="match_parent"
android:layout_height="42dp"
android:layoutDirection="ltr"
android:rotation="0">
<View
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#508da6"
/>
<View
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#494949"
/>
<View
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff0000"
/>
</LinearLayout>
</FrameLayout>
set height on runtime
LinearLayout stripLayout = (LinearLayout)findVieById(R.id.strip);
stripLayout .getViewTreeObserver().addOnGlobalFocusChangeListener(new OnGlobalFocusChangeListener() {
#Override
public void onGlobalFocusChanged(View oldFocus, View newFocus) {
// TODO Auto-generated method stub
int width = stripLayout .getWidth();
int height = //calculate your height//
FrameLayout.LayoutParams params = stripLayout .getLayoutParams();
params.height = height;
stripLayout .setLayoutParams(params);
if (Build.VERSION.SDK_INT < 16) { stripLayout .getViewTreeObserver().removeGlobalOnLayoutListener(this); }
else { stripLayout .getViewTreeObserver().removeOnGlobalLayoutListener(this); }
}
});

How to Split the Options menu like Google chrome broswer

How to split a menu like chrome browser as shown in the image:
This is my actual code
<menu 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"
tools:context="materialtest.vivz.slidenerd.activities.MainActivity">
<item
android:id="#+id/action_settings"
android:orderInCategory="100"
android:title="#string/action_settings"
app:showAsAction="never" />
</menu>
You can implement dialogFragment and you can locate on the screen where you want.
Here is an example :
http://www.androidbegin.com/tutorial/android-dialogfragment-tutorial/
You can change the position of the dialog. You can find it out how it works here :
Changing position of the Dialog on screen android
You can use a custom DialogFragment with a dialog window that has a limited size and biased to the top end of the screen using the gravity attribute.
Like normal fragments, DialogFragment takes in any custom layout in onCreateView.
Animation: The dialog window can have a customized style with windowEnterAnimation and windowExitAnimation to simulate the animation of showing/dismissing the menu.
Here's the demo:
class OptionsMenuDialog : DialogFragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View {
val view = inflater.inflate(R.layout.dialog_options_menu, container, false)
return view
}
override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
val dialog = super.onCreateDialog(savedInstanceState)
// adding dialog animation
dialog.window!!.attributes!!.windowAnimations = R.style.DialogAnimation
return dialog
}
override fun onStart() {
super.onStart()
dialog!!.window!!.let {
val params = it.attributes
// Change the dialog size
params.width = 600
params.height = 1000
// Bias the dialog to the top|end of the screen
params.gravity = Gravity.TOP or Gravity.END
it.attributes = params
}
}
}
Java version:
public class OptionsMenuDialog extends DialogFragment {
#Nullable
#org.jetbrains.annotations.Nullable
#Override
public View onCreateView(#NonNull #NotNull LayoutInflater inflater, #Nullable #org.jetbrains.annotations.Nullable ViewGroup container, #Nullable #org.jetbrains.annotations.Nullable Bundle savedInstanceState) {
return inflater.inflate(
R.layout.dialog_options_menu, container,
false
);
}
#NonNull
#Override
public Dialog onCreateDialog(#Nullable Bundle savedInstanceState) {
Dialog dialog =super.onCreateDialog(savedInstanceState);
dialog.getWindow().getAttributes().windowAnimations = R.style.DialogAnimation;
return dialog;
}
#Override
public void onStart() {
Window window = getDialog().getWindow();
WindowManager.LayoutParams attributes = window.getAttributes();
// Change dialog size
attributes.width = 600;
attributes.height = 1000;
// Bias the dialog to the top|end of the screen
attributes.gravity = Gravity.TOP | Gravity.END;
window.setAttributes(attributes);
super.onStart();
}
}
The DialogAnimation:
<style name="DialogAnimation">
<item name="android:windowEnterAnimation">#anim/anim_in</item>
<item name="android:windowExitAnimation">#anim/anim_out</item>
</style>
Animations:
anim_in:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<scale
android:duration="50"
android:fromXScale="1.0"
android:fromYScale="0.0"
android:toXScale="1.0"
android:toYScale="1.0" />
</set>
anim_out:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<scale
android:duration="50"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:toXScale="1.0"
android:toYScale="0.0" />
</set>
And the layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageButton
android:id="#+id/back"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="?android:attr/selectableItemBackground"
android:padding="10dp"
android:src="#drawable/baseline_arrow_back_24"
app:layout_constraintEnd_toStartOf="#+id/bookmark"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/bookmark"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="?android:attr/selectableItemBackground"
android:padding="10dp"
android:src="#drawable/baseline_star_outline_24"
app:layout_constraintEnd_toStartOf="#+id/refresh"
app:layout_constraintStart_toEndOf="#+id/back"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/refresh"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="?android:attr/selectableItemBackground"
android:padding="10dp"
android:src="#drawable/baseline_refresh_24"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/bookmark"
app:layout_constraintTop_toTopOf="parent" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="8dp"
android:fillViewport="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/refresh">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginVertical="16dp"
android:text="New tab"
android:textSize="18sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginVertical="16dp"
android:text="New tab"
android:textSize="18sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginVertical="16dp"
android:text="New tab"
android:textSize="18sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginVertical="16dp"
android:text="New tab"
android:textSize="18sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginVertical="16dp"
android:text="New tab"
android:textSize="18sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginVertical="16dp"
android:text="New tab"
android:textSize="18sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginVertical="16dp"
android:text="New tab"
android:textSize="18sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginVertical="16dp"
android:text="New tab"
android:textSize="18sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginVertical="16dp"
android:text="New tab"
android:textSize="18sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginVertical="16dp"
android:text="New tab"
android:textSize="18sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginVertical="16dp"
android:text="New tab"
android:textSize="18sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginVertical="16dp"
android:text="New tab"
android:textSize="18sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginVertical="16dp"
android:text="New tab"
android:textSize="18sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginVertical="16dp"
android:text="New tab"
android:textSize="18sp" />
</LinearLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
You can use RecyclerView for efficiency; just used ScrollView for simplicity.
Edit:
params.width = 600, params.height = 1000 both are overlapping
small devices (small DP devices) in the size of the Options menu. Any
better option to overcome this?
You'd create an XML value for both for different screen sizes; usually in values/dimens.xml
The default dimens.xml would be something like:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="dialog_height">150dp</dimen>
<dimen name="dialog_width">100dp</dimen>
</resources>
The documentation show typical screen sizes that you would override their corresponding dimen resources:
Here's how other smallest width values correspond to typical screen
sizes:
320dp: Typical phone screen (240x320 ldpi, 320x480 mdpi, 480x800 hdpi, etc.)
480dp: Large phone screen ~5" (480x800 mdpi)
600dp: 7” tablet (600x1024 mdpi)
720dp: 10” tablet (720x1280 mdpi, 800x1280 mdpi, etc.)
Android studio can generate that automatically with: File >> New >> Values Resource File
Then you can specify the desired screen width/height that you need to have a different size.
This post has more in depth how to handle that.
Eventually you'd retrieve them in the dialog fragment like, and that will take care of the device width/height to pick the appropriate value:
// Kotlin
override fun onStart() {
super.onStart()
val density = Resources.getSystem().displayMetrics.density
val width = (resources.getDimension(R.dimen.dialog_width) * density).toInt()
val height = (resources.getDimension(R.dimen.dialog_height) * density).toInt()
dialog!!.window!!.let {
val params = it.attributes
// Change dialog size
params.width = width
params.height = height
// Bias the dialog to the top|end of the screen
params.gravity = Gravity.TOP or Gravity.END
it.attributes = params
}
}
// Java
#Override
public void onStart() {
Window window = getDialog().getWindow();
WindowManager.LayoutParams attributes = window.getAttributes();
float density = Resources.getSystem().getDisplayMetrics().density;
int width = (int) (getResources().getDimension(R.dimen.dialog_width) * density);
int height = (int) (getResources().getDimension(R.dimen.dialog_height) * density);
attributes.width = width;
attributes.height = height;
// Bias the dialog to the top|end of the screen
attributes.gravity = Gravity.TOP | Gravity.END;
window.setAttributes(attributes);
super.onStart();
}
Try the following code:
<menu 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"
tools:context="materialtest.vivz.slidenerd.activities.MainActivity">
<item
android:id="#+id/action_settings"
android:orderInCategory="100"
android:title="#string/action_settings"
app:showAsAction="never" />
<item
android:id="#+id/action_new"
android:orderInCategory="101"
android:title="#string/action_new"
app:showAsAction="never" />
</menu>
<!-- Second menu -->
<menu 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"
tools:context="materialtest.vivz.slidenerd.activities.MainActivity">
<item
android:id="#+id/action_save"
android:orderInCategory="102"
android:title="#string/action_save"
app:showAsAction="never" />
<item
android:id="#+id/action_print"
android:orderInCategory="103"
android:title="#string/action_print"
app:showAsAction="never" />
</menu>

Highlight a pressed card item : using CardView from cardslib

I'm using CardView in a CardListView.
I would like to know how to highlight a card item when it's pressed just like in the "CardsLibDemo Extras" application, precisely in the "Card and Weather List" fragment when you press on a card from the "You may know" list ?
P.S. : I'm using API 15 (Android 4.0.4 Ice Cream sandwich) to test this application.
This is my fragment layout :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- You can customize this layout.
You need to have in your layout a `CardView` with the ID `list_cardId` -->
<it.gmariotti.cardslib.library.view.CardListView
xmlns:card="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/rent_list"
android:foreground="?android:attr/selectableItemBackground"
card:list_card_layout_resourceID="#layout/card_row_layout_rent_list" />
</LinearLayout>
Here is the card_row_layout_rent_list.xml :
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<it.gmariotti.cardslib.library.view.CardView
xmlns:card="http://schemas.android.com/apk/res-auto"
android:id="#+id/list_cardId"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card:card_layout_resourceID="#layout/card_layout"
style="#style/list_card.base"/>
</LinearLayout>
Here is the card_layout.xml :
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- Card visible layout -->
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/card_main_layout"
style="#style/card.main_layout">
<it.gmariotti.cardslib.library.view.component.CardThumbnailView
xmlns:card="http://schemas.android.com/apk/res-auto"
style="#style/card_thumbnail_outer_layout"
android:id="#+id/card_thumbnail_layout"
android:layout_gravity="center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
card:card_thumbnail_layout_resourceID="#layout/card_image" />
<FrameLayout
android:id="#+id/card_main_content_layout"
android:layout_gravity="right"
style="#style/card.content_outer_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</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" />
<FrameLayout
android:id="#+id/card_content_expand_layout"
style="#style/card.main_contentExpand"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Here is the card_inner_layout_rent_list.xml :
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- This is the base Inner View inside a CardHeader.
You can customize it with your layout xml file and your CardHeader.
You can popolate your elements with CardHeader#setupInnerViewElements(android.view.ViewGroup, android.view.View) method -->
<TextView
android:id="#+id/textViewPrix"
style="#style/card.header_simple_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_marginTop="2dp"
android:text="#string/card_txtPrix"
android:textColor="#color/blue"
android:textStyle="bold" />
<TextView
android:id="#+id/textViewAdr"
style="#style/card.expand_simple_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_marginTop="2dp"
android:text="#string/card_txtAdr"
android:textColor="#color/black"
android:textSize="#dimen/card_expend_simple_title_text_size_16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/textViewType"
style="#style/card.expand_simple_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_marginTop="2dp"
android:text="#string/card_txtType"
android:textColor="#color/black"
android:textSize="#dimen/card_expand_simple_title_text_size_12sp" />
<TextView
android:id="#+id/textViewSup"
style="#style/card.expand_simple_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_marginTop="1dp"
android:text="#string/card_txtSup"
android:textColor="#color/black"
android:textSize="#dimen/card_expand_simple_title_text_size_12sp" />
<TextView
android:id="#+id/textViewHonor"
style="#style/card.expand_simple_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginTop="0dp"
android:text="#string/card_txtHonor"
android:textSize="#dimen/card_expand_simple_title_text_size_12sp" />
</LinearLayout>
Here is the card_image.xml :
<?xml version="1.0" encoding="UTF-8"?>
<ImageView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/card_thumbnail_image"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="1dp"
android:layout_weight="0"
android:layout_gravity="center"
android:contentDescription="#string/imageview_desc"
android:orientation="vertical"/>
Finally, here's where I fill CardList (extracted from the fragment class) :
private void initColorCard() {
int listImages[] = new int[]{R.drawable.angry_1, R.drawable.angry_2,
R.drawable.angry_3, R.drawable.angry_4, R.drawable.angry_5};
ArrayList<Card> cards = new ArrayList<Card>();
for (int i = 0; i<5; i++) {
// Create a Card
ColorCard card = new ColorCard(getActivity());
//Set onClick listener
card.setOnClickListener(new Card.OnCardClickListener() {
#Override
public void onClick(Card card, View view) {
Toast.makeText(getActivity(), "Clickable card : " + card.getCardHeader().getTitle(), Toast.LENGTH_SHORT).show();
}
});
// Create a CardHeader
CardHeader header = new CardHeader(getActivity());
// Add Header to card
header.setTitle("" + i);
card.addCardHeader(header);
CardThumbnail thumb = new CardThumbnail(getActivity());
thumb.setDrawableResource(listImages[i]);
card.addCardThumbnail(thumb);
cards.add(card);
}
CardArrayAdapter mCardArrayAdapter = new CardArrayAdapter(getActivity(), cards);
CardListView listView = (CardListView) getActivity().findViewById(R.id.rent_list);
if (listView != null) {
listView.setAdapter(mCardArrayAdapter);
}
}
Any idea what's missing in this code so any pressed card become highlighted ?
If you are using the CardViewNative, you have to customize this style:
<style name="card.native.main_layout_foreground">
<item name="android:foreground">?android:selectableItemBackground</item>
<item name="android:background">#color/card_native_background</item>
<item name="android:layout_marginTop">#dimen/card_main_layout_native_view_margin_top</item>
<item name="android:layout_marginBottom">#dimen/card_main_layout_native_view_margin_bottom</item>
<item name="android:layout_marginLeft">#dimen/card_main_layout_native_view_margin_left</item>
<item name="android:layout_marginRight">#dimen/card_main_layout_native_view_margin_right</item>
</style>
Otherwise, if you are using the old CardView you can read this:
https://github.com/gabrielemariotti/cardslib/blob/master/doc/CARD.md#customize-card-background

How to Make LinearLayout Clickable

I have a linearlayout like this
<LinearLayout
android:id="#+id/optionlist"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/divider"
android:orientation="vertical" >
</LinearLayout>
I want to add another xml view into this layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/option"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<!--
<View
android:layout_width="match_parent"
android:layout_height="0.5dip"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#2fd275"
/>
-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="10dp" >
<ImageView
android:id="#+id/option_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:src="#drawable/logout" />
<TextView
android:id="#+id/option_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#000000"
android:visibility="gone" />
<TextView
android:id="#+id/option_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_margin="10dp"
android:text="Signout"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#616161" />
</LinearLayout>
<View
android:id="#+id/divider"
android:layout_width="match_parent"
android:layout_height="0.5dip"
android:background="#d3d3d3" />
</LinearLayout>
via the code
for (int i = 0; i < opt.length; i++) {
View view = inflater.inflate(R.layout.option_item, optionlist,
false);
view.setBackgroundResource(R.drawable.optionlist);
view.setTag(opt_image[i]);
view.setClickable(true);
view.setFocusable(true);
view.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
// ADD your action here
int res = (Integer) v.getTag();
switch (res) {
case R.drawable.logout:
signout();
break;
}
}
});
final TextView tv = (TextView) view.findViewById(R.id.option_name);
final ImageView iv = (ImageView) view
.findViewById(R.id.option_image);
tv.setText(opt[i]);
iv.setImageResource(opt_image[i]);
optionlist.addView(view);
}
Now on click of the layout i want to load this xml file as below...but i am not able to get the backgroud loaded on the click event. Please give suggestion what am I doing wrong?
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/holo_green_dark" android:state_focused="true"/>
<item android:drawable="#color/holo_green_dark" android:state_enabled="false" android:state_pressed="true"/>
<item android:drawable="#color/white"/>
</selector>
First get id of LinearLayout from xml and then perform onClickListener on it instead of whole View
View view = inflater.inflate(R.layout.option_item, optionlist, false);
LinearLayout layout = view.findViewByIt(R.id.optionlist);
layout.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
// ADD your action here
int res=(Integer) v.getTag();
switch(res)
{
case R.drawable.logout: signout();
break;
}
}
});
try this.. hope it works..
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#ff0000" />//ur onclick desired color
<item android:state_focused="false"
android:drawable="#android:color/transparent" />focused color
</selector>
just create new xml and add this code in drawable and set ur linear layoyut backgrout as its name like android:background="#drawable/createdxmlname"
<LinearLayout
android:id="#+id/optionlist"
android:layout_below="#id/divider"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#drawable/createdxmlname"
android:clickable="true">
android:clickable="false"
<LinearLayout
android:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:clickable="false"
android:layout_width="40dp"
android:layout_height="40dp"
android:text="Cinema"
android:textSize="13sp"
android:layout_marginRight="10dp" />
<Button
android:clickable="false"
android:layout_width="match_parent"
android:layout_height="40dp"
android:text="Check in"
android:textSize="13sp" />
</LinearLayout>
Create in drawable an pressed_layout.xml with the following content
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#drawable/button_pressed" /> <!-- pressed -->
<item android:state_focused="true"
android:drawable="#drawable/button_focused" /> <!-- focused -->
<item android:drawable="#drawable/button_normal" /> <!-- default -->
</selector>
And in your layout add it as background resource:
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="#drawable/pressed_layout"
android:clickable="true">
</LinearLayout>
layout.setclickble="true" in XML file and
layout.setOnLongClickListener(new View.OnLongClickListener() {
#Override
public boolean onLongClick(View arg0) {
// TODO Auto-generated method stub
}
});
We can also use onClick in XML of layout,and use that method in java file,like if onClick="next",then in java file we have to use the method .
public void next()
{
// do something
}

Categories

Resources