I am trying to create an app and I have a design already as an image, but I can not clone the exact shape of the button which is above the tabs
I expect the same design in this image: below
Note:
0 and 0.00EGP should be variables
Create a XML file bottom_corner.xml for background
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#0091fa"/>
<stroke android:width="1dp"
android:color="#0091fa" />
<corners android:radius="10dp"/>
<padding android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp" />
</shape>
Now create layout floated_button.xml and use this background here in the layout:
<RelativeLayout android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:layout_marginBottom="5dp"
android:background="#drawable/bottom_corner"
xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:id="#+id/tv_total_value"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:text="0"
android:textSize="18dp"
android:gravity="center"
android:layout_centerVertical="true"
android:textColor="#fff"/>
<TextView
android:id="#+id/tv_egp_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0.00 EGP"
android:textSize="22dp"
android:gravity="center"
android:paddingRight="15dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:textColor="#fff"/>
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#fff"
android:layout_toRightOf="#+id/tv_total_value"/>
<TextView
android:id="#+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Charge"
android:textSize="22dp"
android:gravity="center"
android:paddingRight="15dp"
android:paddingLeft="15dp"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/tv_total_value"
android:textColor="#fff"/>
</RelativeLayout>
For your specific problem, you can move forward like this:
First of all, you have to create a drawable file of round background.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#000000" />
<corners android:radius="15dp" />
</shape>
Then, you can add the tag of image and place it, on the corner of the image where you want to place it. Then use drawable as background then adjust the TextView on it.
<ImageView
android:id="#+id/ivLauncher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:src="#mipmap/ic_launcher"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/ivBg"
android:layout_width="15dp"
android:layout_height="15dp"
android:src="#drawable/round_text_bg"
app:layout_constraintTop_toBottomOf="#id/ivLauncher"
app:layout_constraintBottom_toBottomOf="#id/ivLauncher"
app:layout_constraintLeft_toRightOf="#id/ivLauncher"
app:layout_constraintRight_toRightOf="#id/ivLauncher"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textColor="#FFFFFF"
android:textSize="10dp"
app:layout_constraintTop_toTopOf="#id/ivBg"
app:layout_constraintBottom_toBottomOf="#id/ivBg"
app:layout_constraintLeft_toLeftOf="#id/ivBg"
app:layout_constraintRight_toRightOf="#id/ivBg"/>
Here is the result:
Flotted Button design on image corner
Related
I want to create custom toast with, one view which is a little bit out of parent. So I did something like this
This is my custom toast
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/toast_root"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="50dp"
android:background="#000000"
android:clipChildren="false"
android:clipToPadding="false"
android:gravity="center_vertical"
android:orientation="horizontal"
android:padding="15dp">
<TextView
android:id="#+id/digit_display"
android:layout_width="96dp"
android:layout_height="96dp"
android:layout_marginTop="-24dp"
android:layout_marginEnd="15dp"
android:layout_marginBottom="24dp"
android:background="#drawable/round_button"
android:gravity="center"
android:text="1"
android:textSize="64sp" />
<TextView
android:id="#+id/description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="TextView"
android:textColor="#FFFFFF"
android:textSize="18sp"
android:textStyle="bold" />
</LinearLayout>
round_button.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
<shape android:shape="oval">
<solid android:color="#000000"/>
</shape>
</item>
<item android:state_pressed="true">
<shape android:shape="oval">
<solid android:color="#2C2C2C"/>
</shape>
</item>
</selector>
and in java code I am using it like this
LayoutInflater li = getLayoutInflater();
View v = li.inflate(R.layout.toast, null);
TextView numberView = v.findViewById(R.id.digit_display);
TextView descriptionView = v.findViewById(R.id.description);
numberView.setText(number);
descriptionView.setText(description);
Toast t = new Toast(getApplicationContext());
t.setDuration(Toast.LENGTH_LONG);
t.setView(v);
t.show();
And I can see my toast. But digit_display TextView is clipped from the top but I would like to see it out of toast (just top of that view). How can I achieve it? If that does not work.
EDITED
I try to understand why this example does not work, when if I am using similar structure in other project form simple form it is working.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="25dp"
android:background="#drawable/form_desing"
android:clipChildren="false"
android:clipToPadding="false"
android:gravity="center"
android:orientation="vertical"
android:padding="25dp">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="-50dp"
android:layout_marginBottom="50dp"
android:foreground="#drawable/clover_"
android:contentDescription="#string/fourbit_clover_icon" />
<include layout="#layout/email_input" />
<include layout="#layout/password_input" />
<include layout="#layout/buttons" />
</LinearLayout>
any idea?
Think of outer-most Layout as your Toast's root view and arrange items inside it. You're NOT limited to only use one LinearLayout or RelativeLayout . Don't try to go out from root view: It will get clipped.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical"
android:gravity="top|center">
<LinearLayout
android:layout_height="50dp"
android:layout_width="wrap_content"
android:orientation="horizontal"/>
<RelativeLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="200dp"
android:orientation="vertical"
android:gravity="center"
android:padding="15dp"
android:background="#0A93E1"
android:minHeight="100dp"
android:layout_marginTop="30dp">
</LinearLayout>
<TextView
android:layout_height="60dp"
android:layout_width="60dp"
android:text="Text"
android:id="#+id/digit_display"
android:background="#drawable/round_button"
android:gravity="center"
android:layout_centerHorizontal="true"
android:textColor="#FFFFFF"/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Text"
android:id="#+id/description"
android:layout_below="#id/digit_display"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp"
android:textColor="#FFFFFF"/>
</RelativeLayout>
</LinearLayout>
I want that when the user clicks the button, the background of it will change a bit to get the effect that it has been clicked.
The fragment of my activity XML file:
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/btnParse"
android:text="#string/get_games"
android:textColor="#FFF5F2"
android:textSize="20sp"
android:layout_marginBottom="93dp"
android:layout_alignParentBottom="true"
android:background="#drawable/buttonshape"
android:textStyle="italic"
android:textAlignment="center"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true" />
Button shape XML:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"
android:layout_width="match_parent"
android:layout_height="match_parent">
<corners
android:radius="100dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<gradient
android:angle="45"
android:centerX="0"
android:centerColor="#A80C16"
android:startColor="#E8E8E8"
android:endColor="#FF0F0F"
android:type="linear"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<padding
android:left="42dp"
android:top="0dp"
android:right="50dp"
android:bottom="0dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<size
android:width="270dp"
android:height="60dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<stroke
android:width="3dp"
android:color="#878787"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
</shape>
How can I achieve this effect? I tried to implement what I found on similar stackoverflow questions pages but it didn't work. I'm pretty new in Android development so I may don't know some basics...
Hy you can refere to this link
http://www.viralandroid.com/2015/09/how-to-change-android-button-on-click-press-color.html
and this one
how to change background image of button when clicked/focused?
Hope this will help you..Thanks
When I click one of the buttons (forgot your code? or tick box), they display solid red colour and lead to a different activity. When I return to the previous activity, the button state has changed to default and is displaying orange colour. How do I retain the button's original state after being pressed?
Screenshots :
button_state.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="3dip" />
<stroke android:width="1dip" android:color="#000000" />
<gradient android:angle="-90" android:startColor="#FF0D00" android:endColor="#FF0D00" />
</shape>
</item>
<item android:state_focused="true">
<shape android:shape="rectangle">
<corners android:radius="3dip" />
<stroke android:width="1dip" android:color="#000000" />
<solid android:color="#FF0D00"/>
</shape>
</item>
<item >
<shape android:shape="rectangle" >
<corners android:radius="3dip" />
<stroke android:width="1dip" android:color="#000000" />
<gradient android:angle="-90" android:startColor="#D8D8D8" android:endColor="#848484" />
</shape>
</item>
</selector>
Layout file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context=".SignInScreen"
android:background="#619ec9"
>
<TextView
android:layout_width="374dp"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Hello! Welcome to MLAD!"
android:id="#+id/textView"
android:textAlignment="center"
android:textSize="30dp"
android:layout_above="#+id/textView2"
android:layout_alignParentStart="true"
android:layout_x="-28dp"
android:layout_y="117dp"
android:typeface="serif"
android:textStyle="bold"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Please enter your 4 digit code:"
android:id="#+id/textView2"
android:layout_above="#+id/codeEntry"
android:layout_centerHorizontal="true"
android:textSize="27dp"
android:layout_x="5dp"
android:layout_y="182dp"
android:textStyle="bold"
android:typeface="serif" />
<ImageButton
android:layout_width="75dp"
android:layout_height="75dp"
android:id="#+id/tick"
android:src="#drawable/black_tick"
android:background="#drawable/button_state"
android:layout_x="120dp"
android:layout_y="296dp"
android:layout_below="#+id/codeEntry"
android:layout_centerHorizontal="true"
android:layout_marginTop="29dp" />
<ImageButton
android:layout_width="82dp"
android:layout_height="82dp"
android:id="#+id/help"
android:src="#drawable/question"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:background="#drawable/button_state"
android:layout_x="232dp"
android:layout_y="4dp" />
<EditText
android:maxLength="4"
android:layout_width="283dp"
android:layout_height="wrap_content"
android:inputType="number"
android:ems="15"
android:id="#+id/codeEntry"
android:layout_centerVertical="true"
android:layout_alignLeft="#+id/textView2"
android:layout_alignStart="#+id/textView2"
android:layout_alignRight="#+id/textView2"
android:layout_alignEnd="#+id/textView2"
android:layout_x="19dp"
android:layout_y="246dp"
android:background="#drawable/shape"
android:textSize="27sp"
android:hint="Enter Your Code Here"
android:gravity="center_horizontal"
/>
<Button
android:layout_width="119dp"
android:layout_height="wrap_content"
android:text="Create a new account"
android:id="#+id/create_acc"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_toLeftOf="#+id/tick"
android:layout_toStartOf="#+id/tick"
android:textSize="18sp"
android:background="#drawable/button_state"
android:layout_x="3dp"
android:layout_y="410dp"
android:layout_alignTop="#+id/recover_code" />
<Button
android:onClick="goSecActivity"
android:layout_width="105dp"
android:layout_height="91dp"
android:text="Forgot your code?"
android:id="#+id/recover_code"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_toEndOf="#+id/tick"
android:textSize="20sp"
android:background="#drawable/button_state"
android:layout_toRightOf="#+id/tick"
android:layout_x="222dp"
android:layout_y="376dp"
android:focusable="true"
android:focusableInTouchMode="true"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:src="#mipmap/mlad_logo"
android:layout_alignParentStart="true"
android:layout_toStartOf="#+id/help"
android:scaleType="fitXY"
android:layout_alignParentTop="true"
android:layout_alignBottom="#+id/textView2"
android:alpha="0.1" />
</RelativeLayout>
If you mean for the lifetime of the application even after its destroyed then used a sharedPreference to remember the state. Set it before you leave to the other activity.
SharedPreferences prefs = PreferenceManager.getDefaultSharedPreferences();
prefs.edit().putBoolean("red", true).apply();
that gets called right before you go to the new activity.
then have a if statement in your onResume code to do this:
SharedPreferences prefs = PreferenceManager.getDefaultSharedPreferences();
boolean shouldBeRed=prefs.getBoolean("red",false)
if(shouldBeRed){
//change button to red here
}
but if you just need it while the user is in the app(so per session), just set a flag in onStop() and then in onResume() change the buttons color accordingly.
UPDATE: NOW i understand your issue the buttons state was not changing back to grey which is the normal state. Try removing this onelines from the button in your xml layout:
android:focusableInTouchMode="true"
So make your button layout now look like this:
<Button
android:onClick="goSecActivity"
android:layout_width="105dp"
android:layout_height="91dp"
android:text="Forgot your code?"
android:id="#+id/recover_code"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_toEndOf="#+id/tick"
android:textSize="20sp"
android:background="#drawable/button_state"
android:layout_toRightOf="#+id/tick"
android:layout_x="222dp"
android:layout_y="376dp"
android:focusable="true"
/>
whats occurring is every time you return to the page since your focusable in touch mode its making the button focusable which is calling the focus state of your button_state.xml
from the docs:
focusableInTouchMode: Boolean that controls whether a view can take focus while in touch mode. If this is true for a view, that view can gain focus when clicked on, and can keep focus if another view is clicked on that doesn't have this attribute set to true.
I have the following layer-list
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FF000000"/>
<stroke android:width="0dp" android:color="#FF000000" />
<corners android:topLeftRadius="10dp" android:topRightRadius="10dp"/>
<padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" />
</shape>
</item>
</layer-list>
This resource is a black background with some rounded border (Top left and top Right). I want put it in LinearLayout as background property and inside LinearLayour I want put a white Textview and a ImageView. I have the following code
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/ll"
android:orientation="horizontal"
android:background="#drawable/profile_background_head_item">
<TextView
android:id="#+id/txt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/origin"
android:gravity="center"
android:textSize="20sp"
android:textColor="#FFFFFFFF"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_config"/>
</LinearLayout>
The problem is that ImageView doesn't show, I think that it is due that my layer-list code, but I don't know how to solve it.
Any ideas?
Thanks
Your TextView's width is match_parent, and in a horizontal LinearLayout, that would push the ImageView offscreen.
I suggest using weights, try:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/ll"
android:orientation="horizontal"
android:background="#drawable/profile_background_head_item">
<TextView
android:id="#+id/txt"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/origin"
android:gravity="center"
android:textSize="20sp"
android:textColor="#FFFFFFFF"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_config"/>
</LinearLayout>
This should have the TextView take up the rest of the horizontal space the ImageView leaves.
I have a little problem with my edittext fields, when you type in it, the whole field turns black when I type # . - or any other symble.
<TableRow
android:id="#+id/tableEmail"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:background="#drawable/cell_shape">
<TextView
android:id="#+id/textViewEmail"
android:layout_width="45dp"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_weight="1"
android:ems="10"
android:gravity="top"
android:text="#string/email"
android:textColor="#000000" />
<EditText
android:id="#+id/inputEmail"
android:layout_width="370dp"
android:layout_height="35dp"
android:background="#drawable/edit"
android:layout_marginBottom="2dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="10dp"
android:layout_marginTop="2dp"
android:layout_weight="1"
android:ems="10"
android:inputType="text" >
</EditText>
</TableRow>
I did try to chage the input type to textEmail, but it is the same.
My cell_shape looks like this
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape= "rectangle" >
<solid android:color="#fff"/>
<stroke android:width="1dp" android:color="#000"/>
</shape>
any ides?
edit
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<stroke
android:width="1dp"
android:color="#ffffff" />
</shape>