I am trying to implement custom buttons that overlap over each other horizontally. The clicked button will be bright and the rest will fade a little and their the overlapped border to the selected button would be hidden behind. Here is an image to clarify what I am talking about.
To do this I made a Linear Layout with horizontal orientation that has child Linear Layouts that wrap each button but that ended up with weird buttons stick out of the parent layout even though I played a little with their width and height. Can someone give me a hint on how to do this?
I have done similar stuff through RadioButton. you may need to change radio button logic to button , so that only one is clicked at a time. Below is my code.
1) Layout inside activity goes here:
<RadioGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/myRadioGroup"
android:background="#A4A4A4"
android:orientation="horizontal">
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="One"
android:id="#+id/One"
android:layout_alignParentLeft="true"
android:background="#drawable/selector"
/>
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Two"
android:id="#+id/Two"
android:background="#drawable/selector"
/>
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Theee"
android:id="#+id/Three"
android:layout_alignParentRight="true"
android:background="#drawable/selector"
/>
</RadioGroup>
2) Background for disabled:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient
android:centerColor="#A4A4A4"
android:startColor="#A4A4A4"
android:endColor="#A4A4A4"
/>
</shape>
3) Background for enabled.xml
<gradient
android:centerColor="#color/colorPrimary"
/>
<padding android:left="7dp"
android:top="7dp"
android:right="7dp"
android:bottom="7dp" />
<corners
android:radius="7dp" />
<stroke
android:width="2dip"
android:color="#FFFFFF" />
<corners android:radius= "10dp" />
4) Activity code for RadioGroup
radioGroup = (RadioGroup) findViewById(R.id.myRadioGroup);
one=(RadioButton)findViewById(R.id.One);
two=(RadioButton)findViewById(R.id.Two);
three=(RadioButton)findViewById(R.id.Three);
radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
#Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
if (checkedId == R.id.One) {
one.setBackground(getDrawable(R.drawable.enabled));
two.setBackground(getDrawable(R.drawable.disabled));
three.setBackground(getDrawable(R.drawable.disabled));
Toast.makeText(getApplicationContext(), "choice: One", Toast.LENGTH_SHORT).show();
} else if (checkedId == R.id.Two) {
Toast.makeText(getApplicationContext(), "choice: Two", Toast.LENGTH_SHORT).show();
two.setBackground(getDrawable(R.drawable.enabled));
one.setBackground(getDrawable(R.drawable.disabled));
three.setBackground(getDrawable(R.drawable.disabled));
}
else {
three.setBackground(getDrawable(R.drawable.enabled));
two.setBackground(getDrawable(R.drawable.disabled));
one.setBackground(getDrawable(R.drawable.disabled));
Toast.makeText(getApplicationContext(), "choice: Three", Toast.LENGTH_SHORT).show();
}
}
});
5) Selector xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_enabled="false"
android:drawable="#drawable/disabled" />
<item
android:state_pressed="true"
android:state_enabled="true"
android:drawable="#drawable/enabled" />
<item
android:state_pressed="false"
android:state_enabled="true"
android:drawable="#drawable/disabled" />
<item
android:state_focused="true"
android:state_enabled="true"
android:drawable="#drawable/enabled" />
<item
android:state_enabled="true"
android:drawable="#drawable/enabled" />
</selector>
This is how Your Layout file should look like:-
<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="wrap_content"
android:layout_gravity="center"
android:background="#drawable/round_background"
android:orientation="horizontal"
android:weightSum="3"
tools:context="com.example.curved.MainActivity" >
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginBottom="1dp"
android:layout_marginLeft="1dp"
android:layout_marginRight="5dp"
android:layout_marginTop="1dp"
android:layout_weight="1"
android:background="#drawable/round_background"
android:gravity="center"
android:text="Line"
android:textSize="20sp" />
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginBottom="1dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="1dp"
android:layout_weight="1"
android:background="#drawable/round_background_white"
android:gravity="center"
android:text="Lyft"
android:textColor="#ff33b5e5"
android:textSize="20sp" />
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginBottom="1dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="1dp"
android:layout_marginTop="1dp"
android:layout_weight="1"
android:background="#drawable/round_background"
android:gravity="center"
android:text="Plus"
android:textSize="20sp" />
</LinearLayout>
round_background.xml for grey background
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle" >
<!-- you can use any color you want I used here gray color -->
<solid android:color="#ABABAB" />
<corners android:radius="50dp" />
</shape>
round_background_white.xml for white button
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<!-- you can use any color you want I used here white color -->
<solid android:color="#FFF" />
<corners android:radius="50dp" />
</shape>
Final result
And on click event change backgrounds and text color like this ,I have shown it with xml.
<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="wrap_content"
android:layout_gravity="center"
android:background="#drawable/round_background"
android:orientation="horizontal"
android:weightSum="3"
tools:context="com.example.curved.MainActivity" >
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginBottom="1dp"
android:layout_marginLeft="1dp"
android:layout_marginRight="5dp"
android:layout_marginTop="1dp"
android:layout_weight="1"
android:background="#drawable/round_background_white"
android:gravity="center"
android:text="Line"
android:textColor="#ff33b5e5"
android:textSize="20sp" />
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginBottom="1dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="1dp"
android:layout_weight="1"
android:background="#drawable/round_background"
android:gravity="center"
android:text="Lyft"
android:textSize="20sp" />
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginBottom="1dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="1dp"
android:layout_marginTop="1dp"
android:layout_weight="1"
android:background="#drawable/round_background"
android:gravity="center"
android:text="Plus"
android:textSize="20sp" />
</LinearLayout>
Take a RelativeLayout aLign three buttons horizontally with center button Overllapping another two.
Now Put two buttons above left and right which are overlapping Center button. Make their visibility GONE.
Now On Click of left button Make Left Overlapped button Visible and So On.
Hope it helps!!!
Related
I have a linear layout which contains three image buttons. Each image buttons has a different color. At the initial time, all image buttons are unchecked. I want to set checked/selected for an image button if the image button is selected (a blue V will overlap to the image button background ), and Another image button will be unchecked. How can I do it in android?
This is my layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="7dp"
android:layout_centerInParent="true">
<ImageButton
android:layout_width="50dp"
android:layout_height="50dp"
android:id="#+id/color1"
android:background="#color/colorAccent"/>
<ImageButton
android:layout_width="50dp"
android:layout_height="50dp"
android:id="#+id/color2"
android:layout_marginLeft="5dp"
android:background="#color/colorPrimaryDark" />
<ImageButton
android:layout_width="50dp"
android:layout_height="50dp"
android:id="#+id/color3"
android:layout_marginLeft="5dp"
android:background="#color/colorPrimary"/>
</LinearLayout>
Updated: The blue V means checked status. It is similar the result
I would suggest to use checkboxes for this task.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="7dp"
android:layout_centerInParent="true">
<android.support.v7.widget.AppCompatCheckBox
android:layout_width="50dp"
android:layout_height="50dp"
android:id="#+id/color1"
android:button="#drawable/color_selector"
android:background="#color/accent"/>
<android.support.v7.widget.AppCompatCheckBox
android:layout_width="50dp"
android:layout_height="50dp"
android:id="#+id/color2"
android:button="#drawable/color_selector"
android:layout_marginLeft="5dp"
android:background="#color/primary"
android:checked="false" />
<android.support.v7.widget.AppCompatCheckBox
android:layout_width="50dp"
android:layout_height="50dp"
android:button="#drawable/color_selector"
android:id="#+id/color3"
android:layout_marginLeft="5dp"
android:background="#color/primary_dark"/>
</LinearLayout>
and color_selector.xml should be placed into the drawable folder with the required selector (just an example)
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="#drawable/ic_done_white_18dp">
<shape android:shape="rectangle" >
<stroke android:color="#color/white" android:width="2dp"/>
<corners
android:bottomLeftRadius="#dimen/spacing_xxsmall"
android:bottomRightRadius="#dimen/spacing_xxsmall"
android:topLeftRadius="#dimen/spacing_xxsmall"
android:topRightRadius="#dimen/spacing_xxsmall" />
</shape>
</item>
<item android:state_checked="false">
<shape android:shape="rectangle">
<stroke android:color="#color/white" android:width="1dp"/>
<corners
android:bottomLeftRadius="#dimen/spacing_xxsmall"
android:bottomRightRadius="#dimen/spacing_xxsmall"
android:topLeftRadius="#dimen/spacing_xxsmall"
android:topRightRadius="#dimen/spacing_xxsmall" />
</shape></item>
</selector>
Hope this will help.
I use Buttons inside Linear Layout, Table Row and Table Layout, maybe this has some influence.
The problem is that state_pressed doesn't work properly. When I'm pressing Button A/B/C/D, Android is selecting Button D (it is slightly darker).
You can see on the image, that shadow works properly, but the background is setting always on the wrong button D (bottom right corner).
After clicking any button I change its background programmatically and set backgrounds to red or green. It works properly.
The red button is selecting, because our opponent selects this answer. It's setting programmatically and don't have any influence for my bug.
Here is my layout code
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rozgrywka"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/icon2"
android:background="#ffffffff"
android:padding="5dp"
android:weightSum="1">
<TableRow
android:layout_width="fill_parent"
android:layout_weight="0.5">
<LinearLayout
android:id="#+id/first"
android:layout_height="fill_parent"
android:layout_weight="1">
<Button
android:id="#+id/buttonA"
android:layout_width="50dp"
android:layout_height="fill_parent"
android:layout_column="1"
android:layout_margin="5dp"
android:layout_weight=".5"
android:background="#drawable/rozgrywkabutton"
android:gravity="center_vertical|center_horizontal"
android:onClick="odpA"
android:text="A"
android:textAlignment="center"
android:textColor="#ff141414"
android:textSize="14dp" />
<Button
android:id="#+id/buttonC"
android:layout_width="50dp"
android:layout_height="fill_parent"
android:layout_column="2"
android:layout_margin="5dp"
android:layout_weight=".5"
android:background="#drawable/rozgrywkabutton"
android:gravity="center_vertical|center_horizontal"
android:onClick="odpC"
android:text="C"
android:textAlignment="center"
android:textColor="#ff141414"
android:textSize="14dp" />
</LinearLayout>
</TableRow>
<TableRow
android:layout_weight="0.5">
<LinearLayout
android:layout_height="fill_parent"
android:layout_alignStart="#id/first"
android:layout_weight="1"
android:id="#+id/second">
<Button
android:id="#+id/buttonB"
android:layout_width="50dp"
android:layout_height="fill_parent"
android:layout_column="2"
android:layout_margin="5dp"
android:layout_weight=".5"
android:background="#drawable/rozgrywkabutton"
android:gravity="center_vertical|center_horizontal"
android:onClick="odpB"
android:text="B"
android:textAlignment="center"
android:textColor="#ff141414"
android:textSize="14dp" />
<Button
android:id="#+id/buttonD"
android:layout_width="50dp"
android:layout_height="fill_parent"
android:layout_column="1"
android:layout_margin="5dp"
android:layout_weight=".5"
android:background="#drawable/rozgrywkabutton"
android:gravity="center_vertical|center_horizontal"
android:onClick="odpD"
android:text="D"
android:textAlignment="center"
android:textColor="#ff141414"
android:textSize="14dp" />
</LinearLayout>
</TableRow>
</TableLayout>
drawable rozgrywkabutton.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true" >
<shape android:shape="rectangle" >
<corners android:radius="5dp" />
<stroke android:width="1dip" android:color="#c7c7c7" />
<gradient android:angle="-90" android:startColor="#d3ced3" android:endColor="#b6b2b6" />
</shape>
</item>
<item android:state_focused="true">
<shape android:shape="rectangle" >
<corners android:radius="5dp" />
<stroke android:width="1dip" android:color="#5e7974" />
<solid android:color="#58857e"/>
</shape>
</item>
<item >
<shape android:shape="rectangle" >
<corners android:radius="5dp" />
<stroke android:width="1dip" android:color="#c7c7c7" />
<gradient android:angle="-90" android:startColor="#e4e4e4" android:endColor="#cbc7cb" />
</shape>
</item>
</selector>
I was using static function to make button default.
public static void setBacground(Button buttonA, Drawable draw) {
int sdk = android.os.Build.VERSION.SDK_INT;
if(sdk < android.os.Build.VERSION_CODES.JELLY_BEAN) {
buttonA.setBackgroundDrawable( draw);
} else {
buttonA.setBackground( draw);
}
}
and in my function which make my button look default
Drawable defualt = getResources().getDrawable(R.drawable.rozgrywkabutton);
Global.setBacground(ButtonA, defualt);
Global.setBacground(ButtonB, defualt);
Global.setBacground(ButtonC, defualt);
Global.setBacground(ButtonD, defualt);
when i change this to
Global.setBacground(ButtonA, getResources().getDrawable(R.drawable.rozgrywkabutton));
Global.setBacground(ButtonB, getResources().getDrawable(R.drawable.rozgrywkabutton));
Global.setBacground(ButtonC, getResources().getDrawable(R.drawable.rozgrywkabutton));
Global.setBacground(ButtonD, getResources().getDrawable(R.drawable.rozgrywkabutton));
everything start work properly. Thanks for your time.
am new to android. i would like to have two drawable bg button Horizontally. Button1(Tour Routes) and button2(Tour Item) without space between two button and while onClick button1,i like to display blue drawable (Tour Routes) on button1 and drawable hover background on button2(Tour Items) and Viceversa. Thank You
Here is My layout Example. I tried to create drawable xml but its not working fine.
<LinearLayout
android:id="#+id/button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/header"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="6dp"
android:orientation="horizontal" >
<Button
android:layout_weight="1"
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="T"
android:background="#drawable/btn"
android:onClick="button1"
/>
<Button
android:layout_weight="1"
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TI"
android:background="#drawable/btn"
android:onClick="button2"
/>
Check with below code, you can use weightsum for the layout
<LinearLayout
android:id="#+id/button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="6dp"
android:orientation="horizontal"
android:weightSum="2" >
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/update_bg_button"
android:padding="0dip"
android:text="#string/save"
android:textColor="#drawable/button_font_color" />
<Button
android:id="#+id/button2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/update_bg_button"
android:padding="0dip"
android:text="#string/clear"
android:textColor="#drawable/button_font_color" />
</LinearLayout>
This is the update_bg_button.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true"
android:drawable="#color/button_bg_color" /> <!-- pressed -->
<item android:state_focused="true"
android:drawable="#color/button_fg_color" /> <!-- focused -->
<item android:state_hovered="true"
android:drawable="#color/button_fg_color"/> <!-- hovered -->
<item android:drawable="#color/button_fg_color" /> <!-- default -->
I think, you can adopt my code for you requirements (add gradient background, remove stroke, etc).
Code in layout:
<RadioGroup
android:layout_width="match_parent"
android:layout_height="40dp"
android:orientation="horizontal"
android:paddingLeft="8dp"
android:paddingRight="8dp">
<RadioButton
android:id="#+id/rbCategories"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:background="#drawable/rb_left_bg_selector"
android:button="#android:color/transparent"
android:gravity="center"
android:text="#string/tab_categories"
android:textColor="#android:color/white"/>
<RadioButton
android:id="#+id/rbSort"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:background="#drawable/rb_right_bg_selector"
android:button="#android:color/transparent"
android:gravity="center"
android:text="#string/tab_sort"
android:textColor="#android:color/white"/>
</RadioGroup>
rb_left_bg_selector.xml is:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/rb_left_selected_bg" android:state_checked="true"/>
<item android:drawable="#drawable/rb_left_unselected_bg" android:state_checked="false"/></selector>
rb_left_selected_bg.xml is:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#color/blue_dark"/>
<corners
android:bottomLeftRadius="5dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="5dp"
android:topRightRadius="0dp"/>
rb_left_unselected_bg.xml is:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="0dp"
android:left="0dp"
android:right="-1dp"
android:top="0dp">
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#color/blue_dark"/>
<corners
android:bottomLeftRadius="5dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="5dp"
android:topRightRadius="0dp"/>
<solid android:color="#android:color/transparent"/>
</shape>
</item>
It's similiar for right RadioButton.
Ok Lets go for some simple work:
Assuming you have 2 images in your drawable folder Say: blue and grey
First Step:
Note: Considering first button as your default button, So set the blue image as
background to your first button and grey to your second button
How?
<Button
android:layout_weight="1"
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Tour Routes"
android:background="#drawable/blue" // set your blue image over here
android:onClick="button1" />
<Button
android:layout_weight="1"
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Tour Items"
android:background="#drawable/grey" // set your grey image over here
android:onClick="button2" />
Second Step:
Its obvious you have implemented click listener on both buttons. just implement this
button1.setOnClickListener(new View.OnClickListener()
{
#Override
public void onClick(View v)
{
// TODO Auto-generated method stub
button1.setBackgroundResource(R.drawable.blue);
button2.setBackgroundResource(R.drawable.grey);
}
});
button2.setOnClickListener(new View.OnClickListener()
{
#Override
public void onClick(View v)
{
// TODO Auto-generated method stub
button1.setBackgroundResource(R.drawable.grey);
button2.setBackgroundResource(R.drawable.blue);
}
});
I am hoping its works for you and this is what you want :)
I'm making an app with it's contents inside card-like views but I am having a couple of problems:
I can't get the label line (the blue line) to move away from the card text. I've tried both padding and margin (on both line imageview and textview from text) and nothing seems to work here.
The bottom part of the card title is getting cropped because of the line spacing. How can I fix this and keep the line spacing?
Check this screenshot for better understanding: http://imgur.com/qsoCFrB
Here's the code to the card background and the interface itself:
card_bg:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle"
android:dither="true">
<corners android:radius="1dp"/>
<solid android:color="#bdbdbd" />
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle"
android:dither="true">
<corners android:radius="2dp" />
<solid android:color="#android:color/white" />
<padding android:bottom="6dp"
android:left="6dp"
android:right="6dp"
android:top="4dp" />
</shape>
</item>
</layer-list>
main acitivity:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:layout_marginLeft="6dp"
android:layout_marginRight="6dp"
android:layout_marginTop="4dp"
android:background="#drawable/card_bg" >
<ImageView
android:id="#+id/iconView0001"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="6dp"
android:src="#drawable/icon_example" />
<ImageView
android:id="#+id/labelSource0001"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/cardText0001"
android:layout_marginTop="4dp"
android:background="#drawable/card_label" />
<TextView
android:id="#+id/cardTitle0001"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/cardText0001"
android:layout_toRightOf="#+id/iconView0001"
android:fontFamily="sans-serif-condensed"
android:maxLines="2"
android:paddingLeft="4dp"
android:lineSpacingExtra="-6dp"
android:text="#string/card_title_002"
android:textColor="#717171"
android:textSize="16sp" />
<TextView
android:id="#+id/cardText0001"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/iconView0001"
android:fontFamily="sans-serif"
android:layout_marginTop="4dp"
android:maxLines="1"
android:text="#string/card_desc_002"
android:textColor="#acacac"
android:textSize="12sp" />
</RelativeLayout>
</FrameLayout>
Thanks in advance.
this is the creator of the Gist on GitHub!
Have you tried increasing padding on the RelativeLayout, perhaps that could fix the problem? Or even on the TextView element?
Try doing that and see what the results are.
EDIT: Also, why is there negative line spacing within the Text View?
DOUBLE EDIT: So what was happening is that your layout_alignBottom in the linkTitle TextView was shorter than the height of two lines of text, therefore it was cropping the title to limit the height of the TextView to that of the FavIcon ImageView. Removing this property fixes the issue.
Similar issue goes for the label shape, that alignBottom is what's messing it up.
Change layout_alignBottom to layout_below and then padding/margin should affect the position as you please.
Here is the updated version of your code that should remedy your issues:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linkCardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ccc" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:layout_marginLeft="6dp"
android:layout_marginRight="6dp"
android:layout_marginTop="4dp"
android:background="#drawable/card_bg">
<TextView
android:id="#+id/linkTitle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/faviconView0001"
android:padding="4dp"
android:maxLines="2"
android:text="#string/link_title_001"
android:textColor="#717171"
android:textSize="17sp" />
<TextView
android:id="#+id/linkDesc0001"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/linkTitle"
android:paddingTop="6dp"
android:paddingBottom="9dp"
android:fontFamily="sans-serif"
android:maxLines="1"
android:text="#string/link_desc_001"
android:textColor="#acacac"
android:textSize="13sp" />
<ImageView
android:id="#+id/faviconView0001"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="6dp"
android:layout_alignParentLeft="true"
android:src="#drawable/favicon_example" />
<View
android:layout_height="0dp"
android:layout_width="fill_parent"
/>
<ImageView
android:id="#+id/labelSource0001"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/linkDesc0001"
android:background="#drawable/card_label" />
</RelativeLayout>
</FrameLayout>
I hope that all of this helps!
I am trying to have a listview where items have rounded corners and the items are spaced out from each other. This is done using a custom ArrayAdapter.
MyCustomAdapter arrAdapter = new MyCustomAdapter();
setListAdapter(arrAdapter);
I am using a drawable image to round the corners
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners android:radius="10dp" />
<gradient
android:angle="90"
android:endColor="#993333"
android:startColor="#ffffff"
android:type="sweep" />
<solid android:color="#ffffff" />
<stroke
android:width="1dp"
android:color="#000000" />
</shape>
and setting it in the layout as background to the top most container - the LinearLayout
<?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:layout_margin="4dp"
android:background="#drawable/square"
android:orientation="horizontal" >
<TextView
android:id="#+id/routeTag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#drawable/circle"
android:padding="10dp"
android:text="text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/stop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="some text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="14sp" />
<TextView
android:id="#+id/stopD"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:padding="5dp"
android:text="(text)"
android:textColor="#777777"
android:textSize="10sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/nextTT"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="5dp"
android:paddingLeft="5dp"
android:paddingRight="9dp"
android:paddingTop="5dp"
android:text="text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="14sp" />
<TextView
android:id="#+id/moreTT"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#id/nextTrainTime"
android:paddingBottom="5dp"
android:text="text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="12sp" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
For some reason in the graphical display I am able to see that single element exactly as I want it - with margins all around (I also want it to move away from the edges of the screen left and right).
But when I run this and let the adapter do its job I am getting a list of items, touching the sides of the screen and no space between them apart forma single line which is used to separate the items on a normal list.
Anyone have a clue how to make it behave?! I have search far and wide.
Thanks for your help
The space between your item and widescreen can be done with:
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:left="10dp"
android:right="10dp"
android:top="10dp"
android:bottom="10dp">
<shape android:shape="rectangle">...</shape>
</item>
In my case I used android:divider and android:dividerHeight on a ListView block to seperate each element of a ListView, and the left-right space with the android:left android:right properties.
The post where I got the info was this