Round corners of buttons and colour change for android button - android-xml

I want to following features in buttons in android button:
Buttons should change colours when clicked
Some specific buttons have features like the background color of button should remain changed until we press another button.

For rounded corners you can use below code :
#drawable/rounderd_corner.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#android:color/transparent" />
<stroke
android:width="1dp"
android:color="#color/YOUR_COLOR" />
<corners
android:bottomLeftRadius="8dp"
android:bottomRightRadius="8dp"
android:topLeftRadius="8dp"
android:topRightRadius="8dp" />
And For selector Buttons use below #drawable/select_button_color.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/YOUR_COLOR" />
<corners
android:bottomLeftRadius="8dp"
android:bottomRightRadius="8dp"
android:topLeftRadius="8dp"
android:topRightRadius="8dp" />
And Change background resource when button is clicked

For circular and for changing color when selected/not-selected button you can use following code snippet
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
<shape android:shape="oval">
<solid android:color="#color/colorPrimary"/>
</shape>
</item>
<item android:state_pressed="true">
<shape android:shape="oval">
<solid android:color="#color/colorPrimaryDark"/>
</shape>
</item>
</selector>
And you problem will be solved, hope it helps.

Related

Reduce the size of Image in Splash Screen in Flutter

I have a image which is quite big for Splash Screen. I want to reduce the size of this image but unable to do so. I have read already answers to this question which are here on SO but none of those answers helped. Please help.
launch_background.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="?android:colorBackground" />
<!-- You can insert your own image assets here -->
<item>
<bitmap
android:gravity="center"
android:src="#drawable/bluetoothicon"
android:width="100dp"
android:height="100dp" />
</item>
</layer-list>
Splash Screen
Splash Screen
Bluetooth Image
bluetooth-image
Try this code.
<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="?android:colorBackground" />
<item
android:width="200dp"
android:height="200dp"
android:gravity="center">
<bitmap android:src="#drawable/bluetoothicon" />
</item>
</layer-list>
Output

how to let splash page full screen in flutter

how to let the splash page full screen in flutter?
i got how to set splash page in flutter.dev
<resources>
<style name="LaunchTheme" parent="#android:style/Theme.NoTitleBar">
<!-- Show a splash screen on the activity. Automatically removed when
Flutter draws its first frame -->
<item name="android:windowBackground">#drawable/launch_background</item>
</style>
Inside your Android module go to the app/src/main/res/values
Open up the file name styles.xml
Inside this file you will have a below code that is your custom style:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="LaunchTheme" parent="#android:style/Theme.Black.NoTitleBar">
<!-- Show a splash screen on the activity. Automatically removed when
Flutter draws its first frame -->
<item name="android:windowBackground">#drawable/launch_background</item>
</style>
</resources>
You need add the below line in it:
<item name="android:windowFullscreen">true</item>
Like Below:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="LaunchTheme" parent="#android:style/Theme.Black.NoTitleBar">
<!-- Show a splash screen on the activity. Automatically removed when
Flutter draws its first frame -->
<item name="android:windowBackground">#drawable/launch_background</item>
<item name="android:windowFullscreen">true</item>
</style>
</resources>
Once you add the above line app stays in fullscreen mode for the entire life-cycle. To disable it you need to define a normal theme to be applied to FlutterActivity after the launch screen is gone and in that theme add the above line with value "false".
Like Below:
<style name="LaunchTheme" parent="#android:style/Theme.Light.NoTitleBar">
<!-- Show a splash screen on the activity. Automatically removed when
Flutter draws its first frame -->
<item name="android:windowBackground">#drawable/launch_background</item>
<item name="android:windowFullscreen">true</item>
</style>
<style name="NormalTheme" parent="#android:style/Theme.Light.NoTitleBar">
<item name="android:windowBackground">#drawable/launch_background</item>
<item name="android:windowFullscreen">false</item>
</style>
Put your image inside the drawable folder and call it in src
<item><bitmap android:gravity="center" android:src="#drawable/splash" /> </item>

How to remove gray screen before splash screen - Ionic 4

Has someone managed to remove the gray screen when launching an ionic app from an android device?
Is there a way to remove this annoying gray screen?
I found a solution it's working fine for me using 5 steps.
1.) Create a file name colors.xml inside project\platforms\android\app\src\main\res\values
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="gray">#fff</color>
<color name="black">#fff</color>
</resources>
2.) Then create a new file styles.xml inside project\platforms\android\app\src\main\res\values
<resources>
<style name="SplashTheme" parent="#android:style/Theme.DeviceDefault.NoActionBar">
<item name="android:windowBackground">#drawable/background_splash</item>
</style>
</resources>
3.) Then open AndroidManifest.xml from project\platforms\android\app\src\main, then search android:theme="#android:style/Theme.DeviceDefault.NoActionBar" and replace with android:theme="#style/SplashTheme"
4.) Create a folder name drawable inside project\platforms\android\app\src\main\res
5.) Inside drawable folder create a new file having name background_splash.xml and the code is below.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/black"/>
</layer-list>
That's all.
Hope its help.
for me i added this code in style.xml file: /Users/User/Development/project/platforms/android/app/src/main/res/values/styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowIsFloating">false</item>
<item name="android:backgroundDimEnabled">false</item>
</style>
</resources>
and edited my AndroidManifest.xml File : android:theme="#style/SplashTheme" added that to the activity
Add
xmlns:android="http://schemas.android.com/apk/res/android"
and
xmlns:cdv="http://cordova.apache.org/ns/1.0"
( if not present) inside you widget tag in you config.xml present in the root of your project.
Then replace android:theme value of your main activity with
#android:style/Theme.Light.NoTitleBar.Fullscreen
Thats it. You need not add any custom styles (If you don't want).

Reset background color in a ListView

I have a ListView where I'm changing the background color of the selected item using the onListItemClick event:
#Override
public void onListItemClick(final ListView l, final View v, final int position, final long id)
{
v.setBackgroundColor(Color.GRAY);
}
Is it possible to reset all of the rows of the ListView back to the original color before changing the single view's background color? The problem is that each selected item retains their background color and I only want the latest item the user clicked on changed.
UPDATE:
JRaymond's response seems to be the best approach, however, and it's usual when working with Android layouts, I've put the code in and nothing happens. No way to debug it, no error messages, nothing. I absolutely hate dealing with Android layouts, it's the most convoluted, terribly implemented design for dealing with UI.
Anyhow, this is what I have so far:
ListView:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
>
<ListView android:id="#android:id/list"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:choiceMode="singleChoice"
android:listSelector="#drawable/listing_selector"
/>
<TextView android:id="#android:id/empty"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:padding="5dp"
/>
</LinearLayout>
listing_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_focused="true" android:drawable="#android:color/transparent" />
<item android:state_pressed="true" android:drawable="#android:color/transparent" />
<item android:state_selected="true" android:state_activated="true" android:drawable="#android:color/black" />
<item android:state_activated="true" android:drawable="#android:color/transparent" />
<item android:state_selected="true" android:drawable="#android:color/transparent" />
<item android:drawable="#android:color/transparent" />
</selector>
Like I said, nothing happens when I click on items, even the built-in highlighting is gone. I even tried changing all of the color to black, but nothing happens.
UPDATE2:
I'm getting closer. After reading this article, you have to place your selector xml in a folder called color under res, then you set the selector as the background in the layout for each item in the ListView, not on the ListView itself:
<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:background="#color/listing_selector"
>
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</RelativeLayout>
I'm seeing the background color change flash when I touch each item in the ListView however, they are not staying and reverting back to the original background color. This is the selector I'm using:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="false" android:state_pressed="false" android:drawable="#android:color/transparent" />
<item android:state_pressed="true" android:drawable="#color/blue" />
<item android:state_selected="true" android:state_pressed="false" android:drawable="#color/blue" />
</selector>
color.xml:
<?xml version="1.0" encoding="UTF-8"?>
<resources>
<color name="blue">#ff33b5e5</color>
</resources>
What an absolute pain in the ass this is. Whoever came up with this terrible system for dealing with the UI should be fired.
Solution:
Not 100% sure, but this may only work in Android 3.0+ devices. state_activated is what sets the background color.
What you're looking for is a combination of a stateListDrawable (also known as a selector) and choiceMode.
Include in your drawables folder an xml like this one (I'm using other drawables as my backgrounds, but color works just as well):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_focused="true"
android:drawable="#drawable/list_item_pressed" />
<item android:state_pressed="true"
android:drawable="#drawable/list_item_pressed" />
<item android:state_selected="true"
android:state_activated="true"
android:drawable="#drawable/list_item_selected" />
<item android:state_activated="true"
android:drawable="#drawable/list_item_selected" />
<item android:state_selected="true"
android:drawable="#android:color/black" />
<item android:drawable="#android:color/transparent" />
</selector>
and then set your listview's choiceMode to singleChoice
<ListView
...
android:choiceMode="singleChoice"
This lets the OS handle your backgrounds for you.
just a simple solution is in onitemclick just rememeber the clicked position of the item and call notifydatachanged() and in getView() of your custom adapter just before retrun statement a if loop comparing like below:::
if(postion == itemclickedposition)
converterView.setBackgroundColor(Color.GRAY);

Aligning fonts in tabwidget

Myself designing an app which uses GPS and Maps. I have created the UI as tabs. But i couldn't able to keep the font below the image.
Code in my Mainactivity
TabSpec gpsspec = tabHost.newTabSpec("GPS");
gpsspec.setIndicator("GPS", getResources().getDrawable(R.drawable.gps));
Intent gpsIntent = new Intent(this, GpsActivity.class);
gpsspec.setContent(gpsIntent);
tabHost.addTab(gpsspec);
XML file in my drawable folder for tabs
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- When selected, use grey -->
<item android:drawable="#drawable/gps_icon"
android:state_selected="true" />
<!-- When not selected, use white-->
<item android:drawable="#drawable/gps_icon" />
</selector>
Main.xml
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
</TabHost>
Kindly help in aligning the font.
You need to provide
Small size of icons for small density devices in drawable-ldpi folder
Medium size of icons for medium density devices in drawable-mdpi folder
Large size icons for large density devices in drawable-hdpi folder
Here is documentation guide for sizes of the drawable and layouts.
if it doesn't solve your problem, you can consider provding your own customized tab indicator, which I've used in my post here.